What's that attendance policy again?

4 absences = final course grade is dropped one full letter grade

5 absences = final course grade is dropped two full letter grades

6 absences = final course grade is dropped three full letter grades

7 absences = Fail

Excessive texting or tardies will be counted as absences.

Week by Week

This schedule is subject to revisions to adjust to pace. Please always pay attention in class for date changes.

 

Schedule

Week 1

1/14 – Syllabus--Course description, policies, deadlines, and grading. Design process: http://designingfortheweb.co.uk/book/part2/part2_chapter6.php

[HOMEWORK: READ CH 6-10]

Usability.gov design process: http://www.usability.gov/methods/process.html

Networking to the teacher’s station.

1/16 – History, Basic HTML+CSS.

Lecture History of Web Aesthetics and Graphics, "Digital Style History: The Development of Graphic Design on the Internet" (from the IT University of Copenhagen, Denmark)

-- Basics of Graphic Design
-- Color (uie_vs87_color.pdf)
-- Color chapters from your book: http://designingfortheweb.co.uk/book/part4/part4_chapter16.php

 

Week 2

1/21 – Martin Luther King Day--NO CLASS!

1/23 – Lecture User Experience (UIE_VS52_Storytelling.pdf),

--Discuss Layout: http://designingfortheweb.co.uk/book/part5/part5_intro.php
Blocks, Gestalt, 80/20 rule, Content, Links, and Images

 

Week 3

1/28 – Assignment 1 Colors Using Photoshop Colors Using Kuler 5 block HEX and extended RGB color ranges. See: http://web.njit.edu/~kevin/rgb.txt.html

Create 5 new color schemes using your own fabricated color systems based in Kuler, Photoshop, Powerpoint, etc. Choose 3 to create homepage designs. (You can use the same layout, just change colors.) With the same layout, apply a NEW color scheme based on color picking from an uploaded photo. (Hint: use eyedropper tool in Photoshop.) So overall you will have 3+1=4 homepage versions, each with a different color scheme.

Tutorials for Kuler: http://www.youtube.com/watch?v=p43iwAjkg0w (using Photoshop) http://www.youtube.com/watch?v=77HozeDQrFg (using Photoshop)
http://www.youtube.com/watch?v=j4kSJuxKjKk (without Photoshop)

 

1/30 – Production on Screen. (Those of you who know Photoshop can have a work day for assignment 1. Those of you who need a review, we will meet together.)

 

Week 4

2/4 - Critique

2/6 - Typography http://designingfortheweb.co.uk/book/part3/part3_intro.php

Lecture History of Web Fonts vs. Print Fonts:

The fundamentals of type space in web space. Recent developments of web font freedom using Font APIs such as Google’s offerings: https://developers.google.com/webfonts/

More fun lessons on typography:

http://www.youtube.com/watch?v=eKKDL6lekmA

http://www.youtube.com/watch?v=1Xg5O0l7ybY

http://www.youtube.com/watch?v=tWFWJGA7qrc

http://www.youtube.com/watch?v=pis96aJRSiw

 

Week 5

2/11 – Assignment 2: Web Layout - Using the Grid, Alignment, Proximity, and Similarity

- Assignment Instructions: Photoshop Layout Design Exercise. Create a mockup of ONE homepage and ONE interior page for the same site. Be mindful of color, typography and use of the grid.

Please put effort into "doing the math" to get a strong grid layout. (This is why you do not have to do 3 mockups--I want you to put the extra time into that brain work.) IF YOU CHOOSE TO REBEL against the grid, be prepared to make a strong argument as to why, and be prepared to defend what you did INSTEAD to create harmony and unity.

2/13 - Production The Grid. In your book: http://designingfortheweb.co.uk/book/part5/part5_chapter23.php

- We’ll look at how industry professionals like Khoi Vinh breaks down the grid structure: http://tinyurl.com/977qozq

