Logo of UI Challenges
Sign in
Wireframe example for Image wells
An example interpretation of the prompt
Icon of target

Image wells

Icon of book open

Design image wells for a product form or content editor. Each well should accept one image, show a strong empty state, and make the add/replace action obvious. Treat the component as a repeated pattern, not a one-off gallery.

Show the full set of states: empty, filled, hover, focus, uploading, and error. Keep the same footprint across states so the form stays stable. If an image is already set, make replacement and removal available without hiding the preview.

Use a layout that works for one well or many: consistent crop, clear spacing, and a visible label or helper text when the image has a specific purpose. If the design supports multiple wells, make it easy to scan which slots are complete, which are missing, and which need attention.

Design for practical editing. If a user drags an image over the control, the drop target should be obvious. If upload fails, keep the selected file context and show the next step in place.

Icon of book open

Infuse your image wells with a sprinkle of interactive elements, like subtle animations upon hover or selection, to delight users and enhance engagement.

Better at UI design with every challenge

Select complexity and generate challenge.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.