34 articles in UI Design
Cognitive load theory, originally developed for educational psychology by John Sweller, has profound implications for interface design. The theory distinguishes three types of cognitive load: intrinsic (complexity of the task itself), extraneous (caused by poor design), and germane (productive effort that builds understanding). This article translates these concepts into practical design principles: chunking information, progressive disclosure, consistent patterns, and reducing extraneous load through clear visual hierarchy. It includes before-and-after examples of interfaces redesigned using cognitive load principles with measurable usability improvements.
Discord evolved from a gaming voice chat app into a broad community platform serving 150 million monthly users. This case study examines the design decisions behind servers, channels, threads, and roles that enable communities to self-organize, and how the interface balances power-user complexity with newcomer accessibility.
Walks through the wireframing process from initial low-fidelity sketches to detailed high-fidelity prototypes. Explains why wireframes remain essential for validating layout, hierarchy, and flow before investing in visual design and development.
Evidence-based guide to landing page design covering visual hierarchy, persuasion patterns, and conversion optimization. Covers the inverted pyramid of information, social proof placement, form design best practices, and mobile-first considerations. Includes before/after case studies showing how design changes improved conversion rates by 30-200%.
Luke Wroblewski's mobile-first approach: designing for the smallest screen first forces you to prioritize content and functionality. Mobile constraints (small screen, touch input, variable connectivity) reveal what truly matters. Covers progressive enhancement, touch targets, thumb zones, and responsive patterns. Changed how the entire industry approaches web design.
Microinteractions are contained product moments that revolve around a single use case: toggling a setting, liking a post, setting an alarm. They have four parts: trigger, rules, feedback, and loops/modes. Great microinteractions make products feel crafted and human. Covers animation principles, timing, and when microinteractions help vs. hinder usability.
A practical introduction to web accessibility. Covers the four principles of WCAG (perceivable, operable, understandable, robust), common accessibility failures, and how to integrate accessibility into the design process rather than treating it as an afterthought. Includes checklists for color contrast, keyboard navigation, screen reader support, and semantic HTML.
Applies Disney's 12 principles of animation to interface design, showing how motion can guide attention, provide feedback, and create a sense of continuity. Covers easing curves, duration guidelines, and the distinction between decorative and functional animation.
How to build modular UI systems through style guide driven development. Covers atomic design methodology (atoms, molecules, organisms, templates, pages), component libraries, design tokens, and the workflow for maintaining design consistency at scale. Essential reading for teams building products with consistent interfaces.
Deep dive into Gestalt principles of visual perception and how they apply to UI design: proximity (grouped elements are related), similarity (similar elements are related), closure (mind completes incomplete shapes), continuity (eye follows paths), figure/ground (elements perceived as either foreground or background). Foundation of visual design education.
Tim Brown introduces modular scales for typography, creating harmonious proportions in web type. Covers how to choose type sizes that relate to each other through ratios rather than arbitrary pixel values. Explains how to combine modular scales with responsive design for typography that works across devices.
The article that coined 'responsive web design' and changed how the web is built. Marcotte proposes using fluid grids, flexible images, and CSS media queries to create designs that respond to the user's environment. Rather than designing fixed-width pages for each device, design flexible layouts that adapt. A watershed moment in web design history.
Comprehensive guide to color theory for designers. Covers warm vs. cool colors, color associations across cultures, creating color palettes (analogous, complementary, triadic), and the psychological effects of each color family. Includes practical examples of how brands use color strategically: blue for trust (Facebook, LinkedIn), red for urgency (Netflix, YouTube).
Jakob Nielsen's ten general principles for interaction design. Includes visibility of system status, match between system and real world, user control and freedom, consistency and standards, error prevention, recognition rather than recall, flexibility and efficiency, aesthetic and minimalist design, help users recover from errors, and help and documentation. The foundational UX checklist taught in every design program.