Posted 3rd November 2014 | By ExtraMile

Hello campers,

For this edition of my design I delve into the world of digital using movement and animation, from subtle effects that lift an otherwise static website, to animated GIFs that give body to an email campaign. I'll also be looking at business card design wins and typographical fails.

Here are my findings:

In the world of web

Twofold. Each and every element of this site has been carefully considered. There’s not too much in the way of colour, nothing but a simple gold accent. I really like the layering of the home page. It’s been carefully photoshopped and the simple perspective adds a lot of flavour. Even if you take away the animation, it’s still a fantastically designed page. Scrolling further down, watch how their combined Blog & Portfolio elements bounce in and hovering over them have the same use of animation as at the top.

Ziggo OMG? LOL! Such quirky animation on this site. Why not Start de test en win!? You’ll be greeted with a bubbly combination of video and animation, all using the latest in coding advances. I think it’s about text speak - I’ve gone through the entire game not knowing what it’s saying 90% of the time but still find myself hooked!

Rise and Shine. There’s a certain element of nostalgia to this site. Do you remember the popup books that were read to you when you were much younger? Rise and Shine is like that, in a website. It uses animation and sound to add to the experience. It’s cosy, and really cleverly done.

Beloesuhoe. This Ukranian Film Production company have a fantastic little website, not really having much to it, yet the direction and setup of it is immaculate. They’ve used studio photography combined with simple camera movements and website animation to speak volumes. There’s useful little pointers throughout the site of where to click and drag. That element of interactivity is beautiful - it kind of adds to the feel of what to expect when using this agency.

Black Negative. This has to be one of my favourite sites around. It uses so many different animation techniques - all of which I feel are almost lost in a standard web environment. You almost want it to be a display board in a gallery or something more on a tablet, swiping through the pages. It does involve a little more cursor based activity later on through the site though. Each page has been uniquely designed to have a different effect. It's stunning.

In email design

Now, email design is far less advanced than the rest of the web. That’s why we’re not going to witness the latest in animation in any of these examples. However, there are people out there who are adding animated GIFs to their emails, to attract attention and entice the user.

Foot Asylum. I remember seeing this email a while ago as I was instantly drawn to the simple animation. It’s different to the norm and gives the user a full view of what the shoe looks like.

Bonobos. Animated GIFs are useful for showing the purpose of an item, for instance on these tear-away chinos. A static image would just show their look and feel on a model. This shows how they’re put to use - something which would be beneficial for some users to know. Albeit users with a terrible fashion sense.

Engage. This has no animation in, but I had to throw it in as I love its use of colour - it does attract the eye and does make me want to read more.

It wouldn’t be a design hour without some logos…

hawklove-bugprison-breaksitthirsty-peacockthreesome

In other design

I’m going to go into some creative business card ideas - they’re often a way of obtaining a hard copy of someone’s contact details, with minimal effort. But what about if the business card were to leave a lasting impression? What if it were to add some character or life to a brand? Here’s some ideas of how the static business card has been brought to life:

grill-me
hairdresser-business-cards
yoga-business-cards

Credit to BoredPanda.com for the images.

My typeface of the month

Delicious. Almost exactly what it says on the tin. It's a tasty, condensed typeface with lots of roundedness and enough quirkiness that you can see it being used in some artisan food environments, ice cream vans, street food etc. I like this typeface because it is legible at any size, it's not just display/title type.

And finally...

I always like to end on a humourous note. I strive in my job as a designer to double, triple check everything I do. It's understandable that the odd typo gets let out there. But when they're actually published becomes a different matter! Take a look at some of the most funny typographical errors out there on The Guardian's website.

My favourite is the irony in this sign:

typo

Written by Matt Preston, Lead Designer & Projects Co-ordinator 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.

extramile

About ExtraMile

A digital marketing agency with international capabilities