
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.
Play with whitespace to give illustrations prominence and create a breathable layout that welcomes user exploration.
Better at UI design with every challenge
Select complexity and generate challenge.
