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
230
.opencode/skills/ui-ux-design-user-experience/SKILL.md
Normal file
230
.opencode/skills/ui-ux-design-user-experience/SKILL.md
Normal file
@@ -0,0 +1,230 @@
|
||||
---
|
||||
name: ui-ux-design-user-experience
|
||||
description: "UI/UX Design encompasses the creation of intuitive, accessible, and visually appealing digital interfaces that provide meaningful experiences to users."
|
||||
---
|
||||
|
||||
# UI/UX Design & User Experience
|
||||
|
||||
## Overview
|
||||
|
||||
UI/UX Design encompasses the creation of intuitive, accessible, and visually appealing digital interfaces that provide meaningful experiences to users. This skill covers the complete spectrum of user interface and user experience design, from foundational principles to advanced implementation techniques.
|
||||
|
||||
---
|
||||
|
||||
## 1. UI/UX Design Fundamentals
|
||||
|
||||
### What is UI/UX?
|
||||
|
||||
**User Interface (UI)** refers to the visual elements users interact with—buttons, icons, typography, colors, spacing, and layouts. It focuses on the look and feel of a product.
|
||||
|
||||
**User Experience (UX)** encompasses the entire journey a user takes with a product, including emotions, perceptions, and responses. It focuses on how a product works and feels to use.
|
||||
|
||||
### UI vs UX
|
||||
|
||||
| Aspect | UI Design | UX Design |
|
||||
|--------|-----------|-----------|
|
||||
| Focus | Visual presentation | Overall experience |
|
||||
| Elements | Colors, typography, icons | User flows, research, testing |
|
||||
| Goal | Aesthetic appeal | User satisfaction |
|
||||
| Deliverables | Style guides, mockups | Wireframes, personas, journey maps |
|
||||
|
||||
### Importance of UI/UX
|
||||
|
||||
- **Business Impact**: Good UX increases conversion rates by up to 400%
|
||||
- **User Retention**: 88% of users won't return after a bad experience
|
||||
- **Brand Perception**: Design quality directly influences trust and credibility
|
||||
- **Development Efficiency**: Proper UX reduces development rework by 50%
|
||||
|
||||
### Core Design Principles
|
||||
|
||||
1. **User-Centered Design**: Design decisions based on user needs, not assumptions
|
||||
2. **Simplicity**: Remove unnecessary complexity; every element should serve a purpose
|
||||
3. **Consistency**: Maintain uniform patterns across the interface
|
||||
4. **Feedback**: Provide clear responses to user actions
|
||||
5. **Accessibility**: Design for users of all abilities
|
||||
6. **Efficiency**: Minimize steps to complete tasks
|
||||
7. **Error Prevention**: Design to prevent errors before they occur
|
||||
8. **User Control**: Give users freedom to navigate and undo actions
|
||||
9. **Recognition Over Recall**: Make options visible rather than requiring memory
|
||||
10. **Aesthetic and Minimalist Design**: Include only relevant information
|
||||
|
||||
---
|
||||
|
||||
## 2. User Research & Analysis
|
||||
|
||||
### User Personas
|
||||
|
||||
**Creating Personas:**
|
||||
- Conduct user interviews and surveys
|
||||
- Identify demographic and psychographic patterns
|
||||
- Define goals, frustrations, and behaviors
|
||||
- Create 3-5 distinct personas representing user segments
|
||||
|
||||
**Persona Components:**
|
||||
- Name, photo, demographics
|
||||
- Goals and motivations
|
||||
- Pain points and frustrations
|
||||
- Behaviors and preferences
|
||||
- Technology proficiency
|
||||
- Quote capturing their mindset
|
||||
|
||||
### User Journey Mapping
|
||||
|
||||
**Journey Map Stages:**
|
||||
1. **Awareness**: How users discover the product
|
||||
2. **Consideration**: Evaluating options
|
||||
3. **Acquisition**: Making a decision
|
||||
4. **Service**: Using the product
|
||||
5. **Loyalty**: Becoming a repeat user
|
||||
|
||||
**Map Elements:**
|
||||
- **Touchpoints**: Every interaction point with the product
|
||||
- **Emotions**: User feelings at each stage (frustration, delight, confusion)
|
||||
- **Pain Points**: Friction areas causing negative experiences
|
||||
- **Opportunities**: Areas for improvement and innovation
|
||||
|
||||
### User Interviews
|
||||
|
||||
**Types:**
|
||||
- Structured: Fixed questions, quantitative focus
|
||||
- Semi-structured: Guided but flexible, most common
|
||||
- Unstructured: Open conversation, exploratory
|
||||
|
||||
**Best Practices:**
|
||||
- Ask open-ended questions
|
||||
- Avoid leading questions
|
||||
- Listen more than talk
|
||||
- Record with permission
|
||||
- Follow up on interesting responses
|
||||
|
||||
### Surveys and Questionnaires
|
||||
|
||||
**Question Types:**
|
||||
- Multiple choice, rating scales, Likert scales
|
||||
- Open-ended, ranking, matrix questions
|
||||
|
||||
**Best Practices:**
|
||||
- Keep surveys under 10 minutes
|
||||
- Use clear, unbiased language
|
||||
- Include progress indicators
|
||||
- Test before deploying
|
||||
- Offer incentives for completion
|
||||
|
||||
### Usability Testing
|
||||
|
||||
**Methods:**
|
||||
- **Moderated**: Facilitator guides the session
|
||||
- **Unmoderated**: Users complete tasks independently
|
||||
- **Remote**: Conducted via video conferencing
|
||||
- **In-person**: Face-to-face observation
|
||||
|
||||
**Process:**
|
||||
1. Define objectives and tasks
|
||||
2. Recruit representative users (5-8 typically)
|
||||
3. Create test script and scenarios
|
||||
4. Conduct sessions
|
||||
5. Analyze findings and prioritize issues
|
||||
|
||||
**Key Metrics:**
|
||||
- **Task Success Rate**: Percentage completing tasks successfully
|
||||
- **Time on Task**: Duration to complete specific tasks
|
||||
- **Error Rate**: Number of mistakes made
|
||||
- **System Usability Scale (SUS)**: Standardized 10-question survey (score 0-100)
|
||||
|
||||
### Analytics and Data Analysis
|
||||
|
||||
**Web Analytics Metrics:**
|
||||
- Page views, unique visitors, bounce rate
|
||||
- Session duration, pages per session
|
||||
- Conversion rate, funnel analysis
|
||||
|
||||
**Behavioral Tools:**
|
||||
- **Heatmaps**: Visual representation of clicks, scrolls, and attention
|
||||
- **Session Recordings**: Playback of user sessions
|
||||
- **A/B Testing**: Compare two versions to determine better performance
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 3. Information Architecture
|
||||
|
||||
*See [detailed 3. information architecture](./references/3-information-architecture.md)*
|
||||
|
||||
|
||||
## 4. Interaction Design
|
||||
|
||||
*See [detailed 4. interaction design](./references/4-interaction-design.md)*
|
||||
|
||||
|
||||
## 5. Visual Design for UI
|
||||
|
||||
*See [detailed 5. visual design for ui](./references/5-visual-design-for-ui.md)*
|
||||
|
||||
|
||||
## 6. UI Design Patterns
|
||||
|
||||
*See [detailed 6. ui design patterns](./references/6-ui-design-patterns.md)*
|
||||
|
||||
|
||||
## 7. Responsive & Adaptive Design
|
||||
|
||||
*See [detailed 7. responsive & adaptive design](./references/7-responsive--adaptive-design.md)*
|
||||
|
||||
|
||||
## 8. Accessibility in UI/UX
|
||||
|
||||
*See [detailed 8. accessibility in ui/ux](./references/8-accessibility-in-ui-ux.md)*
|
||||
|
||||
|
||||
## 9. Usability Principles
|
||||
|
||||
*See [detailed 9. usability principles](./references/9-usability-principles.md)*
|
||||
|
||||
|
||||
## 10. Design Systems & Component Libraries
|
||||
|
||||
*See [detailed 10. design systems & component libraries](./references/10-design-systems--component-libraries.md)*
|
||||
|
||||
|
||||
## 11. UI/UX Design Tools
|
||||
|
||||
*See [detailed 11. ui/ux design tools](./references/11-ui-ux-design-tools.md)*
|
||||
|
||||
|
||||
## 12. Mobile App UI/UX Design
|
||||
|
||||
*See [detailed 12. mobile app ui/ux design](./references/12-mobile-app-ui-ux-design.md)*
|
||||
|
||||
|
||||
## 13. Web App UI/UX Design
|
||||
|
||||
*See [detailed 13. web app ui/ux design](./references/13-web-app-ui-ux-design.md)*
|
||||
|
||||
|
||||
## 14. Design Handoff & Collaboration
|
||||
|
||||
*See [detailed 14. design handoff & collaboration](./references/14-design-handoff--collaboration.md)*
|
||||
|
||||
|
||||
## 15. UI/UX Best Practices
|
||||
|
||||
*See [detailed 15. ui/ux best practices](./references/15-ui-ux-best-practices.md)*
|
||||
|
||||
|
||||
UI/UX design is a multidisciplinary practice combining research, psychology, visual design, and technology to create meaningful user experiences. Success requires understanding users deeply, applying proven design principles, leveraging appropriate tools, and maintaining consistency through design systems. Accessibility and usability must be foundational, not afterthoughts. The best interfaces are invisible—they help users accomplish their goals effortlessly while delighting them along the way.
|
||||
|
||||
## Using the Reference Files
|
||||
|
||||
- [10 Design Systems Component Libraries](./references/10-design-systems--component-libraries.md): 10 Design Systems Component Libraries
|
||||
- [11 Ui Ux Design Tools](./references/11-ui-ux-design-tools.md): 11 Ui Ux Design Tools
|
||||
- [12 Mobile App Ui Ux Design](./references/12-mobile-app-ui-ux-design.md): 12 Mobile App Ui Ux Design
|
||||
- [13 Web App Ui Ux Design](./references/13-web-app-ui-ux-design.md): 13 Web App Ui Ux Design
|
||||
- [14 Design Handoff Collaboration](./references/14-design-handoff--collaboration.md): 14 Design Handoff Collaboration
|
||||
- [15 Ui Ux Best Practices](./references/15-ui-ux-best-practices.md): 15 Ui Ux Best Practices
|
||||
- [3 Information Architecture](./references/3-information-architecture.md): 3 Information Architecture
|
||||
- [4 Interaction Design](./references/4-interaction-design.md): 4 Interaction Design
|
||||
- [5 Visual Design For Ui](./references/5-visual-design-for-ui.md): 5 Visual Design For Ui
|
||||
- [6 Ui Design Patterns](./references/6-ui-design-patterns.md): 6 Ui Design Patterns
|
||||
- [7 Responsive Adaptive Design](./references/7-responsive--adaptive-design.md): 7 Responsive Adaptive Design
|
||||
- [8 Accessibility In Ui Ux](./references/8-accessibility-in-ui-ux.md): 8 Accessibility In Ui Ux
|
||||
- [9 Usability Principles](./references/9-usability-principles.md): 9 Usability Principles
|
||||
@@ -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