The non-designer's guide to Web design

When developing Web applications or websites, it is not always possible to get help from a professional graphical designer. Maybe you don't have the resources (for a personal project for example) or the designer(s) in your company are already working full-time for more important projects/designs.

Good news! You don't have to be a skilled graphical designer to create good looking designs. With a little work and some trial-and-error, you can achieve a decent looking design. To become a great non-designer, you have to work with the tools that require the least creative skills. These are typography, spacing and colors. One last note before exploring these areas: take inspiration from designs you like. Of course, since you're not an expert designer, keep it simple.

Before you can start designing though, you need to learn CSS, you can't do a maintainable design without CSS.


Working with fonts is easy, especially on the Web since you are quite limited in the selection (until @font-face is supported by all major browsers). There are about 10 fonts in your toolkit when it comes to the Web. There are more (as you can see in the provided link), but only about 10 of them really are useful for non-designers: Arial/Helvetica, Courier New for pre-formatted elements, Georgia, Tahoma, Trebuchet MS and Verdana are probably those you will end up using the most.

Don't use too many different fonts in your design, all the headers should use the same font, normal text should have one of the more readable fonts (those with serifs), blockquotes can either be the font as the normal text or a more stylized one. Of course, pre-formatted elements should have its own font. Finally menu elements should probably use either the header font or the normal text font, but you can make it work with another font.

The size of the headers and the text is also quite important. The first thing to do is to stop using pixels as the unit, em or a percentage give the most flexibility across browsers. Play with the size of the various elements in your page until they feel right.


Spacing is important to make the readers comfortable. Spacing lets you control how the readers read your website. Play with the line-height of the various elements (normal text, blockquotes, menu items) and consider modifying the letter-spacing of your headers. If you have a sidebar, make sure it is not too close from the main content area. If you use borders a lot, don't forget about adding enough padding. Break down huge paragraphs in multiple smaller paragraphs, nothing makes readers turn away more than a huge wall of text.

Spacing is a lot of trial-and-error, just play around with the different spacing until every section of your website is clearly separated from each other.


Don't use too many and use colors that work well with each other, don't make an angry fruit salad. My suggestion would be to choose one or two color that will be your primary color(s) and find at most 2 or 3 more to complement the palette. Fortunately, there are tools that can help you find colors that work well with each other. Be careful about which color you put together, they shouldn't have similar contrast (a simple test you can use is to go in an image editor put your colors together and turn the image in black and white, if you can hardly distinguish them, they don't go together). If possible use simple shapes along with colors for various symbols (delete, status icons, etc.), about 7% of males suffer from color blindness.


The most important thing to do is to try designs, the more you do, the better you become. Try things, see the results and take what you like from them and throw away the rest. You won't get your ultimate design on the first try. You could even experiment with images, begin by editing existing ones and slowly start adding details when you feel more comfortable.

Here's how Crossbrowser evolved before I settled on the current design (most of them did not make it to the public and all of them were inspired by existing wordpress themes):

First version Second version Third version Fourth version Fifth version

You can see that I tried quite a few variations. I played with some colors I liked, I tried using tabs, I even tried a very different version at one point just to see what would come up. Even the first screenshot was not my first tentative at designing a blog so it shows that it takes a lot of experiments to find a design you like.

Note: I am aware of the book with a title very similar to the title of this post. I haven't read it (I may someday) so I can't tell if it's a good book or not. The similarity is pure coincidence.

Michel Billard's profile picture

A web developer's musings on software, product management, and other vaguely related topics.