Principles of UX / UI (Product Design): Iconography and Illustration

Iconography and Illustration

Iconography & Illustration: Portfolio-Ready Study Guide

A practical, no-fluff guide for aspiring product designers, graphic designers transitioning to UX, and bootcamp students.

What This Is

Iconography and illustration are the visual shorthand of digital products—they guide users, communicate ideas instantly, and add personality without cluttering interfaces. Well-designed icons reduce cognitive load (e.g., a universally recognized "cart" icon speeds up checkout), while custom illustrations can differentiate a brand (e.g., Duolingo’s playful characters make language learning feel approachable). Poor iconography, however, creates confusion (e.g., a "heart" icon that’s mistaken for "favorites" vs. "likes") or slows users down (e.g., overly detailed illustrations distracting from a medical app’s critical info).

Example: Redesigning a hospital patient portal’s appointment-booking flow. Generic calendar icons might not convey "book now" urgency, but a custom illustration of a doctor’s hand holding a clipboard with a "✓" could reduce hesitation. Meanwhile, standardized icons for "prescriptions" or "test results" ensure patients don’t misinterpret critical actions.

Key Terms & Principles

• Affordance (Norman’s Design Principles):
  An icon’s visual cues should suggest its function. Example: A trash can icon "affords" deletion because it resembles a real-world object. ❌ Avoid abstract shapes (e.g., a circle for "settings") unless paired with a label.

• Consistency (Jakob’s Law):
  Users expect icons to work the same way across platforms. Example: A "magnifying glass" should always mean "search," not "zoom" in one app and "find" in another. Break this rule only for deliberate brand differentiation (e.g., Slack’s custom "hashtag" icon for channels).

• Contrast (WCAG 2.1):
  Icons must meet a 3:1 contrast ratio against their background for accessibility. Example: A white "X" on a light-gray button fails WCAG; use a darker gray or add a subtle border. Test with WebAIM’s Contrast Checker.

• Hierarchy (Gestalt Principles):
  Icons should visually prioritize actions. Example: In a music app, the "play" icon is larger and bolder than "shuffle" or "repeat" to guide the user’s attention. Use size, color, or weight to signal importance.

• Metaphor (Conceptual Models):
  Icons should map to real-world concepts users already understand. Example: A "floppy disk" for "save" is outdated (young users may not recognize it), but a "cloud with an arrow" for "upload" is universally clear. Test metaphors with diverse user groups.

• Micro-interactions (Delight):
  Subtle animations or state changes make icons feel responsive. Example: A "heart" icon that fills with color when tapped (like Twitter’s "like") provides feedback. In Figma, use Smart Animate or Variants to prototype these.

• Grid Systems (Alignment):
  Icons should align to a consistent grid (e.g., 24x24px) for uniformity. Example: In a design system, all icons are built on a 24px grid with 2px strokes to ensure they scale predictably. Use Figma’s Icon Grid plugin to enforce this.

• Illustration Style (Brand Voice):
  Illustrations should match the product’s tone. Example:

• Playful: Duolingo’s flat, colorful characters.
• Professional: Stripe’s isometric, detailed diagrams.

• Minimalist: Apple’s line-art icons for system apps.

• Empty States (Opportunity):
  Illustrations can turn frustration into delight. Example: Instead of a blank screen with "No results," use a friendly illustration (e.g., a sad robot holding a broken magnifying glass) with a clear CTA ("Try a different search").

• Cognitive Load (Hick’s Law):
  Too many icons or overly complex illustrations slow users down. Example: A dashboard with 10+ icon-only buttons forces users to memorize meanings. Pair icons with labels or group related actions (e.g., "Share" dropdown with "Copy link," "Email," "Twitter").

• Responsive Icons (Scalability):
  Icons must adapt to different screen sizes. Example: A "menu" icon might be 24px on desktop but 32px on mobile for touch targets. Use Figma’s Auto Layout and Constraints to ensure icons resize proportionally.

• Cultural Context (Localization):
  Icons can have different meanings across cultures. Example: A "thumbs up" is offensive in the Middle East; a "checkmark" means "correct" in the West but "incorrect" in Japan. Research target markets or use universally understood symbols (e.g., a "house" for "home").

