Let's Talk
Teaching

User Interface

This advanced course uses research, user flows, visual systems, and prototypes to help students design interactive experiences. Students move from icon and identity systems into app concepts, screen sequences, data displays, and motion-supported presentations.

Virdeau interface project preview with a green branded vehicle mockup, repeated logo pattern, and navigation buttons.

Course

AD 418: Interactive Design and User Experiences

Institution

Northern Michigan University

Level

Advanced interactive design

Primary tools

Figma, Illustrator, Photoshop, After Effects

Course logic

Research becomes usable interaction.

The course treats interface design as a series of decisions: who the work is for, what path they need to follow, how information should be organized, and how visual systems make that path feel clear.

Research and Flows

Students begin with briefs, audience needs, personas, user flows, and information structure before resolving the final screen language.

Systems and Screens

Identity, iconography, components, hierarchy, and interaction patterns are treated as one connected interface system.

Prototype and Test

Figma prototypes, critique sessions, and user feedback help students test whether an interaction makes sense before polishing the final presentation.

Assignment sequence

From icon systems to interactive displays.

The assignments move from a smaller interface design into larger prototypes. Students practice identity, iconography, screens, flows, data organization, motion, and presentation as connected parts of an interactive system.

01

Logomarks, icons, app screens

Icon Do It!

Students create two distinct brand directions for one mobile app business, then build logomarks, icon sets, and screen mockups that show how each identity could function in an interface.

Tachyon first visual direction shown as a final app presentation mockup.
Tachyon first identity direction sheet with interface brand elements.
Tachyon second visual direction shown as a final app presentation mockup.
Tachyon second identity direction sheet with interface brand elements.
Pixel interface direction shown in a device mockup.
Pixel interface direction opening screen.
Pixel interface direction secondary app screen.
Sci-fi interface direction shown in a device mockup.
Sci-fi interface direction opening screen.
Sci-fi interface direction secondary app screen.
Fun visual direction shown as an app presentation mockup.
First identity direction sheet for the fun and energetic project.
Energetic visual direction shown as an app presentation mockup.
Second identity direction sheet for the fun and energetic project.
Accessible movie app direction shown in a presentation mockup.
Accessible movie app opening screen.
Accessible movie app playback screen.
Entertaining movie app direction shown in a presentation mockup.
Entertaining movie app opening screen.
Entertaining movie app playback screen.
02

Briefs, user flows, prototype

UI/UX Design Challenges

Students choose or write an app brief, develop StyleScapes and a user flow, then build a high-fidelity Figma prototype supported by identity, visual system, and promotional design.

Selected outcomes

03

Data, motion, interactive display

Info Expo

Students design an expo experience with a brand system, motion logo, physical or digital mockup, and an interactive data-driven infographic for a large display.

Selected outcomes

Methods

How prototypes get sharper.

Students work through briefs, research, diagramming, visual exploration, critique, testing, and revision so the final prototype is supported by both concept and use.

Brief to Flow

Projects move from audience framing and research into user flows so structure comes before surface-level screen styling.

Component Thinking

Students are asked to reuse visual decisions across icons, navigation, type, screens, and prototypes so the interface feels coherent.

Critique and Testing

Feedback focuses on what a user can understand, where the interaction breaks down, and how the next revision can make the path clearer.

Related course areas