Web design that looks fresh after 10 years

What’s the secret of creating products that age well?

I’ve been cleaning up my old disks this weekend and found these screenshots of webpages from 8-10 years ago. I used to send these pictures to designers to explain art direction choices, so this collection is essentially an insight into graphics trends a few years after the millennia.

Shortlisted here, five webpages that look a bit more fresh than the rest. Let’s revisit them briefly: which designs could you get away with today (and why)?

www.elmwood.co.uk

www.theartofasbestos.com

www.marumushi.com

www.31three.com

www.foxie.ru

A fun exercise for the next art direction meeting: how would you change your products right now to make sure they will look ok-ish in 2026?

j j j

September 6th, 2012

The 2016 Rio Olympics logo is already boring

As the 2012 London Summer Olympics reaches its end this weekend, we will see a very different logo when someone talks about the Olympics: the one Rio unveiled on New Years Eve last year. And the more we see it, the more boring it will get – it’s simply too shiny to be interesting through the next four years to come.

Rio Summer Olympics 2012 (from the video on Youtube)

Don’t misunderstand me: I think the graphics team is brilliant and the logo is beautiful. It has nice thoughts behind, the execution was great, the emblem and the ‘Rio font’ is authentic and really pretty. The logo makes a clear identity and will live on the website, in 3D, on prints and on thousands of different materials. It’s just that they played a bit too safe.

Every year has a visual trend. My favorite way to show the change in the mainstream visuals to others, to make them look at the cars passing by: all vehicles made in the same timeframe have similar headlamps, shapes, colors, interiors – leaving us with snapshots of tech driven development for 2-3 years. The same goes to fashion (which I have absolutely no clue about), and to design as well: do you remember the early 2000s, when all web 2.0 logos had a gradient and a reflection?

To make a logo age better, it’s not enough to simply make it fit the nicest visual key you can come up with. You have to create a vision and a clear message, and stick to those – just like London did with the 2012 Olympics: going with these progressive looks was risky, and people hated it four years ago. By today though, the vivid colors and the hipster-look got understood.

Quick evolution: applicant city and Rio 2016

It’s worth to take a look at the list of all olympic logos from the last 90 years. All of them are great artworks, it’s fair to assume that they are the top notch designs of their age – how many of them look still interesting? Are those the ones that were accepted by the crowd immediately?

That’s the problem with the 2016 logo: according to Wikipedia, the emblem was based on four concepts: contagious energy, harmonious diversity, exuberant nature and Olympic spirit. Clear? Not really. If you want to stick out of the crowd, you have to invent something new. Even the best design team will be useless with an idea based on such bullshit.

At least in the long run.

j j j

September 2nd, 2012

Why does Android look dodgy?

As much Android deserves the love for the great freedom it gives to its users (try to install a file manager to your stock iPhone or copy music to a friend’s computer), the user interface is just not there. They surely have put a lot of effort into Jelly Beans, but the devil is in the details. Look at these widgets, for example.

different colors, sizes, outer glow – on stock elements

In every operating system, at least the stock widgets should look alike – but, to mention just a few flaws, the three main widgets (power control, music and weather add-ons) are different in size, colors and they use different spacers between the buttons. The widgets coming from 3rd party developers in Google Play are not much help either: even the ones that claim support for the stock Ice Cream Sandwich are missing the guidelines with a mile or two.

Maybe Google’s development teams don’t work together very well. Maybe the UI teams’ quality assurance is missing. Maybe they just don’t care, because manufacturers like Samsung, Motorola and HTC have their own design tweaks anyway.

Either way, in 2012, the pixel-perfect paradise is not here yet.

j j j

July 22nd, 2012

Evolution of the F1 Car

An animated timeline of all F1 seasons from 1950 to 2012, created by Rufus Blacklock. If you don’t like motorsports but have an eye for graphic design, you will still love this video.

Evolution of the F1 Car from Ruf Blacklock on Vimeo.

More infographics available on Rufus’s blog at biplaneblues.blogspot.de, as well as a list of sites that featured the video: among others it’s Engadget, Autoweek – and probably many, many more. Another reason to aim for the highest quality you can do.

