Skip to content

Design — UI/UX Principles & Resources

Last reviewed: 2026-05-29

UI/UX design encompasses the visual and interactive aspects of digital products. Good design improves usability, accessibility, and user satisfaction — making it a critical skill for developers, not just dedicated designers.

Overview

This training covers design fundamentals: color theory, typography, layout, design systems, prototyping tools, and resources for creating clean, functional user interfaces.

Training Content

  • Color palette generators (Coolors, Adobe Color)
  • Typography tools (Google Fonts, Font Squirrel)
  • UI inspiration galleries (Dribbble, Behance, Awwwards)
  • Design system references (Material Design, Apple HIG)
  • Icon libraries (Feather, Lucide, Font Awesome)
  • Design tools (Figma, Sketch, Penpot)
  • Accessibility checkers (WAVE, Lighthouse) -Image resources (Unsplash, Pexels)

Core Design Principles

1. Color

  • 60-30-10 rule — 60% dominant, 30% secondary, 10% accent
  • Contrast — WCAG AA (4.5:1 for text, 3:1 for large text)
  • Color psychology — Blue (trust), Green (growth), Red (urgency)
  • Accessibility — Don't rely on color alone (add icons/text)

2. Typography

  • Hierarchy — Headings > Subheadings > Body > Captions
  • Scale — Use a modular scale (1.25, 1.333, 1.5 ratio)
  • Line height — 1.5× for body text
  • Measure — 45–75 characters per line for readability
  • Font pairing — Serif + sans-serif, or one family with weights

3. Layout & Spacing

  • Grid systems — 8px / 4px grid foundation
  • White space — Breathing room between elements
  • Alignment — Consistent edges create visual order
  • Proximity — Related items close together
  • Responsive design — Mobile-first, breakpoints for desktop/tablet

4. Interaction

  • Feedback — Visual response to every action (hover, click, loading)
  • Consistency — Same patterns across the product
  • Affordance — Visual cues suggest how elements work (buttons look clickable)
  • Progressive disclosure — Show complex options only when needed

Design Systems

System Creator Best For
Material Design 3 Google Android, web, cross-platform
Human Interface Guidelines Apple iOS, macOS, visionOS
Atlassian Design System Atlassian Enterprise tools
Polaris Shopify E-commerce
Carbon IBM Enterprise dashboards
Ant Design Ant Group Admin panels

Tools

Tool Purpose Cost
Figma UI design, prototyping, collaboration Free tier + paid
Penpot Open-source Figma alternative Free
Sketch macOS UI design Paid
Adobe XD UI/UX design Creative Cloud
Framer Interaction design + web publishing Free tier
Spline 3D design for web Free tier

Resources