iconography-and-imagery

What problem does it solve?

This Skill provides a comprehensive guide to creating and implementing iconography and imagery in UI design, offering solutions to common design challenges and best practices.

Core Features & Use Cases

• Icon Grid & Construction: Offers guidelines on grid-based icon construction, standardization, and scaling.
• Icon Style Systems: Explains various icon styles such as outline, filled, duotone, and two-tone.
• Icon Usage: Details best practices for using icons effectively with labels and within specific design contexts.
• SVG Delivery: Delivers guidance on using SVG for icon delivery, including best practices for performance and accessibility.
• Imagery: Covers aspect ratios, art direction, image formats, and performance optimizations.
• Illustration & Brand Imagery: Discusses illustration styles and performance considerations.
• Photography, Scrims & Dark Mode: Offers best practices for incorporating text and branding into images, especially in dark mode.
• Common Mistakes: Highlights common mistakes and provides alternative solutions.
• Use Case: For a UX designer creating an application UI, this skill would guide them on creating a cohesive and accessible icon system, selecting appropriate imagery, and optimizing for performance and accessibility.

Quick Start

Start by defining the base grid and stroke size for your iconography. Then, select an icon style that best suits your design's needs.