Images
Images serve as powerful storytelling and informational tools within a design system. They can range from product photos and screenshots to brand or lifestyle photography, helping clarify ideas, evoke emotions, and reinforce a product’s identity. A well-defined images foundation ensures consistent quality, style, and usage across all digital and print touchpoints, improving user engagement and brand recognition.
Best practices
Maintain High Quality
Use crisp, clear images without pixelation or distortion.
For product photos, ensure the subject is well-lit and clearly visible.
Optimize Performance
Resize and compress images to keep page load times fast.
Use lazy loading for off-screen images to improve initial load performance.
Keep It Relevant
Select images that directly relate to the accompanying content.
Avoid “filler” visuals that don’t add meaning, as they can distract or confuse users.
Diversity & Inclusivity
Represent a wide range of ages, genders, ethnicities, and abilities in lifestyle or user-centric photos.
Avoid stereotypes or tokenism by ensuring authenticity in depiction.
Document Usage Guidelines
Provide clear examples of correct and incorrect usage (e.g., image cropping, excessive filters, stretching).
Include information on where to source images (internal library, stock sites) and how to attribute them if required.
Consider Legal & Licensing
Respect copyright laws and licensing agreements when using third-party or stock images.
Keep track of usage rights and ensure you have proper permissions.
Use high-quality, relevant images that meaningfully support your content—avoid generic stock images that add little value or confuse the message.
Summary
Images are a cornerstone of visual communication, adding depth and context to your product’s story. By defining guidelines for style, sizing, file formats, and accessibility, you can maintain a consistent, impactful, and inclusive look across all brand touchpoints. Whether you’re showcasing product features, illustrating user scenarios, or enhancing empty states, a strong images foundation ensures each visual element serves a clear purpose while aligning seamlessly with your overall brand identity.
