Web Design

Good web design makes its purpose, hierarchy, and next action obvious while remaining readable, responsive, accessible, fast, and distinctive.

  • Design matters a lot. If it looks bad, people won’t look at it.
  • Start with the problem, audience, content, and desired outcome. Make the main action obvious.
  • Everything in your design should be deliberate: whitespace, alignment, size, spacing, color, shadows, and everything else.
  • Use high contrast for important elements. Use headings, whitespace, proximity, and alignment to group related content, guide attention, and reduce clutter.
  • Start every project by making the body text look good. Keep body text at 16px or above, line spacing around 120–145% of the point size, and line length around 45–90 characters.
  • Use no more than two typefaces. One well-chosen family in multiple weights is often enough.
  • Reduce cognitive load. Limit choices, group information into meaningful chunks, and use familiar interaction patterns. Users spend most of their time on other websites and expect yours to work similarly.
  • Give clear and immediate feedback. Design default, hover, focus, active, disabled, loading, error, and success states for interactive elements.
  • Design for web accessibility.
    • Provide sufficient contrast, don’t use color alone to convey information, make interactive elements easy to identify, use clear and consistent navigation, label forms, provide identifiable feedback, and include alternatives for images and media.
  • Create responsive designs that adapt to different viewport sizes, input methods, user preferences, and content. Use content-driven breakpoints and test narrow, wide, zoomed, portrait, and landscape layouts.
  • Performance is part of the user experience. Optimize images and fonts, remove unnecessary resources, and keep interactions responsive.
  • Prototype before polishing. Iterate in the browser and test with real content, devices, keyboards, touch, slow connections, and different browsers.
  • Style is a set of constraints that you stick to. Style emerges from consistency, and having a style opens your imagination. Collect constraints you enjoy. Unusual constraints make things more fun. You can always change them later. This is your style, after all. It’s not a life commitment, it’s just the way you do things. Having a style collapses hundreds of future decisions into one, and gives you focus.
  • Use Data Visualization principles for charts and data-heavy interfaces.

Design Styles

Some spells styles to try when designing dashboards, UIs, or anything else.

  • Datasheet
  • High-contrast
  • Monospaced fonts
  • Minimal and utilitarian layout
  • Retro control-panel vibe
  • NeoTech
  • Industrial retrofuture
  • Techno brutalism
  • Neo-Brutalism
  • Editorial Minimalism
  • Swiss / International Typographic Style
  • Text-first, code-adjacent feel
  • Sharp rectangles, thin borders
  • Terminal-inspired developer minimalism
  • Fieldset + legend pattern
  • Clear visual hierarchy
  • Proportional Web
  • Monospace Web
  • Tufte

Resources

Tools