Learn

/

Icons & Imagery

Icons & Imagery

4 patterns

Icon consistency, meaningful imagery, icon ambiguity, and image quality patterns. You'll hit this when icons look mismatched, hero images say nothing about the product, or stretched images undermine your credibility.

Avoid

Navigation

Home

Search

Settings

User


Prefer

Navigation

Home

Search

Settings

User

Why avoid

Mixing outlined and filled icons, or varying stroke weights, creates visual discord. Some icons look heavier than others, drawing uneven attention. It signals that the interface was assembled from different sources rather than designed as a cohesive system.

Why prefer

A consistent icon set uses the same style (all outlined or all filled), stroke weight, and visual proportions. This creates a unified look that feels intentional and professional. Users subconsciously register consistency as a signal of quality and trustworthiness.

Avoid

[Generic stock photo]

Boost your workflow

Our platform helps teams collaborate and ship faster.


Prefer

Boost your workflow

Our platform helps teams collaborate and ship faster.

Why avoid

A generic gradient or stock photo adds visual weight but communicates nothing about the product. Users have learned to ignore decorative hero images because they carry no information. The space is wasted on something that looks pretty but does not help the user understand or decide.

Why prefer

A product illustration that shows what the tool actually does gives users an immediate visual understanding. It communicates the product's value proposition in a way that complements the headline, helping users decide if this is what they need within seconds of landing on the page.

Avoid

Quick Actions


Prefer

Quick Actions

Why avoid

Abstract or novel icons force users to guess what each button does. A square-in-square, a triangle, or an X could mean many things. Without established conventions to fall back on, users must try each icon to discover its function, which wastes time and breeds frustration.

Why prefer

Universally recognized icons like the gear (settings), bell (notifications), person (profile), and question mark (help) are immediately understood across cultures and experience levels. They leverage established conventions that users have learned from years of interacting with digital interfaces.

Avoid

Team

Stretched, pixelated, wrong aspect ratio.


Prefer

Team

AK

JL

MR

Consistent size, proper aspect ratio, sharp.

Why avoid

Stretched, pixelated, or poorly cropped images immediately undermine credibility. Users associate poor image quality with low effort and unreliability. If a team cannot get their own visuals right, users question whether the product itself will be well-maintained.

Why prefer

Properly sized, sharp images with consistent dimensions signal attention to detail. Users associate visual polish with product quality and reliability. Clean avatar components with consistent shapes and good contrast convey professionalism even without real photos.