Authored by Primate

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

The age-old process of an infant

Nothing like a pencil sketch – made in Illustrator

I’ve read a few articles and blog posts on web design process lately, most recently Paul Boag’s approach to his upcoming redesign, and so I’ve decided to have a punt at writing about my own.

Coming from a print background I’m used to handing my precious work over to someone else at the production stage, so I’m less concerned with the technical implementation of my ideas than I am with generating them. And as far as the big Photoshop vs. Browser dilemma goes (that’s another blog post altogether), you can place me firmly in the Photoshop camp – at least for now.

I don’t think mine differs radically from most designers’ processes – in truth I hope it’s fairly close to a universal approach to design, if such a thing exists – but I hope it will offer some insights from a non-technical perspective.

So without further ado…

1. The brief

Though it may sound obvious, I really can’t stress enough how important a design brief is. The brief is the official outline of the purpose of whatever I’m designing, and as such it is absolutely vital to nail down before I even start thinking about visuals. I want to know about my client and it’s competitors, the audience and it’s preferences, the budget and deadline, but most importantly I need to figure out why the hell I’ve been hired to do the design in the first place, and what I’m trying to achieve.

I need to know the problem I’m trying to solve before I can come up with the solution

It doesn’t matter whether the brief is a piece of paper written by an account manager, an email sent from the client or simply a conversation with my colleagues ahead an internal project – I need to know the problem I’m trying to solve before I can come up with the solution.

2. Content, concept & ideas

Right, so I’ve got the brief – can I open photoshop now? Not quite. First I need to refine the message I’m trying to communicate, or the function I’m designing for, in an effort to come up with a concept around which to generate ideas. For example: A popular user testing app makes use of a silverback gorilla as their logo, a clever idea based on the concept of “wisdom” (or the acquisition thereof) as means of communicating the core message of helping designers gain knowledge of their users.

having an idea of the core message and a rough outline of the content goes a long way to making informed decisions about the imagery, typography and layout

Not every project calls for conceptual approaches (although you’d be surprised at how many do), but having an idea of the core message and a rough outline of the content goes a long way to making informed decisions about the imagery, typography and layout. Practically, that means I work with Gordon, our strategist and copywriter, and the client to get a shared sense of what we’re trying to communicate. In fact, not defining your content up front can have annoying, if not devastating consequences:

When Stefan Sagmeister, the ultimate genius of conceptually-driven (as opposed to style-driven) design, was designing a booklet for a CD album called “Scratch” he decided to make it out of sandpaper, so it would literally scratch the jewel case each time it was removed. A brilliant idea and execution that sadly had to be scrapped because the title of the album changed – Sagmeister swore he would never take on a project without a title again.

3. Paper and pencil

After I’ve got content and some ideas in mind it’s time to sketch it all up. Unless I’m working a massive project with hundreds of pages (I tend not to be – yet), my sketching tool of choice is the all-mighty pencil/sharpie combination, though I sometimes use Illustrator for medium-fidelity, grayscale wireframes. Quick sketches using a pencil is a very effective way of visualising concepts, and the nature of the tool prohibits me to get bogged down in detail. In a matter of seconds I can create crude layouts using text-scribbles and image-doodles.

I’m getting the thoughts out of my head first, without the pressure of realising them

Crucially, actual sketches, no matter how ugly, as opposed to square boxes labelled “feature area” or “social media widget” allow for real ideas about content to be communicated without searching istock for suitable imagery or even choosing a colour scheme or fonts. I’m getting the thoughts out of my head first, without the pressure of realising them.

4. Crafting the visuals

If you’re still with me, it’s time to open Photoshop (and sometimes Illustrator, to fetch wireframes or create advanced vector graphics) and start crafting the visuals. At this stage I’ve got rough ideas on paper, but the major decisions are still to be made, including (but not exclusive to) colour, typography, layout and imagery.

Colour & typography
Although it varies, I quite often start with looking at typography and colours, unless they’re specified in a set of brand guidelines. As most web design projects are redesigns, the client often have a logo, which is a good starting point for the colour scheme, and Kuler and Illustrator (using the pantone colour books) are good tools to play with.

When it comes to fonts, I tend to visit typekit for a thorough gander, unless I decide that Arial and/or Georgia are appropriate (they’re still good fonts y’know). When browsing I try to find a font that suits the tone of the project without saying too much. Slightly rounded corners, variations in the ascenders & descenders, x-height and hairline thickness are among the tiny details all add personality to the text.

“Make sure that the typeface does not communicate something you do not want to communicate”

The key in typography is subtlety, and I tend to avoid fonts with too much “personality”. In the words of designer Enric Jardi: “Make sure that the typeface does not communicate something you do not want to communicate”. Or, more crudely, in the words of Robert Downey Jr: “You never go full retard“.

Layout
If I’ve done my prep properly, my sketches are extensive enough to give me a solid starting point for the layout, and in the best case scenario I can literally drop in final content and make it fit my grid beautifully. It doesn’t always go like that though, and quite often what looks to work in a quick sharpie mock, doesn’t necessary work when translated to the screen.

When this happens I go through an iterative process using both sharpie and Photoshop. I quickly visualise my thoughts, then try the new layout in Photoshop. If it’s a matter of tweaking I stick to photoshop and play around with the various elements until I’m happy.

Imagery
Imagery (be it photos, illustrations, icons or background graphics) come in two varieties: bespoke and stock. Since I want to create unique designs, and because stock imagery is the opposite of unique, I always try to go for bespoke, even if it means a bit of extra work. If there’s no money for a photo shoot, maybe the same problem can be solved with a good old home made illustration? And by the way, who said every website needs imagery? Sometimes strong typography alone is enough.

Leaving a blank space to fill in later is admitting defeat

Whatever your solution, the important thing is to consider imagery as part of the layout, as part of the design, as part of the overall experience, and it should always compliment whatever copy it sits with. Leaving a blank space to fill in later is admitting defeat.

6. Build & tweaking

As I mentioned earlier, I design all my sites in Photoshop (or other desktop applications, as and when required) and I treat the build stage as a separate production process so I won’t go into that here. However, I should mention that I always have a second look at my designs once they’re translated to html/css as some details invariably need tweaking after the transition from Photoshop to browser. Much like artworking in print, refining the stylesheets before launch is a crucial part to my design process.

Note on research, client feedback and user testing

You may have noticed that the process I’ve outlined so far doesn’t include extensive research, client feedback and user testing. Good – that was a test. I’ve excluded these topics because in my view they are separate from the actual creative thinking. They are very important as they obviously inform the whole process, but the nature of their application varies from project to project and it tends to occur at preliminary, intermediary or concluding stages of the overall process.

For example,  initial research on the market, competitors and target audience might be conducted and presented to us by the client, or we have to slice off a bit of our own time to do it (even when the client doesn’t appreciate why). Sometimes a design requires heavy user testing, like a beta-phase of an application, other times hallway testing or services like Usaura or Verified will do.

In all our projects, the client will invariably be involved in reviewing design and copy, and the impact of the feedback is completely dependent on the client’s perception of the proposed solution.

Passing the baton

So there you have it folks – a very basic, non-technical approach for designing web sites. It’s not perfect, nor detailed, and things don’t always happen in the same order, but it should give you a a vague idea of what goes on inside this designers’ brain. In conclusion I’d like to follow Paul Boag’s example and pass the baton on to the rest of the community and hear your thoughts on design processes.

I’m sure we’ll find there are as many different approaches out there as there are designers.

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.

Tags

Comments

Leave a Reply