Why grid is important

Grids also promise visual hierarchy. There are many examples of how you can improve the way your design looks. One of these examples is Curioos , where the grid is divided into many sections.

A bigger section is used to emphasize the call to action, while the two-columned grid is used for product display. Image Source: Curioos. Not only a design layout looks greater in digital media, but it also looks marvelous in print as well.

They add flexibility to your design and adapt to your design requirements. You can use multi-columned grids that can exceed up to 13 columns for a single layout. From using the simplest grids to making use of multiple innovative grid ideas, designers can keep using flexible ways, so they can contribute to the elasticity of the grid system.

When using grids, it is noticed that the importance of spacing is often neglected and the design ends up being all tensed and suffocated.

Since modern design deems it necessary to add more of that white space, grids naturally become helpers with that as well. Image Source: Designspiration. It helps your readers make sense of the elements of your design on display. It smoothens the user experience when your audience knows where they have to go and what they have to do next. With all the benefits of the grid presented above, there is no doubt that grids hold an important place in the development of an efficient design.

From balancing to making your design a beauty, these guiding lines help you achieve productive results. Ever wondered why the mediaeval biblical formats looked highly impressive? Because they used grids back then too. Hope you now understand what that designer in the tutorial was trying to teach you. Your email address will not be published. Save my name, email, and website in this browser for the next time I comment. Take a look at any graphic design piece near you — a logo, a poster, a product packaging — and squint.

What are the details that leap out at you, Like design, cinema is a visual form of art. Whole publications could be mocked up quickly and cheaply on screen, without having to commit each experiment to a costly printing process.

This opened up a new era of experimentation in graphic design—one of the clearest historical illustrations of how new technical tools and constraints can drive the creation of novel work. One of the best known figures to emerge from the experimentation of the s and s was David Carson , a professional surfer who developed an interest in graphic design, and initially learned his trade through a two-week graphics course at the University of Arizona, another short course in Oregon, and a 3-week workshop in Switzerland.

Carson is one of the finest examples of how to become a designer without going to design school. Carson worked on a number of skateboarding and snowboarding magazines in his early career as did Aaron Draplin , but he really came to prominence when he was hired to design Ray Gun. These designs are notable for a number of breaks with graphic design convention, including the use of standard grids. For example, in the articles pictured below, although the columns of text are of different widths and are not separated by a gutter, each block of text still adheres to a baseline grid and clear left-and-right boundaries, meaning that the text ultimately remains readable.

Although this is not the case for the article about Bryan Ferry—which Carson disliked and therefore set entirely in Zapf Dingbats. Grid systems in graphic design have survived centuries, if not millennia, dating back to the earliest illuminated manuscripts. And in spite of the exhilarating anti-design experiments of the late 20th century, arguably grids have never been as widely used as they are today.

This is because of the dominance of the internet and digital devices, and in particular, because of the emerging need for websites and apps to resize and re-form themselves to accommodate whatever device they are being used on ranging from huge TVs to smartphones and even tiny watches. For visual and UI designers today, column grids are an indispensable tool in creating designs that have enough structure to allow them to be flexible across multiple devices.

Discovering column grids with Figma For example, in our free Figma email course , you can create an app design using a 3-column grid for mobile, and then translate that design to a wider column grid for desktop.

This way of working is fundamental to the efficient creation of app designs today. The persistence of grid-based design in web and app design has also been a challenge for developers shaping web standards. In the early days of the web, developers often used tables to organize a layout. Since then, standards have evolved and we now have systems like Flexbox and CSS Grid which offer a basic framework for faithfully implementing grid systems in websites and apps.

We sometimes think of constraints as a bad thing—particularly when it comes to creativity. We want to be free to express ourselves, and explore our wildest flights of creative fancy. Experience, though, tells us that things are not that simple. And then when we do start, we feel directionless and quickly get stuck again. Rather than restricting our creativity, constraints give us a starting point and invest the freedom to explore possible solutions.

Grid systems provide constraints for layout and visual organisation, which simultaneously reduce the number of options available to the designer, yet also open up a vast array of constrained possibilities. Even a simple modular grid can hold thousands of layout options. And even for anti-design rebels like David Carson, the existence of grids and other graphic design conventions actually created an important starting point in the form of having something to reject.

To wrap things up, here are our 5 top tips to remember as you begin experimenting with grid systems in your work. The gutter—the empty space between columns—should be used to separate elements. Text and graphics can span multiple columns, of course—but they should begin and end at the edge of a column, not in the gutter. Friedman, V. Designing With Grid-Based Approach. Smashing Magazine. Shillcock, R. Web Design Tuts Plus. Log in Join our community Join us. Open menu Close menu.

Join us. The Story of the Grid One of the easiest ways to achieve an organized design is to apply a grid system.

Grid as a Design Principle Villard De Honnecourt, a 13th-century French artist, merged the grid system with the golden ratio to produce printed page layouts with margins based on fixed ratios. Grids in Interactive Design In the digital world, the grid system acts similarly to the print layout in organizing the elements on the page. Golden Grid System : This website can help you build a grid system and optimize it for mobile-responsive display. Reference List Bigman, A. Closes in. View course.

Join , designers who get useful UX tips from our newsletter. A valid email address is required. No, neither do we. If you are looking for a design 1. Read article. With a valuatio 1. What is Interaction Design? Interaction design is an important component within the giant umbrella of user experience UX design. In this article 1. It can 1. When designing a grid, consider the constraints on your design. For example, a majority of your users might be using a particular type of device such as a phone.

This means that all design decisions including the grid need to consider this constraint. Tip: Items that stretch across multiple columns are visually more important than items that fill only one column. A grid column not an ally is where each block of content should begin and end. This rule is simple and easy to follow; nevertheless, designers often intentionally break grid columns in order to increase visual interest or emphasize certain elements. Taking things out of columns can break the visual hierarchy and impair the user experience.

Laying out a grid requires attention to horizontal and vertical rhythms, which are equally important. Consider the difference between the following examples. In the first example, the grid is consistent with the column width and horizontal spacing, but the varied vertical spacing creates visual noise. In the second example, both the horizontal spacing i. As mentioned, a baseline grid can be used for horizontal alignment and hierarchy.

For example, if you choose 8 pixels as a baseline value and want to align the text, you will need to make the line height of the typeface a multiple of the baseline value, which means the line height could be 8, 16, 24, 32, etc.

Mobile grids have limited space, making a multicolumn layout not really possible. Mobile content is typically limited to one or two columns. When designing for mobile, consider using a tile layout grid, in which the column and row heights are the same. This will give a look of square tiles across the design. On mobile, users have limited screen space and can only view a small amount of content at a time before having to scroll.

Thus, when designing a grid layout, make images large enough to be recognizable yet small enough to allow more content to be seen at a time. Like any part of a design, a grid should be tested and iterated on according to the results of those tests. By now, you should have a good understanding of grid systems, what they are and how they can be applied to your design process. Understanding how to use grids will come from practical experience. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style.

But one must learn how to use the grid; it is an art that requires practice. Just the things you can actually use.