How We Redesigned Elated.com: The Design Process

Simon walks through the ideas and thought processes that led to the new look for www.elated.com. Lots of revealing screenshots included!

How We Redesigned Elated.com: The Design Process

At the start of 2009, we realised that we really wanted to redesign the Elated site. The old site had been good for us, but it had run its course in terms of both the basic styling and some underlying structural issues to do with advertising. For instance, we no longer liked the fluid-width layout, and it seemed out of step with current trends.

Further, there was a whole header element that didn't serve any useful purpose. We also wanted to tidy up the layout and have a cleaner presentation of the content.

The homepage of the old site, whilst dynamic in some sense, had some pretty static elements above the fold which just seemed like we weren't making the most of the space we had. To this end we wanted to move to a more "bloggy" kind of format to make the most of the content we were writing.

Old elated.com site design
The old site design. What were we thinking with that useless top bar?

Our goals for the new site were:

  • A more modern design
  • Better presentation and more flexible layouts for advertising
  • Make the most of the space above the fold
  • Move to a more blog-style format to highlight articles

A new logo, the same values

We'd kept the old typeface (Conques Demi) since we started out in 1996, and for a long period of that time it still felt current. It's a very esoteric face and it kept well out of the mainstream for that whole period. By 2009 though, it definitely felt like it was time for a change. We'd used the same logotype for 13 years by that point. No-one does that, and keeping it was beginning to feel like sheer bloody-mindedness!

This left an interesting situation, where we were trying to re-imagine both the site and the Elated brand itself. We feel like Elated has certain "brand values" (for want of a better phrase), which include friendliness, approachability, helpfulness and being non-judgemental. Since we've been around so long, I also wanted to convey a feeling of solidity and dependability.

The new logo and branding needed to keep these values in mind while bringing us kicking and screaming into the 21st century.

Starting out

I started creating preliminary designs in January 2009. The early stages were very rough and ready and were definitely just "sketches" to find both mood and content decisions. In the first 3 months of 2009, I produced the basis of 7 new designs, which explored both a new layout and a new brand identity for Elated. You can see a few of these below:

V4 design rough
Brown and techno-type? Seriously?
V6 design rough
Moody but modern
V7 design rough
Nice, but with the grinning skull in full effect

These mostly played on the existing brand elements of the smiley emoticon which we've been using for years, and the somewhat newer strapline of "Love your site". The only one of these designs that I felt had any future, though, was the one with the pink detail and the new "smiley" icon. This one seemed to capture something of what Elated is about.

As you can see, we were also tinkering with the idea of promoting web templates from our sister site PageKits.com, but in the end that idea was dropped as being confusing.

One thing that I did have in mind from these very early days was the need to rationalise the navigation and give added weight to our core offerings of Articles, PageKits, ImageKits, ActionKits and the Forums. Everything else was to be demoted to the footer or separate nav structure elsewhere.

Coming unstuck

By the end of March then, I had some ideas together, only one of which seemed to be approaching a successful outcome. The trouble was that the pink "emoticreature" was a bit of a problem. Everyone I showed it to felt that it looked more like a grinning skull than a happy smiley face. I'm not an illustrator, and I can't draw for toffee, so the concept drew slowly but surely to a halt.

I'd also started to admit publicly that this was becoming problematic, which I was externalising by posting threads like this to the Elated forums. Phrases like this started appearing in the Elated Extra, our bi-monthly email newsletter:

"I think that it's the very expanse of possibility that's causing me problems, with no client, no budgetary constraints and a creative free hand I've seized up"

By this time I felt pretty lost, and looking back at the Photoshop files' creation dates, I can see a big gap between version 7 and the next version, which was in September 2009!

Getting there

By the middle of September, I had the design below:

V8 (light blue) design rough
September 2009: A new beginning

Almost non-existent though this design was, you can start to see some of the core principles coming through. The "tab" logo idea and the layout of the navigation is basically what we have now.

