The whole term

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.

1. Wed Jan 20 01 · Workshop

   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 Internet episodes 1 to 4

2. Mon Jan 25 02 · Work session

   Snow day

   Class asynchronous: the exercise posted to Slack, the process reading assigned for Wednesday

   Reading

   • Duckett, HTML & CSS intro, chs. 1 and 2
   • Chimero, "Designers vs Coding"
   • Frost, "Atomic Design" talk, video

3. Wed Jan 27 03 · Workshop

   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 & CSS chs. 3 to 8
   • Krug, Don't Make Me Think intro, chs. 1 to 4

4. Mon Feb 1 04 · Workshop

   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 & CSS chs. 10 to 12
   • Krug, Don't Make Me Think chs. 6 and 7

5. Wed Feb 3 05 · Workshop

   Patterns

   Conventions are your friend: visual hierarchy, what is clickable, why the hamburger menu costs more than it looks

   Reading

   • Duckett, HTML & CSS chs. 13 to 15
   • Shifman, Memes in Digital Culture all, for the seminar

6. Mon Feb 8 06 · Work session

   Prototype workshop, project check-in

   Work session on Project 1 prototypes, Shifman finished for Wednesday's seminar

7. Wed Feb 10 07 · 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

8. Mon Feb 15 08 · Work session

   Snow day

   The second snow day: structure and layout reading posted in place of class

   Reading

   • Duckett, HTML & CSS chs. 13 and 15
   • "CSS Floats 101" and "CSS Positioning 101" A List Apart

9. Wed Feb 17 09 · Critique

   Project 1 presentations, and typography

   The one-page sites presented, then web typography: the web is 95 percent type

   Reading

   • Reichenstein, "Web Design Is 95% Typography"
   • Spiekermann and Stocks, "Typographic Design in the Digital Domain" video

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.

1. Mon Feb 22 10 · Workshop

   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

2. Wed Feb 24 11 · Workshop

   Responsive web design

   Fluid grids, flexible media, breakpoints: the technique under everything the course builds

3. Mon Feb 29 12 · Workshop

   Preprocessors, and workshop

   Writing styles like a system: variables, nesting, partials, then hands on Project 2

4. Wed Mar 2 13 · Work session

   Workshop

   Project 2 work session and desk crits

5. Mon Mar 7

   No class — Spring Break

6. Wed Mar 9

   No class — Spring Break

7. Mon Mar 14 14 · Work session

   Workshop

   Back from break: Project 2 work session

8. Wed Mar 16 15 · Work session

   One-on-one meetings, and workshop

   Individual project reviews while the room works. The beauty readings begin

   Reading

   • Bowles, "Beauty in Web Design, part 1"
   • "The Web Aesthetic" A List Apart

9. Mon Mar 21 16 · Work session

   Workshop

   Project 2 work session; the beauty readings continue

   Reading

   • Bowles, "Beauty in Web Design, part 2"
   • Norman, "Affordances and Design"

10. Wed Mar 23 17 · Work session

    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

11. Mon Mar 28 18 · Critique

    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.

1. Wed Mar 30 19 · Work session

   Your work

   Turning toward the portfolio: what you have, what it says about you

2. Mon Apr 4 20 · Seminar

   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 list six pieces, collected

3. Wed Apr 6 21 · Workshop

   Portfolios: inspiration, aspiration, and limitations

   What a portfolio is for, and what the good ones do

4. Mon Apr 11 22 · Workshop

   Portfolios: patterns in code

   The portfolio's common structures, taken apart in code

5. Wed Apr 13 23 · Work session

   Showing your work: portfolio workshop

   Work session: the portfolio's content before its chrome

6. Mon Apr 18 24 · Work session

   Project 3 workshop

   Work session and desk crits

7. Wed Apr 20 25 · Workshop

   Cross-browser testing, and workshop

   The work checked where it will actually be seen

8. Mon Apr 25 26 · Work session

   Workshop and snippets

   Work session; useful patterns traded as code snippets

9. Wed Apr 27 27 · Work session

   Final workshop

   Last working day before crits

10. Mon May 2 28 · Critique

    Project 3 crits: final day of class

    The portfolios presented; the semester closed

The exam window

1. Dec 8 to 14 Final

   Final critique: the portfolio

   The portfolio presented; attendance at critique mandatory