Learning session 16: Design Grids

🚁 Topic

In today’s learning session, I learned what grids are, the types of grids, and why they are essential in design. Let’s pursue.

🤓 What I learned

Grid is a system that helps to organize layouts. Early print designers use grids to organize the content into structured propositions, making the product visually pleasing and readable.

The design has evolved, but the same principles apply to two-dimensional information organization.

Why are Grids essential?

Grid systems are a practical requirement and provide a starting point for creative direction. They provide a structure for layout and visual organization, as well as a template that developers can use to ensure the design behaves as intended, regardless of the device used.

Grids provide a rhythm for design as well it defines the meter. Grids are an essential step to making content accessible for users.

Grids can encourage the usage of white space.

I found an Apple landing page that used white space by not filling areas of the outer grid layout.

Types of Grids:

Column grids

Column grids are the most common type of grid used by designers. It involves splitting a page into several vertical fields, to which objects are then aligned. Newspapers and magazines use column grids extensively.

Baseline Grid

A baseline grid is a dense grid of evenly spaced horizontal lines that decide where the text in the product should be placed.

Baseline grids are frequently used in combination with column grids to ensure that the lines of text in each column are aligned consistently across a page. Baseline grids are similar to a sheet of ruled paper, which you likely used at school.

Modular Grid

A modular grid divides the page with columns and rows horizontally and vertically while creating modules and letting you control the layout. Using this grid layout, you can accomplish a complex visual hierarchy.

A modular grid is a process of taking a column’s grid and adding rows to it. Rows and columns intersect in the form of modules, which are used to layout decisions. Modular grids are commonly used in corporate reports as well as magazines.

Manuscript Grid

The manuscript grid is the simple system of all grids and is used primarily for printing media. The manuscript grid is also known as the block grid.
A manuscript grid includes one single element or multiple elements arranged vertically.

It is a single-column grid. It is the simplest of all grid layouts and is primarily used for printing media. It is not the best option for interactive web page content and is mainly used for text or images.

Pixel Grid

If you zoomed in on the Sketch file, you might have seen the pixel grids pop up. Digital screens are made from a microscopic grid of millions of pixels.

Pixel-aligned vector objects enable you to create precisely drawn images that are clean and sharp for use on various outputs, including the Web and mobile devices. The Align to Pixel Grid option allows you to nudge and align the vertical and horizontal segments of an object’s paths to the pixel grid.

Hierarchical Grid

The hierarchal grids are primarily used in web design. The purpose of the hierarchical grid design is to organize the elements in order of importance.

A hierarchical grid can be created freehand or with the help of a modular grid. It takes years of practice to set up a balanced hierarchical grid without a modular guiding grid. This is why designers create website templates that non-designers can fill out with their information. Even experienced designers use pre-built templates to save time.

My Try

🤺 What challenged me

There were a few challenges I faced when working with UI Grids. The first was getting the grid to display correctly on different screen sizes. I also struggled with making sure the content in the grid cells was properly aligned. Finally, I had to make sure that the hover and click states were working correctly for each cell.

Thank you for coming this far. Any feedback or critique is appreciated. 😊