Design Fundamentals for the Web – Session 5

September 25, 2014


Last week’s agenda

Review of the Web Design Process

  1. Identify the types of users you need to communicate with
  2. Identify what each user type needs to be able to do
  3. Organize your content semantically
  4. Compose appropriate layouts for your content
  5. Create visual hierarchies for your content with type
  6. Apply design principles to emphasize relationships between elements
  7. Create mood and enhance your visual hierarchies and element relationships using color
  8. Breath life into your design with behavioral feedback
  9. Test, rinse & repeat!

Basic Design Principles

Controlling Whitespace with CSS Padding & Margins

Whitespace is a key component for establishing dominance of a design element.


Margins create space on the outside of the HTML element.


Padding creates space on the inside of the HTML element.

More Info on Margins & Padding


Styling Lists

Lists are commonly used as navigational elements and are frequently targets for the design principles of similarity, rhythm & direction.

List Direction

Lists can be displayed verically (the default) or horizontally by setting the display CSS property value to inline. For example:

nav li { display:inline;}

Horizontal Menu Demo


List Styles

List Style Menu Demo


More Info on Styling Lists

Styling Links

Links are a critical for effective design because they imply interaction as well as content. Links can be in multiple states, can be internal or external, and can be grouped into categories. All of this information should be presented visually in your design.

Link States

Text Decoration

It's common practice on the web to underline link text as a means of indicating a link. To toggle between underlined and not underlined, we use the text-decoration CSS property:

For example: a:link {text-decoration: underline;}

Link Styles Demo


More Info on Styling Links


Images can be used to create dominance, similarity, texture and contrast. We can use photos as content, icons as design embelishments on text, and anything in between; in the foreground or background.

Here are a number of ways to include images in your pages:

Where do I host my images?

Sources for Images

Image Demo


More Info on Images

Assignment 5



Refine Your Layouts

After you have completed the reading assignment, revisit your HTML pages and begin layering in some of the Design Principles discussed in class and in the book.