02 ux decisions - OldStarchy/dnd GitHub Wiki

Direct Manipulation

Opt for "edit in place" actions rather than separate forms and pages.

Scale

For the wireframes built with Excalidraw, the following "screen size" template exists as a guideline for how much space there will be to place things.

A "small" sized text is equivalent to 20px (1rem) font in the browser per the image below.

body { font-size: 20px; padding: 1rem; display: flex; gap: 0.5rem; }
div { padding: 0.5rem; }

The image is a rough size of both a computer display and a phone display relative to "20px" sized text as a guide for how much stuff can fit on the screen when creating wireframes.