Web Design

Parent: Frontend Design · Published reference · snapshot 2026-09-08 · skill frontend-ui/references/web-design.md

Senior web graphic designer for interfaces, layouts, and visual systems.

These notes link each claim to its source. Some citations identify archived research reports that are no longer hosted on this site. A published reference means the content is available; it does not certify independent review or accuracy.Read the editorial policy and follow the sources before relying on a claim.

Web Graphic Designer

Senior web graphic designer for interfaces, layouts, and visual systems. [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#web-graphic-designer]
Use when: designing pages, components, dashboards, landing pages, hero sections, color palettes, typography systems, UI layouts, or design systems. [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#web-graphic-designer]
Skip when: backend-only code with no UI output; data visualization libraries; accessibility auditing of existing UI (use accessibility-ux-reviewer). [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#web-graphic-designer]

Core principles

Visual hierarchy: guide eye from most important to least important [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#core-principles]
White space: breathing room improves readability and focus [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#core-principles]
Consistent spacing: use a spacing scale (4px/8px base) [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#core-principles]
Color: 60/30/10 rule (dominant/secondary/accent) [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#core-principles]
Typography: max 2-3 font families, clear hierarchy (H1/H2/body/caption) [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#core-principles]

Common patterns

Landing page: hero (large headline + CTA) + social proof + features + pricing + CTA [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#common-patterns]
Dashboard: sidebar nav + metric cards + charts + tables + status indicators [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#common-patterns]
Component: consistent padding, clear active/hover/disabled states, accessible colors [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#common-patterns]
Design system: tokens (colors, spacing, typography) → components → patterns → templates [archived source: https://llms-explorer.com/sources/mdb-context-hub/web-design/#common-patterns]

Where this helps

Structuring a new landing page, dashboard, or marketing site when there's no existing design system to follow. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Reviewing an existing UI for basic visual-design problems (unclear hierarchy, inconsistent spacing, too many typefaces) before a deeper accessibility or UX pass. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Establishing a starter design system (tokens → components → patterns → templates) for a product that's outgrown ad hoc, page-by-page styling. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Choosing a color palette and typography system for a new interface that needs to look intentional rather than assembled from defaults. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.

Project ideas

Build a landing page using the standard arc: hero (headline + CTA), social proof, features, pricing, closing CTA. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Design a dashboard layout combining sidebar navigation, metric cards, charts, tables, and status indicators, applying a consistent spacing scale throughout. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Create a small design-token set (colors, spacing, typography) and build a handful of components from it to establish the base of a design system. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Apply the 60/30/10 color rule (dominant/secondary/accent) to redesign an interface that currently uses too many competing colors. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.

Antipatterns

Using more than 2-3 font families in one interface, which undermines the clear hierarchy typography is supposed to serve. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Skipping a defined spacing scale (e.g., 4px/8px base) and using ad hoc pixel values, which produces visually inconsistent spacing across a page. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Treating dashboard chart design as covered by general layout principles alone — data-visualization work has its own concerns beyond hierarchy and white space. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Treating accessibility as covered by general visual-design principles; contrast, focus states, and keyboard navigation need a dedicated accessibility review. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.

Known issues

Core principles like the 60/30/10 rule and a 4px/8px spacing scale are starting heuristics, not hard constraints — they can and should bend for a brand with an established, different visual language. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
The component-pattern guidance (consistent padding, hover/active/disabled states, accessible colors) doesn't specify concrete contrast ratios or interaction timing, so it needs pairing with a dedicated accessibility review for compliance-grade work. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Common patterns like the landing-page or dashboard arc are generic starting templates; they don't account for audience-specific conversion research or domain-specific information density needs. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
This pack is a short, principle-level reference rather than a deep visual-design system — it names what to do (hierarchy, spacing, color ratio) without prescribing exact values. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.

Children

Visual Design Aesthetics (frontier)
Layout and Color Systems (frontier)
Design Style Translation (frontier)
Landing Page Design (frontier)

Frontier under this node: Design Style Translation, Landing Page Design, Layout and Color Systems, Visual Design Aesthetics

← the whole tree · 3D view· how to read this page