UI/UX Design — Principles, Tools & Best Practices

UX Design Foundations

User Experience (UX) design focuses on optimizing a product for effective, enjoyable use. Don Norman coined the term in 1993. Design Thinking (IDEO/Stanford d.school) has 5 phases: Empathize (user research), Define (problem statement), Ideate (brainstorming solutions), Prototype (low/high-fidelity), Test (usability testing). Key UX metrics: task success rate, time on task, error rate, System Usability Scale (SUS score, >68 = above average), Net Promoter Score (NPS). User research methods : interviews, surveys, contextual inquiry, diary studies, card sorting, tree testing. Creating personas and user journey maps helps align teams around real user needs.

UI Design Principles

Gestalt principles explain visual perception: proximity, similarity, closure, continuity, figure-ground. Hick’s Law : decision time increases logarithmically with the number of choices. Fitts’s Law : time to reach a target depends on distance and target size (make important buttons large and close). Miller’s Law : working memory holds 7±2 items (chunk information). Jakob’s Law : users prefer familiar patterns (follow conventions). Visual hierarchy : size, color, contrast, spacing, typography guide attention. Consistency : internal (within product) and external (platform conventions). Color theory : 60-30-10 rule (primary, secondary, accent), sufficient contrast (WCAG AA: 4.5:1 text, 3:1 large text).

Wireframing & Prototyping

Wireframes : low-fidelity structural blueprints showing layout, content hierarchy, and navigation without visual design. Tools: paper/whiteboard, Balsamiq, Figma. Mockups : high-fidelity static designs with visual treatment (colors, typography, images). Prototypes : interactive simulations for user testing. Figma (dominant tool, 2024): cloud-based collaborative design, auto-layout, components, variables, Dev Mode. Alternatives: Sketch, Adobe XD, Framer. Design systems : reusable components + design tokens (colors, spacing, typography) + documentation. Examples: Material Design (Google), Human Interface Guidelines (Apple), Ant Design, Chakra UI. Design systems ensure consistency and speed across teams.

Accessibility (a11y)

Web Content Accessibility Guidelines (WCAG 2.2) define three conformance levels: A, AA (standard target), AAA. Key principles (POUR): Perceivable (text alternatives, captions, sufficient contrast), Operable (keyboard navigation, no seizure triggers, enough time), Understandable (readable, predictable, input assistance), Robust (compatible with assistive technologies). ~16% of the global population has a disability (WHO). Accessibility improvements benefit everyone (curb-cut effect). Testing: screen reader testing (NVDA, VoiceOver), keyboard-only navigation, Lighthouse, axe-core, color contrast analyzers. Legal requirements: ADA (USA), EAA (EU, 2025), Section 508.

Usability Testing & Iteration

Moderated testing : facilitator observes users completing tasks, asks follow-up questions. Unmoderated testing : remote, asynchronous (UserTesting.com, Maze). A/B testing : compare two variants with real users (Optimizely, Google Optimize). Nielsen’s finding: 5 users uncover ~85% of usability issues. Think-aloud protocol : users verbalize thoughts while using the product. Heuristic evaluation : experts evaluate against Nielsen’s 10 heuristics (visibility of system status, match between system and real world, user control, consistency, error prevention, recognition over recall, flexibility, aesthetic design, error recovery, help/documentation). Iteration is continuous: ship → measure → learn → improve.

📚 Design

All Design articles

Home

Physics

Chemistry

Biology

Mathematics

Computer Science

🌐 Languages

🇺🇦 Українська

🇬🇧 English (current)

❓ Frequently Asked Questions

What is the difference between UI and UX?

UX (User Experience) encompasses the entire user journey: research, information architecture, interaction design, and usability. UI (User Interface) focuses on visual/interactive elements: layouts, colors, typography, buttons, animations. UX is the strategy; UI is the execution. A product can have good UI but poor UX (beautiful but confusing) or good UX but plain UI.

What tools do UI/UX designers use?

Design: Figma (dominant, 2024), Sketch, Adobe XD, Framer. Prototyping: Figma, ProtoPie, Principle. Research: Maze, UserTesting, Hotjar (heatmaps), Optimal Workshop (card sorting). Design systems: Figma libraries, Storybook. Handoff: Figma Dev Mode, Zeplin. Collaboration: FigJam, Miro. Analytics: Mixpanel, Amplitude, Google Analytics.

Why is accessibility important in design?

About 1.3 billion people globally have disabilities (WHO). Accessible design ensures everyone can use your product. It’s also legally required in many jurisdictions (ADA, EAA). Accessibility improvements benefit all users: captions help in noisy environments, keyboard navigation helps power users, clear contrast helps in bright sunlight.

What is a design system?

A design system is a collection of reusable components, design tokens (colors, spacing, typography), patterns, and guidelines that ensure consistency across a product or organization. Examples: Material Design (Google), Polaris (Shopify), Carbon (IBM). Benefits: faster development, visual consistency, easier onboarding, reduced design debt.

How many users do I need for usability testing?

Jakob Nielsen’s research shows 5 users uncover ~85% of usability problems in a single task flow. For quantitative testing (measuring task completion rates, satisfaction scores), you need 20+ users for statistical significance. For A/B testing, sample sizes depend on desired confidence level and minimum detectable effect (use power calculators).

Try it live

Everything above runs in your browser — open Flow Fields and change the parameters while it is running. Nothing is installed, nothing is uploaded, the whole model lives in one tab.