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!
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.
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:
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:
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.
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:
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.
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):
Nice work Si.
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/
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.
