Do you remember school textbooks with vertical and horizontal lines crossing each other and forming little squares? They made it much easier to write and solve math problems and kept the pages organized.
Well, the grids are acting in a very similar way. A grid is a skeleton that can be used to produce completely different looks. However, its primary purpose is to create clarity and consistency on the page and improve design comprehension.
Want to know the best part? The grids are very easy to establish on your webpage and are bound to increase your conversions. Keep reading if you want to learn more about the grids and how to utilize them.
What do you need to know about the grids?
The grid layout consists of margins (the negative space between the edge of the format and the outer edge of the content) as well as columns and alleys. Vertical Columns and horizontal rows are building blocks of the grids, and an area in between two columns and two rows is called an alley or a gutter. The grids’ last attribute is a module, a unit of space created by columns and rows.
Designers highlight four types of layout grids:
- Manuscript grid
- Column grid
- Module grid
- Baseline grid
A manuscript grid (also known as block grid)
It is a single-column grid. It is the simplest one of all grid layouts and is mostly used for printing media.
Block grid includes one single element or multiple elements arranged vertically. While this is a good classical grid example, it is not the best option for the interactive web page content, and it is used mainly for a continuous block of text or an image.
However, it will generate conversions if appropriately done because it is easy to infiltrate the Call-To-Action button into the whole block image.
Multicolumn grid
Multicolumn grid layout consists of two or more columns with consistent and proportionate gutters: the more columns, the more flexibility in the design you will have.
This grid is mainly used for articles with discontinuous information, and it is excellent if you want to use different zones for different information types. Designers also use this grid to create information-dense pages because it offers more variety.
Modular grid
A modular grid divides the page vertically with columns and horizontally with rows, creating modules and giving you more control over the layout. With this grid layout, you can establish a more complex visual hierarchy.
The column grid only focuses on vertical alignment, and if you need to organize multiple elements on your web page in a more complex way, you can always count on a modular grid.
Everyday use for modular grids is mobile phone home screens that show the entire collection of apps and websites for example such as VPNWelt.com that display collections of items in their category pages.
Baseline grid
The baseline grid creates the most consistency. It is useful when you need to use a lot of white space on your web page.
The baseline grid is essential in establishing fields. It also helps to rationally determine horizontal division and place grouped elements from top to bottom in a pleasant visual way.
The universal ratio for this grid is 4px. Just take your font size and add 4px to it, and that will be a line-height for your grid.
For example:
60px font + 4px = 64 line height
32px font + 4px = 36 line height
The main idea is that the baseline (the bottom of each line of text) aligns with the vertical spacing.
Validate your concepts for performance during the design stage with AI-generated attention analytics
Why are grids important in Web design?
Let’s discuss why adding grids to your workflow could significantly improve your website designs and processes.
Makes your job quicker
Most of us appreciate time as one of the most critical resources around. Designers are no exception.
Grids can significantly speed up and improve your design process timeline. Using a grid, you won’t be wasting your precious time deciding where a particular element could be placed. Grids would act as a guide where it should be put.
As a result, instead of placing elements in random places, you’ll know exactly where to place and position elements like a logo, menu items, a headline, body copy, images, and more.
Once the grid foundation is laid, the design process’s rest steps become a lot easier to handle.
It enhances visual hierarchy
Visual hierarchy is a term used to describe an organization of elements on the web page by their importance. The main goal is to prioritize visually and to direct your user’s attention to the desired objects. A grid can help accelerate that hierarchical process and make it easier too.
News websites often use grids to highlight featured articles, for example. The following image is from Venturebeat’s landing page of AI news. The following image is from Venturebeat’s landing page of AI news. You can build your news website with the help of no-code tools like Appy Pie’s website builder.
They manage to communicate hierarchy by stretching the more important featured image across more than one column or row. Note how the lead story ‘How synthetic data could save AI’ spans over two-thirds of the columns and two-thirds of rows, making it the most attention-grabbing part of the site design.
Makes it easier to balance your design
Balance is one of the essential principles of design – a distribution of the visual weight of elements between both sides of the design to create unity, fulfillment, and satisfaction.
One of the easiest ways to ensure your page has a degree of balance is to use a grid system. The grid layout makes the composition look stable, consistent and creates an orderly look.
As Jason Beaird said in his article, “The Principles of Beautiful Web Design,”
The grid is an essential tool for graphic design. Using a grid is not just about making things square and line up; it is also about proportion.
Once you divide your design into a certain number of columns, it is easier to judge which part is overpowering the other. From there, it’s simple enough to construct both – symmetrical and asymmetrical layouts as well as radial balance.
Grids can encourage white space
White space represents the area between different design elements, giving “a room to breathe” for each graphic piece on the web page. Thus, elements can have their visual focus.
Modern web design is under the trend of white space, so grids naturally become helpers to add more of that. Once you’ve divided your design into your desired number of columns and rows, place your necessary elements, but keep some grids empty. Leave them to be filled with white space.
Check out this Apple landing page design that uses a lot of white space by simply not filling areas of the outer grid layout.
By aligning the heading, subheadings, and CTAs to the center column only and leaving the outer columns empty, Apple creates a beautifully balanced, centralized, and visually effective landing page design. As a result, the landing page delivers one clear message, which attracts an impressive 81% of the attention.
This results in both a stylish and sophisticated design and a functionally minimal layout that gets right to the point with no clutter or unnecessary elements.
Brand’s influence on grid layout
Every designer will agree that you can’t just use math for your page to feel “alive” and draw attention to the desired elements. You also need to understand your target audience. As Khoi Vinh writes in his book “Ordering disorder: grid principles in web design,”
The viewport and the advertising unit are our two most critical constraints, but it would be irresponsible to proceed without acknowledging the brand’s equally important factor. While the brand’s influence on constructing a grid-based solution is less direct than other constraints, it’s nevertheless essential in the overall design solution. The grid you build for a youth brand, for instance, might be less restrictive than the one you might create for a financial services brand.
Conclusion
Grid is merely a skeleton that helps arrange the items on your page, so use it wisely.
Four types of grid layouts can help you establish a well-balanced landing page. Use Block, Multicolumn, Modular, and Baseline grids to create a visual hierarchy on your page, and you are guaranteed to increase your conversions.
By adding grids to your workflow, you could significantly improve your designs and processes. Grid layout facilitates the design principles such as balance, visual hierarchy, and white space.
It might sound confusing, but it is essential to understand that people nowadays view the pages from all sorts of screens, which means there cannot be a universally accepted guideline and grid ratio. The main idea of creating grids for web design is to understand your target audience’s preferences.
Sketch your ideal page layout, and then use columns and rows to make your design the most attention-grabbing and eye-pleasing.
9 Responses