Graphic Design

Graphic Design

Comprehensive guide for creating professional visual designs across digital and print media.

Design Fundamentals

The 7 Principles of Design

---

Color Theory

Color Models

Color Harmonies

Complementary:    Opposite on wheel (high contrast)
Analogous:        Adjacent colors (harmonious)
Triadic:          3 equidistant colors (vibrant)
Split-Comp:       Base + 2 adjacent to complement
Tetradic:         4 colors forming rectangle
Monochromatic:    Single hue, varying saturation/lightness

Color Psychology

Accessible Color Contrast

WCAG AA Requirements:
- Normal text: 4.5:1 minimum contrast ratio
- Large text (18pt+): 3:1 minimum
- UI components: 3:1 minimum

WCAG AAA Requirements:
- Normal text: 7:1 minimum
- Large text: 4.5:1 minimum

Tools: WebAIM Contrast Checker, Stark, Color Safe

---

Typography

Type Classification

Type Hierarchy

Display:     48-72px  (Hero headlines)
H1:          32-48px  (Page titles)
H2:          24-32px  (Section headers)
H3:          20-24px  (Subsections)
Body:        16-18px  (Readable text)
Caption:     12-14px  (Secondary info)
Micro:       10-12px  (Legal, footnotes)

Typography Rules

1. Limit fonts: 2-3 maximum per project 2. Contrast pairing: Serif + Sans-serif works well 3. Line height: 1.4-1.6 for body text 4. Line length: 45-75 characters optimal 5. Letter spacing: Increase for all-caps text 6. Alignment: Left-align body text (easier to read)

Font Pairing Examples

Headlines + Body:
- Playfair Display + Source Sans Pro
- Montserrat + Merriweather
- Oswald + Lato
- Roboto Slab + Roboto
- DM Serif Display + DM Sans

---

Layout & Composition

Grid Systems

12-Column Grid (Most Common):
├─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┤
│1│2│3│4│5│6│7│8│9│10│11│12│

Common Column Spans:
- Full width: 12 columns
- Two-thirds: 8 columns
- Half: 6 columns
- One-third: 4 columns
- One-quarter: 3 columns
- Sidebar: 3-4 columns

Spacing System (8pt Grid)

/* Base unit: 8px */
--space-1: 4px; /* 0.5x - tight */
--space-2: 8px; /* 1x - base */
--space-3: 16px; /* 2x - comfortable */
--space-4: 24px; /* 3x - section gap */
--space-5: 32px; /* 4x - group separation */
--space-6: 48px; /* 6x - major sections */
--space-7: 64px; /* 8x - page sections */
--space-8: 96px; /* 12x - hero spacing */

Rule of Thirds

┌───────┬───────┬───────┐
│       │       │       │
│   ●───┼───●   │       │  Place key elements
├───────┼───────┼───────┤  at intersection
│       │       │       │  points (●)
│   ●───┼───●   │       │
├───────┼───────┼───────┤
│       │       │       │
└───────┴───────┴───────┘

Visual Hierarchy Techniques

1. Size: Larger = more important 2. Color: Bright/saturated draws attention 3. Contrast: High contrast = focal point 4. Whitespace: Isolation creates emphasis 5. Position: Top-left (F-pattern) or center 6. Typography: Bold, different font, caps

---

File Formats

Raster (Pixel-Based)

Vector (Math-Based)

Export Guidelines

Web Graphics:
- Icons: SVG (or PNG fallback)
- Photos: WebP with JPG fallback
- Illustrations: SVG or WebP
- Resolution: 72 DPI minimum, 2x for retina

Print Graphics:
- Resolution: 300 DPI minimum
- Color: CMYK mode
- Format: PDF/X or TIFF
- Bleed: 0.125" (3mm) on all sides

---

Design Tools

Industry Standard

Free Alternatives

---

Design Systems

Component Structure

Atoms:
- Colors, typography, icons
- Buttons, inputs, labels

Molecules:
- Form fields (label + input + helper)
- Cards (image + title + description)
- Navigation items

Organisms:
- Header (logo + nav + actions)
- Forms (multiple fields + submit)
- Product cards grid

Templates:
- Page layouts
- Grid structures

Pages:
- Specific instances with real content

Naming Conventions

Colors:
- primary, secondary, accent
- success, warning, error, info
- gray-100 through gray-900
- background, surface, text

Components:
- btn-primary, btn-secondary, btn-ghost
- card-default, card-elevated, card-outlined
- input-default, input-error, input-disabled

---

Print Design Specifics

Standard Print Sizes

US Paper:
- Letter: 8.5" × 11"
- Legal: 8.5" × 14"
- Tabloid: 11" × 17"

International (ISO):
- A4: 210 × 297mm
- A3: 297 × 420mm
- A5: 148 × 210mm

Business Cards:
- US: 3.5" × 2"
- EU: 85 × 55mm

Print Checklist

• [ ] CMYK color mode
• [ ] 300 DPI resolution minimum
• [ ] Bleed area included (0.125")
• [ ] Safe zone for text (0.25" from trim)
• [ ] Fonts outlined or embedded
• [ ] Rich black for large areas: C60 M40 Y40 K100

---

Best Practices

DO:

• Start with sketches/wireframes
• Use consistent spacing system
• Test designs at actual size
• Get feedback early and often
• Design for accessibility first
• Use real content when possible
• Create style guides/design systems

DON'T:

• Use more than 3 fonts
• Rely on color alone for meaning
• Ignore whitespace
• Stretch or distort images
• Use low-resolution images
• Center-align long paragraphs
• Forget mobile/responsive design

---

Design Review Checklist

• [ ] Visual hierarchy clear
• [ ] Color contrast passes WCAG
• [ ] Typography readable at all sizes
• [ ] Consistent spacing throughout
• [ ] Alignment precise (use grids)
• [ ] Images high quality and appropriate
• [ ] Brand consistency maintained
• [ ] Responsive/adaptive design considered