Week 4 Day 2 - Thursday, Jan 31 - Homework

1. Begin Layout Design Process. Home page layout due for review next class, Tuesday, Feb 5, 8:30am. Be sure to include actual text and image content (no placeholders or lorem ipsum) in design. Include variation of home page layout that visualizes various link states (normal, hover)

Keep in mind PDF of 6 different pages/sections for project 1 due for review in two weeks, Tuesday, Feb 12, 8:30am.

Typography and the Web

Typography Articles
List of Web Safe Fonts
List of Special Characters in HTML
Typography Speaks Louder Than Words
Why Typographic Choices Make a Difference
How to choose a Typeface
What Font to use?
Combining Typefaces
Type Guidelines and References for the web {great article by Smashing Magazine}
I Love Typography {articles, resources, fonts}
Web Font Services: The Good, Bad and Ugly

Web Type Services

@font-face kit generator

Google Web Fonts
Adobe TypeKit

More Web Font Embedding Services {via Smashing Magazine}

Font Foundries {not all fonts are created equal, and should not have been created at all}
Emigre
League of Moveable Type
Berthold Types
Font Shop

Don't Know What Font it is? Try WhatTheFont.com

Fixed, Liquid, Responsive Layout and Design

Fixed (width) Layout
All containers on the page have defined widths (pixels). A fixed (width) layout will not move in and out when you resize your browser window.

Fixed Layout example {via Max Design}


Fluid/Liquid Layout
All containers on the page have their widths defined in percents. Containers adjust in size (shrink/expand) based on browser window size.

Fluid/Liquid Layout Example {via Twitter Bootstrap}


Responsive Liquid Layout
Content containers react like liquid layouts, but sizing is determined by device characteristics. Device figures out browser window size and changes how the page appears (re-size images and optimize layout) in relation to the dimensions of the browser.

Adaptive Liquid Layout
Content containers react like liquid layouts, but sizing is determined by device characteristics. Web server (where web documents are hosted) detect device attributes (browser window size) and loads a version of the site that is optimized for its dimensions and native features.

Device Resolution Reference {via SpireLight Media}
960 grid system (grid templates for Fireworks, Photoshop and Illustrator available}
Liquid Grids the Easy Way {via Max Design}
Responsive Web Design by Ethan Marcotte {via A List Apart}
Web Aesthetics by Paul Robert Lloyd {via A List Apart}

Foundation 3 (Responsive Design created using CSS Framework system created by ZURB)
Twitter Bootstrap (Responsive Design created using CSS Framework system created by Twitter)

Design Tutorial Resources
WebDesign Tuts (visual focused tutorials)
PSD Tuts (interface focused tutorials using Photoshop)
Vector Tuts (interface focused tutorials using Illustrator)

Week 4 Day 1 Homework: Moodboard + Resources

1. Create a digital mood board for Project 1 (due next class, 8:30, Thursday, Jan 31. The overall visuals presented in your mood board should address the following:

• Visual theme (via inspirational images)
• Color scheme (what colors will you use, between 2-5 colors)
• Textures (subtle backgrounds, visuals used to enhance depth/contrast)
• Type styles (font family, primary font vs secondary)

The visual language used in your moodboard should pre-empt your layout design ideas for project 1. Be sure to consider legibility, usability,  and visual hierarchy throughout the design process.

Articles and Resources

Why Moodboards Matter {via webdesignerdepot.com}

25 Pro Tips for Moodboards {via creativebloq.com}

How a Website is Built: Design {via New Fangled Web Developers}

Pinterest

Style Tiles (style board template)

Project Proposals & Evaluations

Please download Project Proposal template from dropbox

Alternative to Writing Project Proposals...Project Evaluations {by Jonathan Wold via SmashingMagazine}

Tips to writing project proposals/evaluations

1)Do Research (read through all pages, read and analyze all content and quality of content, be sure to understand organization goals)

2) Outline the scope of the project(specifics of what will be done in planning, design, build and testing phases of project;apply Laws of Simplicity and SLIP and SHE models, list specific problems and solutions of site)

3) Create a timeline for the project (when design, content prep, development, testing deadlines will take place)

Week 3 Day 2 - Thursday, Jan 24 - Homework

1.Work on Planning & Conceptual Phase of Worst of the Web Project. Print outs of Project Proposal/Evaluation, Wireframes, Flowchart for chosen site re-design due for review Tuesday Jan 29, 8:30am. See proposal, wireframe and flowchart resources for examples.

Project Proposal/Project Evaluation should address

• Target Audience
• Summary of Website Goals/Mission
• Design/Usability problems and solutions

1)Do Research (read through all pages, all content, understand organization goals)
2)Outline the scope (what work will be done to project;apply SLIP and SHE model, list specific problems and solutions)
3)Create a timeline for the project (design, content prep, development, testing)

2. Begin gathering inspirational imagery and graphics to be assembled for Moodboard (due next Thursday). Collage based Moodboard (print or digital) or Project Specific Pinterest Board will be acceptable review formats. Be sure to take into consideration, color schemes, typographic styles (primary and secondary), inspirational style choices (photographs, textures, visual style).

Flowchart and Wireframe Resources

Flowchart Examples

Do you Need a Designer Flowchart {by Sabine Ahrens}

So You Want to Watch a Holiday Movie {by lemon.ly}

Lovely Charts (Free Online Flowchart and Wireframe application)
Sample flowchart from Wired.com
Another sample flowchart from Wired.com
Should I make more coffee? Flowchart

Image Copyright Flowchart
Fantastic flowchart diagraming the importance of getting permission to post copyright images online. Created and designed by Pia Bijkerk Erin Loechner and Yvette van Boven.

