Authored by Primate

A rather awesome, informative
and witty blog about all things web

Designing primate.co.uk

Justifying your designs is good, justifying text is not.

Last month, Paul Boag wrote an article for Smashing Magazine urging designers to pick a site they did and justify the design choices. Here’s my (belated) response.

How do you justify your designs? It’s a great question, and it’s even greater when it’s asked over at Smashing Magazine, which is usually swamped by articles about photoshop techniques and inspiring (or not so inspiring) showcase lists. Don’t get me wrong, there’s a place for those kinds of articles too, but they don’t teach you much about design. Paul’s challenge, on the other hand, forces us to analyse our designs in detail, hopefully learning a lot in the process.

Introduction

So where to start? I guess by introducing the site I’ll be looking at: primate.co.uk, our company website, which we did earlier this year (go ahead, open it in a separate tab – you’ll want to reference it when you read the rest). As a young company we don’t have a massive portfolio of huge brands to lean on, nor can we compete with experience and size of some of our competitors. Thus, the strategy behind the website was to communicate our ethos, our values, our relentless mission of contributing to the evolution of the internet, our passion for design and development, for hand-crafted copy and bespoke imagery. In other words, we had a lot to say, and the major design challenge was to fit it all in and still retain the simplicity of a small site.

the finished product pretty accurately reflects my design choices, undiluted by client interference

If you’re wondering why I’m showing you an internal project as opposed to client work, it’s because this way the finished product pretty accurately reflects my design choices, undiluted by client interference. The site is also shortlisted for the DADI awards later this year, which should be an indicator that we did something right. At least I hope so.

Grid & layout

I often start out with a set grid system – I used to use 960, lately it’s been 978 – and then tweak gutters and columns depending on the type of site I’m designing and what content I’ve got to play with. In the case of Primate, however, small tweaks weren’t enough. I wanted to embrace the principle of using the browser window as my frame, rather than sticking the content in an artificial container within it, and that meant moving away from a central layout with equal space either side of the content area (though I did try this in my early mockups).

Instead, I went for a permanent sidebar with navigation on the left, a hidden sidebar with contact details on the right, and left-aligned content separated from the navigation by a large gutter. This creates a lovely sea of white to the right of the content area, giving the content plenty of space to breathe.

Once the initial grid-structure was established, the layout came easy

Once this initial grid-structure was established, the layout (and further division of the main content area) came relatively easy. Gordon, who wrote the copy for the site, and I worked together on shaping different blocks of content that would slot into the grid, spanning up to four sub-columns, depending on the anatomy of each block. This ability to consider every bit of content like this gave way to a varied layout, even when it’s mostly text.

We also made the decision to go a small number of pages with lots of content rather than a large number of pages with little content, the idea being that it’s easier to tell a story if you don’t split it up too much. To break up the resulting long pages, I used a combination of section dividers and in-content navigation that automatically scrolls the page.

Color

At the time of designing the website I’d already done the Primate brand, so the main colour (red) was a given. The secondary colour (blue) came around after a short process of trial and error. I wanted a simple colour scheme, so I did a few variations using red/black/gray only before realising that adding a colour worked better, particularly when considering typography on a dark background. The red simply isn’t readable on black, and it’s surprising how much less you get out of a gray palette when the background isn’t white.

it’s surprising how much less you get out of a gray palette when the background isn’t white

So I ended up with a muted blue, which in my opinion complements the slightly dirty red well better than a “true” complementary shade of green (not to mention how it may affect color blind people). It’s funny actually, amongst the complementary colours, the only combination I find it really difficult to work with is red/green – anyone else get this?

Typography

Choice of fonts was also led by the brand, at least for the main font. When designing the logo I kept web-fonts in mind, so I knew I could use Trump Gothic on the site. Unfortunately though, through no fault of the foundry, css doesn’t allow for precise kerning and letter-spacing, which means the font is only legible above a certain size. Still, it works great for display purposes and it’s characters really don’t take up much horizontal space, even at a large point size. This allows for big, powerful headlines that align perfectly with the logo on the left.