Crucially, I also had the font in place for what would become our new logo. It was Susa from one Hubert Jocham, and for the first time I felt like I had something that had real personality. Before this point, I'd been tinkering with much cleaner type in the form of various weights of Helvetica Neue, and they felt nice, but not very "us". Elated has never been about clean, impersonal swiss design; it's more personable than that, and this font seemed to suit us well.

I then made an attempt to combine the new typeface with the smiley character from before. Again, it almost worked, except for that character. Importantly though, we were beginning to realise what we actually needed on the page, and in the design below you can see the basic layout for what we now have.

V9 design rough
Many of the final elements in place: the polka dot patterning, the typeface, the translucent focused navigation, the plugs for the social networking sites and the all-important advertising slots. Still not convinced by the grinning smiley thing however!

Colour

One of the main features in the new design is the colour palette. I didn't really like the colours in the version you see above. A nice blue though it was, any shade of blue felt not quite right for Elated.

Digging through my pictures of inspiration that I collect in Evernote, I kept coming back to this image:

V9 design rough
This image from ISO50 was the inspiration for the new colour palette

I don't even know what this advert is for UPDATE 28 October 2010: I now know this image is a design by one Scott Hansen from ISO50, and I loved the feel of the colours which felt very fifties, early sixties. It screamed Jetsons, technological possibility and early Fender Stratocaster. A heady combination, and I began to experiment with using this one image as the basis for a new colour palette.

As a result, we ended up keeping some of the orange of the old site, but now it was teamed with a cool greeny-blue which set us apart from the crowd and harked back to the feel of that initial image.

The home straight

In February 2010, I started to tinker with the new palette and the existing designs. By this point I was no longer flying solo, and everything was based on feedback from Matt and others.

Matt said that he really wanted to do something more interesting with the typography, so I started using Museo Slab for headlines and accents, coupled with Lucida Grande for body text. In the images below you can see the progression from my first version, through to the final design we're now using.

Orange Tab design rough
This was pretty slavish in the use of the picture's colour palette, but felt heavy
Orange Tab Chilled design rough
Lighter, but not very dramatic
Orange Tab Chilled design rough
The new strapline makes its first appearance, along with the use of type ornaments to draw the eye and create visual interest
Orange Tab Chilled design rough
A healthy splash of colour provides some drama for what is effectively the final design. Phew.

Handover

The final layout for the homepage was created on 22 March 2010, a full 14 months after we first started. A ridiculous time-frame, and at times it felt like pulling teeth. As ever, due to other commitments, I wasn't able to work on this full time, which definitely contributed to the time-frame.

That said, the result is, I think, good. More importantly, it doesn't feel like every other site out there. The old-school palette and type ornaments give almost a timeless feel, but the modern typography and layout drag it into the modern age.

At this point, I handed the design over to Matt for the build process, adding some extra design elements in the form of sub pages and a drop-down navigation system that I knew to be incredibly hard to create!

In the next article, Matt takes you on a journey from PSD to HTML (via CSS and PHP!) as he shows how he approached the build and launch of the new site.

Follow Elated

Related articles

Responses to this article

4 responses (oldest first):

02-Jun-10 03:21
Thanks Simon for sharing this. This article could not have come at a better time for me! Looking forward to read Matt's own process.
03-Jun-10 04:29
I thought this was a really insightful article. Even though I was involved in the redesign, we only worked together on the last few versions that you see towards the end of the article, so Simon's earlier designs are completely new to me. It's really interesting to see how things like the logo font, the tab idea and the colour palette evolved over time.

Nice work Si.
20-Oct-10 19:39
I just discovered this site today, by accident. I think the design is sweet, very clean with a friendly vibe. Small things like font selection for the logo give it a nice humanistic quality. Nice work.

I've got a print design background but am new to web design/css. I'm sure Elated will come in handy as a resource, as I continue to learn.

Cheers,

J

ps. that poster was done by Scott Hansen over at iso50 http://blog.iso50.com/
27-Oct-10 04:17
Hi J,

Thanks for the kind words! Always much appreciated.

Just as good though, is the news that we now know where that image with the colour palette came from! When I first saw it it was just re-blogged on a Tumblr somewhere and I never knew where it came from. I must drop Scott a line!

Simon

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page