Week 11 Day 1 (June 14) - Homework

1. Continue to work on Design Phase for Project 2. Keep in mind final project is due in 2 days, June 16.

You must submit the following files on CD/DVD by June 16, 8AM.

- Flowchart (PDF)
- Wireframe (PDF)
- Moodboard (PDF)
- Design documents (original PSD or AI files)
- PDF of final app design
- HTML files of roughly functioning app (with images folder)

Week 10 Day 2 (June 9) - Homework

1. Continue to work on Design Phase for Project 2. Keep in mind final project is due in 7 days, June 16.

You must submit the following files on CD/DVD by June 16, 8AM.

- Flowchart (PDF)
- Wireframe (PDF)
- Moodboard (PDF)
- Design documents (original PSD or AI files)
- PDF of final app design
- HTML files of roughly functioning app (with images folder)

Week 10 (June 7) - Homework

1. Continue to work on Design Phase for Project 2. Keep in mind final project is due in 9 days, June 16.

Notebook Assignment #9: Usability Analysis

List and explain three specific ways you can to improve usability in your app design. Be sure your visual choices and aesthetic appropriately appeals to your target audience.

Submit assignment no later than the start of next class, 8AM, June 9. Worth 10 points.

Week 8 Day 2 (May 26) - Homework

1. Continue to work on Design Phase for Project 2. 4 screens will be reviewed and tested in usability groups in 1 1/2 weeks, June 7, 8AM.
2. Complete Notebook Assignment #8, due no later than next class, June 2, 8AM

Notebook Assignment #8: App Comparison

Pick an iPhone app similar to the type of app you are designing for Project 2 (see resources below) and answer the following questions.

1. What existing iPhone app have you chosen? What does your existing app do? In what ways is it similar to your own app design/concept? In what ways is it different?

2. Save 4 different screenshots from your chosen existing app. If no screenshots are available, you can also sketch out the main components (buttons, brand/logo, text boxes, graphic areas) for 4 different screens.

3. Explain how the interface design choices of your existing application have successfully been executed, despite the constraints and limitations of a mobile device. Think about how these design choices increase ease in usability and how the information architecture increases usability effectiveness.

4. List three things you can do in your own app design (for project 2) that will improve usability and appeal appropriately to your target audience of the project.

Include screenshots/sketches in a word document with your answers to each question

Submit assignment no later than the start of next class, 8AM, June 2. Worth 10 points.

TapFancy - iPhone/iTouch app gallery
iPhone Apps
Best Apps for Kids -kids mobile app reviews

Week 8 Day 1 (May 24) - Homework

1. Continue to work on Design Phase for Project 2. 4 screens will be reviewed and tested in usability groups in two weeks, June 7, 8AM.

Week 7 Day 2 (May 19): Homework

1. Work on Design Phase for Project 2.
2. Study for quiz on Chapter 2 from Designing Interfaces

More project resources

Parents using smartphones to entertain kids
Joan Ganz Cooney Center - Advancing Children's learning in a digital age

Week 7 Day 1 (May 17): Homework

1. Work on Mood Board + Concept Style Document for Project 2 due Wednesday, May 19
2. Study for quiz on Chapters 3-5 in Don't Make Me Think + Mobile Device Interface lecture

More Mobile App Resources

Best Apps for Kids -kids mobile app reviews



iPhone Screen Templates

Week 6 Day 2 (May 12) - Homework

1. Identify target audience (list demographic characteristics, interests, behavior patterns, etc.) Must research and interview appropriate target audience (to be completed as Word document by Monday, May 17).

2. Conduct research on nutrition and exercise for Project 2 (due next Thursday)

3. Submit Notebook Assignment #5: Mobile App Analysis, due 1PM, Monday, Nov 15.

Notebook Assignment #7: Mobile App Analysis

Find an existing mobile app and answer the following questions.

1. What mobile app have you chosen? What does your app do? Why did you choose this app (based on content, based on good interface design, based on usability?)?

2. Identify which category your application falls under: Utility, Productivity or Immersive?

3. Save 4 different screenshots from your chosen application. If no screenshots are available, you can also sketch out the main components (buttons, brand/logo, text boxes, graphic areas) for 4 different screens.

4. Explain how the interface design choices of your application have successfully been executed, despite the constraints and limitations of a mobile device. Think about how these design choices increase ease in usability and/or affect the overall experience. Be sure to consult today's lecture presentation and be specific in your examples.

Include screenshots/sketches in a word document with your answers to each question.

