lucasacchi/LogWhispererAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
LogWhispererAI/.opencode/skills/ui-ux-design-user-experience/SKILL.md
Luca Sacchi Ricciardi aa489c7eb8 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
2026-04-03 13:13:59 +02:00

231 lines
8.3 KiB
Markdown
Raw Permalink Blame History

---
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
Reference in New Issue View Git Blame Copy Permalink