AVT 415 · George Mason University · Spring 2016
The whole term
Every meeting with what it reads, what it owes and what it argues. The term chart is still the way to find the next session; this is the way to see all of them against each other.
The work
The milestones for this course are being planned. What each meeting asks a student to turn in, and what it is worth, is not decided yet.
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.
Welcome back
First class: a quick test of technical ability, the tools set up — Slack, GitHub, Codepen, Atom — and what the internet actually is
Reading
- Don't Fear the Internetepisodes 1 to 4
Snow day
Class asynchronous: the exercise posted to Slack, the process reading assigned for Wednesday
Reading
- Duckett, HTML & CSSintro, chs. 1 and 2
- Chimero, "Designers vs Coding"
- Frost, "Atomic Design"talk, video
Design process
The responsive design process end to end, and the District Taco exercise: brand audit, proto-personas, style tiles, a mobile-first wireframe
Reading
- Duckett, HTML & CSSchs. 3 to 8
- Krug, Don't Make Me Thinkintro, chs. 1 to 4
Mobile first and prototyping
What designing mobile-first actually means, and hands-on prototyping in Invision. Project 1 opens
Reading
- Wroblewski, "Mobile First"talk, video
- 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
Reading
- 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
Reading
- Shifman, Memes in Digital Culture
Snow day
The second snow day: structure and layout reading posted in place of class
Reading
- Duckett, HTML & CSSchs. 13 and 15
- "CSS Floats 101" and "CSS Positioning 101"A List Apart
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
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.
Content management systems
Project 2 opens: the site becomes a system someone else can update, and design has to survive real content
Reading
- "Designing for Content Management Systems"Smashing Magazine
- "Complete Beginner's Guide to Content Strategy"UX Booth
Responsive 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
Workshop
Project 2 work session and desk crits
MonMar 7
No class: Spring Break
WedMar 9
No class: Spring Break
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
Reading
Workshop
Project 2 work session; the beauty readings continue
Workshop
Last work session before Project 2 presents
Reading
- Bowles, "Beauty in Web Design, part 3"
- "What Makes Something Beautiful"Cooper Hewitt Design Triennial, NYT
Project 2 presentations
The CMS sites presented and critiqued
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.
Your work
Turning toward the portfolio: what you have, what it says about you
Beauty in web design
The second named debate: what aesthetic judgment is for in a medium ruled by conventions. Project 3 opens
Reading
- The seminar reading listsix pieces, collected
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
Project 3 crits: final day of class
The portfolios presented; the semester closed
The exam window
Final critique: the portfolio
The portfolio presented; attendance at critique mandatory