j j j

July 1st, 2012

Coca-Cola cans and the new minimal

In general it’s worth watching how big brands redesign their products from time to time. Whether it’s carmakers applying facelifts to their vehicles, or Coca-Cola tailoring its image for a new audience, the design trends they follow can be determined with great accuracy.

London 2012 and Summer 2011 cans (images from DesignBoom and TheAWSC)

The idea for this blog post came from Coca-Cola’s limited-edition cans which they created for the USA team on the London Olympics 2012. Having Coke’s colors and image as a base, the graphics made full use of Transport For London’s strong corporate identity: its very minimalistic style is blended in the design as well as the original Johnston typeface.

Minimal is not completely new for Coca-Cola, last year they unveiled a summer collection that had a similar touch to it: simple silhouettes of every day objects with the company’s logo in them. That gives us a great opportunity to observe how “minimal” changed in a year.

Now, at least for London, the graphics became much softer, cleaner, the forms lack those sharp edges and tiny lines – but they are not monochrome anymore. The designers applied more shades of red, white and grey and even blue – and seem to used more tools: drop shadows, overlaying objects etc. With all these tweaks, the new can designs look cleaner and more minimal, while having significantly more detail. Quite a few magicians working there.

Called the Coca-Cola ‘Eight-Pack’, the cans designed by design studio Tucker Duckworth feature graphical silhouettes of some of Team USA’s Olympic champions, medalists and hopefuls in action within their sports.

More Coke cans from the last four decades at coke-cans.com.

j j j

June 20th, 2012

Three minutes around the world

Chemin Vert is an immersive video of a trip on the road at supersonic speed spanning across five continents and four seasons. The title “Chemin Vert” refers to its soundtrack from musician A Ghost Train.

Chemin Vert from Giacomo Miceli on Vimeo.

Giacomo Micheli’s project is another great one that utilizes Google Street View’s pictures and creates something stunning out of it. It’s a beautiful age: we’ve got all the tools, and it’s up to us, what we do with them.

(You might want to watch Address is Approximate by The Theory if you missed it so far.)

j j j

June 4th, 2012

Redesigning Verzetteltes (on Blogspot)

If your girlfriend has an amazing blog, has more and more visitors every week, and you happen to be an UI guy, the least you can do is to make the blog look as pretty as its content – especially if you already promised to do so. Since our experiences might be useful to others running blogs on Blogspot, here are is a few words about the process.

A custom domain really is a must for all serious bloggers, so that was the first step. Since Blogspot (aka. Blogger) is a Google service, this was a rather easy part with a “next-next-finish” experience. That was actually the only thing we had to pay for, with the total cost of about ten bucks.

Before having any graphics done, we agreed on trying to keep the tools Blogspot provides to its users: widgets, social buttons for posts, tagging and so on. This introduces loads of constraints, but in the end, leads to a more flexible blog. Based on the current layouts I created a semi-template, and we started to design: with Katrin’s eyes and my hands we have put together some fine graphics in the end.

Because the already given structure and most of the markup generated by an unknown engine, for the sitebuild, the best approach seemed to be to use a template that is already available on Blogger. We have found one that was quite similar our layout, so I started the work based on that. With the help of Opera’s Dragonfly, the final CSS was done. Luckily I managed to avoid doing serious modifications on the DOM; keeping most of the original markup helped a lot in the integration process.

In the design we used a font that is not present on all platforms; to be able to use American Typewriter for the post headers without Flash, I used Cufon and some font support javascript that was already available for download somewhere.

As a final touch, I removed the Blogspot header as well. Now, I’m not sure if this was a legal move, but Verzetteltes looks much better without the blue strip, and there are a bunch of blogs on Blogger that are already doing that. In the worst case, I’ll be able to write about how to move a blog from Blogspot to WordPress as well.

For the image resources we added, we needed some online storage as well. For this purpose we used Google’s Picasa service – the few images we had easily fitted the free quota. All the JS and CSS content is wrapped in the HTML template, which is not the prettiest solution but seems to be a Blogger best practice.

Katrin’s blog is available at www.verzetteltes.com

j j j