Assignment 8 - Visual Design
Overview: 🎨 High-Fidelity Visual Design Assignment
Section titled “Overview: 🎨 High-Fidelity Visual Design Assignment”You’ve already completed your user research, defined your problem space, and created a mid-fidelity prototype of your app. Now it’s time to move into the Visual Design stage — transforming your wireframes into a polished, high-fidelity interface that’s ready for usability testing and handoff.
This assignment focuses on applying visual design principles to bring creativity, clarity, hierarchy, personality, and brand consistency to your product.
Requirements
Section titled “Requirements”1. Brand Identity Essentials
Section titled “1. Brand Identity Essentials”Create or refine the core visual identity for your app, including:
- Logo
- Primary logo
- Optional: secondary/compact version
- Splash Screen / App Loading Screen
- Incorporate the logo and visual theme
- Consider accessibility (contrast, visibility, simplicity)
2. Visual Style Definition
Section titled “2. Visual Style Definition”Document and apply your visual design system across your high-fidelity screens.
Color Palette
Section titled “Color Palette”- Define primary, secondary, and accent colors
- Include neutrals (grays, backgrounds), states (success, warning, error), and interaction colors
- Provide hex values for all colors
- Ensure WCAG contrast standards where applicable
Typography
Section titled “Typography”- Choose a font pair (e.g., heading + body)
- Define usage rules (H1–H6, body text, captions, labels)
- Establish scale, weight, and spacing guidelines
UI Styles
Section titled “UI Styles”- Buttons (default, hover, pressed, disabled)
- Inputs, text fields, dropdowns
- Cards, modals, navigation bars, tab bars
- Icon style (line, filled, rounded, etc.)
- Spacing rules (padding/margins), grids, and layout patterns
You may express these in a style guide page inside Figma or a separate design system file.
3. High-Fidelity Screens
Section titled “3. High-Fidelity Screens”Using your mid-fidelity prototype as a foundation, convert your core flows into polished high-fidelity designs.
Minimum required screens:
- Onboarding / Splash
- Home screen
- At least 1 main feature flow (3–5 screens)supporting your primary and secondary scenarios
- Any supporting screens needed for the flow to acheive your usability testing
Apply consistent color, typography, spacing, and component styles throughout.
4. Prototype Update
Section titled “4. Prototype Update”Update your Figma prototype with:
- Real UI components
- Transitions/animations where appropriate
- Microinteractions (optional but encouraged)
5. Submission
Section titled “5. Submission”Submit the following in Figma:
- Your visual style guide (logo, colors, typography, components)
- Your high-fidelity screens
- Your updated clickable prototype
- A short design rationale (300–500 words) explaining your visual choices and how they support usability, hierarchy, and the brand’s personality.
Evaluation Criteria
Section titled “Evaluation Criteria”- Visual consistency and cohesion
- Brand creativity, clarity and personality
- Accessibility considerations
- Alignment between visual decisions and UX goals
- Craftsmanship: spacing, alignment, detail
- Prototype usability and clarity
- 1/1 review with Professor to enhance your work
Submission
Section titled “Submission”Access BS LMS and navigate to Activities > Assignments. Select Visual Design. On the assignment page in BS LMS, provide a link to your Figma file and click the submit button. Make sure that your professor can access the Figma file with edit rights.