ID01: Interaction Design & Development 01


Thom Meredith

Week 09

Week 09

Design Process Review
— Discovery Phase
—Analyzing your industry: Competitive Analysis
—Understanding your Audience: Personas

Technical Lab: Inner Div Positioning exercise (iPod exercise demo).


1) Complete a Communication Brief for your final project using the Communication Brief Worksheet.

2) Lab assignment: Please complete the Inner Div Positioning exercise and post to your Week 09 folder on the class server.

3) Continue work on final project.

Defining Problems & Constraints

Projects generally begin for one of two reasons:

  1. Something is broken
  2. Something doesn’t exist

Unless the problem is simple and narrowly defined (for instance, users can’t find the Submit button at the end of the form), designers shouldn’t take any problem at face value. Often what what seems at first glance to be really simple, really isn’t (and, rarely, vice versa).


  • Problems aren’t fully understood
  • They have fuzzy boundaries
  • They have lots of people (stakeholders) with a say in them
  • They have lots of constraints
  • They have no clear solutions

Information gathering to determine the problem

Stakeholder (Client) interviews: The Client Survey

Design (Communication) Brief: Communication Brief Worksheet

Review video: – Web ReDesign: Strategies for Success with Kelly Goto

4. Communication > Communication brief (Must login to first)

See Web ReDesign 2.0 website for more information.

What is the Core Design Process?

Web ReDesign: Strategies for Success with: Kelly

Core Process Overview

Three Way of Understanding your Audience


“A persona is a documented set of archetypal people who are involved with a product or a service. Personas turn “the users” into identifiable human beings…Personas are typically amalgams of multiple people who share similar goals, motivations, and behaviors.”

Designers should devise personas from observing and talking to users.

Personas by themselves are useless. They become useful when the designer sets up scenarios and uses the personas to test features for appropriateness and utility:

  • Would this persona do this task?
  • Could this persona do this task as it is designed?

Three sample personas:

Heather Adams

Theresa Lowell

George Vance

Review video: – Web ReDesign: Strategies for Success with Kelly Goto

6. Understanding Your Audience > Three ways of understanding your audience (Must login to first)

Inner Div Positioning

I will demonstrate how to build the following page using a 3-column structure and a series of inner divs. The exercise file for this demo can be downloaded here.

I will demonstrate the following steps:

  • Wrapper div is 980 px and is centered in the browser window. Margin left and right is set to auto. The background-color is #f5f6f7
  • The body font-size is set to 62.5% so that our conversion for using ems is 1 em = 10 px
  • The margins and padding are “zeroed out” using the * (universal selector).
  • Using the code from our “web kit,” created a 3 column structure
  • The center div equals 620px and both the left and right side divs each equal 180 px. (620px + 180px + 180px = 980px)
  • Two inner divs are inserted in the header, one for the top navigation, one for the Product slider image
  • In the center content div: a main photo div, and 3 bottom divs (for the three center bottom images) are inserted in the content div
  • The three center bottom divs are floated to the left
  • See code below for how to create rounded corners for all the divs
  • In the left-hand div, a left photo div is inserted
  • In the right-hand-div, a right photo div is inserted
  • The text is styled by creating a “compound selector” — specifying the name of the div and the paragraph tag. See example below.

Examples of code

Centering images:

#content img {
	margin-right: auto;
	margin-left: auto;
	display: block;

Rounded corners are created using:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Styling of text:

#left_side p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #000;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-top: 10px;
	line-height: 15px;

For horizontal rule:

hr {
	width: 150px;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	color: #CCC;
	height: 1px;
	margin-left: 10px;

Other helpful resources:

The actual Apple iPod page

Final demo page

Category: Classes


Comments are closed.