Introduction of grids in Design ~ Graphic design

Grids are amazing guides for designers and they can come in many different shapes and sizes. They allow us to set up even spacing between elements. Lining the design on the grid system really helps make them look concise and structured.

Humans love order. It’s oddly satisfying. Disorder doesn’t seem to resonate or provide a sense of balance which we humans often crave because of our own disordered lives. To find out the right layout for design, turn the content into blocks and roughly arrange those on a canvas of the right size. Blocking is such a helpful tool when creating the layouts.

Golden ratio

It is the ratio 0.618 to 0.382 which means if we had a 1 inch or 1 cm square and applied their golden ratio to it then the top portion would be 0.618 and the bottom 0.382 inches or cm. If we flip these blocks around as long as it maintains that ratio of division. The golden ratio is naturally pleasing to the eye and it could be seen and echoed throughout the nature.

Spiral ratio

The spiral is made up of layer and larger rectangles containing the same ratio. We can apply the golden ratio spiral to layout design and place out focal points in our design the more densely populated parts of the spiral and leaving less important stuff in the inner spiral portion.

Anatomy of a grid

Margin, It’s the thick border that runs along the outside of a grid or document. Wider margin provides more breathing room for edges, beans and folds and provides a nice whitespace for the overall content.

Columns, it run vertically downward from the top of the margin to the bottom. These are very helpful in magazines and editorial layouts and find placements for paragraphs, headlines and texts.

Rows, it contains the areas that run horizontal across the page.

Gutters, these are areas between the columns and rows. It is nice to keep these the same width throughout to maintain consistency in the design.

Flowlines, these lines run horizontally across the grid and they can help the reader follow content.

Modules, they are the boxes or areas created by the vertical and horizontal lines of grid. You can have big module boxes and have a big loose open grid or you can have very tight module boxes.

Spatial zones, they consist of several modules to create blocks and content areas to give you a guide on placing photos and block of text. These can be large or small depending on the content.

Grid types

They can come in many different varieties and flavors.

Manuscript grid

This grid is great for books and long continuous placement of text. Manuscript layouts consist of one center block that divides up the page and creates a clear margin and text area, header and footer. This is the most basic form of a grid and it’s found in many words processing documents as basic guides for creating margins.

Column grids

They are perfect for magazine layouts and spreads or anything a mixture of photos, quotes and text. They allow you to create places to break up the type in photos. These can be 2,3,4 or even 12 columns depending on the complexity of the layout.

Modular grids

They are the most flexible grid available which allow for lots of mixing of type, photos and design elements. You can have a lot of variety with which modules are chosen for element placement. These are great for posters and flyers; magazine covers and the designs that require a more creative arrangement. They can even be used for arranging a list of items and photos that need for arranging a list of items and photos that need the same spacing or have the same same order.

Hierarchical grids

These are mostly used for the web where fixed grid layouts will not work. The gutters and margins can change in size throughout depending on the space of the browser. Hierarchical word comes from the word hierarchy meaning order. These grids follow an order of importance with the most important items larger and towards the top where with less important items further below and smaller. A perfect fit for a website layout or mobile app design where the most important items need to be shown higher in the layout.

Some tips and tricks to properly using a grid and layout design

Headlines, use grids to find placement for headlines and design elements.
Make sure to use the margin, remember to feel free to extend unimportant items off the margins like parts of photos and non-text design elements. This will help the piece feel a little less boxy and feel more alive and make sure that vital text stays out of the margin.
Remember you can go vertical and you can go vertical with text to add contrast with other horizontal elements and you can use the grid as a guide for placement.
You can break up large bodies of text. Try adding a quote to break up large text areas.
You can also use more contrast to your type by creating smaller headlines at the start of these larger areas and use the grid to find the right placements.
Feel free to play around with overlapping elements. Another way to break up a boxy layout is to overlap elements using the grid like the quote box overlapping the photo.
Remember layout design extends to digital stuff as well including social media post. Use the grid not only to find out where to place the elements but where to frame certain parts of the elements such as the central part of the logo or the person’s face.
Grids can be applied when we’re doing logo design. It can help you find the right spacing between the symbol and the text. It can help you find the right balance between the text and the symbol.
Grids can also be used in branding. Wider margins can create an elegant ample white space giving the design a very modern structured look and grids can be used for brand materials to make sure there’s consistent spacing throughout. It can also help with placement and spacing between text and elements.
In grids for web, there is a classic 12 column grid layout with a small gutter in between each column. This is traditionally seen in desktop website layouts.
Remember that grids can be turned diagonally who says grids have to be perfect left right up and down.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.