Latest posts

The Erskine redesign: Design development

The previous part of this little series saw us fighting through some motivation/direction problems, and the realisation that even non-client projects need managing and scoping properly, right from the word go. We also found our ‘hell yeah’ design direction (as I call it); a visual approach that would give us a decent platform from which to design the actual website pages effectively.

Now we needed to start designing our actual pages. As with most projects we work on (both internally and for clients) we started with some really simple wireframes to define content hierarchy. As you can see these are really simple; we knew what the site needed to do, and we knew we wanted it to achieve those goals in the simplest way possible.

Early wireframes for the Erskine Design site redesign

After those wireframes had been through a repeating process of print, scribble, discuss, iterate, we began to think about the actual visuals of the pages.

You’ll notice in the following screenshots the absence of any navigation, branding or traditional footer areas ? we wanted to get our content designed properly before getting hung up on any site-wide detail.

We started with the Projects section, as we thought this the most important part to get right in order to achieve our goals.

Early rough design of the work section of the Erskine Design website

We spent quite a bit of time working on concepts like these; where the page was primarily focused on the case studies (which at the time were part of the same section) with a projects browse area below that attempted to appeal to everyone from everywhere by using Client, Industry and Type selector categories.

Another early mockup of the work section

We even built a full EE prototype of this last one before realising it was asking too much of potential clients. As I’ve already mentioned we wanted things as simple as possible, so we ended up separating out the Case Studies into a new section (and creating relationships between Projects and Case Studies) and drastically simplifying the Projects main page into a more traditional see-like-click interface.

I should add as a slight aside that from the start we didn’t want to use screenshots of our work for this page. I’ve never seen a decent example of a 200 pixel wide screenshot that was able to effectively sell a project, so we created little ‘adverts’ for each project that ultimately are a lot more interesting, and would increase click-throughs to the project-detail page.

The Projects layout we launched the site with

Knowing when to stop

This last screenshot brings me onto an important point. Because this was an internal project, there was effectively no time or cost limit, and as mentioned in my previous post, things can slip very easily. It’s therefore very important to know when to stop.

Take the above example of our Projects page for example. I wasn’t 100% happy with the layout and detail of the page, but I knew there was no way for me to spend weeks and weeks iterating it to a point where I was 100% happy. The hardest person for a designer to please is themselves, and often a designer must swallow personal irritations with their work in order to keep the project moving.

As I’ll talk about in a few articles time, there’s always opportunity to exercise your perfectionism after launch; such is the beauty of designing editable things like websites.

Until next time

That’s all for today folks, but as an almost-apology for delivering this installment so tardily, here’s a few bonus screenshots for your perusal. Hopefully they give a further idea of how the site developed visually over a period of time.

An early About page mockup of the Erskine Design website An early Case Studies page mockup of the Erskine Design website An early What We Do page mockup of the Erskine Design website An early Case Study page mockup of the Erskine Design website