Choose Your Level
Pick the difficulty that matches where you are. You can come back and try a harder level later.
Redesign a Settings Page
Take a cluttered settings page and redesign it using visual hierarchy and whitespace.
Design a Dashboard UI
Design a high-fidelity analytics dashboard with data visualisation and filters.
Dark Mode Conversion
Convert a light-mode design to dark mode, handling contrast, elevation, and states.
UI Visual Design & 8pt Spatial Grid Systems
Visual design creates aesthetically captivating, functional digital interfaces. Design leads evaluate candidates on applying 8pt spatial grid systems, establishing clear typographic scales, balancing visual contrast and hierarchy, and crafting responsive UI layouts.
1. Pixel-Perfect High-Fidelity Desktop & Mobile UI Designs
Polished Figma screens featuring consistent spatial padding, harmonious color palettes, and clear visual hierarchy.
2. Visual Hierarchy & 8pt Spatial Grid Specification
Specification document detailing layout grid rules (8pt/4pt increment grid), layout columns, and margin gutters.
3. Typography Scale & Color Style System
Style guide establishing modular font scale hierarchies and accessible semantic color systems.
Frequently Asked Questions (UI Design & Visual Design)
Why is the 8pt Spatial Grid System the industry standard in UI design?
8 divides evenly across almost all modern screen resolutions (1920x1080, 1440x900, 375x812), preventing fractional pixel rendering bugs and maintaining clean spatial alignment.
How do you establish clear visual hierarchy on a dense UI screen?
Vary font sizes, weight contrast (bold vs regular), spatial margins, and color intensity to guide the user's eye naturally to the primary CTA.
What is the 60-30-10 color rule in UI design?
60% dominant neutral background color, 30% secondary brand structure color, and 10% vivid accent color reserved exclusively for primary interactive CTAs.
Explore Design & UX Career Paths
Build proof of work across other topics or view full career roadmaps mapping technical skills to hiring expectations.