Nav

The Design Process

Posted:

Time to read: 3 minutes

Traditionally, web design was (and in many archaic agencies still is) handled like print - you design all the pages, spending hours on them getting clients to sign off on them, then build them all over again, pixel-for-pixel and deliver the finished site to the client.
We do things pretty much the other way round to this.

This picture was taken from Dictionnaire encyclopédique Trousset, also known as the Trousset encyclopedia, Paris, 1886 - 1891.

The traditional model misses out on some amazing opportunities that the web has to offer, and ignores the increasing needs of a successful website. Primarily, this is down to the ability to design quickly and responsively to both a clients needs and a users experience of the site, without needing to commit final designs up front before they've had a chance to be tested in the real world.

For this reason, we start the design process with the rough look and feel - is it conveying the right emotional response to the first time visitor? When a user lands on a page of your site it's often not the homepage as they've come in via Twitter or Facebook to an event or news story. The site needs to immediately engage them on an emotional level straight away, and can't rely on an overly flashy homepage to do so - the site as a whole must communicate your brand. 

As we get feedback from you on that initial rough page draft, we'll move straight to the browser and continue designing in there, adding pages to the site map to show the variety of layouts. This makes redundant the duplication of Photoshop designs that then have to be rebuilt in the browser. It also allows us to get feedback from the client about the interactive level of a webpage. It's far better to get this feedback from you as early as possible, before we spend loads of time working on Photoshop designs that then have to be painstakingly amended and sent back and forth.

Pages built in HTML and CSS (especially so when using tools such as LESS) allow us to make global changes to the various pages of a site a lot quicker than the traditional 3 design amends in Photoshop then signoff approach. Because of the way CSS works on all pages of a site at once - in a few minutes, I can change a link colour or font, amend a pages column layout with just a few changed values, something that would take hours in Photoshop across 6 different page layouts.

And perhaps most importantly, the client can see the pages come to life in their actual, natural context on different screen sizes, different browers, different devices, not as a flat, lifeless Photoshop image. We're designing pages made for the web, so let's make use of tools and process that are made for the web and not rely on tools that are made for print layouts and photo manipulation.

As an interesting aside, as the project progresses and the clients see pages taking shape in the browser, we've also found we all get a better picture of how their brand shapes up online. This is the main reason we actually tackle the homepage last. By this point in the project the clients and us have an even stronger sense of what the site is about, who it's audience is and so how to sum that up in an effective homepage.

Ultimately this efficient and adaptive process means you get a site that exceeds your expectations, is a joy for users to explore and communicates your brand in an emotional and relevant manner.