The big decisions about design and how to make them

Design is full of decisions from whether to design in the browser to which typeface is best. But how do you make those decisions and what factors need considering?

The process by which a designer creates the final design for a site seems to be shrouded in mystery. This is partly due to the fact many web designers don’t have a ‘process’ as such, instead relying on instinct. This is partly because many of them are insecure about how they work and don’t want anybody else knowing.
Things are further complicated by the fact that every designer works in a different way so it is hard to establish much in the way of ‘best practice’.
That said, the time has come for me to address the design of boagworld.com and so it felt only right that I outline my process and give you an insight into the underlying design principles I use.

Avoiding the ‘empty canvas’ nightmare.

I hate that moment when you launch Photoshop and you are faced with a blank canvas. Where to begin? Some designers can already picture the final look in their heads and it is simply a matter of putting it on paper. I on the other hand have nothing but a wooly idea of direction.

It’s so fine and yet so terrible to stand in front of a blank canvas. Paul Cezanne

I overcome this problem by beginning the process of design way before I ever open Photoshop. In fact we have been discussing my process since the beginning of season 2. By the time I launch Photoshop I already have the key components in place for a successful design:

• Business Objectives – It’s amazing how useful it is to have a clearly defined set of business objectives when undertaking design. They help define priorities, emphasis and tone of voice.
• Target Audience – When you can clearly picture your target audiences in your minds eye it becomes so much easier to know how to best communicate with them through design. For example if I said ‘Stephen Fry’ you know the design should be more like the Guardian newspaper than it would look like the Sun.
• Moodboards – Doing some initial moodboards help the process of thinking about aesthetics without getting too hung up on details. To be honest I often only vaguely following the ideas laid down in them but it is a good starting point and avoids the blank canvas.
• Wireframes – For me wireframes are where I do all the heavy thinking about structure, information hierarchy and even, sometimes, layout. However, because they are only wireframes you don’t need to worry about the design details that can distract from thinking about functionality.

I guess what these elements are doing is putting constraints on the design. Often people rebel against constraints but when the design possibilities are endless you are much more likely to seize up and not be able to think of anything than you are if the possibilities have some limits to them.
Before you open Photoshop there is one other important question to ask; should you be opening it at all.

Browser vs. Photoshop.

There is an increasing trend among web designers to ‘design’ their websites directly in the browser rather than using a graphic app like Photoshop or Fireworks.
There are some good arguments for this approach. These include:

• With more devices and screen sizes to build for than ever it is becoming crucial to build responsive websites. You cannot demonstrate this responsiveness in a static image.
• Sites are becoming increasingly interactive and again this cannot be shown in a static design.
• Finally, good websites are built using progressive enhancement. This means the site will look different in different browsers. If a client sees one representation of a design and it looks different in his browser this can create confusion.

If you had not used Google Maps before you could not hope to guess the level of interaction available by looking at this static image.

Although these are indeed good reasons, designing in the browser is not without its drawbacks.

The problem with browser based design.

In my experience websites designed in the browser tend to look like they have been. Now, this is obviously a sweeping generalisation but that is certainly the impression I get.
Of course, this is not to say that is a problem. It is just that they seem to have a specific look.

Although I like the design Headscape came up with for the Open University, I believe you can tell it was designed primarily in the browser.

I suspect this is due to the fact that the designer is thinking too much about the build process while designing. By focusing on build at the same time as design it is hardly unsurprising that this influences the way the design looks. When it is easier to build something one way than another we are much more likely to take the path of least resistance.
This is in stark contrast to the approach I have taken to web design since the late 90s. I have argued that we should not allow technology to constrain our thinking at the initial design stages but rather compromise later if and when it is absolutely necessary. To do otherwise can potentially compromise creativity and lead to bland, uninspiring design.
That said, I decided to design in the browser anyway :)

Why I went with browser based design.

So after warning of the dangers of designing in the browser, why did I decide to take this approach? Essentially I had three reasons:

• I had done a lot of the design thinking already – As I said in episode 4, the wireframes I developed were highly designed. They addressed typography, layout and whitespace. Because of this a Photoshop ‘comp’ seemed unnecessary.
• The approach I wanted suited browser based design – I had decided early on that I wanted the design to be simple, uncluttered and with the emphasis placed firmly on readability. This mean’t the site would have little design complexity making it ideally suited for browser based development.
• The importance I placed on having a responsive design – My target audience use a huge range of devices from smartphones to tablets and netbooks. It was therefore important that my site adapted to these different devices, which is not something I could explore in a graphics package. This kind of design development can only happen within the browser.

With a strong design approach in mind and tools like CSSEdit and Coda fired up, I was ready to start designing.

Principles of design.

For me design boils down to the following 7 areas…

• Grid
• White Space
• Flow
• Colour
• Typography
• Texture
• Imagery

Whenever I design I am constantly referring back to each of these areas. Let’s look at these principles in more detail by examining how I used them while working on Boagworld.

Grid

Good design has often been described as the art of lining stuff up. Although a somewhat tongue in cheek description it is basically right. If you want to make something look visually appealing, line it up.
Boagworld.com, like all my designs, has a strong underlying grid system. In fact such is my obsession with grids that even my wireframes had an underlying grid.

Such is my obsession with grids that even my wireframes had an underlying grid

For this project I went for the classic 960px grid system because it can be divided up in so many different ways. I chose to go with a 12 column grid with generous margins.
As I started designing in the browser one of the first things I did is overlay this grid so I could see the relative position of elements as I floated them on the design.
I used the grid to bring structure to the design and ensure ample whitespace.

