Okuzeka
UX/UI Design vocabulary · Visual Design and Layout

Breakpoint

Meaning in UX/UI design, with examples

/ˈbreɪkpɔɪnt/nounCommon term

In UX/UI design, breakpoint means: A screen width at which a responsive layout changes, for example when three columns become one or the navigation turns into a menu icon.

In Turkish: kırılma noktası, breakpoint

How it is used

Designers usually prepare screens for a few breakpoints, such as mobile, tablet and desktop, and developers set them in CSS media queries. Good practice is to place breakpoints where the content starts to break, not at specific devices.

Example sentences

  1. At the tablet breakpoint, the sidebar moves below the main content.

  2. We need an extra breakpoint around 1,100 pixels, where the table starts to overflow.

Common collocations

  • mobile breakpoint
  • add a breakpoint
  • at each breakpoint
  • breakpoint width
  • responsive designAn approach in which a layout automatically adapts to different screen sizes, from phones to large monitors, so the same product works well on all of them.
  • gridA set of invisible columns, rows and gaps that designers use to place and align elements consistently across a page or screen.
  • layoutThe arrangement of text, images, buttons and other elements on a page or screen, including their size, position and the space between them.
  • spacingThe amount of space between and inside elements, such as the gap between cards or the padding inside a button, chosen to create rhythm and grouping.

This word in other fields

The same English word can have a different meaning in another field:

More terms: Visual Design and Layout

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: