Menu Close

Core Principles: Visual Design for Interactive Media

Students delve into the intersection of information visualization and user interface design. Through the exploration of key principles and methodologies of these fields, students develop a working knowledge of the means by which dynamic media systemswebsites, games, information aggregators, mobile device applications, etc.organize, visualize and present information to the end users of screen-based media. Students learn and use industry methodologies to develop information-intensive interactive projects through a series of progressive assignments. Prerequisite(s): ITGM 120 or ITGM 122, ITGM 130.

GOALS:
1. Students will learn about the interconnections between information design and user interface design.
2. Students will gain exposure to the processes by which data sets are transformed into working knowledge.
3. Students will learn about and apply fundamental interface models.
4. Students will examine the specifics of information visualization.
5. Students will learn about the interconnections between information design and user interface design.

OUTCOMES:
1. Students will identify, research, organize and present data sets through digital and non-digital interactive forms.
2. Students will evaluate the appropriateness and success of information architecture and user interface solutions in existing products and digital artifacts.
3. Students will apply principles of user interface design and information visualization solutions for interfaces, websites, applications and data sets.

ITGM237

Presentation Schedule

WEEK 01
+ MONDAY:
- Introduction/Class Structure/UX Sketchbook+Templates/Lean UX
- Lecture 1: Visual Design -> Graphic Design -> Interactive Design
- Discussion and Hand-Out: Project 1, App/Site (Progression or Process)
+ WEDNESDAY:
- Sketching Workshop
- Figma Workshop
- Draw.io Workshop
- Project 1, Parts A + B: Brainstorming, Sketching, User Flow, Wireframing

WEEK 02
+ MONDAY:
- MLK DAY (This class will meet on Friday JAN 19)
- Lecture 2: Affordances and Signifiers
- Project 1, Parts A + B: Brainstorm and Sketching (UX templates/sketchbook), User Flow (draw.io)
+ WEDNESDAY:
- Project 1, Parts C + D + E: Med-Fi Wireframing + Link (Figma), Testing (picts and results report), High-Fi Comps (photoshop/illustrator)

WEEK 03
+ MONDAY:
- Lecture 3: Iconography and Universal Standards
- Project 1, Parts F + G: High-Fi Wireframing + Link (Figma), PPT that includes A-G

+ WEDNESDAY:
- Project 1: FINAL PRESENTATION
- Discussion and Hand-Out: Project 2, Kiosk (Process)

WEEK 04
+ MONDAY:
- Lecture 4: Design for Human Frailty (Raskin)
- Project 2, Parts A + B: Brainstorm and Sketching (UX templates/sketchbook), User Flow (draw.io)
+ WEDNESDAY:
- Project 2, Parts C + D + E: Med-Fi Wireframing + Link (Figma), Testing (picts and results report), High-Fi Comps (photoshop/illustrator)

WEEK 05
+ MONDAY:
- Lecture 5: Screen Typography
Project 2, Parts F + G: High-Fi Wireframing + Link (Figma), PPT that includes A-G
+ WEDNESDAY:
- Project 2: FINAL PRESENTATION
- Discussion and Hand-Out: Project 3, App/Site (Collection)

WEEK 06
+ MONDAY:
- Lecture 6: Design Systems (Material, Fluent, etc.)
- Project 3, Parts A + B: Brainstorm and Sketching (UX templates/sketchbook), User Flow (draw.io)

+ WEDNESDAY:
- Project 3, Parts C + D + E: Med-Fi Wireframing + Link (Figma), Testing (picts and results report), High-Fi Comps (photoshop/illustrator)

WEEK 07
+ MONDAY:
- Lecture 7: TBD
- Project 3, Parts F + G: High-Fi Wireframing + Link (Figma), PPT that includes A-G
+ WEDNESDAY:
- Project 3: FINAL PRESENTATION
- Discussion and Hand-Out: Project 4, App/Site (Open)

WEEK 08
+ MONDAY:
- Lecture 8: TBD
- Project 4, Parts A + B: Brainstorming, Sketching, User Flow, Wireframing
+ WEDNESDAY:
- Project 4, Parts C + D: Mid-Fi Prototype, Testing, Hi-Fi Visual Design, Hi-Fi Prototype

WEEK 09
+ MONDAY:
- Project 4, Parts C + D + E: Mid-Fi Prototype, testing, Hi-Fi Visual Design, Hi-Fi Prototype, PPT Presentation
+ WEDNESDAY:
- Project 4, Parts C + D + E: Mid-Fi Prototype, testing, Hi-Fi Visual Design, Hi-Fi Prototype, PPT Presentation

