background top

DesignByNumbers

3 Core Principles of Good Design

Recently we were invited by Techalliance to facilitate a public workshop on (re)designing corporate websites. Our approach was to provide business owners with practical advice on managing the process. A common theme throughout the presentation was the idea that clients can prepare themselves with a set of criteria for evaluating vendors, and the designs they provide, to ensure that they are selecting the best solution for their website.

For many clients one of the toughest parts of the web design process is evaluating and choosing the visual design, and discussing their response with their vendor in a clear and concise manner.

Luckily, the essence of good visual design can be understood using only three core concepts:
unity, consistency and hierarchy.

Core Design Principles

Unity

Unity refers to how well integrated all the elements of a design appear. When you are evaluating design concepts look for designs in which all the pieces appear to have a logical place. Good design strives for a sense of harmony between all of the components.

For example, if the homepage has a single main area that spans across the page and a secondary area with three columns below it (e.g. http://www.rtraction.com) here are some questions to ask: Does the styling of the columns match the main area above or do they seem to clash? Are the columns the same length? Does the content seem crammed into the page or is there enough negative space around it to make it easy to read?

One important thing to keep in mind when requesting changes to a design is how well the change will integrate with the design. A common client request is to “mix and match” elements from multiple concepts into one design. A good designer can normally accommodate such requests, but sometimes the style of elements may need to be changed to ensure that the resulting design maintains a sense of unity. Realistically, sometimes combining two concepts will simply not work and you should be prepared to make a definite choice between the options.

Consistency

A hallmark of good design is how consistent the elements of a layout are. Has the designer used the same font for equivalent type elements such as headlines and body copy? Are the colours of logos and links used consistently across the website or do they change? Do all the buttons on the site have similar styling? Do buttons look like buttons? Do common links such as “Home” or “Contact Us” appear in a consistent place on the website?

Consistency is synonymous to quality in web design. When elements are styled consistently it enhances the website by providing unconscious visual cues that actually make a website easier to use.

Hierarchy

Every website fulfills a purpose. A good design considers the site’s purpose and creates a clear hierarchy of information which leads the reader through the information or process. A well thought out hierarchy ensures that key information is conveyed clearly and that the experience of interacting with the website is a positive one.

The hierarchy should clearly separate headlines and key messaging from the bulk of the page content in such a way that the website can be understood “at a glance”. A good metaphor is to consider the front page of a newspaper. A newspaper identifies itself with a masthead, then provides a visually striking and concise headline that contains enough information to let the reader know the content of the article and pique interest, followed by an introductory paragraph that contains a short summary of the article and lastly the full story containing all the details. The hierarchy of information on a webpage operates in exactly the same way by identifying a key message (informational or branding) and then follows up with the details.

The hierarchy of information guides a designer by identifying how much visual impact each element on the webpage requires and determines the appropriate placement of the content for maximum effectiveness. The concept of hierarchy also operates on the larger structure of the website and by providing a logical framework which organizes what information appears in which sections and on what pages.

The technique of leading a viewer through the content in a design is called “eye flow”. When evaluating a design pay attention to the order in which you read the content. Does your eye seem to flow easily from one element to another or does it seem to jump around in confusion? Do you know where to look or do you struggle to find information? Do elements appear where you expect them too, or do you have to hunt for them? Simply put, does reading the page seem effortless or does it seem like work?

In summary

Good design can often seem like “magic” to a non-designer. When a layout is well designed the design feels seamless and will often subconciously “fade into the background”. Good design enhances the experience and should never “get in the way” of interacting with the information. Issues of personal taste aside, most people have an innate feeling of when design is working when it doesn’t but they often have trouble articulating why, making the process of choosing between concept layouts difficult.

By taking the time to learn a handful of basic design concepts discussing and choosing between the designs presented by your vendor can be made easier, resulting in a better final product and a more enjoyable experience.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description

Leave a Reply