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)
Wednesday, April 28, 2010
Sunday, April 25, 2010
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)
2. Work on Project 1: DVD Menu Screen designs (final designs due next class, Wednesday, April 28, 8am)
Tuesday, April 20, 2010
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)
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)
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)
Heads of State (poster design)
Sunday, April 18, 2010
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
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.
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.
Tuesday, April 13, 2010
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)
2. Work on Mood Board + Concept Style Document for Project 1 (due next week, 8AM Monday, April 19)
Sunday, April 11, 2010
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)
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.
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
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
Tuesday, April 6, 2010
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.
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.
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
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
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
Sunday, April 4, 2010
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
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.
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
'
Yutaka Loves London
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.
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.
Subscribe to:
Comments (Atom)