Graphicdesigner Skill

Graphic Designer Expert

Overview

Advanced expertise in graphic design — from foundational principles (color, typography, layout) to digital tools, design systems, branding, UI/UX, and accessibility standards.

1. Core Design Principles

Visual Hierarchy

• Guide the eye with size, weight, color, and position
• Most important element: largest / highest contrast / top-left (LTR)
• F-pattern and Z-pattern for web reading behavior
• Use scale ratios (1.25×, 1.414×, 1.618× — golden ratio)

Gestalt Principles

• Proximity: nearby elements are perceived as related
• Similarity: matching color/shape = same group
• Continuation: eye follows lines and curves
• Closure: incomplete shapes are mentally completed
• Figure/Ground: distinguish foreground from background
• Common Fate: elements moving together are grouped

Balance

• Symmetric: mirrored — formal, stable, corporate
• Asymmetric: visual weight balanced differently — dynamic, modern
• Radial: elements radiate from center — focal, energetic

Contrast & Emphasis

• Never use two similar values — commit to difference
• Contrast types: size, color, weight, texture, shape, direction
• One focal point per composition — avoid competing emphases

Whitespace (Negative Space)

• Active whitespace: intentional breathing room between elements
• Micro whitespace: letter-spacing, line-height, padding
• Macro whitespace: margins, gutters, section breaks
• Whitespace communicates quality and luxury

2. Typography

Type Classification

• Serif: Times, Garamond, Georgia — traditional, editorial, trust
• Sans-serif: Inter, Helvetica, DM Sans — modern, clean, digital
• Monospace: JetBrains Mono, Fira Code — technical, code
• Display/Decorative: headlines only, never body text
• Script: weddings, luxury — sparingly, high contrast background

Type Scale (Modular)

Base: 16px
Minor Third (1.2×):  13 / 16 / 19 / 23 / 28 / 34px
Major Third (1.25×): 13 / 16 / 20 / 25 / 31 / 39px
Perfect Fourth (1.333×): 12 / 16 / 21 / 28 / 37 / 50px
Golden Ratio (1.618×): 10 / 16 / 26 / 42 / 68px

Font Pairing Rules

• Pair a serif with a sans-serif for contrast
• Match personality (both geometric, or both humanist)
• Limit to 2 typefaces per project (3 max)
• Never pair two display fonts
• Vary weight and size, not just family
• Great pairings: Inter + Playfair Display, DM Sans + Lora, Sora + Merriweather

Type Settings

Body text:       16–18px, line-height 1.5–1.7, max-width 65–75ch
Headings:        line-height 1.1–1.3, letter-spacing -0.02em to -0.04em
Small text:      12–14px, line-height 1.4, letter-spacing +0.01em
Caps/labels:     letter-spacing +0.08em to +0.12em (always)
Paragraph spacing: 0.75–1em between paragraphs

3. Color Theory

Color Models

• RGB: screens — additive (light)
• CMYK: print — subtractive (ink)
• HSL/HSB: designer-friendly — hue (0°–360°), saturation, lightness/brightness
• HEX: web shorthand for RGB

Color Harmonies

The 60-30-10 Rule

• 60% dominant/background color
• 30% secondary color
• 10% accent color

Color Psychology

• Red: urgency, passion, energy, danger
• Orange: creativity, enthusiasm, warmth, affordability
• Yellow: optimism, clarity, caution, attention
• Green: nature, growth, health, money, success
• Blue: trust, calm, professional, technology
• Purple: luxury, wisdom, spirituality, creativity
• Black: sophistication, power, elegance, mystery
• White: clean, minimal, pure, spacious

Contrast & Accessibility

• WCAG AA: 4.5:1 for normal text, 3:1 for large text (18px+ bold)
• WCAG AAA: 7:1 for normal text
• Tools: Coolors, Adobe Color, Colorhunt, Paletton
• Never rely on color alone to convey meaning

4. Grid Systems & Layout

Grid Types

Column grid:  12-column (web standard), 8-column (mobile)
Modular grid: rows + columns for complex layouts (magazine, dashboard)
Baseline grid: consistent vertical rhythm (8px base unit)

8-Point Grid System

• All spacing in multiples of 8: 8, 16, 24, 32, 40, 48, 64, 80, 96
• Benefits: consistency, pixel-perfect across screen densities
• Common spacings: 4px (tight), 8px (compact), 16px (default), 24px (relaxed), 32px (sections)

Layout Composition

• Rule of thirds: divide canvas 3×3, place focal points at intersections
• Golden ratio: 1:1.618 — natural proportion guide
• Z-pattern: logo top-left → CTA top-right → content → bottom CTA
• F-pattern: news/text-heavy — top scan → left-aligned reading

