Digital and Emerging Media Design I

Tu 17 Jan #01

Topics

• Introduction to design for interaction

Projects

• Start Communicating design ★

Hey!

There’s reading due for next class! It’s listed under next class’ entry.

Tu 24 Jan #02

Topics

• Capturing meaning with HTML/CSS typography
• GitHub and workflow for this course

📎 First site: Basic site (ZIP), Shape of Design excerpt (TXT), Text Fixer

Reading

• Read the syllabus, class schedule, starting and submitting, and citations and copyright.
• Frank Chimero, Designers vs Coding
• HTML & CSS, ch. 1 (available for download)

Projects

• Start Recipe ★

F 27 Jan #03

Topics

• The box model
• Typographic markup (lists and inline elements)
• A first look at links

Reading

• Don't Fear the Internet:
  Not a Series of Tubes video
• HTML & CSS, ch. 2, 3
• How to succeed in this class

Projects

• Bring in a recipe
• Continue work on Communicating design

Tu 31 Jan #04

Topics

• Classes and IDs
• Typographic controls in CSS
• Bring scissors or a craft knife

Reading

• Skim the resources site and bookmark it
• Naming files
• Optional: Lynda.com intro to managing files and folders (sign in through AU library site)

Projects

• Present Communicating design ★

Tu 7 Feb #06

Topics

• File structure

📎 Layout/typography demo (ZIP), complete (ZIP)

Reading

• UX Sketching
• The Lost Art of Thumbnail Sketches
• Facebook and Twitter Contend With Their Role in Trump’s Victory (Sarah Frier, Bloomberg Technology)

Projects

• Complete all HTML and some design/CSS for Recipe; some studio work in class

F 10 Feb #07

Topics

• Images
• Recap links

📎 Links demo: Links files (ZIP)
📎 Positioning and image demo: Example vector images (ZIP); Complete image demo (ZIP)

Reading

• HTML & CSS, ch. 5

Projects

• Start Content and form ★

Tu 14 Feb #08

Topics

• Notes on file structure and submitting work

Reading

• HTML & CSS ch. 16 (layout)

Projects

• Turn in Recipe ★
• Present two or three possible articles for Content and form

F 17 Feb #09

Topics

• Positioning, DIVs, and boxes
• Multicolumn pages

📎 Multicolumn layout demo: start (ZIP), complete (ZIP)
🌄 Grid slides (PDF)

Projects

• Content and form: gather material. Bring collections of several dozen items (images, colors, patterns, type, and the like). Please print out your material and pin up.

Reading

• On Web Typography

Tu 21 Feb #10

Topics

• Sketching and process
• GitHub workflow (set up Content and Form)

📎 Sketch templates (PDF)

Projects

• Content and form: present three options for design concept as style tiles

F 24 Feb #11

Topics

• Grids and visual relationships
• Building layouts

📎 Layout exercise: start (ZIP)

Projects

• Content and form: present refined version of one design concept

Reading

• Frank Chimero, What Screens Want

Tu 28 Feb #12

Topics

• Information architecture, navigation, naming, and site maps
• Color models
•  Studio

Reading

• HTML & CSS ch. 18

F 3 Mar #13

Topics

• Watch Objectified

Reading

• Don’t Make Me Think ch. 6

Tu 7 Mar #14

Topics

•  Studio

Projects

• Show three or more design concepts (sketches, type samples, color schemes, and image samples) and two or more site maps, printed out for pinning up. After this class, aim to be working on live HTML/CSS.

Reading

• Don’t Make Me Think ch. 2, 3

F 10 Mar #15

Topics

•  Studio

Reading

• Don’t Make Me Think ch. 4, 5
• Optional: Descendant selectors (see also enormous list of selectors on MDN.)

Projects

• Content and form: During class, plan code and move to HTML/CSS.

Tu 21 Mar #16

Topics

• HTML/CSS menus

📎 Navigation demo: start (ZIP), complete (ZIP)

Projects

• Content and form: add content

F 24 Mar #17

Plan

• Backgrounds, shadows, and details

📎 CSS details, complete (ZIP)
📎 Selector/background demo (ZIP), complete (ZIP)

Projects

• Content and form: add remaining content

Tu 28 Mar #18

Projects

• Small-group technical consultations for Content and form

F 31 Mar #19

Projects

• Critique for Content and form
• Turn in Content and form ★
  (upload to Dropbox)
• Start Conference ★

Tu 4 Apr #20

Topics

• Mobile/multidevice

📎 Responsive demo: start (ZIP), complete (ZIP)

Projects

• Conference: present ideas

F 7 Apr #21

Topics

•  Studio

Projects

• Conference: in second half of class, critique site maps, three style tiles, and rough sketches for internal pages

Tu 11 Apr #22

Topics

•  Studio

Projects

• Conference: show final style tiles and layouts for internal pages

F 14 Apr #23

Topics

• Intro to JavaScript

JavaScript intro: jQuery documentation,

📎 Basic JavaScript + jQuery demo (ZIP), complete (ZIP)
📎 JavaScript scene demo (ZIP)
🌄 JavaScript slides (PDF)

Tu 18 Apr #24

Topics

• JavaScript: evaluating and using an existing script
• CSS transforms and transitions

📎 Script: Unslider demo (ZIP), complete (ZIP)

F 21 Apr #25

Topics

•  Studio

Projects

• Conference: critique HTML/CSS work (finished typographic system, navigation system, and one page layout)

Tu 25 Apr #26

Topics

• Coding accessibile sites
• Design for accessibility
• Website hosting and CMS concepts

📎 Accessibility example (ZIP)
🌄 Hosting slides (PDF)
🌄 CMS slides (PDF)

F 28 Apr #27

Topics

•  Studio

Classes

• Last group critique for projects