Week 3 Day 2 - Thursday, Jan 29 - Homework

Intermediate Interaction Design Section

1. Work on Design Comps for Project 1. Be sure to take advantage of the provided Foundation graphic stencils and Foundation web icons from the Design Resources folder in Dropbox.

Design Comps for all major sections due for formal class critique in two weeks, Tuesday Feb 10.

**We will conduct some Foundation Component demos next class.

---

Advanced Interaction/Experiential Design Section

1. Work on further research, case study analysis and initial design components. We will not be officially meeting next Thursday, Feb 5, so if possible stop by for mini progress checks during Tuesday, Feb 3.

Week 3 Day 1 - Tuesday, Jan 26 - Homework

1. Conduct Recycling Survey with at least 6 people that fits within the project target audience. Bring your tabulated surveys to class for group discussion on Thursday. 

2. Put together a Mood Board for Project 1. 

Mood Board should address 1) color scheme options [type, background, link states color, etc], 2) typography choices [primary + secondary typefaces], and 3)inspirational imagery that address style and aesthetically initial concepts that you plan on utilizing in your design comps.

Save board as a PDF for review at start of next class.

Week 3 Day 1: Responsive Web Design Case Study Discussion

Pick a website from the following list to review in today's class discussion:

http://worldwildlife.org/
http://www.jibevisuals.com/
http://www.hardlycode.com/
http://www.fijiwater.com/
http://minimalmonkey.com/
http://www.alchemy-digital.co.uk/
http://360gardalife.com/it
http://anxietyfight.com/
http://foodsense.is/
http://winshape.org
https://www.projectlist.com/
http://iconfactory.com/
https://www.warbyparker.com/
http://www.thebolditalic.com/
http://www.brooklynbridgepark.org/
http://designawatch.mijlo.com
http://food52.com/
http://fitstar.com/
http://skinnyties.com
http://www.barclays.com/
http://ajahnbrahm.org/
http://osmiaorganics.com/
http://www.vans.com/
http://www.starwars.com/
http://www.giftly.com/
http://www.express.com/
http://www.parrot.com/usa/
http://www.swatch.com/en/
https://glassoptical.co/

Interaction Design Resources

Foundation Design Resources + Templates
Foundation GUI Kit (PSD) by Ole Fredrik Lie F5
Design Templates for Foundation by Doug Harrington
Yeedeen by Vincent Chan
Foundation: Responsive Resources + Articles
Foundation HTML Templates 

Design Resources + Templates 
WebTuts
Smashing Magazine
960 Grid system templates
ColorLovers 
Adobe Color CC
Freeimages.com (Stock Photos)
Image After (Free textures + Images)
Creative Commons search
Google Fonts
Lorem Ipsum Generator

Web Design Blogs + Articles
Researching Your Design Project
Sketching and Your Design Workflow

An Introduction to Composition

Adding Space to Your Design
All About Grid Systems
Intro to Color Theory
Selecting Color Scheme
Understanding the Characteristics of Color
Principles of Successful Button Design
Common Mistakes in Website Design
The What, Why and How of Textures in Web Design
Visual Direction (great article that addresses design choices and its influence on usability)
Understanding the F-Layout
Understanding Split Layer Design
Jakob Nielsen (usability expert)

Typography Articles
Beginners Guide to Choosing Fonts
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

 

Week 2 Day 2 - Thursday, Jan 22- Homework

For Intermediate Section

1. Complete Wireframe, Sitemap + Thumbnail sketches (at least 5 potential layouts with rough sketch for each uniquely content specific sections of Project 1). Present digitally or physically by start of next class.

2. Use Recycling Survey (document in dropbox>intermediate folder) to conduct user research with at least 10 different people. Bring responses to class next Tuesday for discussion.


Feel free to use Survey Monkey to keep track of responses digitally in a survey.

For Advanced Section

1. Complete Wireframe, Sitemap + Thumbnail sketches (at least 5 potential layouts with rough sketch for each uniquely content specific sections of Project 1). Post this as Week 3 Update on your blog by end of next Tuesday's class.

John Maeda + Jakob Nielsen Resources

 

Laws of Simplicity (blog)

SLIP Tool

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

Get In There And Sketch...

Close Photoshop and Grab a Pencil: The Lost Art of Thumbnail Sketches

Why You Should Be Sketching (Even if You Can’t Draw)

Week 2 Day 1 - Tuesday, Jan 20 - Homework

For Intermediate Section


Exercise: Measuring Successful Usability (Homework)
Using the provided Usability Survey sheet below, conduct a thorough usability test on the Lewis Clark Recyclers Inc website.

Bring your completed survey to next class in preparation for a class discussion regarding website usability.

Upload your own completed Usability Survey in  dropbox>Intermediate>Ex1 folder by start of next class.

Download Usability Testing Survey (PDF)

For Advanced Section

1. Complete Project Proposal using template (download proposal template from dropbox>Advanced folder). Bring printed copy for review next class.

2. Also create a Project Blog that will be shared with me and your fellow advanced section peers. Post the text contents of your project proposal as your first post by start of next class. You will be expected to post project developments during your independent work days in AAS 103 (starting next Tuesday, and each following Tuesday, unless advised otherwise). Competition of weekly project blog posting will impact Studio Practices portion of grade.

You may use any blog site of your choice, i.e. blogger, tumblr, wordpress) (due for review start of Thurs. class).

Week 1 Day 1 - Homework - Thursday, Jan 15

1. Complete Student Profile and email or submit on dropbox by end of today.

2. Spend (only) 20 minutes to refine the best thumbnail sketches into a final design sketch that incorporates all of your best problem solving to fulfill the clients requirements of this 10 x 10 exercise. Design concepts for your top ideas must fit on letter sized paper.

Bring all work created for 10x10 exercise (mind mapping, 100 sketches , 1 final sketch), for group discussion next class. Please also write up a brief summary (2-3 sentences) for your final sketch to explain final design solution. 

Overall keep in mind how does this packaging design for an organic and affordable energy drink best target the the well-off 20 year old, professional target audience? 

3. Will hold an HTML/CSS/Dreamweaver bootcamp tomorrow Friday, Jan 16 (11:30-1:30pm) and another one Friday, Jan 23 (1:00-3:00pm). Please let me know if you plan on attending.

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 (including digital works)

Submit work in person to the Ridenbaugh Art Gallery (first floor of Ridenbaugh Hall) this Thursday + Friday, January 15-16 (12:00-5:00pm) and next Tuesday + Wednesday January 20-21  (12:00-5:00pm)

Software Resources

Although there will be some desktop computers available in the classroom with Adobe Software, computers are limited to a first come first serve basis. If you are interested in using your own laptop in class (or using your own computer at home) here are some resources for software purchasing.

**FYI: We will be using Adobe Photoshop, Illustrator, Dreamweaver throughout the semester (roughly 4 months)

Adobe Creative Cloud Student Subscription ($19.99 special promo pricing for first year) 
Includes: Adobe Creative Cloud includes Photoshop, Illustrator, InDesign , Acrobat Pro, Flash Professional, Dreamweaver, Premiere Pro, After Effects CS6, Audition CS6, Muse, Edge, Encore, Bridge, Media Encoder and more

Syllabus and Student Profile

Download Syllabus

Download Student Profile (fill out and submit via email rfujita@uidaho.edu by end of first class session)