Step-by-Step Process Flow

1. Define the Purpose

Action: Start with a user story or job-to-be-done (JTBD).
- Example: "As a user, I want to quickly identify my saved items so I can resume my shopping later." - Figma Action: Create a User Flow frame (e.g., "Saved Items" → "View List" → "Remove Item"). List the icons needed (e.g., "bookmark," "trash," "filter").

2. Audit Existing Icons

Action: Review competitors or your own product’s icons.
- Example: Check how Amazon, Etsy, and Pinterest handle "saved items." Note inconsistencies (e.g., Amazon uses a "heart," Etsy uses a "bookmark").
- Figma Action: Create a Mood Board frame with screenshots of 5–10 apps. Use Figma’s "Compare" mode to spot patterns.

3. Sketch & Test Metaphors

Action: Sketch 3–5 icon concepts on paper or in Figma.
- Example: For "saved items," sketch: 1. A bookmark (literal).
2. A heart (emotional).
3. A folder (organizational).
- Test: Show sketches to 5 users and ask, "What do you think this icon does?" Pick the most intuitive option.

4. Design in a Grid System

Action: Build icons in a 24x24px grid with consistent stroke weights (e.g., 2px).
- Example: In Figma: 1. Create a 24px frame with a 2px grid.
2. Use the Pen Tool (P) to draw shapes.
3. Use Boolean Operations (Union, Subtract) to combine shapes.
4. Export as SVG for scalability.
- Pro Tip: Use Figma’s "Iconify" plugin to browse open-source icons for inspiration.

5. Validate with Usability Testing

Action: Test icons in a low-fidelity prototype.
- Example: In Figma, create a simple prototype with: - A list of saved items.
- Icons for "delete," "share," and "edit." - Test: Ask users to complete tasks like "Remove an item from your saved list." Observe if they hesitate or click the wrong icon.
- Iterate: If users confuse "share" (arrow) with "download" (cloud), redesign or add labels.

6. Document in a Design System

Action: Add icons to your design system with usage guidelines.
- Example: In Figma: 1. Create a Component for each icon (e.g., "Icon/Bookmark").
2. Add Variants for states (e.g., "Default," "Active," "Disabled").
3. Write usage rules (e.g., "Use the bookmark icon only for saving items, not for favorites").
4. Include accessibility notes (e.g., "Minimum contrast ratio: 3:1").

Common Mistakes

Mistake 1: Overly Detailed Icons

• Problem: A "settings" icon with gears, bolts, and a wrench is hard to recognize at small sizes.
• Correction: Simplify to a single gear or cog. Use Figma’s "Simplify Path" tool to reduce anchor points. Test at 16px—if it’s unrecognizable, redesign.

Mistake 2: Inconsistent Style

• Problem: Mixing line icons with filled icons in the same app (e.g., a "home" icon is outlined, but "profile" is filled).
• Correction: Pick one style (e.g., all outlined or all filled) and stick to it. Use Figma’s "Styles" to enforce consistency (e.g., "Icon/Stroke: 2px," "Icon/Fill: #2A2A2A").

Mistake 3: Ignoring Touch Targets

• Problem: A 16px "close" icon on mobile is too small to tap (minimum touch target: 48x48px).
• Correction: Wrap icons in a transparent hit area (e.g., 48px frame with a 24px icon centered). Use Figma’s "Auto Layout" to ensure padding.

Mistake 4: Using Icons Without Labels

• Problem: A "bell" icon could mean "notifications," "alerts," or "reminders."
• Correction: Always pair icons with labels for clarity. If space is tight, use tooltips (e.g., hover over the bell to see "Notifications"). Exception: Universally recognized icons (e.g., "magnifying glass" for search).

Mistake 5: Custom Illustrations That Distract

• Problem: A complex illustration in a banking app’s login screen slows users down.
• Correction: Use illustrations to enhance, not replace, functionality. Example:
• Good: A friendly robot illustration in an empty state ("No transactions yet!") with a CTA.
• Bad: A detailed cityscape background behind a login form.

Design Interview / Portfolio Tips

1. Show Your Process, Not Just the Final Icons