WEEK 10
+ MONDAY:
- Project 4: FINAL PRESENTATION
+ WEDNESDAY:
- Reflection and Final Review
- Final Polish and Revisions of Select Projects
- Prep File Final Submission Project

This concept must include a linear process. Your task will be to conceptually walk the user through the process, keeping them informed and aware of 1) how much there is to do 2) how much they have completed and 3) how much is left to complete. Implement some form of progression visualization. See example (FASFA, TURBOTAX, etc)

Process + Workflow:
A) Brainstorm and Sketching (UX templates/sketchbook)
B) User Flow (draw.io)
C) Med-Fi Wireframing + Link (Figma)
D) Testing (picts and results report)
E) High-Fi Comps (photoshop/illustrator)
F) High-Fi Wireframing + Link (Figma)
G) PPT that includes A-G
I) PRESENT FINAL
This concept must include a collection but more importantly, how the user navigates through the process. Your task will be to conceptually walk the user through the process. You are required to include a 1) search feature 2) a "featured" area 3) a list "screen" and a 4) detailed "screen". See example (FASFA, TURBOTAX, etc)

Process + Workflow:
A) Brainstorm and Sketching (UX templates/sketchbook)
B) User Flow (draw.io)
C) Med-Fi Wireframing + Link (Figma)
D) Testing (picts and results report)
E) High-Fi Comps (photoshop/illustrator)
F) High-Fi Wireframing + Link (Figma)
G) PPT that includes A-G
I) PRESENT FINAL
This concept must include a screen-based kiosk experience in a designated "environment" and have a physical engagement component (i.e. credit card swipe, touch-pad entry, fingerprint/face id, etc.) Use what you learned up to this point and engineer an intelligent and intuitive solution.

Process + Workflow:
A) Brainstorm and Sketching (UX templates/sketchbook)
B) User Flow (draw.io)
C) Med-Fi Wireframing + Link (Figma)
D) Testing (picts and results report)
E) High-Fi Comps (photoshop/illustrator)
F) High-Fi Wireframing + Link (Figma)
G) PPT that includes A-G
I) PRESENT FINAL
Process + Workflow:
A) Brainstorm and Sketching (UX templates/sketchbook)
B) User Flow (draw.io)
C) Med-Fi Wireframing + Link (Figma)
D) Testing (picts and results report)
E) High-Fi Comps (photoshop/illustrator)
F) High-Fi Wireframing + Link (Figma)
G) PPT that includes A-G
I) PRESENT FINAL

ITGM237: Dropbox Folder Structure:

ITGM237

+ ITGM237_Project1 (Progression App/Site)
—– [file] ITGM237_Proj1_Lastname_Firstname.pdf
—– [file] ITGM237_Proj1_Lastname_Firstname.rtf (Link to your Figma wireframes and prototype[s])
—– [folder] ITGM237_Proj1_Lastname_Firstname_Support_Files

+ ITGM237_Project2 (Collection App/Site)
—– [file] ITGM237_Proj2_Lastname_Firstname.pdf
—– [file] ITGM237_Proj2_Lastname_Firstname.rtf (Link to your Figma wireframes and prototype[s])
—– [folder] ITGM237_Proj2_Lastname_Firstname_Support_Files

+ ITGM237_Project3 (Kiosk Experience)
———– [file] ITGM237_Proj3_Lastname_Firstname.pdf
———– [file] ITGM237_Proj3_Lastname_Firstname.rtf (Link to your Figma wireframes and prototype[s])
———– [folder] ITGM237_Proj3_Lastname_Firstname_Support_Files

+ ITGM237_Project4 (Open Project)
———– [file] ITGM237_Proj4_Lastname_Firstname.pdf
———– [file] ITGM237_Proj4_Lastname_Firstname.rtf (Link to your Figma wireframes and prototype[s])
———– [folder] ITGM237_Proj4_Lastname_Firstname_Support_Files

—– ITGM237_Misc_Files

ALL FINAL FILES SHOULD BE TITLED:
ITGM237_ProjX_Lastname_Firstname.fileExtension

You can tiles the files that you place in the SUPPORT and MISC folders anything that you wish.

ALL SKETCHES MUST USE “UX SKETCHBOOK” TEMPLATES, BE IN INK (NO PENCIL), AND PHOTOGRAPHED OR SCANNED PROFESSIONALLY. NO EXCEPTIONS. These are available in THE UX SKETCHBOOK (Ex Libras) or at NetTemple.net (Free Online Store).