Web Design: UI, UX, colour, type & branding

Free generators and in-depth articles — UI, UX research, typography, colour, icons, design systems, motion, branding, AI for design and the creator business.

Web Design articles

Design Systems

Design System Naming Conventions for Components

Create component naming conventions that map cleanly between Figma and code, clarify variants, prevent ambiguity, and support safe renaming as your library grows.

Inside this article

Start with a shared naming model
Name by purpose rather than appearance
Separate components, variants, and states
Make discovery work in both tools

Jonah WeissRead the article

UX & Research

Moderated Usability Testing: From Plan to Findings

Build a focused usability test with realistic tasks, neutral moderation, clear success criteria, and findings that lead directly to product improvements.

Theo Okafor

Branding & Business

Wordmark Logo Design: Custom Lettering and Spacing

Build a distinctive wordmark by selecting a suitable type foundation, refining letterforms, correcting optical spacing, and testing realistic brand applications.

Piotr Kowalski

Branding & Business

Logo Usage Guidelines: Spacing and Size Rules That Hold Up

Define measurable logo clear space and minimum sizes for websites, partner placements and print, with practical tests and handoff rules that prevent misuse.

Arjun Raman

Branding & Business

Open Graph Image Templates for a Consistent Brand

Build reusable social preview templates with dependable title layouts, brand cues and export rules, then test how your Open Graph images survive real sharing contexts.

Inside this article

Define what the preview must communicate
Build a small family of layouts
Set headline and artwork constraints
Connect templates to publishing metadata

Piotr KowalskiRead the article

Branding & Business

What to Include in Brand Guidelines for Digital Products

Build brand guidelines that help product teams ship consistent screens, assets and messages, with practical rules for logos, colours, typography and ownership.

Piotr Kowalski

Branding & Business

How to Write a Logo Design Brief That Gets Useful Concepts

Turn business goals into a usable logo brief with audience priorities, production constraints, review criteria, and a clear approval process for designers.

Arjun Raman

Motion & Animation

CSS Hover Effects for Cards and Buttons: Tasteful Defaults

Build restrained hover effects that clarify clickable cards and buttons, with practical CSS timings, keyboard states, touch fallbacks, and reduced-motion rules.

Aiko Tanaka

Motion & Animation

Animate Height Auto in CSS With interpolate-size

Choose a reliable approach to expanding panels: native intrinsic-size interpolation, grid tracks, or measured heights, with accessible controls and reduced-motion fallbacks.

Inside this article

Establish the panel contract
Prefer intrinsic interpolation when available
Use a grid row as a progressive fallback
Measure only when the behavior requires it

Aiko TanakaRead the article

Motion & Animation

CSS Transition vs Animation: When to Use Keyframes

Choose CSS transitions or keyframes for each motion task, handle interrupted states, and build effects that stay predictable across input methods and reduced-motion settings.

Aiko Tanaka

Design Systems

How to Audit a Component Library Before a Design System

Audit a component library with a repeatable inventory, evidence-based consolidation rules, ownership checks, and a migration backlog your product teams can use.

Jonah Weiss

Icons & Illustration

Lucide vs Heroicons vs Phosphor vs Material Symbols

Compare four popular icon families by geometry, weights, coverage and delivery, then use a repeatable audit to choose a library that fits your product.

Aiko Tanaka

Jump to a web design topic