This week, you will begin developing high-fidelity prototypes informed by the feedback gathered from your Think Aloud tests. The goal is to transform your low-fidelity wireframes into polished, functional designs that clearly and consistently communicate the program’s identity. You will also conduct a Heuristic Evaluation to assess the usability of your prototype before the final next week.
Topics
- Figma Advance
- Micro interactions: e.g., button state change
- Animation: e.g., randomization on page load
- Modes/Variables: e.g., Color themes (dark/light mode), compact/relaxed mode
- …
- Moodboard
Class Activities
Start developing high fidelity prototype.
- Duplicate your wireframe file and rename it “Hi-Fi Prototype”, or create a new Figma file with that name to start fresh. Your hi-fi prototype must:
- Use local styles (e.g., bold, italic, shadows, etc.)
- Apply variables for size, spacing, and color
- Follow Atomic Design principles (atoms, molecules, organisms, templates, pages)
- This is your chance to get creative, finally you can focus on crafting an engaging user experience. Look at competitor or related websites for inspiration and best practices.
- [OPTIONAL] If you are planning to follow OU’s design guidelines, creating a moodboard will be super helpful.
