Make A Web Design Look Good

Make A Web Design Look Good

Seven Key principles:


Very excited to share  Roxanne’s Reflections Book & Card  Shop ….. brand  new Website. Designed by Retail Makeover’s very own Web Designer, Steve Crowhurst.

The Seven Key Principles:

  1. Balance
  2. Grid
  3. Color
  4. Graphics
  5. Typography
  6. White space
  7. 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.

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. The Rule of Thirds and Golden Ratio account for why sidebars. 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).

3. Color

Picking nice colors is as important as picking the right colors (that is, the right colors for the job).  Every color sends out a message, and it is up to you to get the message right. At first glance, the color choices may look somewhat arbitrary, but when you look closely you notice a strictly defined color palette, which is necessary to ensure that all of the elements get along well. The website, and especially its background, also demonstrates a good combination of colors and graphics, which brings us to number four…

4. Graphics

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

 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.

A Word About Image Replacement

What about image replacement (the technique of replacing fonts with images)? We’ve talked about font stacks, but aren’t they inferior to image replacement? Well, that depends on what you think is more important: being able to display the exact font you want or having dynamic, accessible and SEO-friendly content? Certain image replacement techniques have gotten pretty advanced, but they still aren’t as flexible as plain text. Image replacement lends itself well to headers and excerpts, but it is hardly a solution for body text.

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.

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.


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. But truly mastering all of the facets of Web design takes time and, let’s be honest, talent.

 Congratulations Roxanne. Your website is a very  effective on line sales and marketing tool.



By | 2016-10-21T10:12:46+00:00 September 5th, 2012|365 Day Makeover, Marketing, Online Marketing, Online Store Sales|Comments Off on Make A Web Design Look Good