Getting Inspired
This week, Kyle wants us to start working on our prototype. But before I do this, I want to look for some inspiration from other immersive and interactive websites. I had already looked through a few previously – before starting my wireframes. This time though, I want to look at them in more detail, and analyse some features included.
Kyle had already showed us a few in class, including the Big Apple Hotdogs website, as well as the Apple website – specifically the MacBook Pro and Studio Display. We were also shown a good few others, all of which were unique.
I wanted to go off on my own and look at some independently of the ones we were already shown.
Nomadic Tribe
The first one I looked at was the Nomadic Tribe story by makemepulse.
This website created such a beautiful experience, with amazing illustrations and colour. There are also so many realllllly nice little interactions throughout. If you drag your mouse from the grass, flowers grow. It follows the story very nicely, and makes the experience a lot more interactive. The canvas also moves around as you move your mouse around the screen. I thought this was such a cool affect as well.
I also liked that they gave little prompts of what to do to trigger the interactive elements, and I think this could be a useful thing to include.
A2A Luce
The next one I went on to look at was the Luce by A2A.
This website contained a lot of text (much like mine will), but it was well presented and broken up with lots of beautiful illustrations. It also included many scroll to reveal animations, as well as little pieces of illustrations that move as you scroll. I really liked the style of this website. It was simple, yet still immersive and enjoyable to explore. As much as I love the Apple website and its scroll animations, I also think beautiful websites like this can be just as immersive.
It also has a little dotted navigation bar that comes into the side after you scroll past the introductory part of the page. This not only acts as a progress bar, but the sections are also clickable on it so you can easily go back up a bit if you would rather not scroll up again. I thought this was a really neat feature.
You Waste Time at Work
The final website I want to mention, and go into more detail about, is You Waste Time at Work by Atlassian.
This site is actually an infographic, but I loved how immersive it was, so I thought it was still worth going in to
All of the information was chunked into smaller pieces, with lots of changes in layout. It also had many different full screen-width elements that split up the sections really nicely.
One thing I really liked about this website was, as you scroll, some brightly illustrations that make their way down the screen within the backgrounds of some sections. They then changed to different illustrations as you scroll down the page and it entered a new section. At the end, they turned into sand timers and there is a little stop watch at the very bottom with a timer showing you how much time you’ve “wasted” looking through the infographic. This was such a fun touch, and I thought it pulled the whole thing together really well.
Other Sites
Some other websites I enjoyed looking at include:
Thoughts:
After spending a while looking at these websites, and thinking about their immersive elements, I feel a lot more well equipped to get on with my own. I am aware that I’m no web developer, and some of the interactions I looked at are a bit out of my depth – but I can definitely still try out a few of them in my Figma prototype!