When developers design

Although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.

First things first, I am not going to be able to teach you good design practice in a single post. That comes with time, training and to some degree, talent :)

However, although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

General comments

Before I plunge head first into specific tips I would like to share some more general comments based on my observations of when developers do design. Hopefully these will help you think of design as more than arranging pixels.

Empathy

In many ways developers work in a world of absolutes. A piece of code either works or it doesn’t. Your world tends to be very literal, very straightforward. Computers are in many ways easy to understand. People on the other hand are a very different matter. We are messing beings full of contradictions and inconsistencies. This is the world of the designer.

Designers are trying to engage with people and to do that they empathize. They try and put themselves in the shoes of the user, to really understand how they think, how they approach a problem.

One of the most common mistakes I see developers make is that they fail to do this. To a lesser or greater extent they perceive the user as being similar to themselves. They make assumptions about the users motivations and abilities. They often misunderstand what the user is trying to achieve.

If I could give only one piece of advice it would be to encourage you to empathize. Really think through what the user is like. Are they in a hurry? Do they have a specific aim? What is their outlook on life? Will they have kids clamoring for their attention while they surf your site?

Really try to get inside their heads. It will definitely help.

Avoid graphical applications

The temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.

Its hard enough to apply the principles of good design without adding learning a new application on top of it.

You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…

Don’t try and be great; be invisible

Don’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate.

Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it.

If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!

Specific advice

Okay, so enough with the airy fairy advice, lets get specific. How do you make your design good enough to be invisible, non-offensive? Well, let me suggest 5 areas that you should pay particular attention to. Obviously I could write reams on each but lets keep this very simply and easy to implement.

Typography

The key to good typography is constraint and consistency.

Avoid using too many typefaces, normally 1 or 2 is enough. Also avoid having too many variations in sizes and weighting. Only use size and weighting to emphasis the hierarchy of the content. The larger and bolder the type, the more important the content.

Also try to be consistent in your application of typography. If something is a certain size and weight on one page ensure it is done the same on another. Although CSS makes this relatively easy, watch out if you are working with ems as you may have inheritance problems.

Finally, don’t just think about the type itself but also line length and line height. Don’t allow lines of text to become too long (between 40 – 60 characters is good) because they are hard to read. Also add some whitespace between lines of text as it will make the page feel more spacious, which brings us nicely onto…

Whitespace

Whitespace is the not-so-secret weapon of good design. For simplicity sake, I think the rule of thumb is to add more whitespace than you are naturally inclined to do. Whitespace improves legibility, gives a sense of simplicity and communicates a feeling of openness and style.

In order to limit scrolling, we feel the need to cram as much content in as possible so squeezing out whitespace. Resist this temptation. Be generous in your padding, margins and line height. Don’t be afraid of “empty” parts of the screen.

The grid system

You often hear people complain that a website looks boxy but in actual fact boxes are good. A good website should have a strong underlying structure of columns and rows. It helps the user identify hierarchy and communicates a sense of order in the site. Although a good designer will break out from the grid he will always have a grid structure still there underneath.

Think about how many columns the site is going to have. Ensure these are applied consistently across the whole site, but don’t be afraid to occasionally span across multiple columns. Also ensure elements are placed consistently in this grid from page to page. Do not move elements around, especially navigational elements like the menu bar and search.

A grid may seem restrictive and not very “creative” but it essential to all design.

Colour

Working with colour is particularly tricky and so I would suggest where possible you avoid making too many colour choices. Your best bet is to turn to an automated colour creator like Kuler. You can either choose from one of the existing palettes or enter a base colour (usually a corporate colour) and it will produce a palette based on that.

Notice that Kuler only includes 5 colours in its palette. This is good practice, resist the temptation to use too many colours. Apart from this site (where I was just being silly), I tend to use a very limited colour palette. One nice little trick however is to use a strong contrasting colour to highlight important content. Because it is a contrasting colour it will make content stand out from the rest of the site.

Imagery

The design work I have seen done by developers tends to shy away from the use of imagery and in someways that is not a bad thing. It is easy to get imagery wrong but I would encourage you to be a little more adventurous. Imagery is a great way to draw the users eye and so can be used to highlight key content.

Selecting imagery can be tricky but here are a few suggestions that will point you in the right direction…

  • Avoid animation.
  • Choice images with a strong foreground element.
  • Compress your imagery but not too much!
  • Use faces, people are naturally drawn to them.
  • Avoid clipart illustrations

I am sure there is more I could suggest but those are the ones that immediately spring to mind.

