Logo of UI Challenges
Sign in

Gallery

See what others have created

Draw & Annotate
SB

sharpened_blinking

@sharpened_blinking

MediumSaaS

Draw & Annotate

Design a drawing and annotation workspace for reviewing a document, screenshot, or blank canvas. The screen should make it obvious where users create marks, where they edit them, and how they switch between freehand drawing, text, and comments.

Show the main canvas with a few example annotations already placed: a pen stroke, a highlighted area, a text label, and a pinned comment bubble. Include the tool rail, selection handles, and the controls that appear when an annotation is active. The interface should make it clear what is selected and what can be changed without covering the content.

Design the editing flow, not just the canvas. Include states for drawing, selecting, moving, resizing, and deleting annotations. Show how users change stroke weight, color, font size, and opacity. If the product supports collaboration, show how comments are resolved or replied to.

The result should feel like a working review tool, not a blank art board. Users should be able to scan the page, understand the available tools, and make edits without guessing what each icon does.

What to deliver

  • Design a canvas workspace with a visible tool rail for drawing and annotation tools.
  • Show at least one drawn mark, one text annotation, and one callout/comment bubble on the canvas.
  • Include selection, move, resize, and delete states for annotations.
  • Design a properties panel or inline controls for stroke, color, font, and opacity.
  • Show undo/redo and save or export actions in the main chrome.

Infuse personality into your design by selecting a fun color palette that encourages creativity and engagement.