Wireframe Examples

Inspiration Feeds- 25 Examples
Zurb article about wireframe process, tips on design sketches, and sketching with intent/purpose


Flexible Framework and Prototyping
The Future of Wireframes
Foundation 3 --Created by Zurb flexible framework for building prototypes and production code on any kind of device

Group Discussion from Tuesday, Jan 22

Attributes of Effective Websites

After today's group discussion regarding the usability survey and reflection #2 assignments, the following list was generated to cite examples of top characteristics of good website design (based on design, usability and content related issues).

• Clear and straight forward branding /identity 
• Use of visual cues for links/buttons
• Consideration in text content (limited in amount, and width span)
• Visual consistency (styles, brand styles, placement of content)
• Each page is content focused (type of content/info serves a strong purpose for each page)
• Layout design is visually clean and to the point
• Content is visually engaging (dominance in color, imagery)
• Limit in amount of information presented at once
• Use of visual hierarchy
• Navigation is consistent and easily accessible
• Strategic organization/categorization in navigation elements
• Fast loading time (optimized media that is small in file size)
• Information should be helpful based on users needs and expectations
• Balanced/harmonious color scheme

Week 3 Day 1 (Tuesday, Jan 22) - Homework

1. Select a pre-existing (arts & culture) website the exhibits examples of poor usability, ineffective design, and/or flawed web development standards. Take 3 screen shots of website of choice and write up 5 examples of usability, design issues. This will be reviewed at start of next class.

Project 1: Worst of the Web

Download Project 1 specifications

Description:

Select a pre-existing (arts & culture) website the exhibits examples of poor usability, ineffective design, and/or flawed web

development standards. You will be asked to assess and analyze both content, design and development choices of your

chosen website, and create a new site that improves both design and development issues.

Objective:

+ Apply interface design fundamentals and principles to aide in creative problem solving

+ Assess current interactive design case studies and apply usability, design and programming standards

+ Use industry standard web authoring tools

 Specifications:

+ Design layout should meet usability standards and current web design best practices.

+ All art work and media assets must be original and/or copyright free. Imagery should be optimized via Fireworks.

+ All web pages are to be generated with Dreamweaver or a text editing application.

+ Scripting languages to be used: HTML, CSS, and JavaScript. No table, td, tr tags allowed.

+ If using other programmer’s code, please cite author and source

+ Your website should be browser compliant in Safari, Internet Explorer and Mozilla Firefox.

Deadlines:

Concept Phase: Print out of Project Proposal, Wireframe, Flowchart due Tuesday Jan 29, 8:30am.

Design Concept Phase: PDF of Moodboard due Thursday, Jan 31, 8:30am.

Layout Design Phase: PDF of final design specs due Tuesday, Feb 12, 8:30am.

Development Phase: Week 6-, Final project review due Thursday, Feb 28, 8:30am.

Grading criteria (20% course grade):

Design Aesthetics —40% of project 1

Technical Skill—20% of project 1

Usability—20% of project 1

Accuracy in Project Requirements—10% of project 1

Process (Flowchart, Wireframe, Sketches, Mood Board, Usability Testing)—10% of project 1

John Maeda + Jakob Nielsen Resources

Laws of Simplicity (blog)

Jakob Nielsen
User Testing Methods
Identify your Target Audience
Information Architecture Report

Class Exercise: Mind Maps of Website Categories

Week 2 Day 2 - Thursday, Jan 17 - Homework

In your original groups from the Mind Mapping Website, recommend to the person sitting on your right, a website you visit daily. For homework spend at least 10 minute browsing and navigating through this team-member recommended website and answer all questions on the Usability Survey. Bring completed Usability Survey to start of next class (Tuesday, Jan 22).

Download Usability Testing Survey (word doc)
Download Usability Testing Survey (PDF)

Week 2 Day 1 - Tuesday, Jan 15 Homework

Reflection Exercise #2: Experiences with the web
Write a one page summary about a positive and negative experience you've had with two different websites.

Consider a positive  experience you've had with a website you visit frequently? When did you first visit the website, and why do you continue to use it? What features do you most appreciate (content, design, organization, etc).

Then consider a negative experience you've had with a poorly developed website? What made your experience unpleasant? What features or aspects made the interaction a poor one (content wise, design wise, organizational wise?)

Lastly, make a list of 5 specific factors that make up a successful website example.

Call for Submissions for UI Undergraduate Juried Art Exhibition

Call for submissions for the Undergraduate Juried Art Exhibition. Work from all disciplines encouraged. 

Entry fee is $5 per student. You may submit up to three pieces of work. All mediums are accepted. Submit work in person to the Ridenbaugh Art Gallery (first floor of Ridenbaugh Hall)

• Friday, January 11 (12:00-4:00pm)
• Monday, January 14 (12:00-4:00pm)
• Tuesday, January 15 (12:00-4:00pm)

Course Introductions: Week 1

Download Syllabus
Download Course Schedule

Homework

1. Take Learning Styles Quiz here (click on "start quiz" blue link). Email results to instructor by next class.

2. Bring laptop and required materials to next class.

3. Sign up for a dropbox account (via dropbox.com) and accept dropbox invitation from me by next class.

4. Submit the following reflection exercise as a Word document by next class, Tuesday,  Jan 15, 8:30am in the class Dropbox Folder.

Reflection Exercise #1: Why Interactive Media?
Write a one page essay about why you are interested in working with interactive and web based mediums? How do you hope to incorporate interaction design into your existing creative field? Think of 3 specific measurable goals you hope to accomplish by then end of the semester.