UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Visual Assets by Page Type

Visual assets should reveal the real product, scene, gameplay, or person rather than only provide vague atmosphere.

assetsimagespage-type

Design Principle

When users need to inspect an object, imagery must be specific, clear, and relevant.

Principle When users need to inspect an object, imagery must be specific, clear, and relevant.

Design action Websites and games must use relevant visual assets; product, place, and person pages should show the real object above the fold, while tool pages reduce decoration.

Examples Positive example: Landing pages, portfolios, ecommerce, venues, and games. Counterexample: Dark, blurred, cropped stock-like media.

Apply when Landing pages, portfolios, ecommerce, venues, and games. The page relies on visual trust and understanding.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Websites and games must use relevant visual assets; product, place, and person pages should show the real object above the fold, while tool pages reduce decoration.

Apply When

  • Landing pages, portfolios, ecommerce, venues, and games.
  • The page relies on visual trust and understanding.

Avoid

  • Dark, blurred, cropped stock-like media.
  • Only SVG gradients serve as the subject image.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
82%
Version
v1
Published
6/6/2026