LogWhispererAI/.opencode/skills/ui-ux-design-user-experience/SKILL.md

name, description

name	description
ui-ux-design-user-experience	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

4. Interaction Design

See detailed 4. interaction design

5. Visual Design for UI

See detailed 5. visual design for ui

6. UI Design Patterns

See detailed 6. ui design patterns

7. Responsive & Adaptive Design

See detailed 7. responsive & adaptive design

8. Accessibility in UI/UX

See detailed 8. accessibility in ui/ux

9. Usability Principles

See detailed 9. usability principles

10. Design Systems & Component Libraries

See detailed 10. design systems & component libraries

11. UI/UX Design Tools

See detailed 11. ui/ux design tools

12. Mobile App UI/UX Design

See detailed 12. mobile app ui/ux design

13. Web App UI/UX Design

See detailed 13. web app ui/ux design

14. Design Handoff & Collaboration

See detailed 14. design handoff & collaboration

15. UI/UX Best Practices

See detailed 15. ui/ux best practices

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: 10 Design Systems Component Libraries
• 11 Ui Ux Design Tools: 11 Ui Ux Design Tools
• 12 Mobile App Ui Ux Design: 12 Mobile App Ui Ux Design
• 13 Web App Ui Ux Design: 13 Web App Ui Ux Design
• 14 Design Handoff Collaboration: 14 Design Handoff Collaboration
• 15 Ui Ux Best Practices: 15 Ui Ux Best Practices
• 3 Information Architecture: 3 Information Architecture
• 4 Interaction Design: 4 Interaction Design
• 5 Visual Design For Ui: 5 Visual Design For Ui
• 6 Ui Design Patterns: 6 Ui Design Patterns
• 7 Responsive Adaptive Design: 7 Responsive Adaptive Design
• 8 Accessibility In Ui Ux: 8 Accessibility In Ui Ux
• 9 Usability Principles: 9 Usability Principles