Sessions28
- Part IProject 1: Single Page Website, MVP
- 01Wed Jan 20Welcome back
- 02Mon Jan 25Snow day
- 03Wed Jan 27Design process
- 04Mon Feb 1Mobile first and prototyping
- 05Wed Feb 3Patterns
- 06Mon Feb 8Prototype workshop, project check-in
- 07Wed Feb 10Memes and participatory culture
- 08Mon Feb 15Snow day
- 09Wed Feb 17Project 1 presentations, and typography
- Part IIProject 2: Content Management Systems
- 10Mon Feb 22Content management systems
- 11Wed Feb 24Responsive web design
- 12Mon Feb 29Preprocessors, and workshop
- 13Wed Mar 2Workshop
- Mar 7No class
- Mar 9No class
- 14Mon Mar 14Workshop
- 15Wed Mar 16One-on-one meetings, and workshop
- 16Mon Mar 21Workshop
- 17Wed Mar 23Workshop
- 18Mon Mar 28Project 2 presentations
- Part IIIFinal: Portfolio Site
- 19Wed Mar 30Your work
- 20Mon Apr 4Beauty in web design
- 21Wed Apr 6Portfolios: inspiration, aspiration, and limitations
- 22Mon Apr 11Portfolios: patterns in code
- 23Wed Apr 13Showing your work: portfolio workshop
- 24Mon Apr 18Project 3 workshop
- 25Wed Apr 20Cross-browser testing, and workshop
- 26Mon Apr 25Workshop and snippets
- 27Wed Apr 27Final workshop
- 28Mon May 2Project 3 crits: final day of class
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.
About this courseTexts, grading, policies
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
1 reading
Read before class- Don't Fear the Internetepisodes 1 to 4Watch now ↗
Snow day
Class asynchronous: the exercise posted to Slack, the process reading assigned for Wednesday
3 readings
Read 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
2 readings
Read 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
3 readings
Read 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
2 readings
Read 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
1 reading
Read before class- Shifman, Memes in Digital Culture
Snow day
The second snow day: structure and layout reading posted in place of class
2 readings
Read 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
2 readings
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
2 readings
Read 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
Workshop
Project 2 work session and desk crits
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.
Workshop
Back from break: Project 2 work session
One-on-one meetings, and workshop
Individual project reviews while the room works. The beauty readings begin
2 readings
Read before classWorkshop
Last work session before Project 2 presents
2 readings
Read before class- Bowles, "Beauty in Web Design, part 3"Read now ↗
- "What Makes Something Beautiful"Cooper Hewitt Design Triennial, NYTRead now ↗
Project 2 presentations
The CMS sites presented and critiqued
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
1 reading
Read before class- The seminar reading listsix pieces, collectedRead now ↗
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
Project 3 workshop
Work session and desk crits
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
Final workshop
Last working day before crits
- 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.