UI/UX Designer Skill
Expert in modern user interface and user experience design for web and mobile applications. Provides comprehensive guidance on design principles, interaction patterns, accessibility, and implementation using modern frameworks and libraries.
Core Competencies
1. Design Principles
- Visual Hierarchy: Guide user attention with size, color, spacing, contrast
- Consistency: Maintain patterns across entire application
- Affordance: Design elements that suggest their function
- Feedback: Provide clear response to user actions
- White Space: Use breathing room to reduce cognitive load
- Typography: Choose readable fonts with proper sizing and spacing
- Color Theory: Create harmonious palettes with proper contrast
- Progressive Disclosure: Reveal complexity gradually
2. User Research & Analysis
- User Personas: Define target user archetypes
- User Journeys: Map complete user workflows
- Pain Points: Identify friction in current experience
- Task Analysis: Break down user goals into steps
- Competitive Analysis: Learn from similar products
- Usability Testing: Validate designs with real users
- A/B Testing: Compare design variations empirically
- Analytics Review: Use data to inform decisions
3. Interaction Patterns
- Navigation: Clear, predictable movement through app
- Forms: Efficient, error-tolerant data collection
- Feedback: Loading states, success/error messages
- Microinteractions: Small delightful moments
- Gestures: Touch and mouse interactions
- Transitions: Smooth, purposeful animations
- Empty States: Guide users when no content exists
- Errors: Helpful, actionable error messages
4. Accessibility (WCAG 2.1)
- Perceivable: Content available to all senses
- Operable: UI components usable by all
- Understandable: Information and operation clear
- Robust: Compatible with assistive technologies
- Color Contrast: 4.5:1 for normal text, 3:1 for large
- Keyboard Navigation: All functions keyboard-accessible
- Screen Readers: Semantic HTML, ARIA labels
- Focus Indicators: Clear visual focus states
5. Responsive Design
- Mobile First: Design for smallest screen, enhance up
- Breakpoints: Common: 640px, 768px, 1024px, 1280px
- Flexible Grids: Use relative units (%, rem, fr)
- Touch Targets: Minimum 44x44px for mobile
- Performance: Optimize for slow networks
- Progressive Enhancement: Core experience works everywhere
Modern Tech Stack
CSS Frameworks
Tailwind CSS (Recommended)
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
Click Me
</button>Benefits:
- Utility-first approach
- No CSS file bloat
- Rapid prototyping
- Consistent spacing/colors
- Easy responsive design
Component Libraries
shadcn/ui (Recommended for React)
- Accessible components (Radix UI primitives)
- Tailwind-styled
- Copy/paste, not npm install
- Full customization
Material UI (MUI)
- Comprehensive component set
- Material Design guidelines
- Enterprise-ready
- TypeScript support
Chakra UI
- Accessible by default
- Composable components
- Dark mode built-in
- Great developer experience
Design Tools
- Figma: Collaborative design (industry standard)
- Adobe XD: Adobe ecosystem integration
- Sketch: Mac-only, design systems
- Framer: Interactive prototypes
- Excalidraw: Quick wireframes
Icon Libraries
- Lucide: Modern, consistent (recommended)
- Heroicons: Tailwind-designed
- Feather: Minimal, clean
- Font Awesome: Comprehensive, classic
UI/UX Workflow
Phase 1: Research (20% of time)
- Understand Users
- Who are they? - What are their goals? - What's their context?
- Define Requirements
- Functional requirements - Business goals - Technical constraints
- Competitive Analysis
- What works well elsewhere? - What should we avoid? - Where's the opportunity?
Phase 2: Ideation (15% of time)
- Sketching
- Low-fidelity paper sketches - Multiple approaches - Quick iteration
- Wireframing
- Digital low-fidelity layouts - Focus on structure, not style - Tools: Figma, Excalidraw
- Information Architecture
- Content organization - Navigation structure - Page hierarchy
Phase 3: Design (30% of time)
- Visual Design
- Choose color palette - Select typography - Create components - Design key screens
- Design System
- Define reusable components - Document patterns - Create style guide
- Prototyping
- Interactive mockups - Test user flows - Validate interactions
Phase 4: Implementation (30% of time)
- Component Development
- Build reusable components - Implement responsive behavior - Add accessibility features
- Integration
- Connect to backend - Handle loading/error states - Optimize performance
- Polish
- Smooth animations - Microinteractions - Edge case handling
Phase 5: Testing & Iteration (5% of time)
- Usability Testing
- Observe real users - Identify issues - Gather feedback
- Accessibility Audit
- Screen reader testing - Keyboard navigation - Color contrast check
- Performance Testing
- Load times - Animation smoothness - Mobile performance
Design System Template
Color Palette
/* Primary Colors */
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-900: #1e3a8a;
/* Semantic Colors */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;
/* Neutrals */
--gray-50: #f9fafb;
--gray-500: #6b7280;
--gray-900: #111827;Typography Scale
/* Tailwind default scale */
text-xs: 0.75rem (12px)
text-sm: 0.875rem (14px)
text-base: 1rem (16px)
text-lg: 1.125rem (18px)
text-xl: 1.25rem (20px)
text-2xl: 1.5rem (24px)
text-3xl: 1.875rem (30px)
text-4xl: 2.25rem (36px)Spacing Scale
/* Tailwind 4px base unit */
0: 0
1: 0.25rem (4px)
2: 0.5rem (8px)
3: 0.75rem (12px)
4: 1rem (16px)
6: 1.5rem (24px)
8: 2rem (32px)
12: 3rem (48px)
16: 4rem (64px)Component Variants
Button Sizes:
- Small: py-1.5 px-3 text-sm
- Medium: py-2 px-4 text-base
- Large: py-3 px-6 text-lg
Button Styles:
- Primary: bg-primary text-white
- Secondary: bg-gray-200 text-gray-900
- Ghost: bg-transparent hover:bg-gray-100
- Danger: bg-red-500 text-white
Common UI Patterns
Navigation
Top Nav (Desktop)
<nav class="bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<img class="h-8 w-auto" src="/logo.svg" alt="Logo">
</div>
<!-- Nav items -->
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#" class="border-b-2 border-blue-500 text-gray-900 px-3 py-2">
Dashboard
</a>
<a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 px-3 py-2">
Projects
</a>
</div>
</div>
</div>
</div>
</nav>Mobile Menu (Hamburger)
<button class="sm:hidden p-2" aria-label="Open menu">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>Forms
Input Field
<div class="space-y-2">
<label for="email" class="block text-sm font-medium text-gray-700">
Email address
</label>
<input
type="email"
id="email"
name="email"
class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
placeholder="you@example.com"
required
>
<p class="text-sm text-gray-500">We'll never share your email.</p>
</div>Form Validation
<!-- Error state -->
<input class="border-red-500 focus:ring-red-500 focus:border-red-500">
<p class="mt-1 text-sm text-red-600">This field is required</p>
<!-- Success state -->
<input class="border-green-500 focus:ring-green-500 focus:border-green-500">
<p class="mt-1 text-sm text-green-600">Looks good!</p>Cards
Basic Card
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<h3 class="text-lg font-semibold text-gray-900 mb-2">
Card Title
</h3>
<p class="text-gray-600 mb-4">
Card description goes here.
</p>
<button class="text-blue-600 hover:text-blue-700 font-medium">
Learn more →
</button>
</div>Modals/Dialogs
Modal Structure
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<!-- Header -->
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold">Modal Title</h2>
<button class="text-gray-400 hover:text-gray-500">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Content -->
<div class="mb-6">
<p class="text-gray-600">Modal content goes here.</p>
</div>
<!-- Footer -->
<div class="flex justify-end space-x-3">
<button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
Cancel
</button>
<button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
Confirm
</button>
</div>
</div>
</div>Loading States
Spinner
<svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>Skeleton Loading
<div class="animate-pulse space-y-4">
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
<div class="h-4 bg-gray-200 rounded"></div>
<div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>Toasts/Notifications
Success Toast
<div class="fixed top-4 right-4 bg-green-50 border border-green-200 rounded-lg p-4 shadow-lg">
<div class="flex items-start">
<svg class="h-5 w-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<div class="ml-3">
<p class="text-sm font-medium text-green-800">Successfully saved!</p>
</div>
</div>
</div>Accessibility Checklist
Essential Requirements ✅
- All images have alt text
- Forms have associated labels
- Color contrast meets WCAG AA (4.5:1)
- All interactive elements keyboard accessible
- Focus indicators visible
- Headings follow logical hierarchy (h1 → h2 → h3)
- ARIA labels for icon buttons
- Skip to main content link
- Error messages associated with inputs
- No information conveyed by color alone
Advanced Requirements ✅
- Screen reader tested (NVDA, JAWS, VoiceOver)
- Keyboard shortcuts documented
- Reduced motion respected (prefers-reduced-motion)
- High contrast mode supported
- Text can be resized to 200%
- Content reflows at 320px width
- Timeout warnings with extension option
- ARIA landmarks for page regions
Responsive Design Patterns
Mobile-First Approach
<!-- Base styles for mobile -->
<div class="p-4 text-sm">
<!-- Enhanced for tablet -->
<div class="sm:p-6 sm:text-base">
<!-- Enhanced for desktop -->
<div class="lg:p-8 lg:text-lg">
Content
</div>
</div>
</div>Responsive Grid
<!-- 1 column mobile, 2 tablet, 3 desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Responsive Typography
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold">
Responsive Heading
</h1>Show/Hide by Screen Size
<!-- Show only on mobile -->
<div class="block sm:hidden">Mobile content</div>
<!-- Hide on mobile -->
<div class="hidden sm:block">Desktop content</div>Animation Guidelines
Timing Functions
/* Tailwind defaults */
ease-linear: linear
ease-in: cubic-bezier(0.4, 0, 1, 1)
ease-out: cubic-bezier(0, 0, 0.2, 1) /* Best for entering */
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)Duration Guidelines
- Instant: <100ms (hover effects)
- Quick: 100-200ms (small transitions)
- Normal: 200-300ms (most transitions)
- Slow: 300-500ms (large movements)
- Avoid: >500ms (feels sluggish)
Common Transitions
<!-- Hover effects -->
<button class="transition-colors duration-200 hover:bg-blue-600">
<!-- Fade in/out -->
<div class="transition-opacity duration-300 opacity-0 hover:opacity-100">
<!-- Slide in -->
<div class="transition-transform duration-300 transform translate-x-full group-hover:translate-x-0">
<!-- Scale -->
<img class="transition-transform duration-200 hover:scale-105">Dark Mode Implementation
Tailwind Dark Mode
<!-- Enable in tailwind.config.js: darkMode: 'class' -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<button class="bg-blue-500 dark:bg-blue-600">
Click me
</button>
</div>Dark Mode Toggle
// Toggle function
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
}
// Initialize on load
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}Common Pitfalls & Solutions
Pitfall 1: Too Many Colors
Problem: Inconsistent color usage, visual chaos Solution: Use a constrained palette (1 primary, 1-2 accent, neutrals)
Pitfall 2: Inconsistent Spacing
Problem: Elements feel unaligned, unprofessional Solution: Use 4px or 8px base unit, stick to spacing scale
Pitfall 3: Poor Contrast
Problem: Text hard to read, fails accessibility Solution: Use contrast checker, aim for 4.5:1 minimum
Pitfall 4: Tiny Touch Targets
Problem: Hard to tap on mobile Solution: Minimum 44x44px for all interactive elements
Pitfall 5: No Loading States
Problem: Users unsure if action worked Solution: Show spinners, disable buttons, provide feedback
Pitfall 6: Desktop-Only Design
Problem: Broken on mobile Solution: Design mobile-first, test on real devices
Pitfall 7: Inaccessible Forms
Problem: Screen readers can't navigate Solution: Associate labels, use semantic HTML, add ARIA
Resources
Learning
- Laws of UX: https://lawsofux.com
- Refactoring UI: Book by Adam Wathan & Steve Schoger
- Don't Make Me Think: Book by Steve Krug
- Nielsen Norman Group: https://www.nngroup.com
Tools
- Figma: https://figma.com (design)
- Tailwind CSS: https://tailwindcss.com (CSS framework)
- shadcn/ui: https://ui.shadcn.com (components)
- Lucide Icons: https://lucide.dev (icons)
- Coolors: https://coolors.co (color palettes)
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
Inspiration
- Dribbble: https://dribbble.com
- Behance: https://behance.net
- Mobbin: https://mobbin.com (mobile patterns)
- Land-book: https://land-book.com (landing pages)
Success Criteria
Good UI/UX achieves:
- ✅ Users complete tasks efficiently
- ✅ Zero confusion about how to use interface
- ✅ Accessible to all users (WCAG AA minimum)
- ✅ Works on all screen sizes
- ✅ Fast load times (<3s initial, <1s interactions)
- ✅ Consistent visual language throughout
- ✅ Delightful microinteractions
- ✅ Error messages are helpful
- ✅ Users don't need documentation
Poor UI/UX results in:
- ❌ High bounce rates
- ❌ Support tickets about "how to..."
- ❌ Accessibility complaints
- ❌ Mobile users leave immediately
- ❌ Frustrated users, negative reviews