These elements are the 7 key principles that make a Web design look good:

•    Balance,
•    Grid,
•    Color,
•    Graphics,
•    Typography,
•    White space,
•    Connection.

1. Balance

Balance is all about ensuring that your design does not tip to one side or the other. It is like the balance of weight in achieving symmetry or asymmetry.

If you’re not careful about how you lay things out, the design will become unbalanced rather quickly. You can manipulate the visual weight of a design in many ways, such as with color, size and the addition or removal of elements.Achieving asymmetrical balance is an especially delicate matter that takes time to fine-tune and a somewhat trained eye to really pull off.

In case of  symmetrical balance in some site the header graphic is asymmetrically balanced, the rest of the design lower down has symmetrical columns. Asymmetrical balance might be harder to pull off, but it tends to make a design more playful.

You will find that every design you think looks good has a well-constructed balance underlying it. And every design featured here scores high on each of the seven principles we discuss.

2. Grid

The concept of grids is closely related to that of balance. Grids are a series of horizontal and vertical rulers that help you “compartmentalize” a design. Think of columns. Columns improve readability, making a page’s content easier to absorb.Spacing and the use of the Rule of Thirds (or similar Golden Ratio) make everything easier on the eye.

The Rule of Thirds and Golden Ratio account for why sidebars, for example, are usually about a third of the width of the page and why the main content area is roughly equal to the design’s width divided by 1.62 (equalling phi in mathematics). We won’t get into why this is, but it does seem to hold true in practice. It is also why the subject in professionally taken photographs is usually positioned not in the middle but at the intersection of an imaginary nine-square grid (three by three, with two horizontal and two vertical lines).
Example:

The grid lends itself particularly well to minimalist designs. 5 Thirty One by Derek Punsalan shows why:

While the design is not visually impressive in itself, the clear strict structuring of elements makes it easy on the eye. The left column is roughly twice the size of the right sidebar, which just makes sense and is something to think about when creating your own designs.

3. Color

Picking nice colors is as important as picking the right colors (that is, the right colors for the job). A Web design for a cozy little restaurant would do well with “earthy” tones: reds, browns, etc. Of course, there is no such thing as a surefire recipe. Every color sends out a message, and it is up to you to get the message right.

Find out for yourself what works together. Soak up as many website designs as possible, such as those featured on any of the many CSS showcase websites (like Best Web Gallery), to get a feel for how colors interact with each other. Pick two or three base colors at most for your design, and then use tints (which are lighter, mixed with white) and shades (which are darker, mixed with black) of these base colors to expand the palette where necessary.

4. Graphics

Great design doesn’t need fancy graphics. But poor graphics will definitely hurt a design. Graphics add to the visual message.

You may not be a great illustrator or photographer, but that doesn’t mean you can’t put great graphics on your website. Some basic Photoshop skill, possibly some stock images and great taste are all you need. Try to make the graphics go well together, and make sure they embody the style you are aiming for. We are not all gifted with the same natural ability, though. You can pick up some things by learning from others, but sometimes you just have to pick the style that suits you best (like a clean style if you are not the greatest of illustrators).

5. Typography

The art of type is a tricky subject to talk about because it encompasses so many elements. While it can be regarded as a branch of design, one can spend a lifetime mastering all of its aspects. This is not the place to provide a complete typographic reference, so we will limit our discussion to what will benefit you in the short term.

Web typography is handicapped compared to print typography. The biggest difference is our lack of complete control over the appearance of type on the Web, due to its dynamic character. Obviously, dynamic rendering has its strenghts, but Web designers have little control over the results, at least for now. Missing fonts on the user’s computer, differences in browser and platform rendering, and generally subpar support in CSS make Web typography a daunting if not frustrating task. But while we may have to wait for CSS 3 for Web typography to reach its full potential, we have the means now to make it look interesting and, more importantly, pretty.

6. White Space

White space, or negative space, has to do with what is not there. Like measure and leading, white space gives text some breathing room and spatial peace. You can make elements stand out by adding white space around them. Copy, for example, shouldn’t look cramped. To ensure readability, make sure paragraphs have sufficient padding.

White space is one of the easiest (because you aren’t really adding anything, are you?) and most effective ways to create a visually pleasing and readable design.

White space adds a lot of class to a design. Don’t be afraid to leave some holes open, even gaping ones. Inexperienced designers are tempted to put something in every little corner. Design is about communicating a message. Design elements, therefore, should support this message, not add noise to it.

7. Connection

“Connection” is a bit of a made-up term here, but it seems to be the best one for what we mean. Connection here refers to a Web design that has both unity and consistency. These two attributes demonstrate the profesionalism of a design (and thus its designer). They are very broad attributes. A design should be consistent in its use of colors, in its range of fonts, with its icons, etc. All of these aspects count; a design can look great and still suffer from inconsistencies.

When a design is inconsistent, its unity can be lost on the user. Unity is slightly different from consistency. Unity refers to how the different elements in a design interact and fit together. For example, do the colors and graphics match? Does everything contribute to one unified message? Consistency, on the other hand, is found between the pages of a design.
Unity is perhaps the more important of the two. Without unity, having a good design is hard. Inconsistency, however, may look a bit “sloppy” but may not make the design “bad.”
Of the seven principles addressed in this article, connection is the most important. Connection has to do with how all elements come together: balance, grid, colors, graphics, type and white space. It is sort of the glue that binds everything together. Without this glue, the design falls apart. You could have pretty type and a brilliant and meticulously chosen color palette, but if the graphics are awful or simply don’t match or if everything is crammed together without thought, the design will fail.
This is the hardest part of designing. It is not something that can be easily taught or necessarily be taught at all. A little natural ability and experience is required. But it is what it is, and it makes a design look good in the end.

Conclusion

Good Web design is not limited to the seven key principles discussed here. Aspects such as accessibility, readability and usability play a part, too.
This is the reason why Web design is so difficult. Getting your feet wet in design is easy, especially today, with so many content management systems, blogging tools and themes readily available. But truly mastering all of the facets of Web design takes time and, let’s be honest, talent. Having the ability to craft pretty designs is just one facet, but an important one.

Credit: noupe