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:

Read:

Recommended reading (but not required) from the HTML & CSS book:

  • Process & Design 453-474
  • Color 251-253, 255
  • Text 265-270, 275
  • Layout 377-382

Lecture:

Topology

Every website has an underlying structure. This is because websites are usually vehicles for delivering content related to a company, person, or product. Conveying that information clearly and effectively is first and foremost when it comes to designing a website. Have you ever heard the phrase, “Content is king”? It applies to web design as well.

Before we think of colors, fonts, and photographs – we think of what we want the goal of our website to be. Who is the audience and what do we want them to do or accomplish on the site? Identifying these things FIRST in the development process will inform how you design the look and feel of your website.

Let’s look at some wireframe mockups. Below is a link to the Design the Web game. In this game you are shown the topology of a website minus all of the colors, fonts, and imagery. Essentially what we see is the structure of the content and how it is presented. Try playing the game and see if you can recognize these sites without all of their bells and whistles. Also be sure a note how the topology of each site is represented in the absence of images, color, or media: PLAY dedesigntheweb.com

When designing a website from scratch it is helpful to plan the structure of the content first by creating a wireframe. Developers use different tools to create wireframes depending on their preferences. Some people prefer pencil and paper. Others use software like Fireworks or Illustrator. There are even dedicated apps for wireframe development, such as Omnigraffle. Once you have worked out a plan for the website content, designing the look and feel comes next.

Design Outline

In our pursuit of visually pleasing web pages, let’s consider four broad design 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 (see in the Activities below).

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: A Primer

Color Pickers: The color tools below will help you understand color theory in practice. The Color Scheme Designer is particularly handy because it provides an interactive way to relate monochromatic, complimentary, tertiary, tetradic color schemes.

Typography: Familiarize yourself with some typography basics.

Layout

C-R-A-P (and whitespace) are all important to keep in mind when you are composing your layout.

More 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 fourth 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.

You saw these elements mentioned above and they are very important to learn. There is an easy-to-remember mnemonic that will help you bring all four elements to mind when you need them. Just remember C-R-A-P! Mastering these elements is what makes a designer good at what they do.

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.

Looking Forward:

  • Please complete Assignment 5
  • I will spend next week critiquing your layouts over the next week. Since the beginning of the semester we have been looking at sites and mockups for inspiration so you should have an informal feel for the process. Review this article on web design critique, and step back from your layout and critique your own work before submitting your assignment to me.
  • Next week your only homework will be to write up a description of your layout and post it, along with images of your layout, to the class website.