GD 67 Class 02 + 03

Class 02 Topics: Self Learning, Frameworks, Design Process, Discover + Research, Client Survey, Group Presentation Assignments, Discussion.

Class 03 Topics: Group Presentations: Competitive Analysis, Bootstrap, Discussion.




Class 02



  • Take Notes
  • Get a sketchbook

Frameworks: What are they?

CSS tutorial: Boilerplates, grids, and frameworks |

What is a Framework?

A collection of assets that provide a system for building sites or applications. Usually has a specific focus like building responsive design.

15 Best CSS Framework for Responsive Web Design

What is a Bootstrap?

Twitter’s bootstrap project is a standalone framework. Right now it’s more of a marketing term but it’s becoming a generic term for UI (user interface) frameworks.

Getting started with Bootstrap

Sites built using Bootstrap

What is GitHub?
Powerful collaboration, review, and code management for open source and private development projects.

GitHub manages and stores revisions of projects. Although it’s mostly used for code, Git could be used to manage any other type of file, such as Word documents or Final Cut projects. Think of it as a filing system for every draft of a document.

Design Process

Discovery + Research

Defining the Problems and Issues

Take a look at the current Design Technology Department website:

What are the current problems and issues with this site? What works and what doesn’t work?

Defining the problems and issues is an important step. This step will lead to defining the goals for the site and the project overall. This is not a time to play the critic and to point out to the client all the ways their current site is “bad.” (If the website were successful, they probably wouldn’t need you!) As a designer, you need to be sensitive, and develop the skills to effectively communicate the current issues/problems and how to move towards a better solution. Your role as a designer is to be a problem solver.


Web Design Process
What are the six parts to the Planning stage?
What are the four parts to the Design stage?
What are the five parts to the Development stage?
What are the four parts to the Launch stage?
What are the three parts to the Post-Launch stage?

Client Survey
What are the eleven questions you should ask your prospective clients before you get started on their project?

Client Survey

What to Ask a Client Before you Start

Client survey from the beloved book, Web Redesign 2.0:
Remember, the book is dated, so there is some old stuff, even in this survey)

Group Presentations

Group Presentations will occur over the next 5 weeks. In Group Presentations we will define and discuss the process documents and “deliverables” for this class. These presentations serve as short instructional “workshops,” and we’ll create these documents as part of our weekly assignments.

  • Competitive Analysis
  • Creative/Project Brief
  • Project Schedule
  • Budget/Project Estimate
  • Personas/User Profiles
  • Site maps
  • Wireframes

For more information see:

Class 03

Group Presentations – March 5

Group Presenters

Competitive Analysis: Amanda Johansson, Murray Smith, Michael Lemus

Competitive Analysis

From the book Web Redesign 2.0: Analyzing Your Competition


Competitive Analysis

Competitive Analysis created for Santa Monica College Website:


  1. What are the three basic steps for a “quick and dirty” competitive analysis?
  2. What are the series of questions to do a basic visual review?
  3. What are the two tests that you can use to help assess how many users your competition may be turning away.

Bootstrap Tutorial

Bootstrap Tutorial: Part 1
Bootstrap Tutorial: Part 2

One Response to "GD 67 Class 02 + 03"

Leave a comment