Posted 5th December 2013 | By ExtraMile

Hey all. I'm back for my third installation of Design Hour. This week’s theme is going to revolve around the ideal of a taking a design journey.

Although this sounds quite metaphorical, some of my design examples will literally take you on a journey through the use of clever navigation and scrolling effects. Other examples however, will involve you taking a little time to think and absorb what is in front of your eyes and sometimes make you go "Ahhh!"

Let's begin on the web.

FontWalk - This aptly named website is a showcase for new fonts. You, as the user, "walk" through this website by constantly scrolling vertically. Along the way you come across some great snippets of animation to accompany the fonts being demonstrated and used in situ. There is great implementation of bright colours and boldness in the design and to top it off it's responsive!

Museum of Mario - One which will interest designers and gamers alike, this website charts the history of the gaming brand of Super Mario Bros. Using HTML5 technologies, this site involves a journey via vertical scrolling and incorporates some great interactive elements. Each section is dedicated to a specific Mario era and includes some form of animation or interaction helping the user to explore and engage in the world of Super Mario Bros.

The Walking Dead Zombified - This site has been created to promote the TV drama "The Walking Dead". Going back to its comic book roots, this site makes fantastic use of parallax scrolling to draw you into its dark and depraved world of zombies whilst describing some of the production and special effects involved in creating the series. Unlike many sites with such lengthy scrolling, this sites navigation is horizontal, even though the user is scrolling downwards. Similarly to the Museum of Mario there are also interactive elements to get the user further engaged.

Journey To Middle Earth - A bit of an experimental and promotional site by for the upcoming release of the film "The Hobbit: The Desolation of Smaug". The website allows you to explore certain areas of Middle Earth. On clicking on your chosen area, you are prompted to click and drag the screen to the left. In doing so, you start your interactive journey through this fantasy world. There is a clever effect whereby clips from the movie are animated by the user scrolling. The user can further become involved in the website by taking part in little games at the end of some of the "scenes". Fantastic effects and use of HTML5 and CSS3 technologies.

Dangers of Fracking - Although this is a site that revolves around the environmental issues of Fracking (you will know what this means by the time you have explored this site), it manages to engage the user with its illustrative design, bright colours and story-telling navigation. A simple and informative site, yet obviously well thought out and wonderfully illustrated. Who would have thought digging for natural gases could be so interesting!

Find Your Way To Oz - Another highly exploritative site with some similarities to that of Journey To Middle Earth. Built entirely on HTML5, JavaScript and CSS3 technologies, this site allows the user to investigate The Land of Oz in an impressive 3D environment. Using the mouse cursor to navigate around the area, there are plenty of things to do along the way. The site also implements some impressive mobile features including multi-touch and gyroscope and accelerometer effects.

Moving on to print based examples of a "design journey", I have explored the clever use of negative space. Negative space or white space is the area of a composition without any content. However, clever use of it can actually help to mould and define what the positive space is. It can sometimes take time for the mind to form the composition that is being portrayed, but when it happens, it can come as a surprise and be very impressive.

Below are some great examples of negative space being used in logo design

Wine Forrest LogoGuild of Food Writers LogoFedEx Logo Vino Piano LogoCircus of Magazines LogoRocket Golf Logo Gotham Booksnegative7Storm Foundry Logo

On a typographical slant for this blog, I will focus on the work of Wim Crouwel, a Dutch graphic designer born in the early part of the 1900's. He went against the grain of such design movements as the Bauhaus who believed typefaces should be functional and easy to read. Crouwel, however created iconic fonts and poster designs that pushed the boundaries of legibility and were often considered as over the top. However, he still followed a Modernist approach using grid systems and structure to create his fonts, which also meant that the message would always get across, but may have taken a little time to do so.

Below are some example of his iconic fonts and poster designs.

Wim Crouwell PosterWim Crouwel PosterWim Crouwel Poster

Diverting a little from design and more into art for my final section of this blog, I would like to showcase the work of fine artist Liu Bolin.

See if you can spot the oddities in these photos. I took me a while with a couple of them.



Known for his expert skills in camouflage paint, Bolin's work often invites the viewer to a game similar to that of "Where's Walley'!

That's it for this week. I hope some of these design examples have given you some food for thought and taken you on a little journey of design discovery.

Written by Laura Bennett, designer at ExtraMile Communications. 

At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people's creativity. Each post in this series is one staff member's take on the world of web, design and things online. We hope you enjoy it.


About ExtraMile

A digital marketing agency with international capabilities