05: Design Principles, Palettes, and Page Elements

Material for class: 09 October 2012

Introduction:

In the past few weeks we’ve talked about discreet graphic elements that might appear on a web page, including photos, banners, and buttons. In this lesson we’ll take a step back to think about the context in which those elements fit. What are the principles of aesthetics and design that influence our choice of colors, fonts, and textures? Further, how do we combine those elements in a way that enhances our message?

Objectives:

You will learn:

  • simple design principles to use as a guide in page design
  • basics of color theory and how to select a color palette
  • basics of typography and how to select fonts for style and readability

Reading:

For this week’s class please read Color Theory

Lecture:

Outline
In our pursuit of visually pleasing web pages, let’s consider four concepts:

  1. Color (great color primers 1, 2, 3 from Smashing Magazine)
  2. Typography
  3. Layout
    • proximity
    • alignment
    • repetition
    • contrast
  4. Texture and Opacity

As we are discussing these principles we will be looking at a number of examples. I’ve linked those sites here if you would like to follow along.

Preliminary Considerations
Underlying our discussion is the premise that design should be congruent with both our audience and our goals. Are you designing a corporate identity website or a retail site for children’s clothing? Think about how your color and font choices might be different for these two audiences. The identity website might be thought of as an online brochure. How would your layout be different for that type of site than for the retail clothing site?

Also remember that our use of graphics should be purposeful. If our purpose is retail sales, the customer will certainly want to see photos of the items they’re purchasing. If the purpose of our site is to advertise a hotel or vacation destination, visitors will expect to see photos of the location. For the corporate identity site mentioned above, numerous photos of the office environment and employees would likely be redundant and unnecessary.

Relevant Articles and Sites
Color Theory:

Color Pickers:

Typography:

Recommended Reading
Trends come and go, but principles of design should stand the test of time. One of my favorite books on the topic of design is Robin Williams’ Non-Designer’s Design Book. Now in its third edition, this little book simplifies design into four easy-to-understand elements:

  • Proximity: Provide “visual clues” by grouping like things together.
  • Alignment: Everything on the page should align with something else; elements should not be placed randomly.
  • Repetition: Use consistent design elements throughout.
  • Contrast: Reserve the highest contrast for the area you want to be most prominent.

Activities:

I’ve selected a number of sites for you to review (links below). I tried to select from a gamut of types including brochure sites, retail sale sites, blogs, informational sites, and at least one design portfolio site. As you view each site, try to identify strengths and weaknesses in color palette, typography, layout, and texture.

Homework:

Please complete Assignment 5 before the next class.