Newspapers and magazines use column grids extensively. It involves taking a page and splitting it into a number of vertical fields, which objects are then aligned to. This is the most common type of grid used by designers. A simple example of a baseline grid is a sheet of ruled paper, like you probably used at school. Baseline grids are often used in combination with column grids, to make sure that the lines of text in each column align uniformly across a spread. Baseline GridĪ baseline grid is a dense grid of equally spaced horizontal lines that determine where text will sit.

Some of the main examples from graphic and UX/UI design are: 1. They provide a structure for layout and visual organization, while simultaneously delivering a framework that developers can then follow to ensure the design behaves as intended, regardless of the device used.Įach type of grid serves a different purpose. The value of creative constraints is why the best designers always insist on working from a robust design brief, which defines the project’s requirements.Īpart from giving a starting point for creative direction, grid systems are a practical necessity. Rather than restricting creativity, constraints give us a starting point and invest the freedom to explore possible solutions. It’s in this situation that creative constraints are extremely valuable. If you’ve ever been faced with a creative block, you might know how terrifying a blank page can be. After all, pushing the boundaries of design means eliminating the rules that hold us back…right?Įxperience, though, tells us that creativity isn’t that black-and-white. It can be tempting to view having to work within the constraints of grid systems as a negative thing-particularly when it comes to creativity. Learn More: Guide to Information Architecture in UX Not only do grids help to visually organize design elements, but they also serve as a vehicle to improve the user experience by enhancing readability, clarifying information architecture, and providing a framework for responsive design. UX/UI designers also work extensively with grid layouts, since they serve as a foundational structure for interface designs (like web pages, mobile apps, and other digital interfaces). Traditionally, graphic designers have used grid layouts for print materials (like books, magazines, or posters). What Are Grid Systems in Design?Ī grid is a system for organizing layout in design. Finally, we’ll share five top tips to remember as you start using grids in your own UX/UI design work. In this article, we’re first going to bring some clarity by defining what a grid is, and then look at some of the most important types of grids used in print, web, and UX/UI design. Grid system layouts come in all shapes and sizes, depending on what you’re designing, and have a long history that stretches back to humankind’s very earliest manuscripts. Among them is the practice of using grid layouts to structure their designs-both on and off the screen. UX/UI and graphic designers have many things in common.

Grid system in design