Member-only story
What are breakpoints in web UI design? And how to use them?
A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size/ viewport and orientation.
BUT!!! Does that work in real life?
Due to the variety of Grids and Design Systems, we now have multiple predetermined breakpoints to increase our confusion in UI Designs.
Ok, so how to save ourselves from this set of rules by these systems?
Rather than being concerned with system breakpoints, the best practice is to build for your smallest viewport. When you expand the viewport, there arrives a point where the design looks crap over there add a custom breakpoint.
Start with MFA
Approaching the mobile-first design is the best approach for a responsive design. It allows you to layout the content that is most important to your customers, clearly and logically on the smallest screen real-estate.
Max-Width for your mobile viewport will be 1st breakpoint.
That could be 360, 368, 375, 420, 480, etc… whichever works fine on targeted mobile devices based on research.
You can read my article on Mobile UI artboard size to know more about mobile screen sizes or you can take help from Design systems to define your column-grid and that will give you a brief idea to define breakpoint for various devices.
How to do it yourself 🤔
Design Dev Collaboration
As a designer, you have to think like a developer and start designing screens with dynamic responsive layouts.
The easiest way to achieve dynamic responsive design is to hand off UI Screens in % values rather than pixel values or constant values.
