Design Principles

While many of the principles discussed here are widely considered universal, the organization and way that these principles are expressed owe a lot to three sources: Robin Williams’, C.R.A.P. principles, Jason Beaird’s Principles of Beautiful Web Design, and Elliot Jay Stocks’ book Sexy Web Design.

The general intent of the principles presented are to give you, the designer, some ways to think about, look at, and organize your designs and the designs of others so that the overall experience of creating a web site is less haphazard and it is easier to reliably create good design.

With that said it should also be noted that before design is even started it is important to do research. Research both into who, what, where, when, why — what the current project is, why do the funders (your clients) want the site (goals), who is the target audience etc. — and also into existing design from which you can draw inspiration (or know what not to do).

Overall there are three basic principles that guide design: usability, aesthetics and communication.

Usability

This is all about the functional, effective efficient display of information. Do your users understand the content on the site, can the scan and find what they’re looking for quickly, can they interact well with the site? If the design is done well then the answers to all of these questions should be ‘yes.’

Aesthetics

This general principle is about the beauty of the site. Do people “like” how it looks? Does it attract their attention, draw them in and make them want to see more? Again all of the answers should be yes.

Communication

Often Usability and Aesthetics can be seen as being at odds. For example a beautiful font may not be very readable. Communication ties the two together. If communication is applied well then the design communicates both information and a feeling or atmosphere. The two should be balanced. As Jason Beaird writes, users should be “pleased by the design but drawn to the content.” Clients usually (hopefully) have both specific information they want to impart and a feeling about the site (their company, product, service etc.) that they want people to come away with.


While these principles kind of tie everything together, there are some lower lever principle, rules, axioms, whatever you want to call them,
that help you fulfill the goal of balanced communication.

C.R.A.P.

From Robin Williams comes the concept of C.R.A.P. which is short for Contrast, Repetition, Alignment, Proximity.

See this article by Mike Rundle for more in-depth analysis and examples of C.R.A.P. design.

Contrast

Contrast differentiates elements and sections of a page. It lets you know the hierarchy (what is more and less important) of the information on the page and also can be used to draw a person’s eye to a specific part of the page. Color, font, size, line thickness, spacing and more can be used to create contrast.

Repetition

Repetition adds consistency and unity to a design. By repeating visual elements and layout patterns the designer gives the user a kind of language for the site that can make it faster and easier to scan pages and navigate the site.

Two basic ways repetition is used:

  1. Repeated graphic elements
  2. Repeated layout patterns

Repeated graphic elements can be functional, like icons or making all links on the site the same color or they can be purely aesthetic like hand-drawn graphic embellishments placed throughout a site.

While all pages on the site don’t have to have the exact same layout it’s helpful if certain elements on the page stay in about the same place from page to page. The header, navigation and footer are good examples. Also if the page has repeated sections, like blog posts, they they are usually laid out with a repeated layout.
Related words: unity, consistency.

Alignment

This is basically the idea that all elements are placed on the page in relation to something else on the page. Good alignment makes each element feel like it is in the right place and gives the design a more polished, professinal feel. Alignment is most commonly done by aligning the sides of elements (top right, bottom, left), but alignment can be done other ways such as diagonally.

Grids are the most common way people assure
alignment in their layouts. Knowledge of and fluency in grid-based layout is essential for a graphic designer.

Proximity

The basic idea behind proximity is that related elements should be closer to each other than unrelated elements. For example if a page has two paragraphs with a title in between then the title should be closer to the paragraph it is related to, not evenly spaced between them.

Whitespace is a related term and refers to separating elements with empty space so it’s easy to see where one ends and another begins.


Here are some other principles

Balance

Related to both alignment and contrast, balance is about the overall weight of elements on the page. In this sense visual weight has to do with things like size and color. For example if there is a big red element on one side of the page then adding another element of similar weight to the other side of the page will help keep the page in balance. There are two basic types of balance

  1. Symmetrical Balance
  2. Asymmetrical Balance

See Jason Beaird’s article for more information on balance.

Unity

Unity refers to how well all of the different elements on the page interact with each other. It’s kind of taking all of the other principles together and doing a double check to make sure everything works as a whole. Some designers take images of their design and then blur them so individual details are lost as a way to help them focus on the whole rather than on each individual part.
Again, see Jason Beaird’s article for more information on unity.

Flow

When a person first looks at a design the eye is often drawn to one spot first and then proceeds to move around to different elements. This movement is the flow of the design. Good flow in a design means people will easily and pleasantly move through the design in a way the emphasizes the most important elements.

Sometimes small changes can effect the flow of a design. For a longer example read this article by Mark Boulton on the concept of “looking room” when using images in design.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>