The secondary font, Le Monde Courrier, came about after another rummage through Typekit’s library. It’s a modern serif with a human roundness, a great contrast to the somewhat cold and imposing look of Trump. Due to Window’s inability to render fonts properly though, we’ve had to substitute it for Georgia on Windows-run machines. Still, I always try to choose fonts that contrast and compliment each other  – to quote Enric Jardi: “Do not choose two typefaces that look too much alike”.

Imagery

I strongly believe in bespoke content, be it text, photos or illustration, so I never considered raiding stock library for illustrations. Nor did I consider taking bland, meaningless photos of our office and/or computer equipment to spice up the pages. I did consider hiring an illustrator, but budget got the better of me, so in the end I decided to have a punt at it myself. The important thing was for whatever imagery used to reflect the content, not just fill empty space.

a nostalgic nod to my early days of using copying machines and scissors to combine images

Now I’m not an experienced illustrator, so in order to get me going I set up some rules, a formula, to make them all consistent and help my creativity (really – restrictions are often a great way to get started). They should combine a black/white, grainy photograph or montage (a nostalgic nod to my early days of using copying machines and scissors to combine images), a circular background and minor vector embellishments to aid communicating the theme. Oh, and I tried to include a banana wherever I could to reference our brand name.

I was happy with the look of the main illustrations, so I decided to carry it through the rest of the site too, using them as a style guide for icons etc. This was mainly an aesthetic choice – I’ll admit I didn’t try many different alternatives to this style – but the resulting consistency and unique identity far exceeds anything I could wish to achieve with stock imagery.

Styling

I think styling is the one element of web design that is most vulnerable to falling victim to trends. Grungy backgrounds, zigzag dividers, shiny (or not shiny) buttons, letter-press typography, rounded corners – we’ve all at some point seen stuff that we really like the look of and want to include in our own site. The danger is, though, that we end up using styling as design, that we replace good content and ideas with visual tricks, and that all websites end up looking the same (and then the trend changes, of course).

When ribbons go horribly out of fashion (next year, probably) I’ll kick myself for using them and push for a redesign

That said, even though I try to avoid stylistic treatment that isn’t adding something to my designs, I can’t explain the style of my illustrations or the ribbon-treatment of page dividers any other way than as aesthetic choices. Although they convey a certain personality that suits our corporate image, it is hard to say whether they’ll stand the test of time. When ribbons go horribly out of fashion (next year, probably) I’ll kick myself for using them and push for a redesign.

Is it working?

All of this justification is well and good, but is the design actually working? The challenge was to communicate a whole lot about Primate’s enthusiasm about the web to our prospective clients, and we felt we were taking a risk with so much text and so little zing. We were worried that people wouldn’t read the text, and instead click frantically around looking for a smashing slideshow to gaze at. Luckily, that’s not been the case.

Nobody has said how attractive it is, nobody has commented on the cool (non-existent) flash animations, nobody has included it in their “inspiring, beautiful websites” showcase. But that’s not to say we’re not happy with the result. Every single bit of feedback has been about us as a company, about our ethos and approach, and how our site is different from most other agency sites. That means they’ve read the text. And that means the design works.

Or does it? Feedback please!

If you liked this article then why not subscribe to our RSS feed.

Author: Espen Brunborg

Espen can easily ruin conversations with questions about chimneys.

Comments

Showing 4 Comments

Leave a comment
  1. amcl October 6, 2011 at 8:39 pm

    I am fascinated by your use of fonts – I never appreciated how detailed web sites can become.
    One day I shall pop by your office for a lesson in font usage – starting with how to set them up for use on a web site!

    • Espen October 6, 2011 at 9:08 pm

      Thanks to the likes of Typekit rich typography is flourishing online – it’s a great time to be a web designer I think. Get in touch if you want to pop round the office one day.

  2. Kevin Esther October 26, 2011 at 9:45 pm

    This post and your design is inspiration to others. I like the mix of vector, photos and the white space to let the design breath. The white space on the right allows the space for the contact form. The design rocks in my book.

    If there is anymore offers to pop into the office I sure would appreciated the offer.

    • Espen Brunborg October 27, 2011 at 1:49 pm

      Hi Kevin,

      Appreciate the feedback, thanks! Stay tuned on our blog, we might have an open day at some point.. Cheers!

Leave a Reply