UX / UI

LearnCoach Diary: Setting up the 12-column grid and screen breakpoints for the mockup design deliverables

Overview

We are using Figma to create wireframes and mockup designs. As I was handling a project, I noticed that we do not have consistent UI components, and the Figma templates for each screen are different on each platform.

Roles

  • As Lead UI UX designer, my job is to review and improve the mockup design deliverables to build holistic digital products.
  • I trained the design team on how to use the 12-column layout grid and screen breakpoints.
  • I collaborated with the development team to learn more about the technology side and agree on the mockup design deliverables.

Problems

  • The design team uses multiple width types for designing a UI component, which creates inconsistent experience throughout the platforms and creates unnecessary custom styling for each screen breakpoint.
  • The responsive UI design and screen breakpoints are not clearly defined and used when designing a UI component.
  • It is challenging to visualise the UI components’ width size due to the lack of column grids as a guide.

Research

User interviews

I scheduled separate interviews with the design team and technology team, and I learned that:

  • We have the existing 12-column grids and screen breakpoints. Still, they are not being applied due to unfamiliarity and are not mandatory in the mockup design deliverables.
  • We use 8-point systems to define an element’s dimensions, margin, and padding since most of the screens are divisible by 8, making it easier to scale.
  • The developers usually interpret the UI component design in Figma on mobile screens based on the desktop version and let the design team review it for comments and sign off.

References

I started reading online guides to refresh my memory and review the projects that I did in the past like Bootstrap, TheMarket (My previous company), Google Material Design and my portfolio website.

Taking notes

I used FIGJAM to take notes of the existing and proposed screen breakpoints then shared them with the design team.

Figjam screen breakpoints notes

Analytics

I gathered the screen resolution analytics for this year since we do not have any user research materials to use.

Figma templates

I setup the 12-column templates using Figma layout grid with the following screen breakpoints: 320px, 600px, 1024px, 1400px, 1920px and Full width.

Training

I taught and instructed the design team to use the 12-column grids to measure the width size of the containers for the UI components that it covers.

Testing

We conducted the actual tests on our projects, and it took us a month to complete them. I split the tests into two variants to measure how much work it will take us to gauge the complexity of designing UI components. See the variants below:

Variant 1: 320px, 1024px, 1920px and full width (Optional)

Variant 2: 320px, 1024px and 1440px

Test result

  • We are short of time when designing a variant.
  • The UI components are not very complex as I initially thought.
  • Some platforms do not require mobile versions due to their specific functionality requirements—E.g. camera, screen sharing, etc.

Thought process

With the research data, test results, agreement between the design and technology team, we split our platforms into four screen breakpoints plus the full-width screen below:

  • 320px for small screens
  • 600px for tablet screens
  • 1024px for laptop screens
  • 1440px and up for desktop screens
  • Full-screen

And these are the common variants:

Variant 1: 320px and 1024px screens

Variant 2: 1024px screen

We will use variant one if the business requires a mobile version. If not, we then proceed with variant two. On the other hand, if the UI component is complex and requires more visualisation for the teams to understand, we will produce additional mockup screens—E.g. 600px or 1400px.

Finally, I set up the agreed screen breakpoints in Figma using the layout grid styling

Figma layout grid styles

Outcome

It creates more consistency with the UI components that we are building across the platforms. It is easier and speeds up our mockup design deliverables as we can see and follow the 12-column grid as a guide. Based on the feedback, the developers do not need to interpret the mobile screen designs as we hand it over to them and easier for them to visualise the UI components in multiple screen breakpoints.

 

Connect With Me

I’m currently looking for a new and exciting role and/ or if you would like to collaborate, catch me at

thedigitalambassador@gmail.com / +64 021 157 2214

Under the sea fish wing