You think your designs looks shitty? You’re probably doing some of the most common web-design mistakes we will be reviewing and solving here…
1. Let your content brief
Does your website look like this?
Not so bad? Still, even this terrible “design” can be transformed into nice-looking site. First thing you need to understand what content must have enough space “to brief”.
What I mean is margin and padding. Users don’t read text. They scan it. And you can help them to do it by separating different content areas with white space. Also, don’t make text lines too long and increase line-height. I recommend using at least 1.4em or 130% of standard line-height. This is easily achievable with CSS:
2. Divide content to blocks
- Top navigation
- Content block
- Advertisments block on the right
- and last but not least Footer area
This principle helps you to attract viewer’s eyes where you want them to look and helps to scan website as I’ve already mentioned above.
3. Color theory
Various colors calls different feelings. And remember: What looks beautiful to you, doesn’t necessarily have to look the same to majority of your viewers.
Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself.
When designing your next project, try to use colors that fits your goals best. Do not use more than 3-4 colors in one design. Otherwise this might end as in our first example…
Some sources to read:
4. Keep it simple
Just give users some big shiny buttons to click on… Users do not want to search for links or forms/content on your page. It have to be clearly visible. And don’t ever make it too complex.
You need users to fill in some forms? Make them short then. If you have to get some additional information, split your forms into tabs. And don’t force them filling unnecessary input fields as well. Simplicity is the answer – less is always better.
In this example a massive form has been divided into 6 tabs. And the form does not look so terrifying anymore.
5. Do not ignore CSS3 and HTML5
More and more browsers are now compatible to these new thingies. Rounding it all up is much faster (on page load time) with CSS3 compared to images. Rounded borders, text and box-shadows, gradients, multiple background images and so on… This is a power of CSS3.
HTML5 through is a bit more confusing. It’s in fact (in my opinion) the revolution in web-development. You can view it’s benefits and live demonstrations on html5demos.com. Just go out of your comfort zone. This is the way to stay on-date and improve your knowledge as well as never getting bored with doing the same things all the time.
We are all bad web-designers. There is always plenty of space to improve. Just keep trying, making mistakes and fixing them up. Good luck on your next (better) web design.