Submit assignment no later than the start of next class, 8AM, May 17. Worth 10 points.

Week 6 Day 1 (May 10) - Homework

Begin brainstorming for Project 2


1. Determine what type of application you will be designing, a game or a tool (due Wednesday, May 12)


2. Identify target audience (list demographic characteristics, interests, behavior patterns, etc.) Must research and interview appropriate target audience (to be completed as Word document by Monday, May 17).


3. Begin research process on nutrition and healthy lifestyle choices. Keep track of resources for bibliography. Wikipedia is not an acceptable resource  (to be completed as Word document by Monday, May 24).

Smartphone App Project (Project 2)

A. Objective
Create an innovative, fun and engaging smartphone application that encourages children directly or through their parents to make more nutritious food choices and be more physically active.

B. Specifications
1. Smartphone application should be in the form of either: a) a game that educates through engaging the user in an entertaining experience or b) a tool that empowers users to access, sort, track, or better understand data in ways that will inform user behavior.

2. Application must incorporate at least one of the following nutrition and health concepts:

• Increasing fruit and vegetable consumption
• Making food group education fun
• Understanding calories and energy balance
• Increasing choices of foods with high nutrition value and decreasing amounts of foods with solid fats, added sugars, and sodium
• Identifying and consuming proper food portion sizes
• Being more physically active
• Balancing physical activity and food intake

3. Project scope should include a minimum of 8 well-designed screens/sections.

4. Screen size should be based on typical mobile device screen resolution. Size should be no larger than 480px width by 320px height. *Set color mode to RGB.

5. All concept and art work must be original. Please respect copyright laws. Any images or graphics not your own must be covered under Creative Commons.
C. Due dates
Flowchart + wireframe – due Monday, May 17
Mood Boards + Concept Style Guide – due Wednesday, May 19
Midpoint Design Critique (4 screens) – due Monday, June 7
Final Designs (8 screens) – due Wednesday, June 16

D. Deliverables
1. During Midpoint and Final critiques, students must present designs as a single PDF file (no PSD files will be accepted during presentations)

2. For final presentation, student must submit a data disc that shall include:

• Final Design Files (PSD or AI files)
• Final Design PDFs
• Digital documents or scans of planning assets (flowchart, wireframe, mood board, concept style guide)

E. Grading criteria based on the following categories:

• Communication
• Usability
• Design Aesthetics
• Technical Skill
• Accuracy in Project Requirements

Project 2 is worth 30% of your course grade


Nutrition Resources
Apps for Healthy Kids
Let's Move!
USDA Nutrition Tips
Jamie Oliver's Food Revolution
MyPyramid Blast Off
KidsHealth.org

Smartphone + Mobile Devices Resources
HTC
Nexus One
iPhone + iPod Touch

iPhone Apps
TapFancy - iPhone/iTouch app gallery
iPhone Apps
AppCraver

Week 5 Day 2 (May 5) - Homework

1. Complete Notebook Assignment #6: iPhone App Analysis by next class, 8AM, Monday May 10
2. Read Chapters 3-5 from Don't Make Me Think (there will be NO QUIZ on Monday)

Notebook Assignment #6: iPhone App Analysis

Pick an iPhone app (see resources below) and answer the following questions.

1. What iPhone app have you chosen? What does your app do? Why did you choose this app (based on content, based on good interface design, based on usability?)?

2. Save 4 different screenshots from your chosen app. If no screenshots are available, you can also sketch out the main components (buttons, brand/logo, text boxes, graphic areas) for 4 different screens.

3. Identify at least 3 interactive design principles (DO NOT use simplicity as a design principle) utilized in EACH of your screen sketches AND specifically explain how the principle was used to increase ease in usability or affected the overall experience.

Include screenshots/sketches in a word document with your answers to each question

Submit assignment no later than the start of next class, 8AM, May 10. Worth 10 points.

RESOURCES
TapFancy - iPhone app gallery
Apple Apps for iPhone

Week 5 Day 1 (May 3) - Homework

1. Continue to work on DVD build for Project 1. Keep in mind project is due in 2 days, Wednesday May 5, 8:30AM.

You must submit two DVDs on Wednesday.

- Final functioning DVD project (built and burned via DVD Studio Pro)
- Data DVD/CD with flowchart (PDF), wireframe (PDF), moodboards (PDF), Design documents (PDF), DVD Studio Pro project folder

Week 4 Day 2 (April 28) - Homework

1. Study for Quiz (covering Chapter 4 from Designing Interfaces)
2. Work on Project 1- refine screen designs and build authoring process (final functioning dvd due next week, Wednesday, May 5, 8am)

