GD 67 Class 06 + 07

Class 06 Topics: Group Presentations, Wireframes, Prototyping, RWD Frameworks: Using Bootstrap.

Class 07 Topics: Wireframing, In-class lab time


Please note that class is canceled today, April 9, 2015
6:30pm – 9:30pm.

Unfortunately I’m sick and won’t be able to make it to class today. Note that your midterm projects are due April 23, so please be sure to upload your files to your student folder on the class server. Please be sure that your file contains your name and “midterm” so I can identify it.

  • Bring all your work with you to class every week.
  • Be sure to post your work to your WordPress process blog so I can give you credit for the work you’ve completed so far.
  • When you post your assignments to your WordPress site, be sure to title the posts as Assignment 4, Assignment 5, Assignment 6 etc.
  • Due Dates
    March 12 – Client Survey due
    March 19 (no class) – Creative/Project Brief, Estimate and Schedule due
    March 26 – Competitive Analysis due
    April 2 – Personas + Sitemap due
    April 9 – Wireframes
    April 23 – Midterm project: All Deliverables + Bootstrap “wireframe” (Bootstrap exercise is extra credit)

Class 06

Review Midterm Project

Group Presentation – April 2

Site maps: Toki Ngo Hoangthy, Bill O’Donnell, Marcus Welles 


Creating a Website Sitemap:

PDF of a Santa Monica College website redesign site map


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


Mobile First


As Luke handily describes in his Mobile First bookthe 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

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.

Bootstrap Tutorial

Bootstrap 3 Tutorial: Part 2

Download the source files for this tutorial here:

Class 07

Midterm Projects

Examples of “A-level” Work

For the midterm presentation, combine all the deliverables into ONE pdf. This will make it easy to present your work.

Example 1

Example 2

Regarding Extra Credit

EXTRA CREDIT: Build one of the wireframes in Bootstrap (or any other framework) and post to the class server.

The example below was not built in Bootstrap but it’s an example of a “wireframe” prototype.

Example of Responsive “Wireframe” Prototype

Alima Pure Cosmetics Responsive Prototype

Please note: Make your images around twice the size needed in order for the images to scale and respond “responsively.” For example, if your footer image is 960 pixels in width, create a grey box for the footer that is 1900 pixels in width. You may allow the height to scale accordingly so the image will be larger in height also.

Group Presentations – April 9

Wireframes: Casey Caputo, Jacqueline Pearson, Gaby Velasquez 


Beginner’s Guide to Wireframing–webdesign-7399


How to read a Wireframe


PDF: How-to-read-a-wireframe Fuzzy-Math

Example of Wireframes

Another Example


Wireframe Template for Responsive Web Design

Free Photoshop Wireframe Kit

Leave a comment