Web Design Exam > Web Design Notes > Complete Web & Mobile Designer: UI/UX, Figma, + More > CheatSheet:Visual Design Fundamentals
CheatSheet:Visual Design Fundamentals
1. Color Theory
1.1 Color Wheel
| Color Type | Description |
|---|---|
| Primary | Red, Yellow, Blue - cannot be created by mixing other colors |
| Secondary | Orange (Red + Yellow), Green (Yellow + Blue), Purple (Blue + Red) |
| Tertiary | Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Purple, Red-Purple |
1.2 Color Harmonies
| Harmony Type | Definition |
|---|---|
| Monochromatic | Variations of a single hue using different tints, shades, and tones |
| Analogous | 3-5 colors adjacent on color wheel (e.g., blue, blue-green, green) |
| Complementary | Colors directly opposite on wheel (e.g., red-green, blue-orange) |
| Split Complementary | Base color + two colors adjacent to its complement |
| Triadic | Three colors evenly spaced on wheel (120° apart) |
| Tetradic | Four colors forming two complementary pairs (rectangle or square) |
1.3 Color Properties
| Property | Definition |
|---|---|
| Hue | Pure color (position on color wheel) |
| Saturation (Chroma) | Intensity or purity of color (vivid vs. muted) |
| Value (Brightness) | Lightness or darkness of color |
| Tint | Hue + White (lighter version) |
| Shade | Hue + Black (darker version) |
| Tone | Hue + Gray (muted version) |
1.4 Color Psychology
| Color | Associations & Uses |
|---|---|
| Red | Energy, passion, urgency, danger; used for CTAs, alerts |
| Blue | Trust, calm, professionalism, security; corporate, finance, healthcare |
| Yellow | Optimism, warmth, caution; attention-grabbing, youthful brands |
| Green | Growth, nature, health, wealth; environmental, wellness, finance |
| Purple | Luxury, creativity, wisdom, spirituality; premium brands |
| Orange | Enthusiasm, friendly, confidence; playful, affordable brands |
| Black | Sophistication, power, elegance; luxury, formal brands |
| White | Purity, simplicity, cleanliness; minimal, modern brands |
1.5 60-30-10 Rule
- 60% Dominant color (backgrounds, large areas)
- 30% Secondary color (supporting elements)
- 10% Accent color (CTAs, highlights, emphasis)
2. Typography
2.1 Type Classifications
| Category | Characteristics |
|---|---|
| Serif | Small lines at letter ends; traditional, formal, readable in print (e.g., Times New Roman, Georgia) |
| Sans Serif | No serifs; modern, clean, readable on screens (e.g., Helvetica, Arial, Roboto) |
| Script | Handwriting-style; elegant, decorative, use sparingly (e.g., Brush Script) |
| Display | Decorative, attention-grabbing; headers only, not body text |
| Monospace | Equal character width; code, technical content (e.g., Courier, Consolas) |
2.2 Type Anatomy
| Term | Definition |
|---|---|
| Baseline | Invisible line where letters sit |
| X-height | Height of lowercase letters (excluding ascenders/descenders) |
| Ascender | Part extending above x-height (b, d, h, k, l) |
| Descender | Part extending below baseline (g, j, p, q, y) |
| Cap Height | Height of capital letters |
| Kerning | Space between individual character pairs |
| Tracking (Letter-spacing) | Uniform spacing across all characters |
| Leading (Line-height) | Vertical space between lines of text |
2.3 Typographic Hierarchy
| Level | Characteristics |
|---|---|
| H1 (Primary Heading) | Largest, boldest; 32-48px web; one per page |
| H2 (Section Heading) | 24-32px web; divides major sections |
| H3 (Subsection) | 20-24px web; subdivisions within sections |
| Body Text | 16px web standard; 1.5-1.6 line-height; 45-75 characters per line optimal |
| Caption/Small Text | 12-14px; labels, footnotes, metadata |
2.4 Best Practices
- Limit to 2-3 font families per design
- Pair contrasting fonts (e.g., serif heading + sans-serif body)
- Minimum body text size: 16px web, 12pt print
- Line length: 45-75 characters (optimal readability)
- Line-height: 1.4-1.6 for body text, 1.2-1.3 for headings
- Contrast ratio: 4.5:1 minimum for body text (WCAG AA)
- Avoid all caps for long text (reduces readability)
- Left-align for Western languages (easier scanning)
3. Layout & Composition
3.1 Gestalt Principles
| Principle | Description |
|---|---|
| Proximity | Elements close together are perceived as related group |
| Similarity | Similar elements (color, shape, size) are grouped together |
| Continuity | Eye follows lines and curves, creating flow |
| Closure | Mind completes incomplete shapes/patterns |
| Figure/Ground | Distinguishing object from background |
| Common Region | Elements within boundaries are grouped |
3.2 Grid Systems
3.2.1 Grid Types
| Grid Type | Description |
|---|---|
| Manuscript Grid | Single column; books, documents, long text |
| Column Grid | Multiple vertical columns; magazines, newspapers, websites |
| Modular Grid | Rows + columns creating modules; complex layouts |
| Hierarchical Grid | Custom proportions based on content needs; flexible layouts |
3.2.2 Common Web Grids
- 12-column grid (most common, divisible by 2, 3, 4, 6)
- 8-point grid system (spacing in 8px increments)
- Gutter: 20-30px spacing between columns
- Margin: 15-20px minimum from screen edge
- Breakpoints: 320px (mobile), 768px (tablet), 1024px (desktop), 1440px+ (large)
3.3 Rule of Thirds
- Divide layout into 3×3 grid (9 equal parts)
- Place key elements at intersection points
- Creates balanced, visually interesting composition
3.4 Visual Weight & Balance
| Type | Description |
|---|---|
| Symmetrical Balance | Equal weight on both sides; formal, stable, traditional |
| Asymmetrical Balance | Unequal elements balanced by position/weight; dynamic, modern |
| Radial Balance | Elements radiate from center point |
3.4.1 Factors Affecting Visual Weight
- Size (larger = heavier)
- Color (bright/warm = heavier; dark = heavier than light)
- Density (complex = heavier)
- Position (top/right = heavier than bottom/left)
3.5 White Space (Negative Space)
- Empty space around elements; not necessarily white
- Micro white space: between letters, lines, small elements
- Macro white space: between major sections, margins
- Improves readability, focus, and visual hierarchy
- Premium brands use more white space
3.6 Visual Hierarchy
- Size: Larger elements draw attention first
- Color: Bright, contrasting colors stand out
- Contrast: High contrast creates emphasis
- Alignment: Breaking alignment draws attention
- Proximity: Grouped elements show relationships
- Repetition: Patterns create unity and recognition
4. Design Principles
4.1 Core Principles
| Principle | Description |
|---|---|
| Contrast | Difference between elements; creates emphasis and readability |
| Repetition | Consistent use of elements; creates unity and brand recognition |
| Alignment | Elements positioned relative to each other; creates organization |
| Proximity | Related items grouped together; creates relationships |
| Balance | Distribution of visual weight; creates stability |
| Emphasis | Focal point that draws attention; guides user |
| Unity | Cohesive, harmonious design; all elements work together |
4.2 Visual Contrast Methods
- Size contrast (large vs. small)
- Color contrast (complementary colors, light vs. dark)
- Shape contrast (geometric vs. organic)
- Texture contrast (smooth vs. rough)
- Type contrast (serif vs. sans-serif, bold vs. light)
- Position contrast (top vs. bottom, isolated vs. grouped)
4.3 Accessibility Considerations
| Guideline | Standard |
|---|---|
| Text Contrast Ratio | 4.5:1 minimum for body text (WCAG AA); 7:1 for AAA |
| Large Text Contrast | 3:1 minimum for 18pt+ or 14pt+ bold (WCAG AA) |
| Touch Target Size | 44×44px minimum (mobile); 48×48px recommended |
| Color Alone | Never use color as only indicator (colorblind users) |
| Font Size | 16px minimum for body text |
5. Visual Elements
5.1 Icons
| Property | Best Practice |
|---|---|
| Style | Consistent across interface (all outlined or all filled) |
| Size | 16px, 24px, 32px, 48px (multiples of 8) |
| Stroke Weight | 2px standard; consistent across icon set |
| Grid | Design on pixel grid for crisp rendering |
| Recognition | Use universal icons (hamburger menu, magnifying glass for search) |
5.2 Imagery
- Hero images: 1920×1080px minimum (16:9 ratio)
- Thumbnails: 300×300px minimum
- Web optimization: 72 DPI, compressed (WebP, JPEG)
- Print: 300 DPI minimum
- Aspect ratios: 16:9 (landscape), 4:3, 1:1 (square), 9:16 (vertical)
- Use authentic images over stock photos when possible
5.3 Buttons & CTAs
| Element | Specification |
|---|---|
| Minimum Size | 44×44px (mobile touch target) |
| Padding | 12-16px horizontal, 8-12px vertical |
| Border Radius | 4-8px standard; 24px+ for pill shape |
| States | Default, Hover, Active, Disabled, Focus (for accessibility) |
| Hierarchy | Primary (filled), Secondary (outlined), Tertiary (text only) |
5.4 Shadows & Depth
- Elevation levels: 0dp (flat), 2dp (raised), 4dp (card), 8dp (dropdown), 16dp (modal), 24dp (dialog)
- Shadow syntax: X-offset Y-offset Blur Spread Color
- Subtle shadows: 0 2px 4px rgba(0,0,0,0.1)
- Medium depth: 0 4px 8px rgba(0,0,0,0.15)
- High elevation: 0 8px 16px rgba(0,0,0,0.2)
- Use sparingly; too many shadows create visual clutter
6. Design Systems & Consistency
6.1 Design System Components
- Color palette (primary, secondary, accent, neutral, semantic colors)
- Typography scale (heading levels, body text, captions)
- Spacing scale (4px, 8px, 16px, 24px, 32px, 48px, 64px)
- Component library (buttons, forms, cards, navigation)
- Icon set (consistent style and weight)
- Grid system (columns, gutters, breakpoints)
- Design tokens (reusable values for colors, spacing, typography)
6.2 Atomic Design Methodology
| Level | Description |
|---|---|
| Atoms | Basic building blocks (buttons, inputs, labels, icons) |
| Molecules | Simple groups of atoms (search form: input + button) |
| Organisms | Complex components (header: logo + navigation + search) |
| Templates | Page-level layouts with placeholder content |
| Pages | Specific instances with real content |
6.3 Spacing System
- 8-point grid: All spacing in multiples of 8 (8, 16, 24, 32, 40, 48, 56, 64px)
- 4-point variant: More granular (4, 8, 12, 16, 20, 24, 28, 32px)
- Consistent spacing creates visual rhythm
- Larger spacing between unrelated sections
- Smaller spacing between related elements
6.4 Responsive Design
| Breakpoint | Device Type |
|---|---|
| 320-480px | Mobile portrait |
| 481-768px | Mobile landscape, small tablets |
| 769-1024px | Tablets, small laptops |
| 1025-1440px | Laptops, desktops |
| 1441px+ | Large desktops, monitors |
6.4.1 Mobile-First Approach
- Design for smallest screen first
- Progressively enhance for larger screens
- Simplify navigation (hamburger menus)
- Stack elements vertically
- Prioritize essential content
- Larger touch targets (44×44px minimum)
7. Visual Design Tools & Techniques
7.1 Common File Formats
| Format | Use Case |
|---|---|
| PNG | Transparency needed; lossless; larger file size |
| JPG/JPEG | Photos; lossy compression; no transparency |
| SVG | Scalable vector graphics; icons, logos; infinitely scalable |
| WebP | Modern web format; smaller than PNG/JPEG; supports transparency |
| GIF | Simple animations; limited colors (256); outdated for static images |
| Print files; preserves layout and fonts |
7.2 Export Specifications
- Web: 72 DPI, RGB color mode, @1x, @2x, @3x for retina displays
- Print: 300 DPI, CMYK color mode
- iOS: @1x, @2x, @3x image assets
- Android: mdpi (1x), hdpi (1.5x), xhdpi (2x), xxhdpi (3x), xxxhdpi (4x)
- Favicon: 16×16px, 32×32px, 48×48px (ICO or PNG)
7.3 Color Modes
| Mode | Description |
|---|---|
| RGB | Red, Green, Blue; additive; screens and digital displays |
| CMYK | Cyan, Magenta, Yellow, Black; subtractive; print production |
| HEX | Hexadecimal (#FFFFFF); web colors; 6-digit code |
| HSB/HSV | Hue, Saturation, Brightness/Value; intuitive color selection |
| HSL | Hue, Saturation, Lightness; CSS color model |
7.4 Design Handoff
- Export assets in required formats and resolutions
- Provide style guide (colors, typography, spacing)
- Document component states (hover, active, disabled)
- Specify measurements (px, rem, percentages)
- Include interaction notes and animations
- Tools: Figma (inspect mode), Zeplin, Avocode
8. Visual Hierarchy & Scanning Patterns
8.1 Eye-Tracking Patterns
| Pattern | Description |
|---|---|
| F-Pattern | Horizontal top, horizontal middle, vertical left; text-heavy content, articles |
| Z-Pattern | Top left to top right, diagonal, bottom left to bottom right; landing pages, ads |
| Gutenberg Diagram | Four quadrants: Primary (top-left), Strong Fallow (top-right), Weak Fallow (bottom-left), Terminal (bottom-right) |
| Layer Cake | Horizontal scanning; scannable headings and subheadings |
8.2 Creating Effective Hierarchy
- Most important element: largest, highest contrast, top position
- Progressive disclosure: show essential first, details on demand
- Visual anchors: draw attention to key actions (CTAs)
- Chunking: group related information in 3-5 item clusters
- Strategic color: use accent color sparingly for emphasis
8.3 Focal Points
- Human faces draw immediate attention
- Eyes follow directional cues (arrows, gaze direction)
- Isolated elements stand out (use white space)
- Movement attracts attention (animations, videos)
- Unusual or unexpected elements create interest
9. Mobile Design Considerations
9.1 Touch Targets
- Minimum: 44×44px (Apple), 48×48dp (Android)
- Recommended: 48×48px with 8px spacing between
- Thumb zone: bottom third of screen easiest to reach
- Avoid critical actions in top corners (hard to reach)
9.2 Mobile-Specific Patterns
| Pattern | Description |
|---|---|
| Bottom Navigation | 3-5 primary actions; easily reachable with thumb |
| Hamburger Menu | Hides navigation; saves space; reduces discoverability |
| Tab Bar | iOS standard; bottom navigation with icons + labels |
| Floating Action Button | Primary action; circular; bottom-right (Android Material Design) |
| Card-Based Layout | Scrollable containers; separate content chunks; swipeable |
| Pull to Refresh | Drag down to reload content; common in feeds |
9.3 Gestures
- Tap: Primary action (select, activate)
- Double tap: Zoom in/out
- Long press: Context menu, additional options
- Swipe: Navigate, delete, reveal actions
- Pinch: Zoom in/out (two fingers)
- Drag: Move, reorder items
10. Performance & Optimization
10.1 Image Optimization
- Compress images (TinyPNG, ImageOptim, Squoosh)
- Use appropriate format (WebP preferred for web)
- Implement lazy loading for below-fold images
- Use responsive images (srcset, picture element)
- Serve scaled images (don't scale in CSS/HTML)
- Target file sizes: Hero < 200kb,="" thumbnails=""><>
10.2 Web Performance Metrics
| Metric | Target |
|---|---|
| First Contentful Paint (FCP) | < 1.8=""> |
| Largest Contentful Paint (LCP) | < 2.5=""> |
| Time to Interactive (TTI) | < 3.8=""> |
| Total Page Size | < 1-2="" mb=""> |
10.3 Design for Performance
- Limit web fonts to 2-3 families, 4-6 weights maximum
- Use system fonts when appropriate (faster loading)
- Minimize shadows and complex gradients (rendering cost)
- Optimize animations (use transform and opacity)
- Reduce HTTP requests (combine images, use sprites)
The document CheatSheet:Visual Design Fundamentals is a part of the Web Design Course Complete Web & Mobile Designer: UI/UX, Figma, + More.
All you need of Web Design at this link: Web Design
About this Document
Apr 20, 2026
Last updated
Related Exams
Document Description: CheatSheet:Visual Design Fundamentals for Web Design 2026 is part of Complete Web & Mobile Designer: UI/UX, Figma, + More preparation.
The notes and questions for CheatSheet:Visual Design Fundamentals have been prepared according to the Web Design exam syllabus. Information about CheatSheet:Visual Design Fundamentals covers topics
like and CheatSheet:Visual Design Fundamentals Example, for Web Design 2026 Exam. Find important definitions, questions, notes, meanings, examples, exercises and tests below for CheatSheet:Visual Design Fundamentals.
Introduction of CheatSheet:Visual Design Fundamentals in English is available as part of our Complete Web & Mobile Designer: UI/UX, Figma, + More
for Web Design & CheatSheet:Visual Design Fundamentals in Hindi for Complete Web & Mobile Designer: UI/UX, Figma, + More course.
Download more important topics related with notes, lectures and mock test series for Web Design
Exam by signing up for free. Web Design: CheatSheet:Visual Design Fundamentals
Description
CheatSheet:Visual Design Fundamentals of Complete Web & Mobile Designer to help you remember important concepts with short tricks. Start learning for Web Design exam & improve retention with EduRev.
Information about CheatSheet:Visual Design Fundamentals
In this doc you can find the meaning of CheatSheet:Visual Design Fundamentals defined & explained in the simplest way possible. Besides explaining types of
CheatSheet:Visual Design Fundamentals theory, EduRev gives you an ample number of questions to practice CheatSheet:Visual Design Fundamentals tests, examples and also practice Web Design
tests
Related Searches
video lectures, Semester Notes, CheatSheet:Visual Design Fundamentals, study material, Important questions, mock tests for examination, ppt, past year papers, Summary, Free, shortcuts and tricks, MCQs, Previous Year Questions with Solutions, Objective type Questions, pdf , Viva Questions, CheatSheet:Visual Design Fundamentals, Sample Paper, practice quizzes, Exam, CheatSheet:Visual Design Fundamentals, Extra Questions;