• What Interviewers Want: Evidence of research, iteration, and testing.
• How to Present:
• Include sketches (even rough ones) to show ideation.
• Add usability test quotes (e.g., "3/5 users confused the 'share' icon with 'download'").
• Show before/after comparisons (e.g., "We simplified the 'settings' icon from 12 to 4 anchor points").

2. Explain Trade-offs

• Tricky Distinction: "Why did you choose a heart over a bookmark for 'saved items'?"
• Answer: "We tested both. The heart performed better because:
• Emotional connection: Users associate hearts with 'liking' or 'valuing' items.
• Brand alignment: Our app’s tone is friendly and personal, not utilitarian.
• Competitive research: Instagram and Pinterest use hearts, so users are familiar with the metaphor."

3. Tie Icons to Business Goals

• What Interviewers Want: Proof that your work impacted metrics.
• Example: "By redesigning the 'checkout' icon from a cart to a shopping bag with a '+' symbol, we reduced drop-off by 12% because users intuitively understood they could add more items."

4. Demonstrate Design System Thinking

• Tricky Distinction: "How do icons fit into a design system?"
• Answer: "Icons are components with:
• Variants (e.g., default, active, disabled).
• Usage rules (e.g., 'Use the "trash" icon only for deletion, not archiving').
• Accessibility guidelines (e.g., minimum contrast, alt text for screen readers).
  In Figma, we use nested components and auto-layout to ensure consistency."

Quick Check Questions

1. Scenario:

A stakeholder insists on adding a custom illustration to a data-heavy dashboard (e.g., a stock trading app). The illustration is detailed and colorful. How do you respond?

Answer:
- Principle: Cognitive Load (Hick’s Law) and Hierarchy (Gestalt Principles).
- Response: "Illustrations can enhance delight, but in a data-heavy dashboard, they risk distracting from critical information. Let’s: 1. Test the illustration in a prototype to measure if it slows users down.
2. Simplify it (e.g., use a monochrome line drawing instead of a detailed scene).
3. Place it in a low-priority area (e.g., empty states or onboarding, not next to key metrics)."

2. Scenario:

You’re designing icons for a global app. A teammate suggests using a "thumbs up" for "approve" and a "thumbs down" for "reject." What’s your concern, and how do you address it?

Answer:
- Principle: Cultural Context (Localization).
- Response: "A 'thumbs up' is offensive in some cultures (e.g., Middle East, West Africa). Instead: - Use universal symbols (e.g., a checkmark for 'approve,' an 'X' for 'reject').
- Test with local users if the app is region-specific.
- Add labels to avoid ambiguity (e.g., 'Approve' + ✓)."

3. Scenario:

A developer asks why the "menu" icon (three horizontal lines) needs to be 48x48px on mobile when the icon itself is only 24x24px. How do you explain this?

Answer:
- Principle: Fitts’s Law and Touch Targets (WCAG).
- Response: "The touch target (the area users tap) must be at least 48x48px for accessibility, even if the icon is smaller. This ensures: - Faster taps (Fitts’s Law: larger targets are easier to hit).
- Compliance with WCAG (minimum touch target size).
- Reduced errors (users won’t accidentally tap adjacent buttons).
In Figma, we wrap the 24px icon in a 48px transparent frame with Auto Layout padding."

Last-Minute Cram Sheet

1. Affordance: Icons should look like what they do (e.g., a trash can for deletion).
2. Jakob’s Law: Users expect icons to work like they do in other apps (e.g., "magnifying glass" = search).
3. WCAG Contrast: Icons need 3:1 contrast against backgrounds. Test with WebAIM.
4. Fitts’s Law: Larger icons are easier to tap. Minimum touch target: 48x48px.
5. Gestalt Principles: Group related icons (e.g., "share," "download," "print" in a dropdown).
6. Hick’s Law: More icons = slower decisions. Limit choices (e.g., 3–5 primary actions per screen).
7. Metaphor: Use real-world concepts (e.g., a "house" for "home," not a random shape).
8. Grid System: Design icons on a 24x24px grid with 2px strokes for consistency.
9. ⚠️ Empty States: Illustrations here should guide action, not just decorate.
10. ⚠️ Localization: Avoid culturally specific icons (e.g., "thumbs up," "OK hand").