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.
How the course runs
Mon and Wed, 4:30 to 7:10 PM, GMU Art and Design Building 1023. Jan 20 to May 2; finals May 4 to May 11. 28 sessions in 3 parts.
- Part I · Project 1: Single Page Website, MVP
- A local startup needs a very simple marketing site on a short timeline. Three weeks: sketching, responsive frameworks, version control refreshed, one page shipped.
- Part II · Project 2: Content Management Systems
- The startup loved the work and wants version two: a blog and several pages on a simple CMS. Three weeks, built on the first project.
- Part III · Final: Portfolio Site
- Four weeks on Bootstrap: a dynamic portfolio that showcases your voice as a designer, through information structure, prototyping, and responsive frameworks.
Assignments
| Assignment | Due | Weight |
|---|---|---|
| Project 1: Single Page Website, MVP75 of 400 points in the original scheme. A local startup's simple, responsive one-page marketing site, three weeks. | All term | 19% |
| Project 2: Content Management Systems75 of 400 points. Version two of the startup site: a blog and several pages on a simple CMS. | All term | 19% |
| Final: Portfolio Site125 of 400 points. A dynamic Bootstrap portfolio showcasing your voice as a designer. | All term | 31% |
| Weekly assignments50 of 400 points. Due the first class day of the week after they are assigned. | All term | 12% |
| Class participation55 of 400 points. Perfect attendance earned 10 credit points; critique attendance mandatory. | All term | 14% |
| Exercises20 of 400 points, scored 0 to 3: a 2 is correct and complete, a 3 substantially exceeds the ask, the lowest score is dropped, never accepted late. | All term | 5% |
| Final critique: the portfolioThe portfolio presented; attendance at critique mandatory | May 4 to May 11 | |
| Total | 100% |
How work is marked
Every piece of work is marked on four counts, evenly weighted.
- Participation/Process · 25%
- Contributing to class discussions and critiques; improving work as a result of research and iteration.
- Concept · 25%
- Responding to the problem statement innovatively; thinking critically about work based on critiques, readings, and discussions.
- Formal Resolution · 25%
- Making work that is aesthetically sophisticated and effective and appropriate given concept and context.
- Craft · 25%
- Taking care in manufacture of work; showing technical ability.
Books
Read in selections, never whole. Each session lists what to read before that class.
- Required
- Memes in Digital Culture. Limor Shifman, MIT Press, 2013.
- Required
- Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. Steve Krug, New Riders, 2014.
- Required
- HTML & CSS: Design and Build Websites. Jon Duckett, Wiley, 2011.
No class
- Mar 7
- Spring Break. The university is closed; the ledger skips the day.
- Mar 9
- Spring Break. The university is closed; the ledger skips the day.
The rules
- General format
- The semester consists of workshops, seminars, exercises and projects. Workshops are in-class lessons about specific techniques with code or processes. Seminars present opportunities to discuss and debate critical issues regarding web culture. Projects happen largely outside of class and are thoughtful investigations based on a given problem statement. Class meetings are structured around workshops, seminars, work sessions, guest speakers, and project critiques.
- Submission
- Projects are due at the beginning of class without exception, presented in person on the due date. Late submissions lose a full letter grade for each class day of delay and are not accepted after one week.
- Attendance
- Fifteen minutes late is a tardy; thirty is an absence; three tardies equal an absence. Three absences of any kind reduce the final grade by a letter, and each beyond that another. There is no makeup for a project.
- Archival record
- Rebuilt from the class log the course actually ran on: the 28 posts of the 2016 course site, still live on GitHub Pages, one per meeting, snow days included. Every session links its own lecture post — the notes, exercises and slides as taught. Weights shown as percentages of the original 400-point scheme, rounded.
Schedule
Part I · Project 1: Single Page Website, MVP
- January3 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
LectureRead before class- Duckett, HTML & CSSintro, chs. 1 and 2
- Chimero, "Designers vs Coding"
- Frost, "Atomic Design"talk, videoWatch 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
LectureRead before class- Duckett, HTML & CSSchs. 3 to 8
- Krug, Don't Make Me Thinkintro, chs. 1 to 4
- February9 sessions
Mobile first and prototyping
What designing mobile-first actually means, and hands-on prototyping in Invision. Project 1 opens
LectureRead before class- Wroblewski, "Mobile First"talk, videoWatch now ↗
- Duckett, HTML & CSSchs. 10 to 12
- Krug, Don't Make Me Thinkchs. 6 and 7
Patterns
Conventions are your friend: visual hierarchy, what is clickable, why the hamburger menu costs more than it looks
LectureRead before class- Duckett, HTML & CSSchs. 13 to 15
- Shifman, Memes in Digital Cultureall, for the seminar
Prototype workshop, project check-in
Work session on Project 1 prototypes, Shifman finished for Wednesday's seminar
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
LectureRead before class- Duckett, HTML & CSSchs. 13 and 15
- "CSS Floats 101" and "CSS Positioning 101"A List ApartRead now ↗
Project 1 presentations, and typography
The one-page sites presented, then web typography: the web is 95 percent type
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
LectureRead before classResponsive web design
Fluid grids, flexible media, breakpoints: the technique under everything the course builds
Preprocessors, and workshop
Writing styles like a system: variables, nesting, partials, then hands on Project 2
- March7 sessions
No class
Spring Break. The university is closed; the ledger skips the day.
No class
Spring Break. The university is closed; the ledger skips the day.
One-on-one meetings, and workshop
Individual project reviews while the room works. The beauty readings begin
LectureRead before classWorkshop
Project 2 work session; the beauty readings continue
Workshop
Last work session before Project 2 presents
LectureRead before class- Bowles, "Beauty in Web Design, part 3"Read now ↗
- "What Makes Something Beautiful"Cooper Hewitt Design Triennial, NYTRead now ↗
Part III · Final: Portfolio Site
Your work
Turning toward the portfolio: what you have, what it says about you
- April8 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
Portfolios: patterns in code
The portfolio's common structures, taken apart in code
Showing your work: portfolio workshop
Work session: the portfolio's content before its chrome
Cross-browser testing, and workshop
The work checked where it will actually be seen
Workshop and snippets
Work session; useful patterns traded as code snippets
- May1 session
Project 3 crits: final day of class
The portfolios presented; the semester closed
Final critique: the portfolio
The portfolio presented; attendance at critique mandatory
Grades of record live in Blackboard. This is the reading and the schedule.