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.
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.
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!
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.
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 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.
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.
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”.