GD 66 Class 04 + 05

Class 04 Topics:  Responsive Web Design (RWD), Mobile First, Style Tiles, Personas, Wireframes.

Class 05 Topics:  Responsive Web Design (RWD), HTML5, CSS3, HTML5 Demo.



  • When you post your assignments to your WordPress site, be sure to title the posts as Assignment 2, Assignment 3, Assignment 4 etc.
  • Be sure to bring your assignments to class every week.
  • Smashing Conference: April 27-30. Receive a code for 25% off (with a copy of your student ID). That’s approximately $150 discount. See me for more details!

Class 04

Quiz 1 Grades

Quiz 1 grades are now posted to the grade book on eCompanion.

Mobile First


In the book Mobile First, the constraints of the mobile medium force designers to focus on what’s truly important to a product or service. When you lose 80% of your screen real estate, all the extraneous bloat that tends to finds its way onto large screen designs doesn’t seem so attractive or necessary anymore. Mobile provides a great opportunity to reevaluate what content/functionality is necessary and gives us an opportunity to strip away the redundant across the board (and not just for mobile users either). These constraints also encourage ease-of-use, intuitiveness and speed as essential ingredients to a good user experience.

This mental shift in design strategy has designers wire-framing, Photoshopping, prototyping and presenting on small screens first. Establishing how a core experience fleshed out on small screens can translate up to larger screens can be more logical than trying to cram large complex desktop designs onto small screens.

Above from:

Website Critiques

Red O


The Ale House

Browns Court Bakery

Blue Ribbon Fried Chicken

Group Discussion

  1. What are the client’s objectives and goals for the website?
  2. Who is the target audience?
  3. Did the designers approach this project “mobile first?” Explain in more detail.

Style Tiles

What are Style Tiles?

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.

Case Study: The Washington Examiner


A persona is a fictitious character created to represent the primary target audience. A persona often includes the following basic elements:

Basic Demographics

  1. Age
  2. Occupation
  3. Education
  4. Income


  1. Name
  2. Picture
  3. Description
  4. Narrative: Day in the Life description

Technical/ Computer Expertise profile

  1. Preferred operating system
  2. Preferred browser
  3. Internet skill level
  4. Favorite sites

The basic demographic information is usually gathered during the initial client interview. Ask the client if they already have personas for current branding or marketing initiatives. If they do, start from their established persona and add any additional details for this specific project (like technical profile, task-based scenarios, and specific business goals).

Select a name and a photo to represent this persona based on the description the client gave you for this target audience. The name and photo should be appropriate for the stated age of this persona.

Consider selecting photos from a stock photo service or more casual shots from Flickr. Respect intellectual property and copyright law by obtaining permission to use photos when required. Don’t use names or photos of people your project team knows.

Question: Seriously? Why do I need to create a fake person and give them a name and a face (picture)? Can’t I just define the primary audience and be done?

Answer: During the design and development stage, without a detailed persona, you will have a tendency to assume that the audience needs are the same as yours. By creating a persona with a name and a picture as well as a detailed description, you bring the target audience into your design process.

Example of Persona Format



Example of a Personas



A wireframe is a bare-bones layout of a web page. It is a simple drawing of the chunks of information and functionality for key pages in the site. You will want to create a wireframe for the home page, each unique second level page, and any other significantly different pages on the site. Wireframes include the containers for all the major elements of the page. Elements include navigation, placeholders for images, content and functional elements (like search), and footer. Wireframes do not include any reference to color, typography, or visual imagery.

Wireframes are NOT normally visual design (typography, colors, images, final layout, etc.). Wireframes are a rough draft of required content only.

Wireframes focus on required elements and their relative importance without the added complexity of visual design. Wireframes are an inexpensive way to test structural design ideas. Making major changes to a wireframe is simple compared to making major changes to a visual design.

Example of Wireframes

Tools for creating site maps and wireframes

Quirk Tools for Site map & Wireframes
Limited to 3 documents for Wireframing
(No Free version)

Sketch before wireframes

Many designers mistakenly think a sketch is a wireframe. They are similar but they are not the same thing. Both are useful for illustrating an interface concept, but a wireframe and a sketch are done in different mediums and produce different results.

Many designers have different processes for how they work. Some might skip sketching and jump straight to wireframes. Some might skip wireframing and jump straight to mockups. But when you skip one or the either, you lose a lot of conceptual detail and refinement. The interface suffers because it enters into a stage prematurely and misses certain key elements or isn’t thoroughly refined.

What happens is you either end up creating the basic concept of the interface during the wireframing stage, or you end up refining the concept during the mockup stage.

  • This is counter-productive because sketching is where creating the basic concept is done.
  • Wireframing is where refining the concept is done.
  • And mockups (prototype) is where the visual graphics and content is done, not the interface concepting.

When you skip the sketching and wireframing stage, you end up thinking about too many things in one stage. This not only makes it hard on the designer, but it takes a lot away from the interface because the concept doesn’t get the full attention it needs to fully develop.


Example: Sketching


Responsive Web Design

What does it take to create a responsive design?

Three core ingredients:

1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

Flexible images

The max-width: 100%

the max-width: 100% rule can also apply to most fixed-width elements, like video and other rich media


What to Ask a Client Before You Start Their Project

Seven Basics to Create a Good Design Brief

The restaurant website redesign for the midterm project will take in consideration the information here: Better Restaurant Websites:

Class 05

• Please post your Assignments 2, 3 and 4 to your WordPress blog. I will grade these assignments later this week. Also please post Assignment 01 to the class server. This assignment will not be graded but you will be given credit for it.

Assignment 2

  • Research + Discovery

Assignment 3

  • Design Brief

Assignment 4

  • Site Map
  • Style Tile


The Anatomy of a CSS Rule


CSS Shorthand

This is actually the shorthand equivalent of the following lines:

CSS Measurement Units

Pixel (px) A pixel is one dot on a computer monitor.
width: 200px;

Em (em) An em is equal to the default font size of the page. So if that is 16px, then 1em = 16px.
font-size: 2em;

Point (pt) A point is equal to 1/72 of an inch, although this is not completely reliable across platforms.
line-height: 36pt;

Percent (%) The measurement you specify will be equal to the percentage of the space available in the containing element.
width: 50%; /* The element’s width will always be equal to 50% of its parent element’s width */

  • It is usually best to size text using ems, as then the text will resize proportionally to its surroundings when browser resize controls are used, even in older browsers such as Internet Explorer 6.
  • If you want a column of content to always remain the same size, then pixels will usually suffice.
  • If you want a column of content to resize proportionally to browser width, percentages are ideal.

Selector Types



CSS3 – The Future of CSS

CSS3 Click Chart

Leave a comment