Breakpoints

BREAKPOINTS

As majority of the users of Urapolku will be Desktop/Laptop Users and Mobile Users, the design strategy for breakpoints and responsiveness is planned accordingly:

We will have two sets of design considering the mid. breakpoint 786px.

  1. Desktop: This design range is from 768-1600px covering most desktops, laptops, and tablets.

  2. Mobile: This design ranges from 320-767px covering all kinds of mobiles and mini tablets.

RESPONSIVE DESIGN

We will be using Figma Variables to make responsive designs following the above-mentioned breakpoints.

Below is a list of few steps to keep in mind before you start designing:

Desktop:

The whole 768-1600px range will be divided into -

  • 768px - Average Tablet size

  • 1200px - Smallest Laptop/ Desktop size

  • 1600px - Largest Desktop Size

Local Variable Naming, Size and Padding:

To get started on variables, First make Local Variable Collection and add the following modes and Number variable to it with the given names and values:

Variable Collection - Desktop

  • Mode1: Name - Min.

  1. Number Variable: Page Width - 768px

  2. Number Variable: Page Margin - 60px

  • Mode2: Name - Mid.

  1. Number Variable: Page Width - 1200px

  2. Number Variable: Page Margin - 80px

  • Mode3: Name - Max.

  1. Number Variable: Page Width - 1600px

  2. Number Variable: Page Margin - 130px

Important Notes:

  • Our design focus range is 1200px - 1600px as that's the size of our focus devices (Desktop/ Laptop), so when designing this range has to look and work the best! (Considering both UX and UI)

  • On the contrary for technical reasons and ease of development the smallest screen size will be used to build the design, so the parent component of the variable components should reside in the 768px screen.

  • Though our designs will be built responsive, the reason to use variable and have three internal breakpoint screens 768-1200-1600, is to help designers have more control on the designs and make sure all elements are working well in all sizes.

  • It will also act as a visual aid for developers to get an idea of how the design is supposed to look and change while they are building it.

Mobile:

The whole 320-767px range will be divided into -

  • 320px - Min. mobile size

  • 400px - Average mobile size

  • 767px - Min. tablet range size

Local Variable Naming, Size and Padding:

To get started on variables, First make Local Variable Collection and add the following modes and Number variable to it with the given names and values:

Variable Collection - Mobile

  • Mode1: Name - Min.

  1. Number Variable: Page Width - 320px

  2. Number Variable: Page Margin - 16px

  • Mode2: Name - Mid.

  1. Number Variable: Width - 400px

  2. Number Variable: Page Margin - 20px

  • Mode3: Name - Max.

  1. Number Variable: Width - 767px

  2. Number Variable: Page Margin - 40px

Important Notes:

  • Our design focus range is 320px - 480px as that's the size of our focus devices (Mobile), so when designing this range has to look and work the best! (Considering both UX and UI)

  • For technical reasons and ease of development the smallest screen size will be used to build the design, so the parent component of the variable components should reside in the 320px screen.

  • Though our designs will be built responsive, the reason to use variable and have three internal breakpoint screens 320-400-767, is to help designers have more control on the designs and make sure all elements are working well in all sizes.

  • It will also act as a visual aid for developers to get an idea of how the design is supposed to look and change while they are building it.

PreviousDesign System

Last updated

Was this helpful?