Illustration & Iconography in UI Design: A Designer’s Perspective
Visual elements like illustrations and icons form the backbone of intuitive, engaging user interfaces. They communicate complex ideas instantly, guide users through interfaces, and inject personality into digital products. As a designer who has worked extensively with visual systems, I’d like to share a comprehensive perspective on creating effective illustrations and iconography.
Basic Drawing Principles
Form, shape, perspective — even digital designers benefit.
Understanding foundational art principles remains crucial even in the digital design realm. These skills inform all visual design work:
Form & Volume: Understanding how light interacts with three-dimensional objects helps create illustrations with depth and realism. Practice visualizing objects as simple forms (cubes, cylinders, spheres) before adding details.
Perspective: Consistent perspective in illustrations creates a sense of space and dimension. For product illustrations, isometric perspective (at 30° angles) has become popular because it balances dimensionality with simplicity.
Composition: The arrangement of elements creates visual hierarchy and guides the viewer’s eye. Use techniques like the rule of thirds, framing, and contrast to create balanced, interesting compositions.
Color Theory: Color conveys emotion and meaning. Develop a thoughtful color palette that aligns with your brand while ensuring sufficient contrast for accessibility.
Practice Tips: Sketching regularly—even just 15 minutes daily—dramatically improves your drawing abilities. Study real objects and their shadows, reflections, and proportions.
Line, Shape & Style Consistency
Keep your illustrations or icon sets unified.
Consistency is paramount in creating cohesive visual systems:
Line Weight: Establish standard line thicknesses across your icon set or illustrations. For icons, 1-2px strokes work well for UI; illustrations may employ varied weights for emphasis.
Corner Treatment: Decide whether your visual language uses rounded corners, sharp angles, or a mix. This subtle detail creates visual cohesion.
Style Guide: Document your decisions about stroke caps, joins, negative space proportions, and spacing. This becomes invaluable when creating new assets or onboarding other designers.
Common Motifs: Identify repeated elements across your illustrations and standardize them. For example, if you frequently depict people, create a consistent approach to rendering human figures.
Level of Abstraction: Determine how realistic or abstract your visuals should be. More abstract styles often scale better across contexts.
Vector Illustration Tools
Master tools like Figma, Illustrator, or Affinity Designer.
Modern vector tools offer powerful features for creating scalable graphics:
Figma: Increasingly the industry standard for UI work, Figma’s vector capabilities include boolean operations, detailed pen tool control, and constraints for responsive graphics. Its component system works brilliantly for icon libraries.
Adobe Illustrator: The traditional powerhouse with unparalleled precision. Features like the blend tool, pattern creation, and advanced pathfinder operations make complex illustrations possible. Integration with other Adobe tools is seamless.
Affinity Designer: A cost-effective alternative with excellent performance. Its persona system lets you switch between vector and pixel workflows in the same document.
Technique Focus:
- Master the pen tool for creating precise curves
- Use boolean operations (union, subtract, intersect) to create complex shapes
- Employ symbols/components for repeating elements
- Learn keyboard shortcuts to dramatically increase efficiency
Scalability & Simplicity in Icons
Good icons work at 16px and 160px.
Icons must function across diverse contexts and sizes:
Optical Adjustments: Visual perception demands that icons be adjusted for different sizes. What looks balanced at 64px may appear distorted at 16px. Create size-specific variants for important breakpoints.
Detail Reduction: As size decreases, remove non-essential details. A detailed briefcase icon might simplify to a basic rectangle with handle at smaller sizes.
Consistent Visual Weight: Icons should feel balanced when displayed together. Adjust complexity and negative space to achieve visual harmony.
Testing Approach: Always test icons at their intended display size. What seems clear on your artboard may not translate to actual use contexts.
Minimum Clear Space: Define padding requirements to prevent icons from feeling crowded or colliding with other elements.
Symbolism & Metaphor
Icons should communicate clearly — avoid confusion.
Effective visual communication relies on shared understanding:
Cultural Considerations: Symbols carry different meanings across cultures. A thumbs-up is positive in Western contexts but offensive elsewhere. Research international interpretations of your visual metaphors.
Established Conventions: Leverage commonly understood symbols—home for homepage, magnifying glass for search, gear for settings. Breaking conventions creates confusion.
Testing Metaphors: Conduct quick user tests to verify whether your icons communicate intended meanings. Ask participants what action they expect an icon to perform.
Text Labels: When introducing new or ambiguous icons, pair them with text labels initially. Once users learn the association, labels can be reduced or removed.
Abstract vs. Concrete: More abstract concepts (sharing, analyzing) benefit from more literal representations, while concrete actions can use simpler symbolic forms.
System Icons vs. Brand Icons
Understand when to be neutral and when to be expressive.
Different contexts demand different approaches:
System Icons: Used for navigation, actions, and UI controls, these should be:
- Neutral and functional
- Highly legible at small sizes
- Consistent with platform conventions
- Subdued to avoid overwhelming content
Brand Icons: Used for features, marketing materials, and product identity, these can be:
- More expressive and distinctive
- Aligned with brand personality
- More detailed and illustrative
- Used to differentiate your product
Balancing Act: Even highly stylized products need some standard system icons for universal functions. Consider a hybrid approach where core navigation uses familiar paradigms while product-specific features employ more distinctive iconography.
Icon Grids & Pixel Snapping
Clean, aligned icons = crisp results.
Technical precision ensures professional results:
Grid Systems: Develop consistent grid frameworks for icons. Popular approaches include:
- 24×24 with 1px padding for standard UI icons
- 8×8 pixel grid basis for alignment
- Keyline shapes (circle, square, rectangle) to maintain proportions
Pixel Alignment: Align vector points to the pixel grid, especially for horizontal and vertical lines, to avoid anti-aliasing blur. Most vector tools offer pixel snapping features.
Stroke Positioning: Place strokes inside shapes rather than centered when possible to maintain crisp edges. This is particularly important for square and rectangular icons.
Export Testing: Test exports at actual sizes to catch rendering issues. What looks perfect in your design tool may render differently in browsers.
SVG Optimization: Clean up unnecessary nodes and use whole-pixel values where possible to reduce file size and improve rendering.
Illustration for UI
Use illustrations to support, not distract.
Strategic use of illustrations enhances user experience:
Purposeful Placement: Use illustrations to:
- Guide attention to important features
- Explain complex concepts
- Create emotional connection
- Fill empty states meaningfully
- Break up text-heavy content
Hierarchy Consideration: Illustrations should complement, not compete with, core UI elements. Adjust visual weight, color saturation, and detail level to maintain proper hierarchy.
Animation Potential: Design illustrations with animation in mind. Separate elements onto layers that can move independently and consider how motion enhances the narrative.
Performance Impact: Large, detailed illustrations can affect loading times. Optimize SVGs, consider lazy-loading techniques, and test on various devices.
Context Relevance: Illustrations should feel connected to the user’s current context or task. Generic imagery feels impersonal and less effective.
Hand-drawn vs. Geometric Styles
Pick a style that suits the project personality.
Style choices communicate personality and purpose:
Geometric/Minimal:
- Creates perception of efficiency and precision
- Works well for technical or enterprise products
- Generally more timeless and less trend-dependent
- Easier to maintain consistency across designers
- Often more accessible and universally understood
Hand-drawn/Organic:
- Adds warmth, humanity, and approachability
- Differentiates from competitors in crowded markets
- Can express more nuanced emotion
- Works well for creative, educational, or health/wellness products
- May require more skill to execute consistently
Hybrid Approaches: Many successful products blend elements of both, such as geometric structures with organic textures or hand-drawn details within structured frameworks.
Exporting for Web
Optimize SVGs, sprites, and responsive sizes.
Technical considerations ensure your visuals display properly:
SVG Optimization:
- Use tools like SVGO to remove unnecessary metadata
- Simplify paths to reduce file size
- Convert text to outlines for consistent rendering
- Use descriptive IDs for elements that may be animated or targeted via CSS
Icon Font vs. SVG:
- Icon fonts offer simple color changes through CSS
- SVGs provide multi-color options and better accessibility
- SVG sprites combine multiple icons in a single file, reducing HTTP requests
Responsive Techniques:
- Use the viewBox attribute in SVGs to maintain proportions
- Create multiple sizes for raster formats (PNG, JPG)
- Test illustrations in responsive layouts to ensure they scale appropriately
Accessibility Considerations:
- Add appropriate aria-labels to icon elements
- Ensure sufficient contrast for icons that convey important information
- Provide text alternatives for complex illustrations
Animation Preparation:
- Name layers logically for CSS or JavaScript animation
- Group related elements for easier targeting
- Consider loading performance when implementing animated SVGs
Building a Comprehensive System
To create a truly effective visual language:
Start with Core Elements: Develop basic shapes, strokes, and stylistic approaches that will inform your entire system.
Document Everything: Create detailed guidelines including grid systems, color usage, style variations, and implementation notes.
Build for Evolution: Design your system to grow and adapt. Create principles rather than just examples.
Consider Technical Implementation: Work closely with developers to understand rendering constraints and optimization needs.
Test with Users: Validate that your visual elements communicate effectively across different contexts and audiences.
The most successful illustration and icon systems balance creative expression with functional clarity. They evolve thoughtfully rather than chasing trends, and they serve the user’s needs above all else. By mastering these principles, you’ll create visual systems that not only look beautiful but meaningfully enhance your product’s usability and emotional connection.