Table of Content
Module 1
IDEATION AND SKETCHING
- The Course Overview
- User Needs + Business Need + Technology
- User Scenario and How Might We
- How Might We… Idea Generation
- Idea Grouping
- Idea Choice
LOW FIDELITY UI SKETCHING
- Technology, Rules, and Interaction
- User Interface Patterns
- Identify Usable UI Pattern
- Sketch a Solution Using a UI Pattern
- Review Interaction Sketch and Iterate
LOW FIDELITY PROTOTYPING
- Why Prototype – Invision and Others
- Why Use Invision App
- Prepare Prototype Screens
- Upload Images
- Connect Prototype
- Iterate and Share
TEST LOW FIDELITY PROTOTYPES
- Identify User Testers
- Share Prototype via Invision App
- Review Invision App Testing Feedback
- Iterate Prototype and Track Changes
Module 2
SKETCHING INTO WIREFRAMES
- The Course Overview
- Paper Sketch > Wireframe
- Sketch App and Setup
- Wireframe Assets
- Wireframes Pages – Idea Choice
SKETCH WIREFRAMING SYMBOLS AND PROTOTYPING
- User Interface and Sketch Symbols
- Sketch Layers and Labels
- PNG Exporting
- Refreshing InVision Prototype
HIGH-FIDELITY PROTOTYPING
- UI Styling and Sketch Symbols
- UI Style Guide
- Typography Styles H1- H6
- Color Styles and Hex Code
- Imagery and Composition
- Headlines and Copy
- PNG Exporting
- Refreshing InVision
INTERACTION DESIGN AND MOTION STUDIES
- Why Does Motion and Interaction Matter
- Review Motion Patterns
- Identify Areas That Need Animation
- Define Interactions and Motion Prototypes
- Separate Layers and Export Layer Assets
BUILD A MOTION PROTOTYPE
- Set Up Principle by Mac
- Upload/Import Assets
- Animate Components
- Iterate Animations and Re-Upload
- Export Video and Review