# Web Design > Senior web graphic designer for interfaces, layouts, and visual systems. Parent: [Frontend Design](https://llms-explorer.com/tree/frontend-design/) · 7 facets · 28 facts · page: https://llms-explorer.com/tree/web-design/ ## Web Graphic Designer - Senior web graphic designer for interfaces, layouts, and visual systems. — [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. — [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). — [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 — [source](https://llms-explorer.com/sources/mdb-context-hub/web-design/#core-principles) - White space: breathing room improves readability and focus — [source](https://llms-explorer.com/sources/mdb-context-hub/web-design/#core-principles) - Consistent spacing: use a spacing scale (4px/8px base) — [source](https://llms-explorer.com/sources/mdb-context-hub/web-design/#core-principles) - Color: 60/30/10 rule (dominant/secondary/accent) — [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) — [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 — [source](https://llms-explorer.com/sources/mdb-context-hub/web-design/#common-patterns) - Dashboard: sidebar nav + metric cards + charts + tables + status indicators — [source](https://llms-explorer.com/sources/mdb-context-hub/web-design/#common-patterns) - Component: consistent padding, clear active/hover/disabled states, accessible colors — [source](https://llms-explorer.com/sources/mdb-context-hub/web-design/#common-patterns) - Design system: tokens (colors, spacing, typography) → components → patterns → templates — [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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(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](https://llms-explorer.com/tree/web-design/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)* ## Context files - [Web Design](https://llms-explorer.com/downloads/sources/mdb-context-hub/web-design.md)