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.

 

Announcements

  • 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

http://classes.jamiecavanaugh.com/grdes/gd-67/gd-67-midterm-project/


Group Presentations – March 12

Group Presenters

Creative/Project Brief: Maria Arroyo, Cocoa Dixon 

Creative/Project Brief

Resources

7 Basics to Create a Good Design Brief
http://www.webdesignerdepot.com/2011/03/7-basics-to-create-a-good-design-brief/

Mastering the Creative Brief
http://www.aiga.org/mastering-the-creative-brief/

Here a Sample Creative Brief for your reference.


Budget/Project Estimate: Kellie Matteson, Raquel Rivera 

Budget/Estimate + Contract

Resources

Effective Strategy to Estimate Time for your Design Projects
http://www.smashingmagazine.com/2009/06/11/effective-strategy-to-estimate-time-for-your-design-projects/

How To Spot A Sketchy Client (Plus A Contract Template)
http://www.smashingmagazine.com/2010/06/07/how-to-spot-a-sketchy-client-plus-a-contract-template/

Project Estimator
http://astuteo.com/estimator/

Here is an example of a Estimate


Project Schedule: Diana Gurevich, Natsko Mckissack 

Project Schedule

Resources

Use Google Docs to Create Schedule:
http://mariepoulin.com/blog/use-google-docs-spreadsheets-to-create-a-workback-schedule-for-your-web-redesign-projects/

Schedule and Cost Summary Calculator
(How calculating costs, helps to determine schedule)
http://konigi.com/tools/schedule-and-cost-summary-calculator

Here’s an example of a Schedule

Discussion

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
Specifications:

  • 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)

Resources

Introduction to Personas
http://www.ux-lady.com/introduction-to-user-personas/

Making Personas:
http://boxesandarrows.com/making-personas-more-powerful-details-to-drive-strategic-and-tactical-design/

Creating User Profiles
http://www.youtube.com/watch?v=kbxtGpvRq40#t=1015

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

smc_sitemap

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: http://www.ehow.com/how_6785412_create-website-sitemap-illustrator.html


Bootstrap Tutorial

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

Download the source files for this tutorial here:
http://everythingaboutweb.com/classes/examples/bootstrap3/source_files.zip

Leave a comment