Design Principles: Beautiful & Right
BEAUTIFUL: Understanding Aesthetic Principles
Study Process
Analyze high-quality designs on Dribbble, Mobbin, Behance. Ask AI to identify:
- Design styles (Memphis, Flat Design, Glassmorphism, Neo-brutalism, Minimalism)
- Layout structures & applications
- Typography systems (font pairing, hierarchy, scaling)
- Color systems (palettes, contrasts, psychology)
Visual Hierarchy
Guide users through interfaces effectively:
- Size: Larger elements draw attention first
- Contrast: High contrast (text/background) boosts readability
- Typography: Use weight, size, style for hierarchy
- Placement: F-pattern (web), Z-pattern (landing pages)
- Spacing: White space improves clarity, reduces cognitive load
Typography Best Practices
- Stick to 2-3 typefaces max
- Clear font hierarchy with proper spacing, sizes, alignment
- Appropriate font sizes for readability across devices
- Short, scannable paragraphs
Color Theory Applications
- Blue: Trust, security, calmness
- Red: Urgency, passion, excitement
- Warm colors: Drive urgency
- Cool colors: Create trust
- Use color intentionally to direct attention & evoke emotion
- Ensure WCAG AA contrast ratios (4.5:1 text, 3:1 large text)
White Space
Not empty—essential for clarity. Proper spacing between sections, buttons, text improves readability & gives visual breathing room.
RIGHT: Ensuring Functionality
Design Systems Research
Search "Figma Design System + [style]" to understand:
- Component architecture (atomic design: atoms → molecules → organisms)
- Layout principles (grid systems, responsive breakpoints)
- UX patterns & interactions
Component Library Standards
- Semantic HTML first (button > div with ARIA roles)
- Built-in accessibility, focus handling, keyboard interaction
- Each component tested for accessibility before adding
- Documentation includes structure, focus order, keyboard expectations, screen reader announcements
Accessibility Requirements
- WCAG 2.1 AA minimum (work toward 2.2)
- Color contrast ratios meet/exceed minimums
- Alt text for images
- Color-blind-friendly palettes
- Keyboard navigation support
- Screen reader compatibility
Testing Protocol
- Automated tools catch 30-50% of issues
- Manual testing crucial for comprehensive coverage
- Test with real users when possible
1---2name: design-principles-beautiful-and-right3description: Not empty—essential for clarity. Proper spacing between sections, buttons, text improves readability & gives visual breathing room.4---5# Design Principles: Beautiful & Right67## BEAUTIFUL: Understanding Aesthetic Principles89### Study Process10Analyze high-quality designs on Dribbble, Mobbin, Behance. Ask AI to identify:11- Design styles (Memphis, Flat Design, Glassmorphism, Neo-brutalism, Minimalism)12- Layout structures & applications13- Typography systems (font pairing, hierarchy, scaling)14- Color systems (palettes, contrasts, psychology)1516### Visual Hierarchy17Guide users through interfaces effectively:18- **Size**: Larger elements draw attention first19- **Contrast**: High contrast (text/background) boosts readability20- **Typography**: Use weight, size, style for hierarchy21- **Placement**: F-pattern (web), Z-pattern (landing pages)22- **Spacing**: White space improves clarity, reduces cognitive load2324### Typography Best Practices25- Stick to 2-3 typefaces max26- Clear font hierarchy with proper spacing, sizes, alignment27- Appropriate font sizes for readability across devices28- Short, scannable paragraphs2930### Color Theory Applications31- **Blue**: Trust, security, calmness32- **Red**: Urgency, passion, excitement33- **Warm colors**: Drive urgency34- **Cool colors**: Create trust35- Use color intentionally to direct attention & evoke emotion36- Ensure WCAG AA contrast ratios (4.5:1 text, 3:1 large text)3738### White Space39Not empty—essential for clarity. Proper spacing between sections, buttons, text improves readability & gives visual breathing room.4041## RIGHT: Ensuring Functionality4243### Design Systems Research44Search "Figma Design System + [style]" to understand:45- Component architecture (atomic design: atoms → molecules → organisms)46- Layout principles (grid systems, responsive breakpoints)47- UX patterns & interactions4849### Component Library Standards50- Semantic HTML first (button > div with ARIA roles)51- Built-in accessibility, focus handling, keyboard interaction52- Each component tested for accessibility before adding53- Documentation includes structure, focus order, keyboard expectations, screen reader announcements5455### Accessibility Requirements56- WCAG 2.1 AA minimum (work toward 2.2)57- Color contrast ratios meet/exceed minimums58- Alt text for images59- Color-blind-friendly palettes60- Keyboard navigation support61- Screen reader compatibility6263### Testing Protocol64- Automated tools catch 30-50% of issues65- Manual testing crucial for comprehensive coverage66- Test with real users when possible
tools-only