5. Design Systems & Tokens

Design Token Structure

Color:
  - Primitive: blue-500 = #3b82f6
  - Semantic:  color-primary = {blue-500}
  - Component: button-bg = {color-primary}

Spacing:
  - space-1 = 4px
  - space-2 = 8px
  - space-4 = 16px

Typography:
  - font-size-base = 16px
  - font-weight-bold = 700
  - line-height-body = 1.6

Radius:
  - radius-sm = 4px
  - radius-md = 8px
  - radius-full = 9999px

Component Variants (Figma)

• Use Variants for states: default, hover, active, disabled, loading
• Use Auto Layout for responsive components
• Use Component properties: boolean (show/hide), text, instance swap
• Structure: Atoms → Molecules → Organisms → Templates → Pages (Atomic Design)

6. Figma Best Practices

File Organization

📁 Project Name
├── 🎨 _Design System (library file — publish styles & components)
├── 📄 01 - Research & Wireframes
├── 📄 02 - UI Design
├── 📄 03 - Prototypes
└── 📄 04 - Handoff / Specs

Layer Naming

✅ Good:  Button / Primary / Large / Default
❌ Bad:   Rectangle 47, Frame 12

Auto Layout Tips

• Set to Hug for flexible components
• Use Fill on children to expand inside parent
• Clip content for cards and containers
• Nested Auto Layouts for complex responsive components

Prototyping

• Smart Animate for smooth transitions (matching layer names)
• Component states for hover/pressed interactions
• Overlay for modals, tooltips, dropdowns
• Variables for interactive light/dark mode toggle

7. Branding & Identity

Brand Identity Elements

1. Logo: wordmark, lettermark, icon mark, combination mark, emblem
2. Color palette: primary (1–2), secondary (2–3), neutral, semantic
3. Typography: primary typeface + secondary + monospace (if needed)
4. Iconography: style (filled/outlined/duotone), stroke weight, corner radius
5. Photography style: tone, subject, composition direction
6. Illustration style: flat, 3D, hand-drawn, geometric
7. Voice & tone: formal/casual, technical/simple, playful/serious

Logo Design Principles

• Works in 1 color (must work in black on white)
• Legible at 16px favicon size and 10m billboard
• Avoid gradients in primary logo (use flat version)
• SVG format — infinitely scalable
• Provide: color, reverse (white), monochrome, favicon variants

Brand Guidelines Document

• Logo usage: clear space, minimum size, forbidden uses
• Color specifications: HEX, RGB, CMYK, Pantone
• Typography specimens and usage rules
• Tone of voice with examples
• Approved imagery style

8. UI / UX Design Principles

UX Laws

• Fitts's Law: larger + closer targets are easier to click → big tap targets (48×48px min)
• Hick's Law: more choices = longer decision time → reduce options
• Miller's Law: 7±2 items in working memory → chunk navigation
• Jakob's Law: users spend most time on other sites → follow conventions
• Aesthetic-Usability Effect: beautiful design perceived as more usable

Interaction Design

• Feedback: every action needs a response (loading, success, error)
• Affordance: design should suggest how to use it (button looks clickable)
• Consistency: same action = same result everywhere
• Error prevention: validate early, constrain inputs, confirm destructive actions
• Progressive disclosure: show only what's needed, reveal complexity on demand

Mobile Design

• Minimum tap target: 44×44px (Apple HIG), 48×48dp (Material)
• Thumb zone: bottom 2/3 of screen is easiest to reach
• Safe areas: respect notch/home bar on iOS, nav bar on Android
• Font size minimum: 16px body (prevents auto-zoom on iOS)

9. Accessibility in Design

Visual Accessibility

• Color contrast: 4.5:1 (AA), 7:1 (AAA) — use Figma Contrast plugin
• Never convey information by color alone — add icons/labels
• Focus indicators: 3:1 contrast, 2px minimum offset
• Text on images: always overlay, darken image or use solid bg

Inclusive Design Checklist

• All interactive elements keyboard accessible
• Logical reading order matches visual order
• Icons have text labels or tooltips
• Form inputs have visible labels (not just placeholder)
• Error messages describe what's wrong and how to fix
• Motion can be disabled (respect prefers-reduced-motion)
• Touch targets ≥ 44×44px with adequate spacing

10. Design Tools Reference

Core Competency Summary

• Apply color theory, typography, and layout to create intentional, hierarchical designs
• Build scalable design systems with tokens, components, and variants in Figma
• Design brand identities: logos, palettes, type, voice, and guidelines
• Apply UX laws and interaction design principles for usable interfaces
• Ensure WCAG-compliant accessibility in all visual design work
• Deliver production-ready assets optimized for web, mobile, and print