Using Grids to build Responsive Web UI

According to Wikipedia, In design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved lines (grid lines) used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner. A grid can be used to organize graphic elements about a page, with other graphic elements on the page, or relation to other parts of the same graphic element or shape.

Grids could be used to

1. Consistency
2. Improve readability
3. Create emphasis
4. Hierarchy in design

The grid system in the design is majorly used for products that are cards based, for example, e-commerce, rental products that sell their products on cards.

Grids work similarily same way in every design software, Adobe XD, Sketch, Invision, Figma. For this article, we will be explaining grids using Figma as a direct reference. In creating web-based products eg websites, web applications or dashboards, a designer at the stage of creating the wireframes divides the product into different parts or sections. Header, landing, newsletters, footer etc. Most times, this division is done per screen display, but when designing for easy responsiveness, the product is divided into sections, not per screen display but this time using grids.

To further highlight the importance of grids in design, let's talk a bit about the Rule of thirds.

The rule of thirds states that “an image should be imagined as divided into nine equal parts by two equally spaced horizontal lines and two equally-spaced vertical lines, and those important compositional elements should be placed along these lines or their intersections. Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centring the subject.”

This tries to explain how grids system helps in element and content balance in design, with grids you can easily and well distribute field elements inside a webpage, the result is appealing to the human eye. Now that's, why you need to use grids!

Responsive grid system could also be known as the fluid grid system. Building and designing your products using grids easy fixes alignment issues on whatever screen orientation or size the user is on. On every design GUI, be it Figma, Invision studio, Sketch, Adobe XD etc. Design is beyond making every product pretty or making it appealing to users. The grids can be customized according to how the designer feels the need to, some major factor that contributes to how a designer structures their grid system are the elements on the page, the white spacing required text hierarchy. It’s also important to note that grids contain gutters, gutters are the white spaces in between the vertical or horizontal blocks in the grid, they are commonly set as 20px in width, the first and last vertical grids are the considered to be your margins for whatever product you’re building. The image below shows the types of grids that currently exist on Figma and the different forms these grids could be edited to fit into your product design.

Grids on Figma could be vertical, horizontal and uniform grids, the most designer often preferably use the vertical grids because they majorly come into play for web responsiveness, they help with web margins and sometimes padding, designing for mobile using grids differs a little bit from the web design experience, the grids come in thinner than expect and also a few vertical blocks, mobile screens are already sectioned i.e status bar, app trays, menu bar etc. It makes designing for mobile a wee bit easier because the majority of users are already familiar with the UX of their mobile phones.

In Figma, rulers and grids are two different features, for rulers, they are both horizontal and vertical rulers, both are very flexible, ie you can easily move them around your frame to adjust to whatever you want to achieve. Grids are different, they automatically divide your screen or frame into sections, these sections could be horizontally(columns) only and vertically(rows) only OR they could be both horizontally(columns) and vertically(rows) joined together to form cubes.

In starting a web product, at the wireframe stage, divide each page into sections based on the amount of content, it doesn’t matter if the different block of content is equal. Note, both images and text count as content. Number the different blocks. When converting for mobile responsiveness, these blocks just automatically arrange in size as you reduce the frame size and you can choose to rearrange the blocks using the numbering on the wireframe or even suggest which blocks won’t be on a particular view.

Let’s look more deeply on how grids affect mobile responsiveness for web pages. Let’s look at the HTML code below and how it directly affects the grid system in the design.

In the image snippet below, it contains a section of a website design on Figma using grids, pay attention to how each of the sections vertically fit into the three-block vertical grids out of the 11 possible blocks, so the idea here is that elements on your website must sit on specific columns according to how the UI designer has spread them apart, see an example below;

A bad practice here would be to leave your field elements spilling into the gutters, there will inline mess up your margins and ultimately your alignment. Like we will see later in this write-up, it’s okay to spill elements in a container card to gutters but as long as the card is well fitted into columns(grids), we can easily communicate and understand this better when we refer to them in code language, here we will say

“as long as the parent div blocks are fitted in grids, the children of these blocks can spill into gutters”

The parent div blocks are what guides the page responsiveness.

Using these grids affect the way the HTML codes are written as we would see later on, but for now, what these design grids do is give the section a unique arrangement which could be flexible and also responsive depending on the screen size, so each section makes use of a minimum of three vertical grid blocks for any screen size or resolution it’s displayed on;

In simple HTML CSS, the sub-sections of a webpage and divided div blocks whether these sections are vertical or horizontal. In the code snippet below, is the HTML code equivalent to the image designed above on Figma, see the 3 parent div blocks, now compare them to what is on the design above, see how the grids deciphered how the code is structured and written.

During developer handoff, it grids helps the engineer understand the design and how it’s going to be displayed in ratio to whatever screen size the product is presented on, for responsiveness for mobile screens.

Above is the responsive equivalent of the design/web implementation, you notice how the three vertical blocks are arranged below each other thereby ensuring the page structure and sections is maintained on every display. This takes the same pattern for other displays like tabs.

Another instance where the use of grids could be of great importance is mobile applications that could be used primarily on portrait mode then also on the landscape, when the elements and assets used on your design are implemented using grids when the screen is flipped, its fits the screen orientation that’s been requested by the user.

Before we close for the day, let’s see an exception for the grid systems in design and web implementation, sometimes graphic elements, pictures, diagrams could scale above page grid properties.

Notice how the big O hero image spills past the grid columns and the margin line, that’s also good practice, at some instance the image or graphic element could as much as go past the edge of the screen, at these cases, it’s always important for the UI designer to maintain consistency all over the design.

Applying these techniques makes Web UI easily responsive for any view, tablet or mobile or even electronic watch display. The take away from this should employ designers and engineers to always ask for/make use of grids when creating and implementing product solutions.

Here’s what all the yakety-yak been about 😃.

Cheers!