Graphic Design

作者 travisjneumanec3a08f1daff無授權條款101 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫今天更新

Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback.

僅含說明Design & Creative

AI 產生的概覽

平面設計參考指南，涵蓋設計原則、色彩、字體、版面、檔案格式與印刷規範。

功能: 提供結構化的平面設計基礎知識參考：七大設計原則、色彩理論與無障礙對比度要求、字體層級與字體搭配、格線與間距系統，以及視覺層級方法。內容還包括點陣與向量檔案格式、網頁與印刷匯出設定、設計工具、設計系統的結構與命名，以及印刷尺寸和印前檢查清單。產出的是指引與清單，而非檔案或圖像。
適用情境: 適用於做視覺設計決策時，例如選擇配色、搭配字體、建立版面格線，或為印刷和網頁匯出準備稿件。也適合依無障礙、層級和一致性標準審閱設計。
執行需求: 無需任何工具、套件或憑證；僅為說明性內容，不附帶指令碼。

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

Color Harmonies

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

Complementary:    Opposite on wheel (high contrast)Analogous:        Adjacent colors (harmonious)Triadic:          3 equidistant colors (vibrant)Split-Comp:       Base + 2 adjacent to complementTetradic:         4 colors forming rectangleMonochromatic:    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

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)

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

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

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)

css

/* 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 */

/* 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 (●)│   ●───┼───●   │       │├───────┼───────┼───────┤│       │       │       │└───────┴───────┴───────┘

┌───────┬───────┬───────┐│       │       │       ││   ●───┼───●   │       │  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)

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

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

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

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

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

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

來源與署名

來源：travisjneuman/.claude位於skills/graphic-design提交ec3a08f

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

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

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

Graphic Design

Graphic Design

Design Fundamentals

The 7 Principles of Design

Color Theory

Color Models

Color Harmonies

Color Psychology

Accessible Color Contrast

Typography

Type Classification

Type Hierarchy

Typography Rules

Font Pairing Examples

Layout & Composition

Grid Systems

Spacing System (8pt Grid)

Rule of Thirds

Visual Hierarchy Techniques

File Formats

Raster (Pixel-Based)

Vector (Math-Based)

Export Guidelines

Design Tools

Industry Standard

Free Alternatives

Design Systems

Component Structure

Naming Conventions

Print Design Specifics

Standard Print Sizes

Print Checklist

Best Practices

DO:

DON'T:

Design Review Checklist

來源與署名

更多來自 travisjneuman/.claude 的技能

Brand Identity

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design