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

Branding & Business

Logo File Formats to Deliver: SVG, PDF, PNG and Source

Prepare a practical logo delivery package with vector masters, web-ready SVGs, transparent PNGs, print PDFs, and an asset index that prevents expensive format mistakes.

Inside this article

Separate masters from distribution files
Use vector formats for scalable artwork
Export raster files for predictable everyday use
Establish names that explain use

Piotr KowalskiRead the article

Typography & Colour

The 60-30-10 Rule in Web Design: Adapting the Color Rule

Use the 60-30-10 colour rule as a flexible starting point for website palettes, then adapt coverage, visual weight, and accents to real content.

Arjun Raman

Branding & Business

Logo File Types Explained: SVG vs PNG vs PDF vs EPS

Choose the right logo format for websites, office documents and print production by understanding vector geometry, raster resolution, transparency and conversion risks.

Arjun Raman

Icons & Illustration

Export SVG From Figma: Clean SVGs for the Web

Turn Figma artwork into predictable web SVGs with a repeatable export workflow covering frames, strokes, viewBox sizing, optimization, theming and visual checks.

Mateo Fernández

Typography & Colour

Small Caps, All Caps and Eyebrow Labels in Web Design

Use uppercase labels without sacrificing readability. Learn how tracking, genuine small caps, language-aware casing, and clear hierarchy work together in web typography.

Inside this article

Give uppercase a specific role
Distinguish capitals from genuine small caps
Set tracking, size, and weight together
Preserve meaningful casing and language

Mateo FernándezRead the article

UI Design

Empty State Design for First Use, No Results and Errors

Design empty states that explain what happened and offer the right next step, with distinct patterns for first use, filtered results, and failed requests.

Maya Lindqvist

Icons & Illustration

Optimize SVG Icons for the Web: Best Practices and Tools

Ship smaller, accessible SVG icons with a repeatable cleanup workflow, safe markup patterns, and visual checks that catch broken paths before release.

Mateo Fernández

Icons & Illustration

SVG Mask in CSS: Use SVG Icons as CSS Masks

Render monochrome SVG silhouettes with CSS masks, including sizing, background colors, asset delivery, and practical limits for interface icon systems.

Aiko Tanaka

UI Design

Settings Page Design: Grouping, Layout and Saving

Design settings pages that make ownership, dependencies and saving behavior clear, with practical layouts for account preferences, workspace controls and risky actions.

Inside this article

Establish ownership before arranging controls
Group settings around recognizable decisions
Build a layout that survives real content
Choose a save model and make its scope explicit

Theo OkaforRead the article

Design Systems

Design System Governance: A Contribution Process That Ships

Set up a lightweight design system contribution process with clear ownership, decision rights, review gates, and release criteria that keep product teams moving.

Maya Lindqvist

UX & Research

UX Personas: Research-Based, Without Stereotypes

Build actionable personas from goals, behaviors, and constraints, then connect each profile to design decisions without inventing unsupported customer traits.

Noor Haddad

UI Design

Data Table Design: Column Widths, Density and Actions

Make dense data tables easier to scan with practical rules for column sizing, numeric alignment, row spacing, status treatments, and responsive overflow.

Maya Lindqvist

Jump to a web design topic