Common Mistakes in Web Design

Many rejected templates here on Themeforest suffer from the same few common mistakes: typography (font, line-height, letter-spacing, color), alignment (grid), and spacing (padding). In this tutorial, we are going to take a closer look at how to avoid these common errors.

Typography

You must understand how fonts affect the design of a page, and your readers. Unfortunately, you are restricted to using only a few web safe fonts that are available on most operating systems. Even with this small list, it can be challenging to manage them in the right way for the best user experience.

Don’t mix too many fonts

Choose one font for headings, and another for the body. DO NOT use more then two different fonts in the body text! Consider this to be a general rule. For example, you could use “IMPACT” for headings and then “ARIAL” for the body. Keep in mind that every font is designed with its own baseline, x-height, cap height etc. You can compare fonts with Typetester. It’s a really nice and useful tool developed by my fellow croatian Marko Dugonjic. Go check it out.

BAD

GOOD

Don’t mix sans with serif fonts

Ok, now this is not a rule; but for the beginners, I strongly suggest not to do so. It’s not as easy as it might look. A great example where these two type of fonts are used properly is A list apart.

Choosing the right font size

We usually determine our font size with CSS by either using percentages, ems, or pixels. I usually define my body’s font-size as 62.5%; and from there I use ems. 1 em is equal to 10 px when using it this way. When choosing the font size, pay attention to the overall balance in your design and readability. For more readability, you can go with 14px or 1.4em. Some parts of your design, such as the tagline or headings, will need to be set with a greater font-size – like 18px or even 24px.

BAD

GOOD

Adjusting the line-height

The line-height property sets the distance between lines. When designing the layout in Photoshop, I usually set my font-size to 12px and the line-height to 16px or 18px. Also all body text is set with “antialias: none” – so we get a real pixel preview of how it will look like in the browser.

Choosing the right font color

The main thing to watch here is that your text is readable enough on any background that’s set. Contrast is key.

BAD

GOOD

The problem can appear in choosing the wrong color palette. This is how it might look when doing so.

BAD

To solve the problem, utilize some online tools that may help you choose the right colors: Adobe Kuler, Colorlovers etc.

Alignment

Alignment is the adjustment of an object in relation with other objects, or a static orientation of some object or set of objects in relation to others. Alignment provides the structural framework of a design. The alignment can affect the mood of your page as well as how effective it is at getting its message across.

Use a grid system

Using a grid system will help you to align your elements better. I recommend using the 960 Grid System, as it offers both design and coding templates (.psd, .ai, .css, .html etc.).

Be sure to watch “A Detailed Look at the 960 Framework” screencast on nettuts+.

Be consistent

Be consistent with your alignment. Don’t align one element to the left and another to the right; this will only cause more confusion. If you align all of your text to the left, then align the headings, and other elements in the same manner. Once you’re more skilled, you can break these rules; but if you want to play it safe, then stay with one alignment.

BAD

GOOD

Spacing (Padding)

According to the W3C, the CSS padding properties define the spacing between the element’s border and its content. Spacing, padding, or even white space helps you to create a balanced layout.

Don’t squeeze elements

Give your elements space. Allow a minimum of 10px padding between content boxes or individual elements – as a rule of thumb.

BAD

GOOD

Don’t stretch elements

Also, try not to distance elements too far from each other – as you can end up having holes in your design. Your layout should look full and consistent.

BAD

GOOD

Be consistent with spacing

If you choose to give all your elements padding of 10px, then great. But do not give your sidebar 10px padding, and the main content 30px padding. Again, if you use the 960 grid system, it will automatically space your elements in a pleasing way. Let’s have a look at some examples.

Further reading

• The Principles of Beautiful Web Design
• Making and Breaking the Grid
• Grid Systems
• Thinking with Type
• The Golden Ratio in Web Design
• Using Adobe Kuler to Enhance your Photoshop Color Workflow