Taking it further

So there you go. Hopefully that has helped a little. Obviously, there is so much more that could be said, but that should have at least started you off. If you do want to take the next step and improve your design skill then check out Jason Beaird’s book “The Principles of Beautiful Web Design”.

  • http://www.clearjanuary.com Mark Caudell

    When I started working for the agency I work for at the moment I thought that I was just going to continue my work as a web designer, just at a higher level in a better agency. That entailed, for me, that I would be designing and building the front end of applications and websites. I was surprised to find that my new role would have my computer not even having a copy of Dreamweaver on it. I was a designer and therefore I didn’t code. So, 7 months on and I’m still a designer. I design the interfaces between the user and the application and I don’t touch the front or the backend code.
    This style of working works really well here as the design team comes, for the most part, a web design background so we all have a good level of knowledge on what can and can’t be done when we’re knee deep in Photoshop. By the same merit the front end developers are the same but they concentrate on the accessibility and semantics of a page/project. Together we all work in harmony as we each have specialist areas but with a cross over rather than having to be a jack of all trades.
    I still really enjoy the making part of a web design project and to that end I still keep very active in the frontend coding in my freelance life (after hours and weekends). I wouldn’t say I was as good a frontend coder as some of the guys here but I’m very competent as I’ve been writing HTML since the table days!

  • http://www.armitage-online.co.uk Andrew Armitage

    I’m always much happier working with code because as you say Paul, generally speaking it either works or it doesn’t.
    Everyone has an opinion on design which makes it difficult when getting feedback, but I think you have to be careful not to think too much about what you do sometimes and ideas will come more naturally.
    I totally agree about the design awards, but its only natural to want to impress with your work. Working with a grid is a great start point, but I think you should always try and break out of it where you can, otherwise you’ll soon find all your work starts to look the same!

  • http://www.nonprofit-expressions.com Aaron Mills

    Paul, Love the podcast’s and the blog I have become an instant regular.
    I have to completely agree with your post. I am primarily a developer who has dabbled in design for the last ten years. It was not until I began working with a team and no longer worked with design at all that I realized people should stick to their strengths. Working with a designer has been fantastic. I can make all the pieces work and turn the designers work into a functional piece of the bigger picture.
    Now when I am forced to design I try to do my best to keep it very simple and functional. I try to keep Krug’s words in my head and keep the user from thinking. I think my design has actually improved a lot as a result.
    Are there any good design books you would recommend other than the one you listed? I flipped through it, and frankly was not excited.
    All suggestions are welcome.

  • http://www.west4street.com Richard Bateman

    Firstly, a good article Paul. Some good points in there. Especially about the whitespace.
    However looking at the comments I have to disagree with the following statement.
    “Working with a grid is a great start point, but I think you should always try and break out of it where you can, otherwise you’ll soon find all your work starts to look the same”
    Having a grid does not limit and should not limit your designs. They bring with them structure.
    I have seen many a site that was built with a grid used as a background image in the body during the design phase and they all look completely different.
    Off the bat I can think of two straight away that use grids and look completely different.
    Mark Boulton
    http://www.markboulton.co.uk
    Khoi Vinh
    http://www.subtraction.com
    However each to their own. Good article.

  • http://www.logon.ie/ Alastair

    I’m a developer who sometimes attempts design.
    I get in serious trouble when my real designer finds out.
    There’s a delicious irony in this post that I just have to point out…
    Finally, don’t just think about the type itself but also line length and line height. Don’t allow lines of text to become too long (between 40 – 60 characters is good) because they
    In FF on my widescreen laptop with default font size, this 180 character snippet appears on 1 line :)
    </irony>
    This is why I hate fluid width, and it’s the only design constraint I usually apply.
    Alastair.

  • http://www.ryanbehrman.com Ryan Behrman

    Great article. As a developer who wants to incorporate design in his offering, this is just the kind of thing I need. Now we just need you to write a book on it! :)

  • http://www.geniosity.co.za/musings/ James

    Excellent article.
    My favourite section:
    One of the most common mistakes I see developers make is that they fail to do this. To a lesser or greater extent they perceive the user as being similar to themselves. They make assumptions about the users motivations and abilities. They often misunderstand what the user is trying to achieve.
    I definitely suffer form this problem. I think the best piece of advice I’ve ever heard (not sure where, and you’ve probably mentioned it before as well) is to sit with your mother and watch her surf the net.
    Sometimes I’m amazed at what a non-developer (or plain old non-techie) person will or won’t do on a website.

Headscape

Boagworld