297 lines
8.2 KiB
Markdown
297 lines
8.2 KiB
Markdown
# 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 | | |
|