WEB DESIGN 2
SECTION 2471 | TUESDAY | 2:00 – 5:05PM
SECTION 4255 | TUESDAY | 6:30 – 9:35PM
This computer-based course is focused on the successful design and implementation of web sites and builds on the concepts and fundamental techniques covered in Graphic Design 65. Students will learn different approaches and technologies in delivering online content. Topics include: Dynamic HTML, web hosts and servers, search engines, web graphics, web animation, and web authoring tools. Design issues such as effective communication, technical constraints, typography, navigation interface, and information architecture will be addressed. Students will design and create a multi-page web site utilizing advanced features of a web authoring software.
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 |
---|---|---|
Sept. 1 | Course Introduction + Syllabus Class Skills Survey |
WordPress Blogs (due 9/8) |
Sept. 8 | File Naming + Organization, FTP HTML5 Structure What is Responsive Web Design? (RWD) |
Assignment 1: Research (due 9/15) Midterm Project: (due 10/20) |
Sept. 15 | Design Process: Target Audience + Sitemaps Two-Column Layout |
Assignment 2: Sitemap (due 9/22) |
Sept. 22 | CSS Examples: Margin + Padding + Styling Mobile First + RWD Style Tiles Two-Column Layout |
Assignment 3: Style Tiles (due 9/29) |
Sept. 29 | Wireframes Two Column Flexible Layout Two Column: Make it Responsive |
Start working on Wireframes for Midterm Project. |
Oct. 6 | Responsive Design Patterns Navigation Prototyping/InVision Responsive Prototype |
Assignment 4: Design Comps |
Oct. 13 | Critiques | Print out and bring your design comp to class on Oct. 13. Design Revisions |
Oct. 20 | Midterm Presentations | Midterm Project |
Oct. 27 | Web Typography Demo: Web Typography Image Optimization *no more “save for web” in PSD |
Final Project (due 12/15) |
Nov. 3 | JavaScript/jQuery Responsive Navigation |
Assignment 5: Revised Design Comps (due 11/10) Questions for Whitney Hess (afternoon class) |
Nov. 10 | Embedded Media Whitney Hess 2:30pm -3:30pm |
Revised Design Comps |
Nov. 17 | Slideshow | Final Design Comps due |
Nov. 24 | Responsive Form | |
Dec. 1 | Critiques | |
Dec. 8 | In-class labtime Design Technology Student Survey: Fall 2015 |
All Grades (except final) posted to Gradebook. Email me if I missed anything. |
Dec. 15 | Final Project Presentations: student must present final project last day of class to receive grade. |
Final Project |
*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 Art of Web Design [Video]
PROJECTS / RESOURCES
Midterm Project
Better Restaurant Websites
Final Project
FINAL PROJECT STUDENT EXAMPLES
(“A” Level Work)
Kate Nesterov
Emmelie Eliasson
Connor Gustus
Danny Izarraras
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 midterm and final projects on their WP Process blog:
Student Process Blogs (Section 2471)
Student Process Blogs (Section 4255)
Resources
Coding
GR DES 65 REVIEW
Domain Name Registration
Web Hosting
Web File Naming Conventions
File Organization
The Basics of HTML
[Video]
Basic HTML Tags
The Basics of CSS
[Video]
One Column CSS Layout
[3 Videos]
Two Column CSS Layout
[2 Videos]
FREE TEXT EDITORS
DOMAINS + HOSTING
HTML
Learn the Foundations of HTML
HTML5 Two Column Tutorial
HTML5 Two Column CSS Layout [Video]
HTML Tags
Meta Tag + Keywords
HTML Validator
CSS
CSS Examples
CSS Properties
CSS Text Formatting
CSS Link Formatting
Box Model
CSS Margin
CSS Padding
CSS Floating
Web Colors
CSS Validator
RESPONSIVE WEB DESIGN
Responsive Web Design
Beginner’s Guide to Responsive Web Design
The 2014 Guide to Responsive Web Design
Designing for Breakpoints
Responsive Navigation Patterns
Responsive Design Patterns
Responsinator
Reponsive Design Testing
Mediaqueri.es
Responsify.it
Responsive Resource List
Responsive Resources
JQUERY
What is jQuery?
jQuery
jQuery UI
USABILITY + TESTING
Extensive Guide to Web Form Usability
Paper Prototype Video
InVision
Google Analytics
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 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
IMAGE RESOURCES
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
Job Titles in the Web Industry
RESTAURANT WEBSITE CRITIQUES
Red O
Lemonade
The Ale House
Browns Court Bakery
Blue Ribbon Fried Chicken
Course Info
DETAILS
GR DES 66
Section 2417 / Tuesday / 2:00-5:05pm
Section 4255 / Tuesday / 6:30-9:35pm
AIR 133
Prerequisites: GR DES 61, 64 + 65
INSTRUCTOR
Jamie Cavanaugh
cavanaugh_jamie@smc.edu
jamiecavanaugh.com
Office Hours:
Tuesday 5-6pm / AIR 102
Thursday 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