As a full stack developer, I work on the front end which creates the templates (HTML or TWIG) and stylesheet (CSS and SCSS/LESS file) that need to work across devices (desktop, tablet, and mobile). The templates that work for all devices are known as responsive templates or responsive web design (RWD). I also work on the back end which creates the functionalities and DB design to meet the client’s requirements.
What is a UI grid layout?
In short, the grid layout is the combination of row and column. You can think of a spreadsheet or Excel file. Each column will have a margin.
With a grid layout, the most common number of columns the designers use is 12 columns. But you don’t need to use 12 columns if it doesn’t fit your content. Moreover, the modern CSS framework allows you to modify the grid layout such as Boostrap which gives you the SCSS files and you can change the grid configuration to meet the grid layout from the designer.
Note that, if the designer decides to go to 12 columns of the grid layout and the developer has already implemented the grid layout with 12 columns on the templates. Later on, the designer wants to change the grid layout to 8 columns, for example. It will cost time and money to change the stylesheet and templates.
The benefits of using a grid layout
- Quick transfer from design to the template: The developer can apply the design to the template very quickly and efficiently.
- Save cost and time: Because the developer can transfer the design to the template based on the grid layout fast. This means the business saves money and the developer saves development time. The client can see the prototype or the actual product fast too.
- Consistent: Make the design consistent. Especially the horizontal and vertical spaces.
- Balance: Make the content balance in the grid layout.
Useful information for UI Grid layout
Useful links
Since I am not a UI/UX designer, however, I know the UI Grid layout is very useful for the designer and me (developer). Because I had experience working with both designers who didn’t use the grid layout and designers who use the grid layout before. And I know saving time and efficient work is valuable for the business and me. Because of that, I leave the links that will give you, designers to understand the grid layout and how to use it in an efficient way.
- Building Better UI Designs With Layout Grids
- A Complete Guide to UI Grid Layout Design
- Understanding the role of grids in web design
Grid layout in Figma
If you use Figma which is my favorite tool by far, you can follow the links below.
- Create layout grids with grids, columns, and rows
- Figma Tutorial: Setup a responsive grid layout for UI/Web design
Bonus tutorial in Figma
Apart from the grid layout, in Figma, you can create a component that can be reused in your design and shared with your team. The component helps to organize and save time for adjusting the style of elements at once. I leave the links below.
Every time you create the components or variants or any elements in the design, it would be better to leave a short description of what components are for and where will be used. Sometimes, I work with designers that don’t leave any description or comment in the design, so I have to ask them to clarify in order to create the stylesheet for the template. I encourage you to explain what you have in your mind and explain it in short in the design. Communication is important when working in a team.
Wrap Up
If you are an experienced UI/UX designer, you don’t need to read this post. Because you already knew. I tend to share the value of grid layout with beginner designers and what benefit the designer and developer will get from the grid layout. And that’s it for today.