Week 4 Day 1 (April 26): Homework

1. Read Chapter 4 from Designing Interfaces
2. Work on Project 1: DVD Menu Screen designs (final designs due next class, Wednesday, April 28, 8am)

Week 3 Day 2 (April 21): Homework

1. Read Chapter 9 from Designing Interfaces + study for Quiz (covering Chapter 9)
2. Complete Notebook Assignment #5: Typography by next class
3. Work on Project 1: DVD Menu Screen designs (final designs due next Wednesday, April 28, 8am)

Notebook Assignment #5: Typography

Choose a strong and appropriate typeface that characterizes each of the companies listed below. Type out each company name in your chosen typeface and include a brief explanation (2-3 sentences as to why your style choices (typeface, color, size, spacing, etc) effectively communicate the essence of each client. and/or

Some factors to take into consideration when choosing a typeface:

- Is this typeface appropriate for this content?
- Is this typeface appropriate based on the chosen company (based on company’s description and background research)?
- How will this type treatment successfully engage the audience?
- How can you take advantage of color, size, style, width, and weight to influence the typeface characterization?

*Do not let tacky design or preconceived font association influence your typeface pairing.

1. BoConcept (contemporary and modern furniture in New York City, SoHo district)

2. Piazza Discepolio Fine Wine (Fine Wine and food merchant in Cincinnati since 1989)

3. Apps For Healthy Kids (website that promotes software tools and games that drive “tweens” [ages 9-12] to eat better and be more physically active.)

4. Oakland Nature Preserve (Florida non-profit organization, located in the wetlands, seek to inspire children and adults to become stewards of the natural environment)

Typography Resources

Typography in Motion from ilovetypography.com on Vimeo.


Typography from Ronnie Bruce on Vimeo.

League of Moveable Type - Free Open Source Type
Smashing Magazine - 80 Beautiful Typefaces
IloveTypography.com - Excellent articles and resources
So You Need a TypeFace? - flowchart by Julian Hansen

Best Quality (Free) Fonts

15 beautiful fonts (Smashing Magazine)

Designer Daily's recommended free fonts

Modern + Cool free fonts

Heads of State (poster design)

DVD Menu Design Studios

eyeframe.co.uk
companywideshut.com
thepavement.com
gorkenterprises.com

Week 3 Day 1 (April 19) - Homework

1. Work on Project 1: DVD Menu Screen designs (final designs due next Wednesday, April 28, 8am)
2. Read Chapter 9 from Designing Interfaces.
3. Complete notebook assignment 4 by next class

Notebook Assignment #4 : DVD DESIGN

Pick a RES DVD and answer the following questions.

1. Sketch out the main components (buttons, brand/logo, text boxes, graphic areas) for 4 different screens (i.e. main menu, scene selection, audio settings).

2. Identify at least 3 interactive design principles (i.e. visual hierarchy, alignment, simplicity, etc) utilized in each of your screen sketches AND specifically explain how the principle was used to increase ease in usability or affected the overall experience.

Submit assignment no later than the start of next class, 8AM, April 21. Worth 10 points.

Week 2 Day 2 (April 14) - Homework

1. Read Chapter 1 from Designing Interfaces + study for Quiz (covering Chapter 1)
2. Work on Mood Board + Concept Style Document for Project 1 (due next week, 8AM Monday, April 19)

Week 2 Day 1 (April 12) - Homework

1. Read Chapter 1 from Designing Interfaces
2. Complete Notebook Assignment 3: DVD Menu Analysis
3. Complete Wireframe + Flowchart for Project 1 (due next class, 8AM Wednesday, April 14)
4. Work on Mood Board + Concept Style Document for Project 1 (due next week, 8AM Monday, April 19)

Notebook Assignment #3: DVD Menu Analysis

Pick a DVD menu interface and answer the following questions.

1. What movie/TV show's DVD menu have you chosen? Why did you choose this DVD menu (based on concept, based on menu interface design, based on usability?)?

2. How intuitive was the menu experience? Did you have a hard time navigating to particular sections? Would you restructure the organization of content? Why or why not?

3. Sketch out the main components (buttons, brand/logo, text boxes, graphic areas) for 3 different screens (i.e. main menu, scene selection, audio settings).

4. Identify at least 3 interactive design principles (i.e. visual hierarchy, alignment, simplicity, etc) utilized in your DVD menu interface AND explain how the principle was used to increase ease in usability or affected the overall experience.

Submit assignment no later than the start of next class, 8AM, April 14. Worth 10 points.

Design Resources

Online Tutorials
PSDTuts
Smashing Magazine
VectorTuts

Image Inspiration
ffffound.com
We Heart It
vi.sualize.us
Flickr.com

Color Resources
ColorLovers
ColorJack Sphere

Free Textures
Bittbox
CGTextures

Week 1 Day 2 (April 7) - Homework

1. Read Chapter 1 + 2 from Don't Make Me Think
2. Study for Quiz (covering Chapter 1 + 2 from DMMT)
3. Bring in your favorite DVD menu to class.

Notebook Assignment #2: Flowchart

Create a flowchart that diagrams the multiple ways a user can interact with a DVD menu.

Start with the main menu and map out the various ways a user can navigate between different sections (ie play full movie, choose a particular scene, watch extras, etc) of the DVD. Make sure to be very specific and map out ALL possible scenarios of the DVD menu interaction.

Flowchart will be due (printed or hand drawn) at the beginning of the next class, Monday, April 12.

Flowcharts and Wireframes

• Wireframes are blueprints of a website/interactive project.
• Help you plan out the placement of the specific elements/content on your page and well as map out how your project will function.
• Wireframes are created before the actual layout design
  
• Typically wireframes are non-graphical.

Examples

FLOWCHART EXAMPLES

DVD Project

A. Objective
Create an interactive DVD menu for RES magazine’s new hybrid magazine format.

B. Background
RES was a bi-monthly magazine that launched in 1997. It featured cutting edge film, music, art, design and culture. Originally it was targeted as "The Magazine of Digital Filmmaking". A few years later the magazine evolved into a lifestyle magazine for creators covering the fields of film, music, art and design. All issues of the magazine had been bundled with a DVD that is sent to subscribers. The DVD featured short films, music videos and music. A new hybrid magazine format was supposed to be launched by RES in 2007, and was intended to be published in several media.

C. Technical Requirements
1. DVD menu must contain the following:
a. Main Menu (screen with navigation of AT LEAST THREE sub-menus)
b. One article from a past issue of RES (taken from res.com or from back issue)
c. Image gallery (made up of  6 or more stills collected from films/music video featured by RES)
d. Video Menu that lists 3 or more videos

2. You must design and digitally prep menu backgrounds and buttons. All background and button artwork must be original or copyright free.

3. Each of your buttons must have a normal state and a hover state

D. Deliverables
1. Working DVD with all assets in place (burned in DVD Studio Pro)
2. Digital process: Digital documents or scans of planning assets (flowchart, wireframe, etc) – to be submitted on data DVD
3. All working files (PSD documents, DVD Studio Pro Files, etc.) – to be submitted on data DVD

E. Due dates
Flowchart + wireframe – due Wednesday April 14
Menu design- due Wednesday April 28
Final DVD – Wednesday May 5

Week 1 Day 1 (April 5) - Homework

1. Study for quiz on interactivity + design principles

2. Complete and submit notebook assignment by 8AM, Wednesday, April 7

Notebook assignment 1

Pick an interactive device you have used in the past week (example DVD, cell phone, ATM, online game) and answer the following questions.

1. Describe your device. What is the purpose or main function of using this device?

2. How did you know what to do with the device? Were there instructions or did you have to browse and figure it out by trail and error?

3. Sketch out the main components (buttons, brand/logo, text boxes, graphic areas) for 3 different screens.

4. Identify at least 3 interactive design principles utilized in your device's screen interface.

Submit assignment no later than the start of next class, 8AM, April 7. Worth 10 points.

Multimedia Interface Design

INTERACTIVE SITES
Yutaka Loves London

99 Rooms



APPLICATIONS
Sumo paint



Lovely Charts



DVD MENUS

School of Rock

'

Best of Blur

Course Schedule

WDIM110 Spring 2010 Course Schedule:

Week 1:
Interactive Design Principles
Flowcharts + Wireframes
Introduce DVD Menu project

Week 2:
Mood Boards + Style Guides
Photoshop Demo

Week 3:
Usability + Accesability

Week 4:
DVD Studio Pro demo

Week 5:
DVD menu project due

Week 6:
Introduce iPhone app project
User centered design

Week 7:
Information Architecture

Week 8:
Photoshop demo

Week 9:
HOLIDAY – MEMORIAL DAY
Usability testing

Week 10:
Studio day

Week 11:
iPhone app project due

**Instructor reserves the right to rearrange schedule depending on student and course needs.