Even though the subject is only lately gaining formal recognition, web design is different from print graphic designs, its rules and principles are different and this is important to remember. This blog is all about designing for the web, and here are a few general principles that differentiate design for the web from other types of design.

Unlike the emphases in regular graphic design, web design is all about the pixels and maintaining sharp and clean images that are easy on the eye. This means:

1. Maintaining Textual Clarity:

As you lay your texts on the web page, consider the type of anti-aliasing technique you’re going to use. Each setting has a different reaction to different resolutions. I usually use the ‘Sharp’ setting that forces some of the pixels to align but occasionally distorts the font when displayed in smaller settings.

2. Lines:

Browse through the different free Flash templates at MassiveTemplates.com. You’ll notice that often there is a thin line dividing different sections. Often this is a thin gray line, not much wider than a single pixel. This trick mimics the sharpening filter effect. By emphasizing the division between two areas of a page makes both parts appear sharper and more separate, making them easier to read.

3. Colors:

The colors you use will also have a great influence on the clarity of the content on your page, particularly if used wisely. Using contrasting colors between the background and the objects in the foreground will emphasize the foreground. There are of course varying levels of contrast, but I suggest you play around with it. Good backgrounds are often the plainest, in shades of gray without too much noise.

4. Noticing the Details and Aligning Your Objects:

God is in the details they say. I’m not sure about the spiritual aspect of this statement, but in terms of web design, I’m pretty sure that the saying is right on the mark. After you finish your web design and you’ve placed all the objects on the page, start cleaning up the design. Make sure your objects are aligned to the level of a pixel. This fine tuning might seem redundant to you but it induces a cleanliness that is grasped intuitively, even if you can’t quite place your finger on the change. Taking these small details into account is worth it, if you want your site to be as perfect as possible (which you should).

Working With Light & Shade

Use gradients to create depth and shadows in your design. One of the main differences between designing for print and designing for the internet is in the amount of depth and shadow you can and need to incorporate in your design. What I mean is that if you were to design a brochure, it would be absolutely reasonable if you used only straight, flat colors. Your design could still appear beautiful and complete. You could use other tools such as the specific type of paper glaze that creates the effect of depth or complexity. You don’t have those added value materials when you’re working for the computer screen. This doesn’t mean that you should add depth and gradient to every single element on your web page. Once again, I would like to emphasize that minimalism is often best, and using an effect in moderation often leads to a much stronger effect.

There are other ways in which you can create depth, such as adding a little bit of shadow, bevel or highlights to your work… particularly to texts. This will lead to a softer, rounder, more interesting design without screaming gimmick at the world!

Read also:
Basic Web Design Tips
How to Make Your Website Popular

Come and visit our Partners program

What is precedence? Open a magazine page. Any page.
What’s the first thing you see? What’s the second ? Ask yourself, why you tend to look at things in a certain order. What are the elements leading your eyes across the page and how do you use web design techniques and skills to manipulate your visitor’s eyes and senses?

Precedence is probably the most important facet of information design. Once you master control of your visitor’s eyes roaming habits you can send clear messages and get your information across.  Here are a few tips on how to get the job done:

1. Size – lesson one was learned somewhere in those first years of primary school. You wrote an essay and gave it a title. Your title text was bigger than the rest of your essay. Did you think about it or did it simply come naturally? Bigger things get noticed faster, that’s just the way life is. Make sure the most important texts in your website, including your logo or slogan are treated as such and are written in a bigger font than sub-titles and sub-headers.
2. Color – colors are also an obvious element involved in precedence and web design. The brighter the color the better. Of course if you give every other element on your page a different bright color you may be missing the point. Use coloring wisely to lead your visitor’s eyes where you want them. Leave most of the text either in black & white or in a faded gray and then add a splash of color in those exact places you want to emphasize. Start with a minimalistic design at first to see this work in full power and then start playing with the quantities.
3. Background Color – everything in life is relative and that includes colors. As with regular color, it’s not so much what color you use, but the color in relation to the rest of the colors in the website. Choose a background color that will act in contrast with the elements you want to emphasize on your page. To simplify this idea, imagine that your background color is a dark gray, and while there are many different elements on the page in varying colors, three words appear somewhere on your page in white. Obviously, those words are going to jump out at you.  Keep that in mind.
4. Positioning – Studies show that most Westerners’ eyes (those who read languages from left to right) will automatically roam to the top left hand side of a page. Different studies disagree on the exact motion of the eye. Whether it starts from the top left and goes to the top right and then downwards, or perhaps the motion from top to bottom is different or rounder. However, all agree that placement is crucial and elements placed higher up on the page will receive higher precedence. Use this to your advantage.
5. Spacing – As the previous post clearly emphasized, spacing is a major part of precedence. Increase the spacing between sentences and you will draw the eye towards the sentence.  There was a time when tiny font was really popular – no longer thank god. Web designers all over have come to the realization that texts are meant to be read and not just stared at. So save your readers that extra run to get their reading glasses and make sure your using legible fonts.

Read also:
5 Tips for Page Division and Web Design
Designing a Website from Head to Toe with Free Flash Templates

Did you visit our Learning Center?