Digital & Emerg Media Design I

Instructor: Geoff Silverstein

During this course we will learn to speak a new language—that of screen-based craft.

This course is an introduction to the world of web and interface design principles. Through lectures, readings and discussions we will analyze interfaces from the perspectives of both user and designer, dissecting our experiences with digital media in order to achieve a greater understanding of interactive design and usability. At the same time, in-class labs, exercises, and projects will allow students to acquire essential technical skills and welcome experimentation, frustration, and discovery as natural components of the creative process.

Tentative Key Dates:

  • Wed, Feb 10: Project 1 Assigned
  • Wed, Mar 16: Project 1 Due
  • Mon, Mar 14: Project 2 Assigned
  • Wed, Apr 25: Project 2 Final Critique
  • Mon, May 02, 11:59 pm: Project 2 Due

All dates and future assignments are subject to change. Check back regularly for up-to-date information

Class 01: Mon, Jan 11

Introductions & Class Overview
Modern Web Design & This Course
Slack, Adobe Creative Cloud, Sublime Text, and Cyberduck
FTP & Exercise 01

Due at Class 02:

Class 02: Wed, Jan 13

How the Web Works
Start Exercise 2
Review Codepen Demo

Due at Class 03:

Mon, Jan 13: Martin Luther King, Jr. Day, No Class

Class 03: Wed, Jan 20

Photoshop for image processing
Links & Images Start Exercise 3

Resources:
css-tricks.com’s Quick Reminder About File Paths
coffeecup.com’s Absolute vs. Relative Paths/Links
The Pocket HTML Tutorial Chapter 2. Markup Basics - Links

Due at Class 04:

Class 04: Mon, Jan 25

Class Cancelled: Snow Day

Class 05: Wed, Jan 27

CSS Basics

Due at Class 06:

Class 06: Mon, Feb 01

HTML5 and CSS Layout

Due at Class 07:

Class 07: Wed, Feb 03

CSS Positioning

Due at Class 08:

Class 08: Wed, Feb 08

We need good TYPE.

These Resources are vital:

Due at Class 09:

Class 09: Wed, Feb 10

Design, Ideation, and Sketching

Project 1

Due at Class 10:

  • Gather inspiration and create 3 distinct mood boards based on your article.
    • You can create these by hand or digitally
    • Print your mood board on an 8.5x11 sheet of paper and bring all 3 with you to class
  • Read The Lost Art of Thumbnail Sketches
  • Create at least 3 different thumbnail sketches of how your site might be structured
  • Use grid paper for these sketches.

Class 10: Mon, Feb 15

SNOW

Due at Class 11:

Class 11: Wed, Feb 17

Designing, Designing

Due at Class 12:

  • Revise your thumbnail sketches into a polished wireframe using pencil and paper, or photoshop.
  • Using your chosen Mood Board as reference and inspiration create an initial Style Tile in Photoshop, that establishes your typographic choices and includes:
    • 1 Heading Style
    • 1 Paragraph of Text
    • 1 In-line link
    • 1 Button
    • At least 1 image
    • 3-5 Color Swatches
  • Save both as pngs using the Save for Web or Export dialog in Photoshop. Then create a new folder in your server space called p1-drafts, and upload both images to it. Then post the links to the images for your Wireframe and Style Tiles (2 links total) to the Submissions channel in Slack.

Class 12: Mon, Feb 22

Review for quiz and refine our work.

Due at Class 13:

  • Create an initial Photoshop layout of your webpage. Upload a PNG of your mockup at 72dpi to the Submissions channel in Slack.

Class 13: Wed, Feb 24

Start Building

Due at Class 13:

  • Refine your Photoshop mockup
  • Complete initial HTML and CSS layout of your webpage.
    • Review Project 1 Instructions.
    • Utilize the project Starter Files.
    • Focus on layout, not color or typography. Create the structure for you page. Start big and work small.
    • There is plenty of time for refining details later; everything needs to be in its place first.
    • Read Krug Chapter 4 and 5
  • Post a link to your draft site in our Slack #submissions channel