Whitespace

One of the things I felt the existing boagworld.com design lacked was whitespace. This made the site feel busy and overwhelming at times. I was determined the new design would have space to breath. This would improve readability (one of my primary aims) and help to create a more sophisticated, ‘grown up’ design.

I wanted the new design to have space to breath.

However, whitespace is not just about ensuring lots of ‘gaps’ in your design. It is also about looking at those negative spaces and ensuring they are visually pleasing. Often as designers we spend too long looking at page elements and not enough looking at the space in between.
Awkward placement of elements relative to one another can leave uncomfortable negative space that jolts the eye, makes it hard to scan content and interrupts the flow of the page.

Flow

A grid provides structure, however by itself it is not enough. The user’s eye has to be drawn around the page until it alights on the various screen elements we need them to pay attention to. In other words their eyes need to flow from one item to the next.
Creating flow can be achieved in lots of different ways. On boagworld.com I used colour, faces, illustrations and typography to make sure users were looking at the right items in the right order.
I could have used eye tracking sessions to see how well my design was working from that perspective. However, this was a little out of my price range. Instead I turned to Feng Gui that emulated these eye tracking. Although not as accurate, I did find the results encouraging. I was obviously going in the right direction.

Eye tracking software gave me an indication of whether users were looking at the right elements.

The position and colour of my primary call to action (subscribe) ensured the user began their visual journey in the right place and moved through the page as I had hoped. Talking of colour, this took a bit of an unexpected direction.

Colour

Colour is a powerful tool in both the communication of personality and in grabbing users attention and directing it appropriately. There is also a huge amount of research underlying the selection of colour palettes, from colour theory to our emotional response towards colour.
And yet despite all of this research our response to colour is very subjective. With all of us perceiving colour in slightly different ways and our emotional response being highly influenced by our unique personal experiences (e.g. a dislike for a certain colour because of a childhood connotation), it is hard to select a colour palette that is universally liked.
My own experience of developing the boagworld.com colour palette is a classic example of this. I entirely abandoned the colour palette I proposed in the moodboards and after endless iterations returned to a variation of the colour palette first created by Jon Hicks (@hicksdesign) when he established the boagworld/headscape brand identity.

I used Kuler to help me develop a colour palette for boagworld.

For me this palette struck the right balance between being approachable and yet professional while also reflecting my own ‘rural’ roots and those of the company.
Nevertheless, just because I perceive the colours positively does not mean others will. I would be interested to hear your thoughts in the comments below.
Fortunately typography is a much less subjective area than colour.

Typography

With the arrival of web fonts and services like FontDeck, Typekit and Google Fonts, the choices available to us is vast.
Once again I decided that I wanted to stick closely to the branding established by Jon in which he used Bryant for typography. A search through the font providers above failed to turn up Bryant. However, both Fontdeck and Typekit had similar fonts. I wanted a rounded font like Bryant that projected the friendly feel I was keen to maintain.
After comparing the two services I settled on Fontdeck. Its embedding process didn’t rely on Javascript and its pricing model seemed much more sensible when compared to Typekit.

I chose to use Fontdeck because it didn't rely on Javascript and a better pricing model.

Of course, the choice of font was only the tip of the iceberg. I then had to consider weight, size, line height, letter spacing and much more. The emphasis for me was on openness and readability so the right typography was crucial.
However, although I wanted the site to be readable I didn’t want it to be sterile. That is where texture came in.

Texture

One area that did survive from my original moodboard was the use of texture. Texture can be a powerful tool in introducing some character and design direction to a site.
For example a smooth, polished appearance like you find on the Apple navigation bar creates a very different impression to the sketchy buttons found on moredays.com.

The radically different textures used on Apple and More Days creates very different feels.

I wanted to add texture that complimented the doodles that I had introduced into the design from the original moodboards. In the end I went with a paper watermark effect found on subtlepatterns.com. Combined with the dark dappled texture of the header it helped to establish a softer feel than a solid colour would have.

If like me you are too lazy to create your own textures check out subtlepatterns.com

That brings me on to the final area, imagery

Imagery

Imagery is obviously a powerful tool in establishing a design direction. I am not just talking about content imagery (those which are directly associated with communicating the message of the written content). I am also talking about the imagery used as part of the graphical interface.
This type of imagery can often be overused with imagery for imageries sake. However, there is no doubt that it can say a lot about the personality of your site.

The doodles on boagworld.com go a long way to establishing the personality of the site.

On boagworld.com I chose to go with ‘doodles’. I wanted something informal and full of character to counter balance the formality of the typography and layout. It wasn’t my original plan to go down this route. However, after finding myself doodling on the back of a napkin at a particularly boring pub quiz, it somehow seemed appropriate. Perhaps it says more about my short attention span than my creativity!

A whistle stop tour

I am aware this post has skimmed the surface of a lot of subjects. The browser/Photoshop debate is something that has been discussed extensively online and the fundamental principles of design have filled entire bookshelves (although if you want a single book I recommend starting with Jason Beaird’s book “The principles of beautiful design”).
That said, if you are not a designer, hopefully I have given you a bit of an insight into what goes into the design process. If you are a designer, I hope it has been useful to see how I approach the design process. Not because it is necessarily the right way, but rather because it may inspire you to review the way you choose to work.
What I would love is for you to return the favour. How do you work that is different from what I have suggested above? What do you think about the browser vs Photoshop debate? Let me know in the comments below.