docs: add comprehensive frontend landing page plan and download design skills
Add detailed landing page development plan in docs/frontend_landing_plan.md: - Complete landing page structure (Hero, Problem/Solution, Features, Demo, CTA) - Design guidelines from downloaded skills (typography, color, motion, composition) - Security considerations (XSS prevention, input sanitization, CSP) - Performance targets (LCP <2.5s, bundle <150KB, Lighthouse >90) - Responsiveness and accessibility requirements (WCAG 2.1 AA) - Success KPIs and monitoring setup - 3-week development timeline with daily tasks - Definition of Done checklist Download 10+ frontend/UI/UX skills via universal-skills-manager: - frontend-ui-ux: UI/UX design without mockups - frontend-design-guidelines: Production-grade interface guidelines - frontend-developer: React best practices (40+ rules) - frontend-engineer: Next.js 14 App Router patterns - ui-ux-master: Comprehensive design systems and accessibility - ui-ux-systems-designer: Information architecture and interaction - ui-ux-design-user-experience: Platform-specific guidelines - Plus additional reference materials and validation scripts Configure universal-skills MCP with SkillsMP API key for curated skill access. Safety first: All skills validated before installation, no project code modified. Refs: Universal Skills Manager (github:jacob-bd/universal-skills-manager) Next: Begin Sprint 3 landing page development
This commit is contained in:
Luca Sacchi Ricciardi
@@ -0,0 +1,29 @@
|
||||
|
||||
### What Is a Design System?
|
||||
|
||||
A comprehensive set of standards, documentation, and reusable components that guide product design and development. It ensures consistency, efficiency, and scalability across products and teams.
|
||||
|
||||
### Components
|
||||
|
||||
- **Design Tokens**: Named values for colors, spacing, typography, shadows
|
||||
- **Component Library**: Reusable UI elements (buttons, inputs, cards, modals)
|
||||
- **Pattern Library**: Common solutions for UX problems (forms, navigation, search)
|
||||
- **Style Guide**: Visual language, brand guidelines, voice and tone
|
||||
- **Documentation**: Usage guidelines, code examples, best practices
|
||||
|
||||
### Benefits
|
||||
|
||||
- **Consistency**: Unified experience across products
|
||||
- **Efficiency**: Faster design and development cycles
|
||||
- **Scalability**: Easy to maintain and update at scale
|
||||
- **Collaboration**: Shared language between design and development
|
||||
- **Quality**: Reduced bugs and design debt
|
||||
|
||||
### Notable Examples
|
||||
|
||||
- **Material Design (Google)**: Comprehensive, well-documented, widely adopted
|
||||
- **Human Interface Guidelines (Apple)**: Platform-specific guidance for iOS/macOS
|
||||
- **Ant Design**: Enterprise-focused, React component library
|
||||
- **Carbon Design System (IBM)**: Open-source, accessibility-focused
|
||||
|
||||
---
|
||||
@@ -0,0 +1,32 @@
|
||||
|
||||
### Design Tools
|
||||
|
||||
| Tool | Best For |
|
||||
|------|----------|
|
||||
| **Figma** | Collaborative design, prototyping, design systems |
|
||||
| **Sketch** | macOS UI design, plugins ecosystem |
|
||||
| **Adobe XD** | Integration with Adobe Creative Cloud |
|
||||
| **InVision** | Prototyping, collaboration |
|
||||
| **Axure** | Complex interactions, documentation |
|
||||
| **Balsamiq** | Low-fidelity wireframing |
|
||||
|
||||
### Collaboration Tools
|
||||
|
||||
- **Miro**: Online whiteboard, workshops, brainstorming
|
||||
- **Whimsical**: Flowcharts, wireframes, mind maps
|
||||
- **FigJam**: Figma's collaborative whiteboard
|
||||
- **Mural**: Visual collaboration, facilitation
|
||||
|
||||
### Prototyping Tools
|
||||
|
||||
- **Principle**: Mac-based animation tool
|
||||
- **ProtoPie**: Advanced interactions without code
|
||||
- **Framer**: Code-powered prototypes
|
||||
|
||||
### Handoff Tools
|
||||
|
||||
- **Zeplin**: Design specs, style guides, assets
|
||||
- **Avocode**: Design handoff, inspect tools
|
||||
- **Figma Inspect**: Built-in developer handoff
|
||||
|
||||
---
|
||||
@@ -0,0 +1,44 @@
|
||||
|
||||
### iOS Design Guidelines
|
||||
|
||||
**Design Principles:**
|
||||
- Clarity, deference, depth
|
||||
- Direct manipulation
|
||||
- Semantic use of color
|
||||
|
||||
**UI Elements:** Navigation bars, tab bars, toolbars, action sheets, alerts
|
||||
|
||||
**Typography:** San Francisco font family, Dynamic Type support
|
||||
|
||||
**Gestures:** Tap, swipe, pinch, rotate, long press
|
||||
|
||||
### Android Material Design
|
||||
|
||||
**Design Principles:**
|
||||
- Material as metaphor
|
||||
- Bold, graphic, intentional
|
||||
- Motion provides meaning
|
||||
|
||||
**UI Elements:** App bars, bottom navigation, FABs, drawers, snackbars
|
||||
|
||||
**Typography:** Roboto font family, type scale
|
||||
|
||||
**Elevation:** z-axis positioning, shadows indicate hierarchy
|
||||
|
||||
### Mobile UI Patterns
|
||||
|
||||
- **Onboarding**: Welcome screens, feature tours, permission requests
|
||||
- **Authentication**: Social login, biometric, magic links
|
||||
- **Navigation**: Tab bars, drawers, stack navigation
|
||||
- **Forms**: Input optimization, keyboard types, validation
|
||||
- **Lists and Grids**: Swipe actions, pull-to-refresh
|
||||
- **Search**: Prominent search bar, recent searches, filters
|
||||
- **Notifications**: In-app badges, push notifications, banners
|
||||
|
||||
### Touch Targets
|
||||
|
||||
- **Minimum Size**: 44x44pt (iOS), 48x48dp (Android)
|
||||
- **Spacing**: 8dp minimum between targets
|
||||
- **Thumb Zone**: Most accessible area for single-handed use (bottom center)
|
||||
|
||||
---
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
### Dashboard Design
|
||||
|
||||
**Purpose:** Provide at-a-glance view of key metrics and actions
|
||||
|
||||
**Elements:**
|
||||
- KPI cards, charts, graphs
|
||||
- Navigation, filters, search
|
||||
- Notifications, quick actions
|
||||
|
||||
**Best Practices:**
|
||||
- Prioritize most important information
|
||||
- Use visual hierarchy to guide attention
|
||||
- Enable customization and personalization
|
||||
- Optimize for different screen sizes
|
||||
|
||||
### Form Design
|
||||
|
||||
**Best Practices:**
|
||||
- Single-column layout preferred
|
||||
- Clear labels above fields
|
||||
- Logical field grouping
|
||||
- Inline validation with helpful messages
|
||||
- Smart defaults and autofill
|
||||
- Clear primary and secondary actions
|
||||
|
||||
### Data Visualization
|
||||
|
||||
**Chart Types:**
|
||||
- Bar charts, line charts, pie charts
|
||||
- Area charts, scatter plots, heatmaps
|
||||
- Tables, sparklines, gauges
|
||||
|
||||
**Best Practices:**
|
||||
- Choose appropriate chart for data type
|
||||
- Use color meaningfully
|
||||
- Provide context and labels
|
||||
- Enable interactivity (tooltips, filtering)
|
||||
|
||||
### Complex Workflows
|
||||
|
||||
**Workflow Design:**
|
||||
- Break into clear steps
|
||||
- Show progress indicators
|
||||
- Allow saving and resuming
|
||||
- Provide validation at each step
|
||||
- Confirm completion and next steps
|
||||
|
||||
---
|
||||
@@ -0,0 +1,46 @@
|
||||
|
||||
### Design Specs
|
||||
|
||||
**What to Include:**
|
||||
- Component dimensions and spacing
|
||||
- Color values (HEX, RGB, HSL)
|
||||
- Typography specs (font, size, weight, line height)
|
||||
- States (default, hover, active, disabled, focus)
|
||||
- Responsive behavior documentation
|
||||
- Animation specifications
|
||||
|
||||
### Developer Handoff
|
||||
|
||||
**Tools:** Figma Inspect, Zeplin, Avocode
|
||||
|
||||
**Best Practices:**
|
||||
- Use consistent naming conventions
|
||||
- Organize components in logical groups
|
||||
- Document interactions and edge cases
|
||||
- Include assets in multiple formats
|
||||
- Provide responsive guidelines
|
||||
|
||||
### Design-to-Code
|
||||
|
||||
**Tools:** Figma to code plugins, Anima, Locofy
|
||||
|
||||
**Limitations:**
|
||||
- Generated code often needs refinement
|
||||
- Complex interactions require manual coding
|
||||
- Accessibility may need additional work
|
||||
|
||||
**Best Use:** Rapid prototyping, simple components
|
||||
|
||||
### Collaboration
|
||||
|
||||
**Design Reviews:**
|
||||
- Regular critiques with team
|
||||
- Structured feedback sessions
|
||||
- Document decisions and rationale
|
||||
|
||||
**Version Control:**
|
||||
- Use branching in design tools
|
||||
- Document version history
|
||||
- Maintain single source of truth
|
||||
|
||||
---
|
||||
@@ -0,0 +1,36 @@
|
||||
|
||||
### Consistency
|
||||
|
||||
- **Visual Consistency**: Same colors, typography, spacing throughout
|
||||
- **Functional Consistency**: Same actions produce same results
|
||||
- **External Consistency**: Follow platform conventions and user expectations
|
||||
|
||||
### Feedback
|
||||
|
||||
- **Immediate**: Response within 100ms feels instantaneous
|
||||
- **Visual**: Button state changes, loading indicators, success/error states
|
||||
- **Audio**: Subtle sounds for significant actions
|
||||
- **Haptic**: Vibration feedback on mobile for confirmations
|
||||
|
||||
### Error Prevention
|
||||
|
||||
- **Constraints**: Limit input to valid values (date pickers, dropdowns)
|
||||
- **Validation**: Real-time validation with clear messages
|
||||
- **Confirmations**: Confirm destructive actions before executing
|
||||
- **Undo**: Allow reversal of actions when possible
|
||||
|
||||
### User Control
|
||||
|
||||
- **Freedom**: Easy navigation, clear exit paths
|
||||
- **Undo/Redo**: Reverse actions easily
|
||||
- **Cancel**: Abort processes without penalty
|
||||
- **Customization**: User preferences and settings
|
||||
|
||||
### Recognition Over Recall
|
||||
|
||||
- **Visible Options**: Display available actions and choices
|
||||
- **Autocomplete**: Suggest based on history and context
|
||||
- **Recently Used**: Surface frequently accessed items
|
||||
- **Smart Defaults**: Pre-populate with sensible values
|
||||
|
||||
---
|
||||
@@ -0,0 +1,67 @@
|
||||
|
||||
### Site Mapping
|
||||
|
||||
**Creating Site Maps:**
|
||||
- Inventory existing content
|
||||
- Group related content logically
|
||||
- Define hierarchy and relationships
|
||||
- Visualize structure
|
||||
|
||||
**Types:**
|
||||
- **Hierarchical**: Tree structure with clear parent-child relationships
|
||||
- **Sequential**: Linear flow (checkout processes)
|
||||
- **Matrix**: Multiple categorization paths
|
||||
- **Database**: Dynamic content organization
|
||||
|
||||
### Navigation Design
|
||||
|
||||
**Navigation Types:**
|
||||
- **Primary**: Main navigation (header, sidebar)
|
||||
- **Secondary**: Sub-navigation within sections
|
||||
- **Utility**: Account, search, cart
|
||||
- **Contextual**: Related content, breadcrumbs
|
||||
|
||||
**Best Practices:**
|
||||
- Limit top-level items to 7±2
|
||||
- Use descriptive, action-oriented labels
|
||||
- Indicate current location
|
||||
- Ensure consistent placement
|
||||
|
||||
### Content Organization
|
||||
|
||||
**Organizing Principles:**
|
||||
- **Alphabetical**: A-Z ordering (directories, glossaries)
|
||||
- **Chronological**: Time-based (blogs, news)
|
||||
- **Categorical**: Topic-based grouping
|
||||
- **Task-Based**: Organized by user goals
|
||||
- **Audience-Based**: Different paths for user types
|
||||
|
||||
**Content Hierarchy:**
|
||||
- Primary content (most important, prominent placement)
|
||||
- Secondary content (supporting information)
|
||||
- Tertiary content (supplementary, less visible)
|
||||
|
||||
### Card Sorting
|
||||
|
||||
**Types:**
|
||||
- **Open**: Users create and name categories
|
||||
- **Closed**: Users sort into predefined categories
|
||||
- **Hybrid**: Combination of both approaches
|
||||
|
||||
**Process:**
|
||||
1. Prepare content cards (30-60 items)
|
||||
2. Recruit participants (15-30)
|
||||
3. Conduct sessions (in-person or online)
|
||||
4. Analyze patterns and clusters
|
||||
5. Validate with reverse card sorting
|
||||
|
||||
### Taxonomy and Labeling
|
||||
|
||||
**Best Practices:**
|
||||
- Use user language, not internal jargon
|
||||
- Be consistent in terminology
|
||||
- Test labels with real users
|
||||
- Keep labels concise but descriptive
|
||||
- Avoid ambiguous terms
|
||||
|
||||
---
|
||||
@@ -0,0 +1,80 @@
|
||||
|
||||
### User Flows
|
||||
|
||||
**Creating User Flows:**
|
||||
1. Identify the task or goal
|
||||
2. Map entry points
|
||||
3. Document each step and decision
|
||||
4. Include success and error paths
|
||||
5. Identify drop-off points
|
||||
|
||||
**Standard Symbols:**
|
||||
- Rectangles: Screens/pages
|
||||
- Diamonds: Decision points
|
||||
- Arrows: Flow direction
|
||||
- Ovals: Start/end points
|
||||
- Parallelograms: User input
|
||||
|
||||
### Wireframing
|
||||
|
||||
**Fidelity Levels:**
|
||||
- **Low-Fidelity**: Sketches, basic shapes, placeholder content
|
||||
- **Mid-Fidelity**: Grayscale, real content, basic interactions
|
||||
- **High-Fidelity**: Near-final design, realistic data
|
||||
|
||||
**Essential Elements:**
|
||||
- Layout structure and grid
|
||||
- Content placement and hierarchy
|
||||
- Navigation elements
|
||||
- Interactive components
|
||||
- Annotations for developers
|
||||
|
||||
**Tools:** Figma, Sketch, Balsamiq, Whimsical
|
||||
|
||||
### Prototyping
|
||||
|
||||
**Fidelity Levels:**
|
||||
- **Paper Prototypes**: Quick sketches for early testing
|
||||
- **Clickable Wireframes**: Basic interactive flows
|
||||
- **High-Fidelity Prototypes**: Near-production interactivity
|
||||
|
||||
**Uses:**
|
||||
- Concept validation
|
||||
- Usability testing
|
||||
- Stakeholder presentations
|
||||
- Developer communication
|
||||
|
||||
**Tools:** Figma, Principle, ProtoPie, Framer, InVision
|
||||
|
||||
### Micro-interactions
|
||||
|
||||
**Components:**
|
||||
1. **Trigger**: User action or system condition that initiates
|
||||
2. **Rules**: What happens when triggered
|
||||
3. **Feedback**: Visual, audio, or haptic response
|
||||
4. **Loops and Modes**: How interaction changes over time
|
||||
|
||||
**Examples:**
|
||||
- Like button animation
|
||||
- Pull-to-refresh indicator
|
||||
- Password strength meter
|
||||
- Toggle switch animation
|
||||
- Form field validation feedback
|
||||
|
||||
### Animations and Transitions
|
||||
|
||||
**Principles:**
|
||||
- **Easing**: Natural acceleration/deceleration (ease-in-out preferred)
|
||||
- **Duration**: 200-500ms for most UI animations
|
||||
- **Choreography**: Coordinated element movement
|
||||
- **Purpose**: Always serve functional or emotional purpose
|
||||
|
||||
**Types:**
|
||||
- Page transitions, loading animations
|
||||
- Hover states, focus indicators
|
||||
- Reveal animations, progress indicators
|
||||
- Celebratory animations (confetti, success)
|
||||
|
||||
**Tools:** After Effects, Principle, Lottie, CSS animations
|
||||
|
||||
---
|
||||
@@ -0,0 +1,99 @@
|
||||
|
||||
### Color Systems
|
||||
|
||||
**Color Roles:**
|
||||
- **Primary**: Brand color, main actions
|
||||
- **Secondary**: Supporting elements
|
||||
- **Accent**: Highlights, notifications
|
||||
- **Neutral**: Text, backgrounds, borders
|
||||
- **Semantic**: Success (green), warning (yellow), error (red), info (blue)
|
||||
|
||||
**Color Palette Creation:**
|
||||
- Start with brand colors
|
||||
- Create tint and shade variations (50-900 scale)
|
||||
- Ensure sufficient contrast ratios
|
||||
- Test for color blindness (8% of males affected)
|
||||
|
||||
**Color Accessibility:**
|
||||
- WCAG AA: 4.5:1 for normal text, 3:1 for large text
|
||||
- WCAG AAA: 7:1 for normal text, 4.5:1 for large text
|
||||
- Never rely solely on color to convey information
|
||||
|
||||
### Typography
|
||||
|
||||
**Font Selection:**
|
||||
- Sans-serif for digital interfaces (Roboto, Inter, SF Pro)
|
||||
- Limit to 2-3 font families maximum
|
||||
- Consider loading performance (web fonts)
|
||||
|
||||
**Type Scale:**
|
||||
- Base size: 16px (1rem)
|
||||
- Scale ratio: 1.25 (major third) or 1.333 (perfect fourth)
|
||||
- Establish hierarchy: Display, H1-H6, Body, Caption
|
||||
|
||||
**Best Practices:**
|
||||
- Line length: 45-75 characters
|
||||
- Line height: 1.4-1.6 for body text
|
||||
- Letter spacing: Adjust for headings
|
||||
- Responsive scaling for different devices
|
||||
|
||||
### Iconography
|
||||
|
||||
**Icon Styles:**
|
||||
- Outlined, filled, two-tone, duotone
|
||||
- Consistent stroke width and corner radius
|
||||
|
||||
**Popular Libraries:**
|
||||
- Material Icons, Feather Icons, Heroicons
|
||||
- Font Awesome, Phosphor Icons, Tabler Icons
|
||||
|
||||
**Best Practices:**
|
||||
- Use recognizable, universal symbols
|
||||
- Maintain consistent style throughout
|
||||
- Include text labels for critical actions
|
||||
- Ensure adequate touch target size (44x44px minimum)
|
||||
|
||||
### Imagery
|
||||
|
||||
**Types:**
|
||||
- Photography, illustrations, graphics
|
||||
- Icons, data visualization, backgrounds
|
||||
|
||||
**Best Practices:**
|
||||
- Use authentic, diverse imagery
|
||||
- Optimize for web (WebP, compressed)
|
||||
- Provide meaningful alt text
|
||||
- Consider loading states and placeholders
|
||||
|
||||
### Spacing and Layout
|
||||
|
||||
**Spacing System:**
|
||||
- Base unit: 4px or 8px
|
||||
- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96
|
||||
- Apply consistently for margins, padding, gaps
|
||||
|
||||
**Layout Principles:**
|
||||
- **Grid System**: 12-column grid most common, responsive breakpoints
|
||||
- **White Space**: Improves readability and focus
|
||||
- **Alignment**: Left-align text, consistent element alignment
|
||||
- **Visual Hierarchy**: Size, color, contrast guide attention
|
||||
- **Proximity**: Group related elements together
|
||||
|
||||
### Design Systems
|
||||
|
||||
**Components:**
|
||||
- Design tokens (colors, spacing, typography values)
|
||||
- Component library (buttons, inputs, cards)
|
||||
- Pattern library (forms, navigation, layouts)
|
||||
- Style guide (voice, tone, brand guidelines)
|
||||
- Documentation (usage guidelines, code examples)
|
||||
|
||||
**Benefits:**
|
||||
- Consistency across products
|
||||
- Faster design and development
|
||||
- Easier maintenance and updates
|
||||
- Better collaboration between teams
|
||||
|
||||
**Examples:** Material Design (Google), Human Interface Guidelines (Apple), Ant Design, Carbon Design System (IBM)
|
||||
|
||||
---
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
### Navigation Patterns
|
||||
|
||||
- **Top Navigation**: Horizontal menu, common for websites
|
||||
- **Side Navigation**: Vertical menu, ideal for dashboards
|
||||
- **Hamburger Menu**: Hidden menu, mobile-first approach
|
||||
- **Bottom Navigation**: Mobile apps, 3-5 primary destinations
|
||||
- **Breadcrumbs**: Show location in hierarchy
|
||||
- **Tabs**: Switch between related content views
|
||||
- **Mega Menu**: Large dropdown with categories and links
|
||||
|
||||
### Form Patterns
|
||||
|
||||
- **Single-Column Layout**: One field per row, optimal for mobile
|
||||
- **Multi-Step Forms**: Break complex forms into steps with progress indicator
|
||||
- **Inline Validation**: Real-time feedback as users type
|
||||
- **Field Labels**: Always visible, above or beside field
|
||||
- **Optional vs Required**: Mark optional fields (not required)
|
||||
- **Input Masks**: Format phone numbers, dates, credit cards
|
||||
- **Autocomplete**: Suggest values, reduce typing errors
|
||||
|
||||
### Data Display Patterns
|
||||
|
||||
- **Tables**: Structured data with sorting and filtering
|
||||
- **Cards**: Grouped information with visual hierarchy
|
||||
- **Lists**: Sequential items with consistent formatting
|
||||
- **Grids**: Visual browsing, product catalogs
|
||||
- **Timelines**: Chronological events
|
||||
- **Dashboards**: KPIs and metrics at a glance
|
||||
|
||||
### Feedback Patterns
|
||||
|
||||
- **Toast Notifications**: Brief, auto-dismissing messages
|
||||
- **Modals**: Focused attention, confirmation dialogs
|
||||
- **Inline Messages**: Contextual feedback near relevant elements
|
||||
- **Progress Indicators**: Determinate or indeterminate loading
|
||||
- **Empty States**: Helpful messaging when no content exists
|
||||
- **Error States**: Clear error messages with recovery guidance
|
||||
|
||||
### Mobile Patterns
|
||||
|
||||
- **Pull-to-Refresh**: Swipe down to update content
|
||||
- **Swipe Actions**: Reveal actions on list items
|
||||
- **Infinite Scroll**: Load more content as user scrolls
|
||||
- **Bottom Sheets**: Contextual options from bottom of screen
|
||||
- **FAB (Floating Action Button)**: Primary action, always visible
|
||||
- **Gestures**: Tap, swipe, pinch, long-press, drag
|
||||
|
||||
---
|
||||
@@ -0,0 +1,59 @@
|
||||
|
||||
### Mobile-First Design
|
||||
|
||||
**What Is It?**
|
||||
Designing for mobile screens first, then progressively enhancing for larger screens.
|
||||
|
||||
**Why Mobile-First?**
|
||||
- Forces content prioritization
|
||||
- Better performance on mobile devices
|
||||
- Easier to scale up than scale down
|
||||
- Mobile traffic exceeds desktop globally
|
||||
|
||||
**Process:**
|
||||
1. Design for smallest screen
|
||||
2. Identify core content and features
|
||||
3. Add complexity for larger screens
|
||||
4. Test across device sizes
|
||||
|
||||
### Breakpoints
|
||||
|
||||
**Common Breakpoints:**
|
||||
- Mobile: 320-480px
|
||||
- Tablet: 481-768px
|
||||
- Laptop: 769-1024px
|
||||
- Desktop: 1025-1200px
|
||||
- Large Desktop: 1201px+
|
||||
|
||||
**Strategy:**
|
||||
- Design for content, not devices
|
||||
- Let content determine breakpoints
|
||||
- Test on real devices when possible
|
||||
|
||||
### Flexible Grids
|
||||
|
||||
- **Fluid Grids**: Percentage-based widths, scale proportionally
|
||||
- **CSS Grid**: Two-dimensional layout system
|
||||
- **Flexbox**: One-dimensional layout, flexible distribution
|
||||
- **Responsive Grid**: Fixed columns with fluid gutters
|
||||
|
||||
### Responsive Images
|
||||
|
||||
**Techniques:**
|
||||
- `srcset` and `sizes` attributes for multiple resolutions
|
||||
- `<picture>` element for art direction
|
||||
- CSS `object-fit` for container fitting
|
||||
|
||||
**Optimization:**
|
||||
- Use modern formats (WebP, AVIF)
|
||||
- Lazy loading for below-fold images
|
||||
- Responsive image CDNs (Cloudinary, Imgix)
|
||||
|
||||
### Progressive Enhancement
|
||||
|
||||
Build core functionality first, then add advanced features for capable browsers:
|
||||
1. Semantic HTML (baseline functionality)
|
||||
2. CSS for presentation (enhanced visuals)
|
||||
3. JavaScript for interactivity (advanced features)
|
||||
|
||||
---
|
||||
@@ -0,0 +1,60 @@
|
||||
|
||||
### WCAG Guidelines
|
||||
|
||||
**Levels:**
|
||||
- **A**: Minimum accessibility (must have)
|
||||
- **AA**: Standard compliance (recommended)
|
||||
- **AAA**: Highest accessibility (ideal)
|
||||
|
||||
**POUR Principles:**
|
||||
1. **Perceivable**: Content must be presentable to all senses
|
||||
2. **Operable**: Interface must be navigable by all users
|
||||
3. **Understandable**: Content and operation must be clear
|
||||
4. **Robust**: Content must work with assistive technologies
|
||||
|
||||
### Inclusive Design
|
||||
|
||||
**Design for All Users:**
|
||||
- Visual impairments (blindness, low vision, color blindness)
|
||||
- Hearing impairments (deafness, hard of hearing)
|
||||
- Motor impairments (limited mobility, tremors)
|
||||
- Cognitive impairments (dyslexia, ADHD, memory issues)
|
||||
|
||||
**Principles:**
|
||||
- Provide multiple ways to access content
|
||||
- Offer customization options
|
||||
- Design for temporary and situational disabilities
|
||||
- Test with diverse users
|
||||
|
||||
### Assistive Technologies
|
||||
|
||||
- **Screen Readers**: JAWS, NVDA, VoiceOver, TalkBack
|
||||
- **Screen Magnifiers**: ZoomText, Windows Magnifier
|
||||
- **Voice Control**: Dragon NaturallySpeaking, Voice Control
|
||||
- **Switch Access**: Single or multiple switch navigation
|
||||
- **Braille Displays**: Tactile output for blind users
|
||||
|
||||
### Keyboard Navigation
|
||||
|
||||
**Requirements:**
|
||||
- All functionality accessible via keyboard
|
||||
- Visible focus indicators (never `outline: none`)
|
||||
- Logical tab order following visual layout
|
||||
- Skip links to bypass repetitive content
|
||||
- No keyboard traps
|
||||
|
||||
**Focus Management:**
|
||||
- Manage focus on modal open/close
|
||||
- Return focus to trigger element
|
||||
- Announce dynamic content changes
|
||||
|
||||
### Screen Reader Compatibility
|
||||
|
||||
- **Semantic HTML**: Use correct elements (`<nav>`, `<main>`, `<article>`)
|
||||
- **ARIA Labels**: `aria-label`, `aria-describedby`, `aria-hidden`
|
||||
- **Alt Text**: Descriptive image alternatives, empty for decorative
|
||||
- **Heading Structure**: Logical hierarchy (H1 → H2 → H3)
|
||||
- **Form Labels**: Explicit `<label>` associations with inputs
|
||||
- **Link Text**: Descriptive links (not "click here")
|
||||
|
||||
---
|
||||
@@ -0,0 +1,59 @@
|
||||
|
||||
### Nielsen's 10 Usability Heuristics
|
||||
|
||||
1. **Visibility of System Status**: Keep users informed with appropriate feedback
|
||||
2. **Match Between System and Real World**: Use familiar language and concepts
|
||||
3. **User Control and Freedom**: Provide undo, redo, and easy exits
|
||||
4. **Consistency and Standards**: Follow platform conventions
|
||||
5. **Error Prevention**: Design to prevent errors before they occur
|
||||
6. **Recognition Rather Than Recall**: Make options and actions visible
|
||||
7. **Flexibility and Efficiency of Use**: Accelerators for expert users
|
||||
8. **Aesthetic and Minimalist Design**: Remove irrelevant information
|
||||
9. **Help Users Recognize, Diagnose, and Recover from Errors**: Clear error messages
|
||||
10. **Help and Documentation**: Provide searchable, task-focused help
|
||||
|
||||
### Cognitive Load
|
||||
|
||||
**What Is It?**
|
||||
The mental effort required to use an interface. High cognitive load leads to user frustration and errors.
|
||||
|
||||
**Reducing Cognitive Load:**
|
||||
- Chunk information into digestible pieces
|
||||
- Use progressive disclosure
|
||||
- Provide clear visual hierarchy
|
||||
- Minimize choices (paradox of choice)
|
||||
- Use familiar patterns and conventions
|
||||
- Reduce required memory with visual cues
|
||||
|
||||
### Fitts's Law
|
||||
|
||||
**What Is It?**
|
||||
The time to reach a target is proportional to distance and inversely proportional to target size.
|
||||
|
||||
**UI Implications:**
|
||||
- Make important buttons large and easy to reach
|
||||
- Place frequently used actions in accessible areas
|
||||
- Increase touch targets for mobile (minimum 44x44px)
|
||||
- Use edge and corner positions for key actions (infinite depth)
|
||||
|
||||
### Hick's Law
|
||||
|
||||
**What Is It?**
|
||||
Decision time increases logarithmically with the number of choices.
|
||||
|
||||
**UI Implications:**
|
||||
- Limit options to reduce decision time
|
||||
- Categorize and group related options
|
||||
- Use progressive disclosure for complex choices
|
||||
- Highlight recommended options
|
||||
|
||||
### Gestalt Principles
|
||||
|
||||
- **Proximity**: Elements close together are perceived as grouped
|
||||
- **Similarity**: Similar elements are perceived as related
|
||||
- **Closure**: Mind completes incomplete shapes
|
||||
- **Continuity**: Eyes follow continuous lines and patterns
|
||||
- **Figure-Ground**: Perception of foreground and background
|
||||
- **Common Fate**: Elements moving together are perceived as grouped
|
||||
|
||||
---
|
||||
Reference in New Issue
Block a user