A small tool for sketching UIs (WIP/Concept)

Design Lounge
1

This is something I currently work on occasionally and so far only bits and pieces exist as a rudimentary prototype. Still, I thought I share this in case there are people who are interested programming patterns/OOP in Javascript and like to help to find ways to implement this well (aka with maintainable code).

mockup of a mockup tool
mockup of a mockup tool1153×674 43.5 KB

The tool allows to quickly “sketch” user interfaces. If figma would be a tool for drawing blueprints, this is for quickly trying an idea with sharpie on a sticky note. Ideally, the UI is compact enough to embed the tool in an issue tracker, much like a WYSIWYG-text editor is embeddable.

There is no live-collaboration (since postits are usually to small for several people to draw at the same time!). Rather, there should be the possibility to copy another sketch and alter it. This keeps the collaboration model simple and the history transparent.

What works so far is the basic object model, and drag and drop with auto-grouping which is a neat alternative to stack management with send-forward, send-backward etc.
First a rectangle is dragged upon another, larger rect; it gets grouped and moves along; then the group is dragged on two smaller rectangles, enclosing them, they get also grouped and move along.

2 Likes
2

If you have some code, is it available somewhere? I’d be pretty cool if it was feasible to integrate this into Forgejo so that fiddling with UI could become a part of code development natively, also see my comment in #178 - A new workflow for design work and feature requests - forgejo/discussions - Codeberg.org

1 Like
3

Code: Not in an easy-to-share way, at the moment! I could push it to github (or some other place) but I have not done so, since only bits and pieces work so far. It would be awesome to consider integration into Forgejo, once it works better.

1 Like