Rules for Creating Good-Looking User Interfaces, from a Developer By Dominik Weber | September 16, 2025 --- Introduction Creating visually pleasing user interfaces (UI) is often challenging for developers without deep design expertise. This article shares a practical system developed during a redesign of Lighthouse to help developers design better UIs efficiently, focusing on a few key principles rather than complex design theories. --- Hallmarks of Bad Design The main pitfalls observed in bad design are: Alignment Issues: Misaligned icons, text, and elements make the UI look unpolished. Inconsistency: Using different icon weights or element sizes disrupts UI harmony. Inconsistent Element Positioning: Elements like buttons placed unevenly depending on surrounding content. Inconsistent UI Across Pages: Similar components behaving or looking differently on different screens cause user adaptation struggles. Example: Old vs. New Lighthouse UI Previous UI had sidebar icons misaligned and icon/text weight mismatched. Counts in views were placed inconsistently, impairing readability. New design fixes these with better alignment and consistency, producing a calmer, smoother experience without adding features. --- Component Libraries Building a good UI requires consistent, well-designed components. Key Recommendations: Use an existing library rather than creating your own. For Lighthouse, HeroUI was used. How to Use Component Libraries: Use components as-is, avoid adapting or tweaking them. This maintains consistency. Decide early which component styles/variants to use (e.g., buttons as primary = solid, secondary = flat, tertiary = light). Limit style and size variants to simplify design and keep UI consistent. Choosing a Component Library: Comprehensive: It includes all needed components. Appealing Design: Matches your style preference. Avoid Copy-Paste Libraries: These encourage custom tweaks that introduce inconsistencies and maintenance overhead. --- Design Rules Font Weights: Use only two font weights — one for important text (headlines, bold text) and one for less important (body text). Text Colors: Use two text colors for distinction; darker for important text and lighter for secondary text (reverse in dark mode). Icon Weight: Match icon weight to adjacent text weight to avoid visual imbalance. Purposeful UI Elements: Show only essential information and functions, reducing clutter to help users focus on goals. --- Dark Mode Although dark mode doubles verification and adjustments, using HeroUI made it straightforward to implement without much extra work. The added benefit justifies the effort. --- Project-Specific Rules A living document of UI rules is maintained for consistency across: Loading States: Use skeleton loaders for most elements, but default loaders for interactive ones like buttons. Buttons: Defined variants and icon weights per button type and context. Actions: Prefer immediate UI updates with background processing; otherwise, show loading indicators within buttons. Forms: Edit inline (no save buttons when possible), use cards for grouping, handle labels and additional info consistently. Writing down such rules reduces small decision fatigue and improves UI coherence. --- Recommended Resources Practical UI No-nonsense guide to essential web design topics, highly practical. practical-ui.com Refactoring UI Useful design tips integrated with foundational UI concepts. refactoringui.com Designing Interfaces (3rd Edition) Covers fundamental UI patterns with guidance on use cases and limitations. [O'Reilly