Layout & visual design
How things are arranged and styled.
GridAn invisible set of columns that everything on the page lines up to, so it looks orderly instead of scattered.
WhitespaceThe empty space between and around things, which makes a screen feel calm and easy to read.
Visual hierarchyArranging size, weight, color, and position so people notice the most important thing first.
Responsive designA layout that rearranges itself to fit any screen, from a wide monitor to a phone.
BreakpointA screen width at which the layout switches to a different arrangement, like going from three columns to one.
ContrastHow different two colors are from each other, which decides whether text is easy to read.
TypographyThe choice and arrangement of fonts: which typefaces, what sizes, how bold, and how tightly spaced.
Design systemA shared set of colors, fonts, spacing, and ready-made components that keeps every screen consistent.
Above the foldWhatever is visible on screen before anyone scrolls, the part everyone actually sees.
Dark modeAn alternative color scheme with light text on dark backgrounds, easier on the eyes at night.
WireframeA rough, boxes-and-labels sketch of a screen's layout, without colors or real content.
Mobile-firstDesigning for the phone screen first, then expanding the layout for bigger screens.