You will begin developing a high-fidelity prototype based on the feedback gathered from your low-fidelity prototype evaluation. The goal is to create polished, functional UI designs and to conduct a heuristic evaluation to assess the usability of your prototype.
Topics
- Hi-Fi Prototype
- Figma Recap
– Autolayout, Variables, Components, Slots
– Micro interactions (e.g., button state change)
– Animation(e.g., loaders, spinners)
– Modes (e.g., dark/light mode and compact/relaxed mode) - Image generation using ChatGPT, Adobe Firefly
- Video generation using Sora
Studio Activities
- Start developing Hi-Fi prototype in Figma
- Make sure to organize your components using the Atomic Design Framework e.g., Atoms (headings, paragraphs, icons, buttons, etc.), Molecules and a Template Use variables and local styles to maintain consistency (typography, spacing, and components)
- Feel free to use this starter template: https://www.figma.com/design/XDwy1GW08PDi8Yx6HRSZNS/UX-Project-Portfolio?node-id=2842-129&t=9GxCIGv8pVPUctiW-0
Useful Links
Figma
- Figma Tutorial: https://youtube.com/playlist?list=PLv3Jx2LapDOulLcenPYxpiOc21AuSGqiV&si=S9G0klhMyDrg79su
- Instagram prototype file: https://www.figma.com/design/JmuNpz7sxlDSdQMA0WI4OY/Instagram-UI-Design?node-id=24-429&p=f&t=9GxCIGv8pVPUctiW-0
- Figma Release Notes: https://www.figma.com/release-notes/
- Apple UI Kit: https://www.figma.com/community/file/1527721578857867021
AIX Design
- AIX Examples, AIX Design patterns, actionable cheatsheets: https://www.aiverse.design/browse
- Free online introduction to AI for non-experts: https://www.elementsofai.com/
- AI-powered applications:
AI image generation
- https://www.adobe.com/products/firefly/ai-generated-examples/image-prompts.html
- Microsoft: Image Prompting 101
Sora [Discontinued] Tutorials: https://academy.openai.com/public/collections/sora-tutorials-2025-03-11