design-tools

A control for choosing a colour, usually pairing a saturation and lightness field with a hue slider, an alpha slider and a text field for a value.

The small filled square that shows the current colour and opens a colour picker when pressed.

A tool that turns the cursor into a sampler so a colour can be picked from anywhere on screen, usually with a magnified preview of the pixel under it.

A pane, usually on the trailing edge, that shows and edits the properties of whatever is currently selected.

The shared column, gutter and margin structure a team lays every screen against, so different people's pages line up with each other.

A screen shown as it will look rather than as it will work: colour, type and real copy all settled, and nothing in it clickable.

A design wired up just enough to be tried: screens linked so that a tap goes somewhere, with nothing real behind the links.

A screen drawn as structure only: blocks where the content goes, a crossed box for an image, ruled lines for text, with no colour or type decided yet.

A style whose lines wobble as if sketched by hand, used to signal that a diagram or wireframe is provisional rather than finished.

Alignment lines that appear only while dragging, showing which edges or centers the moving object currently lines up with.

A JSON format for vector animations exported from design tools and played natively on the web and mobile, so complex motion ships without video.

The animated dashed outline that circles a selection, moving continuously so the boundary reads as active rather than drawn.

Tying one element's motion to another's so moving or scaling the parent carries the child with it, which is how a group of parts reads as one object instead of several.

A single animation from one value to another over a duration, named for the in-between frames a computer fills in.

Scrambled pseudo-Latin placeholder text used so a layout can be judged on its shape and texture before the real copy exists.

Letting software space letter pairs by looking at their shapes, instead of using the pair values the type designer built into the font.

A sentence that uses every letter of the alphabet at least once, used to show a whole character set in one line.

A display of a typeface's characters, sizes, and styles made to show what the face can do rather than to communicate the text itself.

A circular arrangement of hues that makes relationships between colours geometric, so a scheme becomes a shape drawn across the circle.

A small block of flat colour shown as a sample, used in pickers and documentation to stand in for a value the reader cannot otherwise see.

The light grey and white checker grid a design tool paints behind transparent regions, a convention so universal that the pattern itself now reads as meaning alpha.

A faint repeating field of dots or ruled squares behind content, borrowed from graph paper and canvas tools to suggest an editable surface rather than a page.

Notes attached to a design file that spell out the things a mockup cannot show: heading levels, focus order, names, roles, live regions, and alt text.