Digital and Emerging Media Design II

Th 19 Jan #01

Topics

• Intro

Projects

• Start research for Farecard

M 23 Jan #02

Topics

• Interface examples
• Personas

Reading

• Read the syllabus, class schedule, starting and submitting, and citations and copyright.
• iPhone mute switch, New York Times and John Gruber
• Personas

Projects

• Research part 1 is due for Farecard.

Th 26 Jan #03

Topics

• Documentation, sketching, and prototyping
• Bring markers to class

Projects

• Farecard: turn in Research part 2 (email is good)

Reading

• How to succeed in this class
• The Skeptic’s Guide to Low-Fidelity Prototyping
• Norman, Design of Everyday Things, ch. 1

M 30 Jan #04

Topics

• Personas (in class)
• Signifiers, affordances, mapping, feedback, and conceptual models
• Consequences?

Projects

• Farecard: critique an initial pass on concepts; sketch more in class

Reading

• Skim the resources site and bookmark it
• Design of Everyday Things, ch. 4, “Knowing What to Do”

Th 2 Feb #05

Topics

• Usability testing

Reading

• Trump Exposes A Fatal Flaw In User-Friendly Design
• Dancing in a Hurricane (Thomas L. Friedman, New York Times)

Projects

• Continue work on Farecard; bring in about half a dozen screens as partial paper prototype

M 6 Feb #06

Topics

• Style tiles
•  Studio

Reading

• On Web Typography
• Radically Rethinking Design (Melody Kramer, NiemanLab)

Projects

• Continue work on Farecard, with studio work in class
• Usability testing for interface concept in class

Th 9 Feb #07

Topics

• Interaction, Internet history, and the 2016 presidential election
• Screen typography
• Layout and grids
• 📎 Type/grid exercise: Grid sheet (PDF)

Reading

• “We Know What You Did” from the Reply All podcast (audio or transcript)
• Optional: Ethan Zuckerman, The Internet’s Original Sin

M 13 Feb #08

Topics

• Pattern libraries
•  Studio

Reading

• RadioLab: Buttons Not Buttons (radio show)

From class

• Links to pattern libraries

Th 16 Feb #09

Topics

• Case study: Three Mile Island
• Text as interface

📎 Fix badly-written interface text (ZIP)

Reading

• Good Call-to-Action Buttons
• Writing instructions voters understand (PDF) (instructions 2, 4, 5, 6, 7, 8, 9, and 10 are generally applicable to all types of interface design)

M 20 Feb #10

Topics

• Handling mistakes

Projects

• Portfolio: Bring in images of your work to show

Th 23 Feb #11

Topics

• Design patterns

Projects

• Small group critiques

Reading

• (recommended) Communicating Design ch. 6 (flowcharts) and ch. 7 (wireframes)
• Naming files

From class

• Makaila: Coroflot, WhoIsHiring, Authentic Jobs, Intern Supply, Hacker Hiring Hunt

M 27 Feb #12

Topics

• Navigation (see slides (PDF))
• Web hosting, domain registrations, and DNS

Reading

• Organization Schemes
• Organization Structures

Th 2 Mar #13

Topics

• HTML/CSS typography
• Review HTML/CSS basics
• 📎 Typography demo (ZIP)
• 📎 Typographic variations exercise (ZIP)

Reading

• Communicating Design ch. 5 (site maps)
• Mixing Typefaces section of Thinking with Type site
• Optional: HTML/CSS videos on Don’t Fear the Internet (perhaps the “web typography” episode)

M 6 Mar #14

Projects

• Desk crits/studio work

Reading

• Overcast 3.0 design notes

Th 9 Mar #15

Projects

• Desk crits/studio work

M 20 Mar #16

Projects

• Look at printed booklets for Farecard
• Critique for Farecard
• Start Highly local

Th 23 Mar #17

Topics

• Mobile first as an approach
• Review HTML/CSS
• Mobile and multidevice design
• OO CSS and the media object
• 📎 Responsive site demo (ZIP) and complete (ZIP)

M 27 Mar #18

Topics

• Mapping

📎 Map demo (ZIP)
🔗 Running a web server on a Mac
🔗 Maki icons

Th 30 Mar #19

From class

• 📎 Better CSS demo (ZIP)
• Rachel’s fortune cookie

Projects

•  Local: critique/workshop in class

M 3 Apr #20

Topics

• CSS :hover

📎 Basic site (ZIP)
📎 Hover demo, complete (ZIP)

Projects

• Local: Critique/workshop in class
• Local: explain site structure w. flowchart, site map, or low-fi wireframes

Th 6 Apr #21

Topics

• Layout workshop
• Making and breaking the box II
• 📎 Responsive/contextual layout exercise (ZIP)

Projects

• Local: Show three design approaches (use style tiles or hi-fi wireframes)

M 10 Apr #22

Topics

• CSS animations
• 📎 CSS animations (ZIP) (see docs for transforms and transitions)

Projects

• Local: Refine one approach, using hi-fi wireframes or prototype HTML/CSS; show rough designs for interior pages.

Th 13 Apr #23

Topics

• Information architecture
• Portfolios

Projects

• Local: Show final design for site and initial HTML/CSS
• Start Portfolio

M 17 Apr #24

Topics

• JavaScript/jQuery (recap)
• 📎 JavaScript: jQuery documentation
• Build slideshows w example images

Projects

• Local: Continue HTML/CSS development
• Portfolio: Begin uploading images and text

Th 20 Apr #25

Topics

• UCD, IxD, UX, IA, content strategy? What do all these abbreviations mean?

M 24 Apr #26

Topics

•  Studio

Th 27 Apr #27

Topics

• Discussion: what could user experience design be?

Reading

• Conversation with Don Norman About UX & Innovation
• Jesse James Garrett diagram (PDF) (look at)
• Mark Boulton, “Visual Design is Not a Thing”
• The (Mostly) True Story of Helvetica and the New York City Subway (very optional, but read it someday)

Projects

• In-progress critique/studio work

M 1 May #28

Projects

• Local: Present semifinal site in live HTML/CSS
• Portfolio: Present semifinal site