A blog by Ben Gilman

From the Southern Electric website…

Nice grass effect, nice button, but I’m not sure that error message and the associated tooltip really give you all the information you need to proceed from here.

I can never resist an awesome primate… logo designer extraordinaire Jon Hicks has followed up his studious Silverback with this cheeky-looking delivery monkey for email marketing application MailChimp.

Jon’s put a cool animated process graph on his blog and the MailChimp blog has a write-up of the whole process. Although, no amount of secrets of the process can help with the initial character sketch which is cool enough in itself!

When we originally launched the redesign for Fool.co.uk I had every intention of writing it up in a blog post - in fact I even wrote half of it. However, there’s nothing like jetting off on a three-week holiday immediately afterward to reduce your desire to write about work! Still, with the dust well and truly cleared and the snagging list addressed now seems like a good time to cover it!

After six months of branding workshops, numerous page concepts, two or three trips to Golden Square to poll public opinion and one stressful release day later the new redesigned Fool.co.uk launched on Thursday 29th May.

Head of Web at Fool.co.uk, Carl Knibbs, covered the background nearer launch day but in a design sense we went from this…

…to this…

Visual design challenges
Fool.co.uk’s latest redesign is intended to build a brand feel that better communicates the values of the company and the website. The new look and feel is engaging, thoughtful and different. We’re also a fair way away from the design styles of financial comparison sites. Fool.co.uk is a thoughtful and informed community and we hope the design reflects that.

Primarily we needed to rationalise our top navigation and site template - whilst the financial product-based tabs of the old site were useful, they didn’t properly reflect the structure of the site or our plans going forward. So out they went, in came a simple five tab arrangement with five specific section front pages. Doing away with the rather bland left nav we’re left with the full width of the template to dedicate to content and functionality.

On the stylistic front we decided to move away from our cartoony icons towards something that felt more contemporary. We also embraced a new typeface, one I’ve been admiring for a while, FontFont’s Olsen by Morten Olsen - we’re in good company, the font was designed for the Denmark Ministry of Education and if its good enough for them etc. Admittedly we’ve ended up using Georgia as an HTML substitute for Olsen but where possible, we’ll investigate ways of getting this key part of the brand onto our online products.

We also pushed on with positioning our tagging engine as a more high-profile navigation method. There’s further iterations of improvement to come on that - and everything else for that matter - that will make our tag hub pages a centre for finding more than just related articles.

A big part of the redesign was also to embrace the wider page widths our browser stats suggested we could get away with and concentrate on regaining control over visual heirarchy. Just 3% of our browser users are using a resolution narrower than 1024×768 so it’s great to be able to offer a better experience that newer technology allows.

Technical design challenges
One of the technical challenges with the redesign was to put the site’s CSS setup in a better position to support future development. A solid grid structure is in place that should ensure page layouts are more consistent and easier to turn out. Whilst we’ve lost the fluid resizing of the old em-based site template the more prevalent white space means up-sized text

This project brought up a lot of challenges associated with large websites like Fool.co.uk. Content going back over the past 10-years in various code formats and standards were all hit by the global template change. This is particularly a case in the code of our rather archaic (and anarchic) Discussion Boards code. Still, in general the new code has held up well and the consistency of design is a satisfying development.

Cool new design elements
Some of the details you may have noticed:

• Creative lead boxes - these allow our editorial staff to promote the content and tools that are most in demand. Putting the editorial content for which The Motley Fool is known front and centre on the homepage and ‘latest stories‘ page. These also throw in some strong photographic elements.
• Blue header and footer - we’ve got the colour heirarchy back with strong footer and header. Having said that on shorter pages there’s a bit too much dark blue going on. Maybe an action point for a future iteration.
• Big article churns - again, we’re able to give our best editorial content the profile it deserves.

Since the redesign…
Over the last three months the design and development teams have been hard at work bringing new features to the site. Writer’s blogs are under way using a custom blogging platform and there’s lots more to come in the near future.

Keep an eye on Fool.co.uk and indeed this blog for news.

It is a fact that band websites usually annoy me - there’s normally the hand of a record company in there somewhere and the personality of the band never quite comes across. I discovered the opposite whilst listening to one of my favourite bands The Notwist and perusing their official website:

Their website is a maze of bizarre and intriguing things utterly in-keeping with the style of their music and the image they portray. There’s also a chance to listen to one of their latest records which is always good.

Go have a play and indeed listen to The Devil, You + Me, their new album or just, or just buy it - you won’t be disappointed!

I love Brand New, at the time of writing it’s one of only two blogs to make my blogroll - along side that of my colleague Carl Knibbs and I see him five days of the week so there was no saying no.

Still, to get to the point of this post…this logo rebranding leapt out of the pages of said Brand New blog primarily for the sad loss of the unique elements that made the old version what it was…

The new typeface is rather unattractive and the new shadowed ball immediately gets me thinking of the first Flash application anyone evers make, the bouncing ball, drawn with one click with the circle tool - I almost want to click the edge and discover that the stroke isn’t connected to the fill, just for old times’ sake.

But then again, if you want your established status to stand out from the crowd of upstart Web 2.0 companies, apparently a red circle leaves you looking pretty unique.