The Problem

Designers usually design for one mobile and one desktop screen.
Developers then guess when layouts and typography should change, causing broken UI.

The Solution

I created a stress-based breakpoint system with responsive typography, so layouts adapt logically across screens. With proper research about the type scales, conversion units in Rems and Ems, using multiple web design resources.

To Design at some specific Size of Screens for Desktop, Tablet and Mobile

• Desktop Screen - 1600px width

• Tablet Screen - 834px width

• Mobile Screen - 390px width

Modified Type Scales according Desktop, Tablet and Mobile Design.

Typography breaks before layouts, so I fixed typography first.

• Desktop: hierarchy & scanning

• Tablet: balanced density

• Mobile: readability & wrapping

Layout Behavior Examples

Layouts change based on screen stress, not devices.

Hero Section

• Desktop → side-by-side

• Tablet → tighter spacing

• Mobile → stacked

Card Section

• Desktop → 3–4 columns

• Tablet → 2 columns/ 1 column( when screen undergoes responsiveness )

• Mobile → 1 column

Outcome

• Better readability across screens

• Fewer responsive bugs

• Faster design-to-dev handoff

Result

Creating the Screen Ratios Adapt according to the above mentioned typography scale which behaves differently for mobile, tablet and desktop. We were able to adapt the designs seamlessly across, various screen sizes.

Desktop Screen Sizes to Consider While Design and Testing Responsiveness

Tablet Screen Sizes to Consider While Design and Testing Responsiveness

Mobile Screen Sizes to Consider While Design and Testing Responsiveness

Using this Above Layouts with Figma Grid System, Developers seamlessly can integrate these layouts for testing of any created web projects.