- name
- graphic-design
- description
- Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback.
Graphic Design
Comprehensive guide for creating professional visual designs across digital and print media.
Design Fundamentals
The 7 Principles of Design
| Principle | Definition | Application |
|---|
| Balance | Visual equilibrium | Symmetrical, asymmetrical, radial |
| Contrast | Difference between elements | Size, color, shape, texture |
| Emphasis | Focal point creation | Hierarchy guides the eye |
| Movement | Visual flow direction | Leading lines, repetition |
| Pattern | Repetition of elements | Creates rhythm and unity |
| Rhythm | Visual tempo | Regular, flowing, progressive |
| Unity | Cohesive whole | Consistent style throughout |
Color Theory
Color Models
| Model | Use Case | Components |
|---|
| RGB | Digital screens | Red, Green, Blue (0-255) |
| CMYK | Print media | Cyan, Magenta, Yellow, Key/Black |
| HSL | Design tools | Hue, Saturation, Lightness |
| Hex | Web/CSS | #RRGGBB format |
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
| Color | Associations | Use For |
|---|
| Red | Energy, urgency, passion | CTAs, sales, warnings |
| Blue | Trust, calm, professional | Corporate, tech, finance |
| Green | Growth, nature, health | Eco, wellness, money |
| Yellow | Optimism, attention, warmth | Highlights, caution |
| Purple | Luxury, creativity, wisdom | Premium, creative |
| Orange | Enthusiasm, confidence | CTAs, youth brands |
| Black | Sophistication, power | Luxury, editorial |
| White | Clean, minimal, pure | Modern, healthcare |
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
| Category | Characteristics | Use Cases |
|---|
| Serif | Decorative strokes | Print, editorial, formal |
| Sans-serif | Clean, no strokes | Digital, modern, UI |
| Slab Serif | Bold, blocky serifs | Headlines, branding |
| Script | Handwritten feel | Invitations, logos |
| Display | Decorative, unique | Headlines only |
| Monospace | Fixed-width | Code, technical |
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
- Limit fonts: 2-3 maximum per project
- Contrast pairing: Serif + Sans-serif works well
- Line height: 1.4-1.6 for body text
- Line length: 45-75 characters optimal
- Letter spacing: Increase for all-caps text
- 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
- Size: Larger = more important
- Color: Bright/saturated draws attention
- Contrast: High contrast = focal point
- Whitespace: Isolation creates emphasis
- Position: Top-left (F-pattern) or center
- Typography: Bold, different font, caps
File Formats
Raster (Pixel-Based)
| Format | Best For | Notes |
|---|
| JPG/JPEG | Photos, gradients | Lossy, no transparency |
| PNG | Graphics, transparency | Lossless, larger files |
| GIF | Simple animations | 256 colors max |
| WebP | Web images | Best compression, modern |
| AVIF | Web images | Newest, best quality/size |
Vector (Math-Based)
| Format | Best For | Notes |
|---|
| SVG | Web graphics, icons | Scalable, animatable |
| AI | Adobe Illustrator | Native format |
| EPS | Print, legacy | Universal vector |
| PDF | Print, documents | Preserves vectors |
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
| Tool | Best For | Platform |
|---|
| Figma | UI/UX, collaboration | Web, Desktop |
| Adobe Photoshop | Photo editing, raster | Desktop |
| Adobe Illustrator | Vector graphics | Desktop |
| Sketch | UI design | macOS only |
| Affinity Designer | Vector (Illustrator alt) | Desktop |
| Canva | Quick designs | Web |
Free Alternatives
| Tool | Replaces | Platform |
|---|
| GIMP | Photoshop | Desktop |
| Inkscape | Illustrator | Desktop |
| Photopea | Photoshop | Web |
| Vectr | Illustrator | Web |
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
