WDD Learning Modules

Design Principles - Applying the Principles of Design

Getting started

It can be a little intimidating after reading an article like Breaking Down the Principles of Design or 10 Principles of Good Web Design to then approach a new project and try and figure out how to apply all of the things mentioned. So where should we start?

Massimo Vignelli, a very well respected designer, decided to try and capture what he had learned about design towards the end of his life. He released it as a free book called The Vignelli Canon. This is what he says about starting a new project:

The very first thing that I do whenever I start a new assignment in any form of design, graphic, product, exhibition or interior is to search for the meaning of it. That may start with research on the history of the subject to better understand the nature of the project and to find the most appropriate direction for the development of a new design.
Depending on the subject the search can take many directions. It could be a search for more information about the Company, the Product, the Market Position of the subject, the Competition, its Destination, the final user, or indeed, about the real meaning of the subject and its semantic roots.
It is extremely important for a satisfactory result of any design to spend time on the search of the accurate and essential meanings...

This then should always be your starting point. Define your goals. What is the product we are designing trying to accomplish? Once you know this it becomes easier to make the rest of the decisions.

Ultimately there are two design related concerns we should have. The first was discussed in the article 10 Principles of Good Web Design. It stresses how the usability of your site is really, really important, and then gives tips on how to increase that usability.

The second concern is addressed in the other readings: Typography, Color, and Layout and Composition. These talk more about the use of visual design principles to create something that will appeal to our audience.

If you have not yet read those articles...do that now then come back.

Applying Principles

Both of the articles present a series of principles that if applied will improve the usability and appeal of a website. The challenge comes in learning how to take those principles and apply them for a specific project.

In the first article for example the author listed out a few characteristics of user:

Chances are you are often a user of websites. Do you agree with the list above? Do you recognize those things at times in yourself when visiting a new site?

How will understanding these characteristics change how we approach the planning and designing of a website? I'm a big fan of action lists. A list summarizing actions we should based on what we have learned so far might look like this:

  1. Make sure that the purpose of the site is well defined.
  2. Make sure that the audience is understood.
  3. With the knowledge from the first two points you can establish why a user will come to your site. We need to make sure that accomplishing that task or goal is as easy as possible!
  4. Gather the content you will need on the site in order to accomplish #3
  5. Organize the content in order of topic and importance. Write descriptive titles for each section. Remember that users scan...good headlines make this easy and also establish hierarchy. Hierarchy is how you let the users know the relative importance of everything on the page.
  6. Lay out your content sections in a wireframe. Make sure that the most importance items come first. Test the layout for scannability. Wireframes can be sketched on paper or done with a program. wireframe.cc is a free easy-to-use site you can use to get started. If you need more information on making a wireframe, visit Using Wireframes.

Visual Appeal

At this point we should be well on our way to having a usable site. The next step would be to apply some of the graphic design principles from the Typography, Color, and Layout and Composition articles to further improve our site.

At this point we should have a basic wireframe for our site. Our next list of steps is really a list of questions that we will apply to our design. They might look something like this:

Example

For an example of how this might look with an actual website proceed on to the Ponder activity