Logo of UI Challenges
Sign in

Gallery

See what others have created

Illustration
H

hunyench

@hunyench

HardSaaS

Illustration

Design a component for viewing illustrations at high fidelity. The core state is a single image on a clean canvas, with only the controls needed to inspect, navigate, and understand the work. Treat the illustration as the primary content; everything else should sit at the edges or appear on demand.

Include zoom and pan, a clear reset-to-fit action, and a fullscreen state for detailed review. Add previous/next navigation, a caption area, and a compact metadata panel for title, artist, format, and attribution. If the image is part of a sequence, show progress and make it easy to jump between pieces without losing context.

Design the surrounding UI so it never competes with the artwork. Use restrained chrome, obvious focus states, and readable controls at small sizes. Include loading, empty, and error states that still preserve the frame and explain what happened. If you add story mode or autoplay, make the motion optional and give users direct control over play, pause, and speed.

What to deliver

  • Design an illustration viewer with zoom, pan, and fullscreen states.
  • Add a lightweight toolbar for next/prev, captions, and share.
  • Create an artist/info panel that can open without covering the artwork.
  • Show loading, empty, and error states for missing or slow images.
  • Include a story mode variant with page-by-page navigation or autoplay controls.

Play with whitespace to give illustrations prominence and create a breathable layout that welcomes user exploration.