- Alternatives to the grid, and why you might use them: Renaissance compositon, Hieronymus Bosch, spatial sites, Webby Award winning sites, http://www.huesculpture.com/, etc.

- Wireframe Models of the test group, due next class. Organized Design: Using Photoshop to create and design on a grid, etc.

- Hierarchy + Layout + Spatial Indicators Organized Data: Using Photoshop Layers to create and design on a grid, etc.

 

Week 6

2/18 - Production Organized Design: Using Photoshop to create and design on a grid, etc. See 2/11 for assignment instructions.

2/20 - CRITIQUE ON LAYOUT ASSIGNMENT

 

Week 7

2/25 – Lecture: Data Visualization

Edward Tufte – http://www.edwardtufte.com/tufte/books_vdqi

TED talk: http://www.seomoz.org/blog/data-visualization-principles-lessons-from-tufte

- Hierarchy http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/
http://vimeo.com/40102598

- Semiotics http://www.youtube.com/watch?v=rEgxTKUP_WI

- Avoiding Optical Noise
http://vimeo.com/54888833
http://www.youtube.com/watch?v=QD0j2I5TOYw

DISCUSS MID TERM ASSIGNMENT:

- "Circle and the Dot" Small Group Assignment -- tell a story with shapes

 

2/27 – Review MID TERM INSTRUCTIONS. Work on group assignment.

 

Week 8

3/4 – Work on group assignment

3/6 – MID TERM CRITIQUE

Homework over Spring Break: take photos topic TBA.

 

Week 9

3/11 – Spring Break – Be Safe!

3/13 – Spring Break – Be Safe!

 

Week 10

3/18 – Web Graphics Image Preparation: Bitmap vs. Vector. In class assignment to prepare 25 images for a web gallery.

Introduce Batch Actions in Photoshop for resizing, Save For Web.

3/20 – Persona Development --work in groups

 

Week 11

3/25 – Information Architecture

-- Divide into groups - Making a navigation tree from an existing site – then improve it.

-- Proving your theory on a test group. Bring index cards.

-- Before and After

-- Use the “new and improved” link navigation and apply it to a redesign

3/27– Group Presentations on information architecture improvements.

 

Week 12

4/1 – STARTING YOUR FINAL PROJECT:

--Redesign an existing site, but create the site for a RADICALLY DIFFERENT PERSONA. Included a mock bio and a sketch of your persona with your final presentation.

--OR Design a 5+-page site for a New Mexico attraction. Include persona mock bio and sketch with final presentation.

--In either case, Consider layout, color, typography, information architecture. Create static iterations using Photoshop.

--In either case, include a data visualization. Consider how data might serve your site. (Government stats, visitor data, marketing analytics, 3D archaeological visualization, mapping plant specimens, etc.) Review articles and video from Week 7 and do independent research on the web. Also consider use of Google Fusion.

 

4/3 – Work Day on design / redesign project:

Create persona and create information architecture. If you are doing a redesign, outline/diagram differences between your proposal and original. (Use any method that makes sense to you.)

 

Week 13

4/8 – Critique of proposed architecture (the skeleton of the site). Present as site map in Word or as graphic.

AND

Critique of proposed persona. Present bio and sketch/picture.

 

4/10 - Work Day on redesign project: Work on static design in Photoshop, heeding feedback from Monday.

 

Week 14

4/15 – Intro to Dreamweaver/XHTML basics. (If you had Web Production with me or elsewhere, please help your peers.)

4/17 – CSS introduced. (If you had Web Production with me or elsewhere, please help your peers.)

 

Week 15

4/22 - Production Production Day for Final--RESEARCH DATA FOR DATA VISUALIZATION.

Demo on Google Fusion for those interested in using this tool for data viz.

What are other methods of creating data visualization?

 

4/24 - Production Production Day for Final

 

Week 16

4/29 - Production Production Day for Final

5/1 - Production Production Day for Final

 

Week 17

FINAL CRITIQUE:


FINALS WEEK – Wednesday, May 8, 11 am - 2 pm