Briefle words · UI design
Bounding box
The invisible rectangle that tightly wraps an element and is what layout tools align by.
Say it to an AI
Lesson card with a 64px white play button over the thumbnail. Optically center the triangle, nudging it about 2px right of its bounding box center, and do the same on the 'Play lesson' pill by trimming the padding on the icon side so it doesn't look lopsided.
How an expert would brief the stronger version of “Video lesson card”.
See it
Try it as a puzzle →Lesson preview card in an online art course app.
Why: A's triangle has its bounding box dead-center, leaving more empty circle on the right than the left.
Related words
Room 5 · Spacing & layout
Learn “Bounding box” in a five-minute lesson