Introduction
Developers often need to make design decisions. Understanding fundamental UI/UX principles helps create better user experiences. This guide covers design essentials for developers.
Visual Hierarchy
What Is Visual Hierarchy
The arrangement of elements to show their importance.
Techniques
Size and Scale:
/* Larger = more important */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
p { font-size: 1rem; }
Weight and Emphasis:
.primary { font-weight: 700; }
.secondary { font-weight: 400; }
.muted { font-weight: 300; color: #666; }
Space:
/* More space = more important */
.hero { margin-bottom: 4rem; }
.section { margin-bottom: 2rem; }
.element { margin-bottom: 1rem; }
Typography
Font Selection
Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
Font Pairing
Common Combinations:
- Inter + Georgia (modern + classic)
- Roboto + Roboto (clean)
- Open Sans + Merriweather (readable + serif)
Reading Experience
/* Optimal reading */
body {
font-size: 16px;
line-height: 1.6; /* 1.5-1.7 is ideal */
max-width: 65ch; /* 60-75 characters per line */
}
Color Theory
Color Wheel
- Primary: Main brand color
- Secondary: Supporting color
- Tertiary: Accent color
Color Schemes
Complementary:
:root {
--primary: #2563EB;
--secondary: #F59E0B; /* Opposite on color wheel */
}
Analogous:
:root {
--primary: #2563EB;
--secondary: #3B82F6;
--tertiary: #60A5FA;
}
Color Psychology
| Color | Meaning |
|---|---|
| Blue | Trust, calm |
| Red | Urgency, passion |
| Green | Growth, success |
| Yellow | Optimism, caution |
| Purple | Luxury, creativity |
Layout Principles
Grid Systems
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
Responsive Design
/* Mobile first */
.container {
width: 100%;
padding: 1rem;
}
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
Spacing
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 1rem; /* 16px */
--space-4: 1.5rem; /* 24px */
--space-6: 3rem; /* 48px */
}
User Experience
Usability Principles
- Consistency: Same patterns across app
- Feedback: Show system status
- Affordance: Indicate possible actions
- Error Prevention: Don’t let users fail
User Research Methods
- Interviews: Understand needs
- Surveys: Gather quantitative data
- Usability testing: Observe users
- Analytics: Track behavior
User Flows
graph TD
A[Landing] --> B[Pricing]
B --> C[Sign Up]
C --> D[Onboarding]
D --> E[Dashboard]
E --> F[Create Project]
Accessibility
WCAG Guidelines
Contrast:
/* Minimum contrast 4.5:1 for normal text */
.text {
color: #333;
background: #fff;
}
Focus States:
:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
}
Semantic HTML:
<!-- Bad -->
<div onclick="submit()">Submit</div>
<!-- Good -->
<button type="submit">Submit</button>
Screen Reader Support
<!-- Visually hidden but readable -->
<span class="sr-only">Close menu</span>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Design Systems
What Is a Design System
Collection of reusable components with clear standards.
Components
/* Button */
.btn {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 500;
cursor: pointer;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-secondary {
background: transparent;
border: 1px solid var(--primary);
color: var(--primary);
}
Documentation
- Usage guidelines
- Code examples
- Accessibility notes
- Do’s and don’ts
Common Mistakes
Design Errors
- Too many fonts: Limit to 2-3
- Low contrast: Hard to read
- Inconsistent spacing: Feels unprofessional
- No visual feedback: Users confused
- Ignoring mobile: Excludes users
Tools for Developers
Design Tools
- Figma: Design and prototyping
- Sketch: macOS design
- Canva: Quick graphics
Collaboration
- Zeplin: Developer handoff
- Storybook: Component library
- ZeroHeight: Design system docs
Conclusion
Design is a skill developers can learn. Focus on fundamentals: hierarchy, typography, color, and accessibility. Good design improves user satisfaction and reduces support burden.
Comments