WEB DESIGN 3
SECTION 3381 | TUESDAY | 2:00 – 5:05PM
This advanced project-based web design course builds on the design concepts and technical knowledge acquired in Graphic Design 66 and focuses on designing and building a commercial-quality website. Working in teams, students will participate in the design and production of a medium-sized website. Students will go through the design process from research to launch and discuss how to best work with a client. Technical issues addressed include HTML and CSS, content management systems, responsive design, and site maintenance. Students will conceptualize, design, and produce a complete commercial-quality website.
If I need to contact you, I will email you using your SMC email address so be sure to check your SMC email frequently!
Schedule
DATE |
LECTURE + DEMO |
ASSIGNMENTS + DUE DATES |
---|---|---|
Feb. 16 | Course Introduction + Syllabus Class Skills Survey |
WordPress Process Blogs (due 2/23) |
Feb. 23 | What is Interaction Design? RWD Frameworks Bootstrap (more links below under resources) |
Group Presentations (see due dates below) Midterm Project (due 4/19) Watch Bootstrap Tutorials 1-9 |
Mar. 1 | Group Presentation (Client Survey) Group Presentation (Contract) Bootstrap (more links below under resources) |
Assignment 1: Client Survey (due 3/8) Watch Bootstrap Tutorials 1-9 |
Mar. 8 | Group Presentation (Estimate) Bootstrap Part 1 Bootstrap Part 2 |
Assignment 2: Build Prototype using Bootstrap (due 3/22) Extra Credit: Complete Bootstrap tutorial + page |
Mar. 15 | No Class – Flex Day | |
Mar. 22 | Group Presentation (Schedule)
Group Presentation (Design Brief) |
Assignment 3: Estimate + Design Brief (due 4/5) |
Mar. 29 | Group Presentation (Agile) Professional Practices: Role Play |
Assignment 4: Sitemap (due 4/5)
|
Apr. 5 | Group Presentation (Design Presentation) Professional Practices |
Critiques. Print out and bring to class: client survey, project brief, estimate, sitemap and wireframes. |
Apr. 12 | Spring Break | |
Apr. 19 | UX Exercise: Experience Mapping Video: Customer Journey Map |
Midterm Project Due Design Comps: SMC Home page + landing page (due 5/3) |
Apr. 26 | WordPress – Part 1 Individual WP.org websites (practice but don’t build too much, using this site for Assignment 5) |
Prototypes Due Final Project (due 6/7) Final Project Teams |
May 3 | WordPress – Part 2 | Assignment 5: WP Exercise (due May 10) Design Comps due |
May 10 | WordPress | Teams: Responsive Theme |
May 17 | WordPress Questions for Team |
Teams: Design + Content |
May 24 | WordPress | Teams: Home page + Landing page |
May 31 | WordPress | |
Jun. 7 | Final Project Presentations: student must present final project last day of class to receive grade. |
Final Project Final Project comments (We’ll do this in class) SMC Design Technology Survey |
*This schedule is subject to change.
Please note: Instructor is not responsible for going over missed class material with a student who misses a class. Please be sure to attend all classes.
Course Documents
LECTURE MATERIALS
The Boston Globe and Responsive Web Design [Video]
PROJECTS / RESOURCES
Syllabus
Class Skills Survey
Midterm Project
Final Project
MIDTERM PROJECT STUDENT EXAMPLES
FINAL PROJECT STUDENT EXAMPLES
STUDENT BLOGS
Please post your WP blog URL in comments at bottom of page, thanks!
Students will post assignments and detail the process of their work on their WP blog:
Resources
Coding
FREE TEXT EDITORS
DOMAINS + HOSTING
CMS
WordPress
Squarespace
Blogger
Drupal
Joomla
Tumblr
RESPONSIVE WEB DESIGN
Responsive Web Design
Designing for Breakpoints
Responsive Navigation Patterns
Responsive Design Patterns
Responsinator
Reponsive Design Testing
Mediaqueri.es
Responsify.it
Responsive Resource List
HTML
HTML Validator
What is HTML5?
Coding a HTML5 Layout From Scratch
HTML Tags
Meta Tag + Keywords
CSS
CSS Properties
CSS Validator
Web Colors
CSS Text Formatting
CSS Link Formatting
Box Model
CSS Positioning
CSS Floating
GRID / FRAMEWORKS
960 Grid System
Bootstrap
Skeleton
Foundation
Less Framework
BOOTSTRAP
What is Bootstrap?
Bootstrap Website Examples
Download Bootstrap
Bootstrap Basic Template
Bootstrap Grid Basic
Bootstrap Grid Basic System
Bootstrap Case: My First Bootstrap Website
Bootstrap Case: Adding a Jumbotron
Bootstrap Case: Adding Button and Icon
Bootstrap Case: Multicolumn Layout
Bootstrap Case: Adding a Menu
Bootstrap Case: Adding a Navigation Bar
UX/Design
WHAT IS UX/IXD?
Complete Beginner’s Guide to Interaction Design
Interaction Design, UI Design & UX
What is UX Design?
Meet Noah, Interaction Designer for Google
USER INTERFACE
Flat and Thin Design
Personality In Design
DESIGN PROCESS
5 Steps for User Research
Effectively Planning UX Design Projects
What to Ask a Client Before You Start Their Project
Seven Basics to Create a Good Design Brief
How to run a Customer Journey Mapping Workshop
How to How to Create a Sitemap [Video]
How to Create a Website Sitemap in Illustrator
WEB TYPOGRAPHY
Principles for Readable Web Typography
How to Choose a Typeface
Combining Typefaces
Font Squirrel
Font Squirrel Web Font Generator
Google Fonts
Typekit
Meet the Ipsums
What the Font
Special Character Codes
Default Fonts
COLOR
Adobe Kuler
Flat UI Color
Pictaculous
Intuitive Color Picker
HEX to RGB
PATTERN LIBRARY
PatternTap
Dribbble
Yahoo! Pattern Library
DesignSnips
Stylify Me
PROTOTYPING/TOOLS
Interface Sketch
UI Stencils
Online Wireframing
Sketching Wireframes Video
Wireframe Examples
Screensiz.es
GitHub
USABILITY + TESTING
Extensive Guide to Web Form Usability
Paper Prototype Video
InVision
Google Analytics
Community
PEOPLE TO KNOW
Jeffrey Zeldman
Jason Santa Maria
Whitney Hess
Dan Saffer
28 Graphic Designers to Follow on Behance
EDUCATION
Don’t Fear The Internet
Lynda.com
Skillshare
W3 Schools
Codeacademy
Code.org
The Skool Network
Treehouse
CIS courses @SMC
CS courses @SMC
MAGAZINES/BLOGS
A List Apart
Hey, Designer!
Smashing Magazine
Awwwards
Swiss Miss
Mashable
FastCompany
Creative Bloq
Hack Design
ULTIMATE RESOURCES
PROFESSIONAL PRACTICES
Course Info
DETAILS
GR DES 67
Tues/2:00-5:05pm
AIR 133
Prerequisites:
GR DES 61, 65 + 66
INSTRUCTOR
Jamie Cavanaugh
cavanaugh_jamie@smc.edu
jamiecavanaugh.com
Office Hours:
Tuesday 5-6pm / AIR 102
Please email me to schedule an appointment to see me during office hours.
Design Technology Department:
smcdesigntech.org
IxD Bachelor’s Degree:
smcixd.org