Class 14: Wed, Feb 24

In-Class Work

Due at Class 14:

  • Style all your content including color, typography, and images.
  • Upload site files to your course FTP space and
  • Start checking that your HTML and CSS validate.
  • Post a link to your site in our Slack #submissions channel.

Class 15: Wed, Feb 24

In-Progress Critique (format TBA) and In-Class Working

Due at Class 14:

  • Refine your Project 1 site in accordance to the project requirements.
  • Ensure your HTML and CSS validate.
  • Post a link to your site in our Slack #submissions channel.

Class 16: Mon, Feb 29

In-Class Critique

Due at Class 16:

  • Post an updated link to your Project 1 site in our Slack #submissions channel

Class 17: Wed, Mar 02

1 on 1 Critique

Due at Class 16:

  • Post an updated link to your Project 1 site in our Slack #submissions channel

Mar 06-13: Spring break; no class

Class 18: Mon, Mar 14

In-Class Workshop

Due at Class 17:

  • Project 1 Due:Post a link to your Project 1 site in our Slack #submissions channel no later than 5:20 p.m.

Class 19: Wed, Mar 16

Project 1 Critique

Due at Class 18:

Class 20: Mon, Mar 21

Review Krug Reading Through Chapter 7

Introduce Project 2

Brainstorm Project 2 Ideas

Due at Class 21:

  • Review Project 2 Instructions, and choose your topic.
  • Complete the UX survey on behalf of your client. You'll need to copy and paste the questions into a new document to begin.
  • Read Krug Ch 8.
  • Start gathering content

Class 21: Wed, Mar 23

Prepare for Quiz 3

Design Trends

Due at Class 18:

  • Site content, text and imagery
  • Comprehensive site map.
  • Read Krug Ch 9.

Class 22: Mon, Mar 28

Concept Critique

Studio Working Time - Come Prepared

Due at Class 19:

  • Sketch your site, start with thumbnail sketches
  • Then sketch full-scale wireframes
  • Read Krug Ch 10

Class 23: Wed, Mar 30

Due at Class 20:

  • Create detailed, full-scale wireframes in photoshop or illustrator
  • Create 2 unique moodboards to inform possible visual directions for your upcoming design
  • Read Krug Ch 11

Class 24: Mon, Apr 4

Due at Class 25:

  • Based on your chosen Mood Board, create a detailed Style Tile for your site
  • Revise wireframes based on feedback
  • Download and complete Exercise 8

Class 25: Wed, Apr 6

Due at Class 26:

  • Refine your style tile based on feedback
  • Create pixel-perfect Photoshop or illustrator mockups of your homepage and 1 interior page
  • Read Krug Ch 12 and 13

Class 26: Mon, Apr 11

One on One Critiques

Due at Class 27:

  • Update your designs with serious refinement.

Class 27: Wed, Apr 13

Remember Code?

Due at Class 28:

Class 28: Mon, Apr 18

In-Class Studio Time

Due at Class 29:

  • Revise your initial code structure based on feedback.
  • Build the remaining initial html files for you site
  • Fully style your homepage (remember you should have a fully functioning site, finished for our April 25 critique)

Class 29: Wed, Apr 20

In-Class Studio Time

Due at Class 30:

  • Your complete site ready for critique. Post a link in the submissions channel on Slack by 5:20pm on Monday, April 25 in order for your site to be critiqued in class.

Class 30: Mon, Apr 25

Full Class Final Critique

Finished Project 2 Due Monday, May 02, 11:59 p.m. (EST)

  • Refine your site with feedback and thoughtful reflection after our final critique,
  • Ensure you follow all project instructions and all files are properly uploaded to your server space, then
  • Email a link for your final site to geoff@american.edu with the subject line, “Project 2 Final Site”, and post a link to the submissions channel in slack to share with the class.