AVT 415 · George Mason University · Spring 2016
Web Design and Usability
The archival record of the Spring 2016 course, transcribed from the syllabus. Responsive web design and user-centered design, taught in the GMU format: named workshops carry the techniques, two seminars carry the debates, and three projects of rising weight carry the semester — a startup's one-page site, its CMS-backed second version, and the portfolio. 400 points, weekly exercises scored 0 to 3, critique attendance mandatory.
-
Part I · Project 1: Single Page Website, MVP
- January 3 sessions
-
Welcome back
First class: a quick test of technical ability, the tools set up — Slack, GitHub, Codepen, Atom — and what the internet actually is
-
Snow day
Class asynchronous: the exercise posted to Slack, the process reading assigned for Wednesday
Lecture Read before class- HTML & CSS intro, chs. 1 and 2
- "Designers vs Coding"
- "Atomic Design" talk, video Watch now ↗
-
Design process
The responsive design process end to end, and the District Taco exercise: brand audit, proto-personas, style tiles, a mobile-first wireframe
Lecture Read before class- HTML & CSS chs. 3 to 8
- Don't Make Me Think intro, chs. 1 to 4
- February 9 sessions
-
Mobile first and prototyping
What designing mobile-first actually means, and hands-on prototyping in Invision. Project 1 opens
Lecture Read before class- "Mobile First" talk, video Watch now ↗
- HTML & CSS chs. 10 to 12
- Don't Make Me Think chs. 6 and 7
-
Patterns
Conventions are your friend: visual hierarchy, what is clickable, why the hamburger menu costs more than it looks
Lecture Read before class- HTML & CSS chs. 13 to 15
- Memes in Digital Culture all, for the seminar
-
Prototype workshop, project check-in
Work session on Project 1 prototypes, Shifman finished for Wednesday's seminar
Lecture -
Memes and participatory culture
The first named debate: how images move, mutate and mean online, argued from Shifman
-
Snow day
The second snow day: structure and layout reading posted in place of class
Lecture Read before class- HTML & CSS chs. 13 and 15
- "CSS Floats 101" and "CSS Positioning 101" A List Apart Read now ↗
-
Project 1 presentations, and typography
The one-page sites presented, then web typography: the web is 95 percent type
Lecture Read before class -
Part II · Project 2: Content Management Systems
-
Content management systems
Project 2 opens: the site becomes a system someone else can update, and design has to survive real content
Lecture Read before class- "Designing for Content Management Systems" Smashing Magazine Read now ↗
- "Complete Beginner's Guide to Content Strategy" UX Booth Read now ↗
-
Responsive web design
Fluid grids, flexible media, breakpoints: the technique under everything the course builds
Lecture -
Preprocessors, and workshop
Writing styles like a system: variables, nesting, partials, then hands on Project 2
Lecture - March 7 sessions
-
No class — Spring Break
-
No class — Spring Break
-
One-on-one meetings, and workshop
Individual project reviews while the room works. The beauty readings begin
Lecture Read before class -
Workshop
Project 2 work session; the beauty readings continue
Lecture Read before class -
Workshop
Last work session before Project 2 presents
Lecture Read before class- "Beauty in Web Design, part 3" Read now ↗
- "What Makes Something Beautiful" Cooper Hewitt Design Triennial, NYT Read now ↗
-
Project 2 presentations
The CMS sites presented and critiqued
Lecture -
Part III · Final: Portfolio Site
-
Your work
Turning toward the portfolio: what you have, what it says about you
Lecture - April 8 sessions
-
Beauty in web design
The second named debate: what aesthetic judgment is for in a medium ruled by conventions. Project 3 opens
-
Portfolios: inspiration, aspiration, and limitations
What a portfolio is for, and what the good ones do
Lecture -
Portfolios: patterns in code
The portfolio's common structures, taken apart in code
Lecture -
Showing your work: portfolio workshop
Work session: the portfolio's content before its chrome
Lecture -
Cross-browser testing, and workshop
The work checked where it will actually be seen
Lecture -
Workshop and snippets
Work session; useful patterns traded as code snippets
Lecture - May 1 session
-
Project 3 crits: final day of class
The portfolios presented; the semester closed
Lecture -
Final critique: the portfolio
The portfolio presented; attendance at critique mandatory
Grades of record live in Blackboard. This is the reading and the schedule.