The Basics of Web Design

Web Design Basics

The basics of web design can be simplified into 5 subjects: the grid, color palette, navigation, design principles, and typography.

  1. The Grid
  2. Color Palette
  3. Navigation
  4. Design Principles
  5. Typography

The Website

Eight Hour Day
Design boutique created by designers Nathan Strandberg and Katie Kirk.
There’s so much to love about this website. This is a good example of what you want to do when you’re designing a web site. Let’s get started…

1. The Grid

Following a grid system is as important in web design as it is in designing and organizing content for print work.

The grid system in graphic design is a way of organizing content on a page, using any combination of margins, guides, rows and columns. It is commonly seen in newspaper and magazine layout with columns of text and images. One grid, or a collection of grids, may be used across an entire project to achieve a consistent look and feel. In a finished product, the grid is invisible, but following it helps in creating successful print and web layouts.1

The designers of Eight Hour Day have followed a grid system which becomes more apparent when you place a grid overlay on the site. Notice the left and right margins and how the text aligns with these margins. The same is true for the top margins. The column gutters follow the grid (the gutters are highlighted in the red transparency), and notice how the four columns are precisely spaced between one another.

As a web designer you need to be aware of the grid and make your layout and placement decisions based upon it. One suggestion is to enable the View > Show > Grid in Photoshop when you’re creating your design comp.

Here’s a great resource for all things related to The Grid System. And for those who need to brush up on the Anatomy of the Grid.

2. Color Palette

The Eight Hour Day designers are good with color, aren’t they?  Notice how the palette isn’t complex— there aren’t many colors used, but they’ve used the colors effectively. Red is used for emphasis and contrast, and is found in multiple locations on the page. The blue is used as an accent, but it’s relatively easy to introduce a different color if need be.

Working with color can be tricky. Fortunately there’s a plethora of resources to help designers with color. One resource (shown in the example above) is Adobe’s Kuler.

Kuler is a web-hosted application that can help you generate color themes.  You can access it online at Kuler, or in Photoshop or Illustrator by going to Window > Extensions > Kuler. It’s smart to develop a color palette with the help of Kuler or a comparable tool, especially if you don’t have a lot of experience with color.

3. Navigation

You don’t need to think about how an audience interacts with a poster, but you do need to think about how an user is going to navigate through a website. Navigation is one of the main ways web design is so different than print design. When working on navigation for a website, a designer needs to think about the “rules” for designing successful navigation. The golden rule is consistency. The navigation should be in the same location from page-to-page so the user doesn’t need to hunt for it. Grouping navigation is often necessary, especially when you have more than seven sections. The 7 ± 2. rule argues that the number of objects an average human can hold in working memory is 7 ± 2. Therefore, depending on how good your memory is, somewhere between five to nine objects. So if you have more than seven sections, grouping similar sections of the navigation is a smart thing to do.

In the design above, notice how Eight Hour Day has grouped the main navigation (#1) with main sections of the site and grouped the “secondary” navigation (#4) with the less important sections such as the links to Twitter and the mailing list.

The Eight Hour Day web design includes several of the navigation conventions we often see:

  1. Main navigation. Includes the primary, most important sections for the website.
  2. Footer navigation. Often is the same as the main navigation, but not always. Sometimes the “secondary” navigation is located in the footer.
  3. “Special” navigation. It’s not always referred to as “special,” but it’s something that is pulled out from the rest of the navigation and is given a prominent location on the website.
  4. “Secondary” navigation. Includes sections or links that are less important than the main navigation.
  5. “Featured” navigation. This is commonly found on what’s called “magazine format” websites—websites designed to look like magazines. Content from deeper in the site is pulled out and featured on the home page of the site so the user can get to this content easily.

4. Design Principles

Many design principles important to print design (and design in general) are also important to web design.

  1. Identity. Add identity to a website with a logo or typographic treatment that is strong and clear.
  2. Whitespace. Don’t fill every space with something— let the design breathe and incorporate some whitespace.
  3. Balance.  Create balance with the use of symmetry and asymmetry. The four columns in the “Featured” navigation create balance in the design above. A designer can also create balance with asymmetry. A good example is the circular graphic located in the middle of the design. The graphic is placed far right to create asymmetric balance. Creating both symmetric and asymmetric balance makes a design more visually interesting.
  4. Proximity. Place elements close to one another to make them appear as a single group. The placement of the main and secondary navigation sections in the Eight Hour Day website follows the principle of proximity. By locating the navigation sections close together, they visually appear as a group.
  5. Emphasis. Draw the user’s attention to create a focal point. The middle section of the design (with the circles and “One Year” type) stand out from the rest of the page. Emphasis is also used in the typography to draw the user’s attention. We’ll talk more about typography in the section below.
  6. Proportion. Vary the scale of objects to create a sense of proportion. In the above design, the page as a whole is a good example of using proportion well. The scale is large for the circles, “One Year” type, and the red navigation bar . This is a nice contrast to the scale of the smaller images in the “Featured” navigation section of the page, and the smaller type for the navigation and identity.

5. Typography

Typography for the Web also follows many of the same principles for good Typography. Overall, variety is the important concept to creating “good” Typography.

  • Typefaces. Don’t use just one typeface in your design, add variety by using at least two different typefaces. Eight Hour Day uses both a sans-serif and serif typeface in the above design.
  • Color. Change-up the color of the type. All black text is boring so use a variety of colors to create contrast and emphasis. The headings of the “Featured” section are red and the main text is black. Some type is white. These variations add good contrast.
  • Size. Use a variety of font sizes to create hierarchy. The font sizes in the above design range from 11 pixels to 48 pixels— and several sizes in between!
  • Uppercase/lowercase. Use a variety of uppercase and lowercase fonts. Some of the type for the headings are uppercase and some type is uppercase and lowercase. Isn’t this more visually interesting?
  • Hierarchy. Create hierarchy with the typography in your design. Some of the type should standout more than other type. In the design above, “One Year” has the highest hierarchy, then the “Eight Hour Day” logo, then the main navigation, and the main text has the least hierarchy on the page.

Leave a Reply

Your email address will not be published. Required fields are marked *