Graphic Design Principles

What to Do
Screenshot of

Appropriate Use of Design Principles is the homepage for writer/speaker Merlin Mann. It serves as an introduction to the author and a connection to his many other websites. The graphic and web design demonstrates the proper use of several design principles.

  • Restraint - uncluttered design, with minimal use of color and graphics
  • Simplicity - truly an example of ‘a picture is worth a thousand words’ - the single graphic image tells the user about the character of the author
  • Naturalness - The body of the content is actually an unpretentious way to list 20 links within the space of a few sentences
  • Contrast - black and grey text and graphic on white background provide high contrast.
  • Repetition - the site designer repeats the same design elements (such as the black bold text for links) throughout.
  • Alignment - Strong left justified alignment for most of the elements, except for the face drawing. Name and description aligned at the top of the page. Navigation bar clearly delineated by two thin lines.
  • Proximity - grouping of object demonstrated their function. Title at the top, navigation bar below it, and content details in a large group below, grouped with the sole graphic on the page
  • Color - the only color on the page is a tiny red heart replaces the word ‘love’. This small element draws attention without overwhelming the site.

What Not to Do

Violations of Design Principles

Screenshot of

Dotti's Weight Loss Zone -

Dotti's Weight Loss Zone is a website dedicated to providing information and encouragement to people seeking to lose weight. It is loaded with content. However, the design of the website could stand to go 'on a diet' itself. It is rife with violations of standard graphic design principles:

  • Restraint - effective designers strive for clarity and moderation. Each element must be carefully chosen to emphasize the message. This site clearly has no restraint. The very fact that the homepage takes up more than 3 screen is enough to confuse users and send them elsewhere.
  • Simplicity - the site is so overly complicated with ads and bad clip art animations that it is difficult to find the content
  • Use of color - If there were an award for using every color in the rainbow (and a few that aren’t!) this site would win first place. Even if one excludes the ads, there is still no systematic use of color.
  • Contrast - there could be a greater contrast between the text and background
  • Typography - an over abundance of fonts, sizes, type styles populates the site with seemingly no purpose
  • Standard Links - the links at the top of the page change color when to show that they have been visited, but the color is only slightly different from the unvisited links, so it is not immediately obvious. Throughout the page, links are accessed from standard highlighted text, but also via graphic images and boxes.
  • Proximity/Alignment - Site elements should be grouped together and lined up to show strong relationships between like elements. Almost everything on this page is grouped with the same spacing between all elements. The page is split vertically into 3 parts, with all elements centered in each column.
  • Repetition - At the top of the page, the two outside columns are used only for advertisements, but halfway down the page these columns contain links to the content on the rest of the site. It is not at all obvious to a first time user where to find anything.