tomevault-io UX/UI Design
A comprehensive UX/UI design skill that helps create user-centered, accessible, and visually appealing digital experiences.
Quick Start
Basic UX/UI design workflow:
# Understand users and their needs
# Research and analyze
# Define information architecture
# Create wireframes and prototypes
# Design visual interface
# Test with users
# Iterate and refine
Core Capabilities
1. User Research
Research Methods
- User interviews and contextual inquiry
- Surveys and questionnaires
- Usability testing
- A/B testing
- Card sorting
- Tree testing
- Competitive analysis
- Analytics review
User Research Artifacts
- User personas
- User journey maps
- Empathy maps
- Jobs to be Done (JTBD)
- User stories and scenarios
- Pain points and opportunities
Research Tools
- UserTesting, Lookback, Hotjar
- Google Analytics, Mixpanel
- Optimal Workshop, UsabilityHub
- Miro, FigJam for collaboration
2. Information Architecture
IA Principles
- Organization systems (hierarchical, sequential, matrix)
- Navigation systems (global, local, contextual)
- Labeling systems (consistent, clear, user-friendly)
- Search systems (faceted search, filters)
IA Deliverables
- Site maps and flow diagrams
- Content inventories and audits
- Navigation structures
- Taxonomy and metadata schemas
- Search strategies
IA Best Practices
- Keep navigation simple (3-click rule)
- Use familiar patterns
- Provide clear labels
- Support multiple paths to content
- Include breadcrumbs for context
3. Wireframing
Wireframe Types
- Low-fidelity: Quick sketches, basic layout
- Mid-fidelity: More detail, grayscale, placeholder content
- High-fidelity: Detailed, close to final design
Wireframe Components
- Layout grids and columns
- Navigation elements
- Content blocks and hierarchy
- Call-to-action buttons
- Form fields and inputs
- Image placeholders
- Annotations and notes
Wireframing Tools
- Figma, Sketch, Adobe XD
- Balsamiq (low-fidelity)
- Whimsical, Miro
- Paper and pencil (sketching)
4. Prototyping
Prototype Fidelity Levels
- Low-fidelity: Paper prototypes, clickable wireframes
- Mid-fidelity: Interactive wireframes, basic animations
- High-fidelity: Fully designed, realistic interactions
Prototyping Capabilities
- Click-through flows
- Animations and transitions
- Micro-interactions
- Form validation
- State changes
- Responsive behaviors
- User testing scenarios
Prototyping Tools
- Figma (interactive prototypes)
- Framer (code-based, advanced)
- Principle (animation-focused)
- ProtoPie (complex interactions)
- InVision, Marvel
5. Visual Design
Design Principles
- Balance: Visual weight distribution
- Contrast: Emphasis and hierarchy
- Repetition: Consistency and rhythm
- Alignment: Order and organization
- Proximity: Grouping related elements
- White space: Breathing room
- Typography: Readability and hierarchy
Color Theory
- Color psychology and meaning
- Color schemes (monochromatic, complementary, triadic)
- Accessibility (WCAG contrast ratios)
- Brand color systems
- Dark mode considerations
Typography
- Font pairing (2-3 fonts max)
- Type scale and hierarchy (H1-H6, body, caption)
- Line height and spacing
- Readability (line length 50-75 characters)
- Web-safe fonts and loading
Visual Design Tools
- Figma, Sketch, Adobe XD
- Adobe Illustrator (icons, graphics)
- Adobe Photoshop (image editing)
- Affinity Designer
6. Interaction Design
Interaction Patterns
- Navigation patterns (hamburger, tabs, breadcrumbs)
- Input patterns (forms, search, filters)
- Feedback patterns (loading, success, error)
- Data patterns (tables, lists, cards)
- Social patterns (comments, likes, sharing)
Micro-interactions
- Button hover states
- Loading animations
- Form validation feedback
- Pull-to-refresh
- Swipe gestures
- Drag and drop
- Tooltips and hints
Animation Principles
- Disney's 12 principles of animation
- Easing curves (ease-in, ease-out, ease-in-out)
- Duration (100-300ms for UI animations)
- Purpose (feedback, continuity, delight)
7. Responsive & Mobile Design
Responsive Design Principles
- Mobile-first approach
- Fluid grids and flexible layouts
- Flexible images and media
- CSS media queries
- Breakpoints (mobile, tablet, desktop)
Mobile Design Patterns
- Touch targets (minimum 44x44px)
- Thumb zones
- Bottom navigation
- Swipe gestures
- Pull-to-refresh
- Infinite scroll vs pagination
Adaptive vs Responsive
- Responsive: Fluid, adapts to any screen size
- Adaptive: Fixed layouts for specific breakpoints
- Progressive enhancement
- Graceful degradation
8. Accessibility (A11y)
WCAG 2.1 Principles (POUR)
- Perceivable: Information accessible to senses
- Operable: Interface navigable by all users
- Understandable: Content and operation clear
- Robust: Compatible with assistive technologies
Accessibility Requirements
- Color contrast: 4.5:1 for normal text, 3:1 for large text
- Keyboard navigation: All interactive elements accessible
- Screen reader support: Semantic HTML, ARIA labels
- Focus indicators: Visible focus states
- Alternative text: Descriptive alt text for images
- Captions and transcripts: For audio/video content
- Form labels: Explicit labels for inputs
- Error messages: Clear, actionable error descriptions
Accessibility Tools
- WAVE, Axe DevTools
- Lighthouse (Chrome)
- Color contrast checkers
- Screen readers (NVDA, JAWS, VoiceOver)
9. Design Systems
Design System Components
- Foundations: Colors, typography, spacing, grid
- Components: Buttons, inputs, cards, modals
- Patterns: Navigation, forms, data display
- Guidelines: Usage, accessibility, best practices
- Tokens: Design variables (CSS custom properties)
Design System Benefits
- Consistency across products
- Faster design and development
- Better collaboration
- Easier maintenance
- Scalability
Design System Tools
- Figma (shared libraries, variants)
- Storybook (component documentation)
- Zeroheight (documentation platform)
- Abstract (version control for Sketch)
Popular Design Systems
- Material Design (Google)
- Human Interface Guidelines (Apple)
- Fluent Design (Microsoft)
- Carbon Design System (IBM)
- Atlassian Design System
10. Usability Testing
Testing Methods
- Moderated usability testing
- Unmoderated remote testing
- Guerrilla testing
- A/B testing
- First-click testing
- 5-second test
- Tree testing (navigation)
Test Planning
- Define goals and metrics
- Create test scenarios and tasks
- Recruit participants (5-8 users)
- Prepare testing script
- Choose tools and environment
Metrics to Measure
- Task success rate
- Time on task
- Error rate
- Satisfaction (SUS, NPS)
- Click-through rate
- Conversion rate
Usability Testing Process
1. Plan → Define goals, scenarios, participants
2. Recruit → Find representative users
3. Prepare → Create prototype and script
4. Test → Observe and take notes
5. Analyze → Identify patterns and issues
6. Report → Share findings and recommendations
7. Iterate → Implement changes and retest
Design Workflows
Complete UX/UI Design Process
┌─────────────────────────────────────────────────────────┐
│ UX/UI DESIGN PROCESS │
└─────────────────────────────────────────────────────────┘
Phase 1: DISCOVER (Research & Understand)
├── Stakeholder interviews
├── User research (interviews, surveys)
├── Competitive analysis
├── Analytics review
└── Problem definition
Deliverables:
├── Research findings report
├── User personas
├── Journey maps
└── Problem statements
Phase 2: DEFINE (Synthesize & Strategize)
├── Affinity mapping
├── User stories and scenarios
├── Information architecture
├── User flows
└── Feature prioritization
Deliverables:
├── Site map
├── User flows
├── Feature list
└── Success metrics
Phase 3: DESIGN (Ideate & Create)
├── Sketching and ideation
├── Low-fidelity wireframes
├── Mid/high-fidelity wireframes
├── Visual design exploration
├── Design system creation
└── High-fidelity mockups
Deliverables:
├── Wireframes
├── Visual designs
├── Style guide
└── Design specifications
Phase 4: PROTOTYPE (Build & Interact)
├── Interactive prototypes
├── Micro-interactions
├── Animations and transitions
├── Responsive variations
└── Accessibility implementation
Deliverables:
├── Interactive prototypes
├── Animation specs
└── Responsive designs
Phase 5: TEST (Validate & Iterate)
├── Usability testing
├── Accessibility audit
├── A/B testing
├── Analytics setup
└── Stakeholder review
Deliverables:
├── Test results and insights
├── Iteration recommendations
└── Final designs
Phase 6: DELIVER (Handoff & Launch)
├── Design specifications
├── Asset export
├── Developer handoff
├── Design QA
└── Post-launch monitoring
Deliverables:
├── Design files (Figma/Sketch)
├── Exported assets
├── Component documentation
└── Style guide
Design Critique Framework
Structure for effective design critiques:
1. CONTEXT (2 minutes)
└── Designer explains: Problem, goals, constraints, decisions
2. REVIEW (5 minutes)
└── Team silently reviews the design
3. FEEDBACK (15 minutes)
├── What works well?
├── What could be improved?
├── Questions and clarifications
└── Alternative approaches
4. ACTION ITEMS (3 minutes)
└── Next steps and decisions
Rules:
- Be specific and constructive
- Focus on user needs, not personal preferences
- Ask questions rather than make statements
- Support feedback with reasoning
- Respect the designer's decisions
Design Best Practices
Visual Hierarchy
1. SIZE
Large = Important
Small = Less important
2. COLOR
High contrast = Attention
Low contrast = Secondary
3. POSITION
Top/Left = Primary (in LTR languages)
Bottom/Right = Secondary
4. SPACING
More space = Emphasis
Tight spacing = Related items
5. TYPOGRAPHY
Bold = Important
Regular = Body
Light = Subtle
Layout Principles
8-Point Grid System
Use multiples of 8 for:
- Spacing (8px, 16px, 24px, 32px, 40px, 48px)
- Element sizes
- Layout dimensions
Benefits:
- Consistency
- Easier handoff to developers
- Scales well for different densities
The 60-30-10 Color Rule
60% - Dominant color (background, main areas)
30% - Secondary color (supporting elements)
10% - Accent color (CTAs, highlights)
F-Pattern and Z-Pattern
F-Pattern (content-heavy pages):
- Users scan top to bottom
- Focus on left side
- Horizontal movements decrease down page
Z-Pattern (simple layouts):
- Start top-left
- Scan to top-right
- Diagonal to bottom-left
- End at bottom-right (CTA)
Mobile Design Guidelines
Touch Target Sizes
Minimum: 44x44 px (iOS), 48x48 dp (Android)
Recommended: 56-60px for primary actions
Spacing: 8px minimum between targets
Safe Areas
iOS:
- Top safe area: Below notch/status bar
- Bottom safe area: Above home indicator
Android:
- Top: Below status bar
- Bottom: Above navigation bar
Add padding to avoid system UI overlap
Mobile Navigation Patterns
1. Tab Bar (Bottom)
- 3-5 primary sections
- Always visible
- Icons + labels
2. Hamburger Menu
- More options
- Hidden by default
- Consider discoverability
3. Bottom Sheet
- Contextual actions
- Easy thumb reach
- Swipe to dismiss
Form Design Best Practices
1. ALIGNMENT
✅ Top-aligned labels (fastest completion)
⚠️ Left-aligned (takes more space)
❌ Placeholder-only (accessibility issues)
2. FIELD LENGTH
Match field length to expected input
- Phone: Shorter field
- Email: Medium field
- Address: Longer field
3. INPUT TYPES
Use appropriate HTML input types:
- email, tel, number, date
- Triggers correct keyboard on mobile
4. VALIDATION
✅ Inline validation (real-time feedback)
✅ Success indicators
✅ Clear error messages
❌ Validation only on submit
5. REQUIRED FIELDS
✅ Mark required fields (*)
✅ Or mark optional fields
✅ Explain why information is needed
6. PROGRESS INDICATORS
For multi-step forms:
- Show current step
- Show total steps
- Allow navigation between steps
7. AUTOFILL & AUTOCOMPLETE
- Use autocomplete attributes
- Support browser autofill
- Provide suggestions when helpful
Button Design Guidelines
BUTTON HIERARCHY
Primary Button:
- High contrast
- Solid fill
- One per screen/section
- For main action
Secondary Button:
- Medium contrast
- Outline or ghost
- Supporting actions
Tertiary Button:
- Text/link style
- Low priority actions
BUTTON STATES
Default → Hover → Active → Disabled
Each state should be visually distinct:
- Hover: Slight color change
- Active: Pressed appearance
- Disabled: Reduced opacity (40-60%)
BUTTON SIZE
Large: 48-56px height (mobile primary actions)
Medium: 40-44px height (default)
Small: 32-36px height (secondary actions)
BUTTON LABELS
✅ Action-oriented ("Save changes", "Create account")
✅ Specific ("Delete file", not just "Delete")
❌ Generic ("Click here", "Submit")
Design by Component
Navigation Design
Primary Navigation
Desktop:
- Horizontal top bar
- 5-7 main items
- Dropdown menus for sub-items
- Search prominent
Mobile:
- Bottom tab bar (iOS)
- Top app bar + hamburger (Android)
- 4-5 items max in tab bar
Breadcrumbs
Usage:
- 3+ levels deep
- E-commerce, documentation
- Not for single-path flows
Format:
Home > Category > Subcategory > Current Page
Guidelines:
- Make all levels clickable (except current)
- Use chevron separator (>)
- Truncate on mobile
Card Design
Card Anatomy:
┌─────────────────────────┐
│ [Image/Thumbnail] │
├─────────────────────────┤
│ Title │
│ Description │
│ Metadata (date, author)│
│ [Action Button] │
└─────────────────────────┘
Best Practices:
- Consistent card sizes
- Clear visual hierarchy
- Adequate padding (16-24px)
- Hover state for interactivity
- Shadow or border for definition
Modal Design
Modal Guidelines:
SIZE:
- Small: 400px width (confirmations)
- Medium: 600px width (forms)
- Large: 800px+ width (complex content)
STRUCTURE:
┌─────────────────────────────┐
│ Title [×]│
├─────────────────────────────┤
│ │
│ Content │
│ │
├─────────────────────────────┤
│ [Cancel] [Primary] │
└─────────────────────────────┘
BEHAVIOR:
- Click outside to close (or not, for critical actions)
- ESC key to close
- Focus trap (keyboard navigation)
- Prevent body scroll
- Return focus on close
ALTERNATIVES TO CONSIDER:
- Inline expansion
- Side panel
- Bottom sheet (mobile)
- Toast notification
Empty States
Empty State Components:
1. Icon/Illustration
2. Headline (what's empty)
3. Description (why it's empty)
4. Call-to-action (what to do)
Examples:
NO ITEMS:
"No messages yet"
"Start a conversation with your team"
[+ New Message]
NO RESULTS:
"No results found for 'search term'"
"Try different keywords or filters"
[Clear Filters]
NO CONNECTION:
"You're offline"
"Check your internet connection"
[Try Again]
Accessibility Guidelines
WCAG 2.1 Level AA Checklist
Perceivable
✓ Text alternatives for images (alt text)
✓ Captions for audio/video
✓ Color contrast 4.5:1 (normal text), 3:1 (large text)
✓ Don't rely on color alone to convey information
✓ Text can be resized 200% without loss of content
✓ Images of text avoided (use real text)
Operable
✓ All functionality available from keyboard
✓ No keyboard traps
✓ Sufficient time for reading and interaction
✓ Provide way to pause/stop moving content
✓ No content flashes more than 3 times per second
✓ Skip navigation links
✓ Descriptive page titles
✓ Focus order is logical
✓ Link purpose clear from text or context
✓ Multiple ways to find pages
✓ Headings and labels descriptive
✓ Focus indicator visible
Understandable
✓ Language of page specified
✓ Consistent navigation across pages
✓ Consistent identification of components
✓ Error messages provided
✓ Error suggestions provided
✓ Error prevention for critical actions
Robust
✓ Valid HTML markup
✓ Name, role, value for UI components
✓ Status messages announced to screen readers
Accessible Color Palettes
Tool Recommendations:
- WebAIM Contrast Checker
- Coolors (contrast checker)
- Stark (Figma plugin)
- Who Can Use (simulator)
Creating Accessible Palettes:
1. Start with brand colors
2. Test contrast against white/black
3. Adjust lightness if needed
4. Create color variants for different uses
5. Document which combinations are accessible
Example Accessible Palette:
Primary: #0066CC (4.5:1 on white) ✓
Secondary: #2E7D32 (4.5:1 on white) ✓
Error: #D32F2F (4.5:1 on white) ✓
Warning: #F57C00 (needs dark text) ⚠️
Success: #388E3C (4.5:1 on white) ✓
Screen Reader Considerations
Semantic HTML:
<header>, <nav>, <main>, <aside>, <footer>
<h1> to <h6> (proper hierarchy)
<button>, <a>, <input>, <label>
ARIA Labels:
- aria-label: Direct label
- aria-labelledby: Reference to label element
- aria-describedby: Additional description
- role: Define element purpose
- aria-live: Announce dynamic content
Example:
<button
aria-label="Close dialog"
aria-describedby="close-help">
×
</button>
<span id="close-help" hidden>
Press Escape to close
</span>
Design Tools & Workflow
Figma Best Practices
Organization
File Structure:
📁 Project Name
📁 01 - Research
📄 User Personas
📄 Journey Maps
📁 02 - Wireframes
📄 Low Fidelity
📄 High Fidelity
📁 03 - Visual Design
📄 Design System
📄 Components
📄 Final Designs
📁 04 - Prototypes
📁 05 - Handoff
Component Architecture
Atomic Design Methodology:
Atoms:
- Button, Input, Icon, Label
Molecules:
- Search bar (input + button + icon)
- Form field (label + input + error)
Organisms:
- Navigation bar
- Form section
- Card with actions
Templates:
- Page layouts
- Empty states
Pages:
- Real content instances
Auto Layout Tips
Use Auto Layout for:
✓ Buttons (padding adjusts to text)
✓ Navigation bars
✓ Cards with dynamic content
✓ Lists and grids
✓ Responsive components
Settings:
- Padding: 16px 24px (top/bottom, left/right)
- Gap: 8px between items
- Constraints: Left/Right or Scale
Figma Plugins (Essential)
Design:
- Unsplash (placeholder images)
- Iconify (icon library)
- Content Reel (placeholder content)
Accessibility:
- Stark (contrast, colorblind simulation)
- A11y - Focus Orderer
Productivity:
- Auto Layout (built-in)
- Find and Replace
- Rename It (batch rename)
Handoff:
- Zeplin, Avocode (design specs)
- Overflow (user flows)
Design System in Figma
Setup:
1. Create styles:
- Colors (primary, secondary, etc.)
- Typography (heading, body, etc.)
- Effects (shadows, blur)
- Grids (8pt, 12-column)
2. Create components:
- Button variants (primary, secondary, size)
- Input variants (default, error, disabled)
- Icons
- Cards
3. Publish library:
- Enable as team library
- Version updates
- Notify designers of changes
4. Documentation:
- Usage guidelines
- Do's and don'ts
- Code examples
Usage:
- Use library components
- Don't detach unless customizing
- Create instances, not copies
- Suggest improvements to system owners
Design Deliverables
User Personas
Persona Template:
┌─────────────────────────────────────────────┐
│ [Photo] Name: Sarah Martinez │
│ Age: 34 │
│ Role: Product Manager │
│ Location: San Francisco, CA │
├─────────────────────────────────────────────┤
│ ABOUT │
│ Bio and background information │
│ │
│ GOALS │
│ • Main goal 1 │
│ • Main goal 2 │
│ │
│ FRUSTRATIONS │
│ • Pain point 1 │
│ • Pain point 2 │
│ │
│ MOTIVATIONS │
│ • What drives them │
│ • What matters most │
│ │
│ TECH SAVVINESS │
│ ■■■■□ (4/5) │
│ │
│ PREFERRED CHANNELS │
│ Mobile app, Email, Web │
└─────────────────────────────────────────────┘
Based on: 12 user interviews, analytics data
User Journey Map
Journey Map Structure:
PERSONA: Sarah Martinez - Booking a flight
┌────────────┬─────────────┬──────────────┬──────────────┬────────────┐
│ PHASE │ RESEARCH │ COMPARE │ BOOK │ TRAVEL │
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ ACTIONS │ • Search │ • Filter │ • Select │ • Check-in │
│ │ • Read │ • Compare │ • Pay │ • Board │
│ │ reviews │ prices │ • Confirm │ │
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ THOUGHTS │ "Need best │ "Too many │ "Is this │ "Where's │
│ │ price" │ options" │ secure?" │ my ticket"│
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ EMOTIONS │ 😊 Excited │ 😕 Confused │ 😰 Anxious │ 😊 Happy │
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ PAIN │ None │ Too complex │ Slow │ Confusing │
│ POINTS │ │ filtering │ checkout │ navigation │
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ OPPORT- │ Saved │ AI │ One-click │ Digital │
│ UNITIES │ searches │ suggestions │ checkout │ wallet │
└────────────┴─────────────┴──────────────┴──────────────┴────────────┘
Design Specifications
For Developers:
Component: Primary Button
STATES:
- Default: #0066CC, 16px padding, border-radius 8px
- Hover: #0052A3
- Active: #003D7A
- Disabled: #0066CC at 40% opacity
TYPOGRAPHY:
- Font: Inter, 16px, 600 weight
- Color: #FFFFFF
- Letter-spacing: 0.02em
SPACING:
- Internal: 12px vertical, 24px horizontal
- External: 16px margin-bottom
ANIMATION:
- Transition: all 0.2s ease-in-out
- Hover: scale(1.02)
ACCESSIBILITY:
- Min height: 44px
- Min width: 120px
- Focus outline: 2px solid #0066CC, 4px offset
When to Use This Skill
Use the UX/UI Design skill when you need to:
- ✅ Design user interfaces for web or mobile
- ✅ Conduct user research and testing
- ✅ Create wireframes and prototypes
- ✅ Develop design systems and style guides
- ✅ Ensure accessibility compliance
- ✅ Design responsive layouts
- ✅ Create information architecture
- ✅ Design navigation and user flows
- ✅ Evaluate usability
- ✅ Create user personas and journey maps
- ✅ Design forms and data input
- ✅ Create micro-interactions
- ✅ Conduct design critiques
- ✅ Handoff designs to developers
- ✅ Establish design best practices
Examples
See the examples/ folder for:
- Complete design process walkthrough
- Wireframe to high-fidelity design
- Design system creation
- Accessibility audit
- User research and testing templates
Resources
Design Tools
- Figma, Sketch, Adobe XD (UI design)
- Framer, Principle (prototyping)
- Miro, FigJam (collaboration)
- Maze, UserTesting (user testing)
Design Systems
- Material Design (Google)
- Human Interface Guidelines (Apple)
- Fluent Design (Microsoft)
- Carbon (IBM)
- Polaris (Shopify)
Learning Resources
- Nielsen Norman Group (research and articles)
- Smashing Magazine
- A List Apart
- Laws of UX
- UX Collective (Medium)
Communities
- Designer Hangout (Slack)
- Dribbble, Behance (portfolios)
- UX Stack Exchange
- Reddit: r/userexperience, r/UI_Design
Remember: Good design is invisible. Great design solves problems while being beautiful, accessible, and delightful to use.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.