A huge shift in website design and development has seen many ‘static’ websites being replaced with cool, interactive and innovative websites that not only look great but improve the user experience as well as being far more engaging. Long gone are the days when designers had to cram a deluge of impressive graphics into a 800 x 600px space, now designers and developers can enjoy exploring simplified, cleaner graphics and bring in touches that make the journey from homepage through the website a pleasurable experience. This also enables them to break from conventional ‘page’ layouts with hover effects and other interactive techniques, guiding the user through.
Below are 10 interactive websites that showcase this shift from standard static style to something far more playful and engaging.
http://www.illy.com/wps/wcm/connect/en/home
I love how dynamic this website is. It has movement and colour change without the user having to do anything initially. Rather than scroll between images in the conventional way, the image almost tears to produce the next. It also has some really nice hover effects, allowing more colour to be introduced.
This has a really fun and engaging banner area where the user is able to interact with a set of drums instead of simply relying on sharp imagery or playful animation. When the user is able to tear themselves away from this area, the site follows below with very eye-catching imagery techniques – giving the user the feeling they can reach out and grab the objects floating in each scene.
http://graphicnovel-hybrid4.peugeot.com/start.html
This is one of the most impressive examples of engaging website design that I have experienced. The design follows the styling of a graphic novel, with stunning imagery and an entertaining plot to draw the user in. What really aids this piece are the sound effects that accompany the narrative at certain anchor points, really giving it that extra dimension. The user has the option to hit play as opposed to scrolling so this can be enjoyed with minimal interaction.
http://fontwalk.de/03/
This site is visually, very engaging. Only requiring a simple scrolling motion from the user, this design takes you on a journey through fonts in a very dynamic and entrancing way. Each section displays a different visual technique to retain the user, ensuring they absorb everything this site has to offer. Some really nice graphics used and examples of layering effects that aren’t often explored are evident here.
Whilst this design appears fairly standard in appearance (we’re all used to this grid-style layout) – it breaks from the norm with its unconventional layout of elements. Rather than assume the user will look to the left, right or top for menu items, this website trusts the user to navigate the website using a series of unaligned boxes (although they sit together perfectly). It’s use of large panels with menu items and imagery make the site very easy to navigate, even with is unconventional styling. This is aided by the colourful hover states that appear in a very satisfying way and this colour then being carried through to the area once clicked on.
http://agencysurvivalkits.com/
The subject matter of this site is certainly entertaining but the simplistic styling of this makes for a very pleasurable user experience. The top banner area requires the user to scroll to the left or right to bring in a survival kit and then scroll down to reveal the contents of each kit. Although simple, the revelation of the contents prompts the user to begin the journey through each area with great photography and simple scrolling actions to find out more. Each section ends with all of the individual components of each survival kit, with very nice hover effects applied.
http://www.evoenergy.co.uk/uk-energy-guide/
With infographics becoming more commonplace – the use of them in website design in on the increase. They’re a fantastic way of getting facts & stats across in a more engaging manner, even more so when animation is applied thus making them interactive. This website displays a range of energy consumption stats that, with a simple hover, display neat transitions between further stats. This allows the user to directly engage with the information and also breaks down the information, so it doesn’t display all at once. The overall aesthetic is very appealing and the user experience is a pleasurable one.
http://futureofcarsharing.com/
This example has a very different style of scroll navigation. By creating a scene with a car depicting the users position, you’re literally taken on a journey through the website. With the simplistic, icon-style graphics that appear as you progress and the appealing animations throughout, you find yourself going on the entire journey without thinking too much about it.
If you would like to discuss web design for your website please do not hesitate to get in touch.
