A small tool for sketching UIs (WIP/Concept)

Its quite a long time without large changes for the tool, since I got stuck on design questions. I added more shapes, but it became like balsamiq i.e. a tool where you select the “right” element and then add it. This led to a lot of UI (“chrome”) being needed to provide all the elements, it also did somewhat clash with the “sketching” aspect to be able to add complex elements, since I want the program to work with some minimal work via lines and rectangles, too.

The idea of “decorating” the shapes felt cumbersome in my prototype, but it would have enabled having only two types of shapes, which I liked.

If I ditch decorating and only have rectangles, and lines and text I can do quite a lot. However, I am not sure how to implement icons. These are relevant, but I did not find a good way to make them work. One idea could be that one can draw in any rectangle if required. This would make creating icons trivial. The “canvas” for drawing would always be as big as the element or bigger (so it does not always cut off everything when resized).

I am not sure how to trigger drawing mode yet, maybe there is a pen tool that just draws on topmost element it clicks on and thus initializes drawing.

…or I just allow drawing anywhere with a Pen-Tool, which creates a figure. The figure becomes a shape exactly as big as the drawing, enclosed in whatever it encloses. It is non-resizeable, but draggable. The “size” can be changed by drawing more or erasing parts. Like text is is not a composite figure, so no other figures can be dragged on it to be contained. If another figure is dragged on a drawing-figure it just bubbles up to the next composite figure containing it and is appended to that instead. When you draw on a composite figure, the figure might be reattached in case it becomes to large for its current container. This would need a composite command/undo-redo (to store both the additons to the drawing and the possible reattachment)

I created a new version: UI Sketcher (code here)

a toolbar with 2 icons, a mousecursor and a rectangle with lines; 3 buttons: undo, redo, save

It only has two modes now: selection and drawing. Drawing horizontally created a line, anything else creates a rectangle. Later I might add text and the ability to draw in figures (e.g. to create icons) but for now I want to find out if the basic concept works.

Not working yet:

  • Keyboard shortcuts
  • anything not a rectangle or line
  • Two bugs: Lines can’t be resized, no zoom/pan in drawing mode.

Possible feedback: I currently try to get the very basics right. What I am most interested in is: Does the tool, in its current form do something useful? How is the “feel” of “look and feel” for you? If there would be one feature to add, what would it be?

2 Likes

I tried the tool again and did another recording. I wanted to do this for a while and actually forgot what you wrote in the comment, so I basically talked about the very same things that you listed above.

My conclusion is: I like the simplicity of having only one mode for sketching. I think you are exploring into the right direction. However, I would prefer even more, e.g. using different mouse buttons for various actions. Next to moving something, it could be like this:

  • left mouse button: select and move
  • middle mouse button: drag paper
  • right mouse button: draw

Kinda inspired by computer games / engines like Luanti / Minecraft etc, where people build, edit and interact without having “modes”.

For the record, the recording is in 2026-04-26_ui_sketcher_retry.webm - Projektcloud.

1 Like

Thats an interesting idea. I think I would still need to allow “manual” mode switching to have discoverability, but I could use mouse buttons as a shortcut.

Hi @jdittrich ,

Your project seem very interesting, it is already running.

As an inspiration, you could also check The Evolus Pencil Project, now on version 3.

The v2 is still available.

Another project, again for more inspiration: https://openpencil.dev/

I’ll be following your progress. Keep posting your advances.

All the best.

1 Like

Thank you for the pointers. I tried openpencil, it feels very laggy and overall distracting for the purpose I have in mind. Didn’t try Evolus yet.

For quick sketching, I really like the simplicity of @jdittrich’s tool.

1 Like

I currently wonder how I can provide some possibility to easily draw free-from shapes. This would match the general “sketching-like” use I go. It also allows to (crudely) draw icons and lables if one needs them.

However, I am unsure how to best do this:

  • If I am drawing pixels… I get a problem with scaling figures, which applies to the figure I am scaling but also to all the figures nested within (all inner figures are propotionaly scaled)
    • If I scale the pixel drawing along with the figure, the image degrades every time I scale.
    • If I do not scale the image, I need to find out where to crop it and where to expand it
    • I could also just prevent scaling images that have pixel drawings in them
      • Either in general (and not have the scaling handles, only handles for cropping)
      • or only in case the images are scaled because they are nested in a scaled figure (and react to move their center to a proportionally equivalent.
  • If I draw as vectors… I can scale the drawings.
    • …but deleting what was drawn is more complex. I would need to hit-test and then delete the segments that are hit. Relatively complex.
    • Alternatively: Just do not allow deletion – exalidraw only allows drawing and fully deleting a figure.

Sounds complex. Maybe the tool could be used as-is and then, only if the need for drawing is confirmed, it is added?

If the thing is rather quick sketches or comments, maybe integrating an icon library and allowing to quickly add icons from a catalogue would work? I have seen several projects using Octicons | Primer (but I am biased as Forgejo uses them, too).

1 Like

You think lines and rectangles would be enough? I feel I might be too deep into various ideas to be a good judge on that. It would surely be easier to do! (as it works already and could get some small improvements like adjusting colors and line-styles)