8.2 KiB
Checklist: Improving Visual Style
Systematic checks for visual design consistency and quality.
Spacing
Consistent rhythm creates visual harmony.
Spacing System
☐ Base unit defined — Usually 4px or 8px ☐ Scale established — e.g., 4, 8, 12, 16, 24, 32, 48, 64 ☐ Consistent application — Same spacing for same relationships
Spacing Types
☐ Padding — Space inside containers ☐ Margin — Space between elements ☐ Gap — Space in flex/grid layouts ☐ Gutters — Space between columns
Spacing Relationships
☐ Related items closer — Law of Proximity ☐ Unrelated items farther — Visual grouping ☐ Hierarchy through spacing — More space = more importance ☐ Breathing room — Adequate whitespace
Common Issues
- Inconsistent spacing between similar elements
- Too little whitespace (cramped)
- Too much whitespace (disconnected)
- Padding/margin not on the spacing scale
Colors
Color communicates meaning and creates hierarchy.
Color System
☐ Primary color — Brand/action color ☐ Secondary color — Supporting accent ☐ Neutral palette — Grays for text, backgrounds, borders ☐ Semantic colors — Error, success, warning, info
Color Usage
☐ Text colors — Primary, secondary, disabled, placeholder ☐ Background colors — Surface hierarchy (elevated, base, sunken) ☐ Border colors — Default, focus, error ☐ Interactive states — Hover, active, focus variations
Color Accessibility
☐ Contrast ratios — 4.5:1 for normal text, 3:1 for large text ☐ Not color alone — Don't rely solely on color to convey info ☐ Color blindness — Test with simulators ☐ Dark mode — Colors work in both modes
Common Issues
- Too many colors (lack of cohesion)
- Insufficient contrast
- Inconsistent semantic usage (different reds for errors)
- Color used as only differentiator
Elevation
Visual layers create depth and hierarchy.
Elevation Levels
☐ Level 0 — Base surface (no shadow) ☐ Level 1 — Slight elevation (cards, sections) ☐ Level 2 — Moderate elevation (dropdowns, popovers) ☐ Level 3 — High elevation (modals, dialogs) ☐ Level 4 — Highest elevation (toasts, tooltips above modals)
Shadow Properties
☐ Consistent direction — Light source consistent ☐ Blur radius — Increases with elevation ☐ Spread — Usually minimal ☐ Opacity — Decreases with distance ☐ Color — Usually dark gray/black, can be colored
Elevation Usage
☐ Interactive elements — Buttons may elevate on hover ☐ Overlay content — Modals, drawers clearly elevated ☐ Sticky elements — Headers/navs elevated when scrolling ☐ Focus indication — Can supplement or replace outlines
Common Issues
- Inconsistent shadow direction
- Too many elevation levels
- Shadows too harsh or too subtle
- Elevation doesn't match interaction hierarchy
Iconography
Icons support comprehension and reduce text.
Icon System
☐ Single icon library — Consistent style ☐ Consistent stroke/fill — Don't mix styles ☐ Size scale — 16, 20, 24, 32, 48 (or similar) ☐ Consistent grid — Icons align to same grid
Icon Usage
☐ With text labels — For unclear icons ☐ Standalone — Only for universally understood (close, search, home) ☐ In buttons — Left or right of text consistently ☐ In navigation — Supplement text, not replace ☐ As status — Error, success, warning indicators
Icon Accessibility
☐ Alt text/aria-label — For meaningful icons ☐ aria-hidden — For decorative icons ☐ Touch targets — 44x44px minimum for tappable icons ☐ Color contrast — Icons meet contrast requirements
Common Issues
- Mixed icon styles (outline + filled)
- Icons without labels where meaning unclear
- Inconsistent icon sizes
- Too many unique icons
Typography
Text is the primary interface. Make it work.
Type Scale
☐ Scale established — Limited set of sizes (7-10) ☐ Consistent usage — Same size for same purpose ☐ Responsive scaling — Appropriate for device
Type Hierarchy
☐ H1-H6 — Clear heading hierarchy ☐ Body text — Primary and secondary ☐ Captions/labels — Small supporting text ☐ Display text — Hero/feature text
Type Properties
☐ Line height — 1.4-1.6 for body, 1.1-1.3 for headings ☐ Letter spacing — Adjusted for size (tighter large, looser small) ☐ Font weight — 2-3 weights max ☐ Max line length — 45-75 characters for readability
Type Accessibility
☐ Minimum size — 16px for body text ☐ Contrast — 4.5:1 ratio ☐ Scalability — Works when user zooms ☐ Font choice — Legible at small sizes
Common Issues
- Too many font sizes
- Inconsistent line heights
- Lines too long (hard to read)
- Insufficient contrast on secondary text
Imagery & Illustrations
Visual content enhances understanding and tone.
Image Usage
☐ Consistent style — Photography style or illustration style ☐ Appropriate aspect ratios — Consistent crops ☐ Quality — High resolution, appropriate compression ☐ Relevance — Images support content, not decorate
Image Treatments
☐ Placeholders — Loading states for images ☐ Error states — Broken image handling ☐ Cropping — Consistent crop ratios ☐ Filters/overlays — Consistent treatment
Image Accessibility
☐ Alt text — Descriptive for meaningful images ☐ Empty alt — For decorative images ☐ Text in images — Avoided or duplicated in HTML ☐ Color contrast — Text over images readable
Illustration Guidelines
☐ Consistent style — Same illustrator or style guide ☐ Color palette — Within brand colors ☐ Stroke weights — Consistent with icons ☐ Character design — If using people, consistent representation
Motion & Animation
Movement creates meaning and delight.
Animation Purposes
☐ Feedback — Response to user action ☐ Orientation — Help users understand spatial relationships ☐ Attention — Draw focus to important changes ☐ Continuity — Smooth transitions between states
Animation Properties
☐ Duration — 100-500ms typical (faster = less important) ☐ Easing — Ease-out for entrances, ease-in for exits ☐ Consistency — Same duration for same type of animation ☐ Purpose — Every animation has a reason
Animation Best Practices
☐ Prefer transforms — translate, scale, rotate, opacity (performant) ☐ Avoid layout thrash — Don't animate width, height, position ☐ Reduce motion — Respect prefers-reduced-motion ☐ Subtlety — Most animations should be barely noticed
Common Issues
- Animations too slow (feel sluggish)
- Animations too fast (miss the feedback)
- Gratuitous animation (no purpose)
- Inconsistent easing/duration
- Ignoring accessibility preferences
Texture & Patterns
Surface treatments add depth and character.
Texture Types
☐ Subtle gradients — Add depth without distraction ☐ Background patterns — Subtle, non-distracting ☐ Noise/grain — Adds warmth to flat colors ☐ Glass effects — Blur, transparency (use sparingly)
Usage Guidelines
☐ Subtlety — Textures shouldn't compete with content ☐ Purpose — Differentiate surfaces, add depth ☐ Consistency — Same treatment for same surface type ☐ Performance — Consider render cost
Common Issues
- Textures too prominent
- Inconsistent texture usage
- Performance impact from complex textures
- Reduced legibility from background patterns
Visual Style Audit
Quick checks for visual consistency:
| Element | ✓ | Notes |
|---|---|---|
| Spacing on scale | ||
| Color palette limited | ||
| Contrast accessible | ||
| Elevation consistent | ||
| Single icon style | ||
| Type scale limited | ||
| Line heights consistent | ||
| Images consistent style | ||
| Animations purposeful | ||
| Reduced motion respected |