GD 67 Class 04 + 05

Class 04 Topics: Group Presentations, Working with the client: Creating Schedules, Budget/Project Estimate, RWD Frameworks, Discussion

Class 05 Topics: Group Presentations, Site structure, Content, Site maps, RWD Frameworks: Using Bootstrap, Discussion.



  • When you post your assignments to your WordPress site, be sure to title the posts as Assignment 2, Assignment 3, Assignment 4 etc.
  • 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!
  • Reminder: Due Dates
    March 19 (no class) – Creative/Project Brief, Estimate and Schedule due
    March 26 – Competitive Analysis due
    April 2 – Personas + Sitemap due

Class 04

Review Midterm Project

Group Presentations – March 12

Group Presenters

Creative/Project Brief: Maria Arroyo, Cocoa Dixon 

Creative/Project Brief


7 Basics to Create a Good Design Brief

Mastering the Creative Brief

Here a Sample Creative Brief for your reference.

Budget/Project Estimate: Kellie Matteson, Raquel Rivera 

Budget/Estimate + Contract


Effective Strategy to Estimate Time for your Design Projects

How To Spot A Sketchy Client (Plus A Contract Template)

Project Estimator

Here is an example of a Estimate

Project Schedule: Diana Gurevich, Natsko Mckissack 

Project Schedule


Use Google Docs to Create Schedule:

Schedule and Cost Summary Calculator
(How calculating costs, helps to determine schedule)

Here’s an example of a Schedule


From Assignment 03

Deliverable: Client Survey (Only need to complete the following sections: Current Site, Reasons for Redesign, Audience/Desired Action, Perception, Content.)

Exercise: Create an Estimate

Design Team: Project Manager, User Experience Designer, Web Designer, Front-end Developer, Web Developer (Programmer), Art Director.

Project: SMC Design Technology Department Website

  • WordPress site
  • 7-9 sections/ Approximately 3 subpages in each section
  • Student Gallery section
  • Calendar
  • Faculty + Staff Directory
  • Contact Form
  • Social Media Feeds
  • Anything else??

What are the tasks?
What is the hourly rate for the task?

Designer / Client Role-Play

How would you as the designer respond to the following client responses:

Client 1: “I don’t know what my budget is.”

Client 2: “Can you have the website done in 4 weeks?”

Client 3: “Why does it cost so much?”

Client 4: Midway through the project: “We decided we need a donation form. It’s no problem to include this, right?

Class 05

Group Presentations – March 26

Personas: Stephanie Hughes, Lisa Kay, JP Powell

Personas (User Profiles)


Introduction to Personas

Making Personas:

Creating User Profiles

Personas created for Santa Monica College Website:
Persona 1
Persona 2
Persona 3

Site Map

A site map is a high-level architectural blueprint of the site, it maps out the organization and labeling of major areas of the site. The figure below shows a site map for a redesign of the Santa Monica College website. Site maps are sometimes referred to as site diagrams.

An example of a Site Map


PDF of the Santa Monica College site map shown above.

How to Create a Site Map

There are several tools that can be used to create site maps. Visio and OmniGraffle are used by professional Information Architects. For this class, I suggest Illustrator, or Photoshop if you’re more familiar with it. Even Microsoft Word will work.

Download the site map template used in video here: Monday May Design Site Map

How to Create a Site Map in Illustrator

You may also find the following helpful:

Bootstrap Tutorial

Bootstrap 3 Tutorial: Part 1
Bootstrap 3 Tutorial: Part 2

Download the source files for this tutorial here:

Leave a comment