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:
- Users appreciate quality and credibility.
- Users don’t read, they scan.
- Web users are impatient and insist on instant gratification.
- Users don’t make optimal choices.
- Users follow their intuition.
- Users want to have control.
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:
- Make sure that the purpose of the site is well defined.
- Make sure that the audience is understood.
- 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!
- Gather the content you will need on the site in order to accomplish #3
- 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.
- 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:
- Can Proximity (how close together or far apart elements on the page are) be used to help the user to know which elements are related to each other and which are not in our wireframe? Make adjustments in the wireframe to strengthen or weaken relationships.
- Are there any parts of our design that feel crowded? Add whitespace to open things up. Be generous :)
- Alignment. Do we have strong lines connecting the elements on our page? Eyes love to follow lines. If you used something like wireframe.cc to build your wireframe make sure that the grid-lines are turned on. This will help you to establish a strong structure.
- Contrast. What needs to be emphasized? Review the purpose of the site, and review the wireframe again. Are there headlines that should be extra big? Are there places where adding color would help to establish our hierarchy? Sometimes this is hard to show on a wireframe...it's ok to make notes :)
- Repetition is a little hard to assess at this point. For now we will keep it in the back of our mind as something to add as we start to actually build the site.
- Color. With your purpose and audience in mind choose a color pallette. Tools such as coolors.co are very helpful with this. Keep in mind that some colors tend to be calm and others energetic. What type of vibe do you think will appeal to your audience?
- Fonts. Choose one or two fonts that you think will work well with your purpose, content, and audience. You can either pick something off of the web safe font list. Or you could use a font off of a service like Google Fonts or Font Squirrel.
Example #
For an example of how this might look with an actual website proceed on to the Ponder activity