In the most basic terms, a
grid is a structure comprising a series of lines (vertical or intersecting)
that divide a page into columns or modules. This structure helps designers to
rearrange content on the page.
This grid would function
the framework for the page’s layout. Think of it as a skeleton on which a
designer can organize graphic elements.
The grid system originates
in print design but has been applied to several disciplines. In fact, if we
look around, we’ll see that a lot of things we use daily were designed using a
grid like:
·
A bookshelf is a kind of grid.
·
Tables in Microsoft Excel are an example of
a grid system applied to content.
Brief
history of the Grid:
Before we dive into
details on layout grids and how they can be applied to digital products, it’s
essential to step back and look to the past to understand the basics. This
knowledge will help us better design for digital experiences.
Grid
and early book design:
Grids are closely tied to
typography. As a system, grids were first wont to arrange handwriting on paper,
then were applied to manuscript layout. Since the early days of book design,
the grid has helped designers arrange page layouts to aid the user in the act
of reading.
Industrial
revolution and competition for attention:
The Industrial Revolution
marked the start of production. The rise of print products such as newspapers,
posters, leaflets and advertising of all kinds, put print designers in high
demand.
Designers had to unravel
two problems: communicate diverse messages to varied groups of individuals and
permit for natural scanning behavior, while preventing different sections from
competing for the reader’s attention.
Basic
Theory of Grids:
Whether you work in print
or in web and mobile design, you need to understand the basics of grid theory.
Anatomy
of a grid
Whether simple or complex,
all grids have some common parts:
Format
The format is the area in
which the design is placed. In a paper book, the format is that the page. On
the web, the format is that the size of the browser window.
Margins
Margins are the negative space between the edge of the format and the outer edge of the content.
Columns and alleys
In it’s the most basic
form, a grid is made up of two main components: Columns and alleys. Columns are
the building blocks of grids. The space between columns is referred to as
alleys. Together, columns and alleys take up the horizontal width of the
screen.
Modules
Modules are individual
units of space created from the intersection of columns and rows (i.e. the
horizontal equivalents of columns). Modules are the units of intersection
between rows and columns.
Four
types of layout grids:
Columns, modules, alleys and margins are often combined in several ways to make distinct sorts of grids. Below are four standard layout grids:
Manuscript
Grid
A manuscript grid (or a
single-column grid, as it’s often called) is that the simplest grid structure.
It’s essentially a large rectangular area that takes up most of the space
inside a format.
Manuscript grids are good
for continuous blocks of text. However, they aren’t limited to text; images can
be used to fill the block.
Multicolumn
Grid
As the name suggests, a
multicolumn grid has a few columns. Remember this easy rule: The more columns
you create, the more flexible your grid becomes.
Column grids are useful
for layouts that contain discontinuous information. When you use a multicolumn
grid, it’s possible to create zones for different kind of content. For example,
you'll use a specific column only for an illustration.
Modular
Grid
While a multicolumn grid
splits a page vertically into a number of columns, a modular grid subdivides a
page both vertically and horizontally into modules. The columns and rows and
the alleys between them create a matrix of cells, or modules.
Modular grids are good
when you require more control over a complex layout than a column grid can
offer. A modular grid provides flexible formats for pages and allows you to
create a complex hierarchy.
Baseline
grid
A baseline grid is an
underlying structure that guides the vertical spacing during a design. It’s
used primarily for horizontal alignment and for hierarchy.
Similar to how you would
use columns and modules as guides in your design, you can use a baseline grid
to build consistency in your layout.
This makes a baseline grid
not only a superb typographic tool, but also extremely helpful when you’re
laying out elements on the page because you'll quickly check whether something
on the page is missing a row of space.
Efficiency
and improvement:
Grid systems in digital
product design organize elements on the page and connect spaces. A grid system
improves the quality of a design (functionally and aesthetically) and the
efficiency of the design process in several ways:
Creates
clarity and consistency
A grid is that the
foundation for order during a design. Proportion, rhythm, white space and
hierarchy are all design characteristics that directly affect cognitive speed. Grids
create and enforce consistency of those elements throughout an interface.
Improves
design comprehension
The human brain makes
judgments during a fraction of a second. A design that's poorly put together
will make the merchandise seem less usable and trustworthy. Grids connect and
reinforce the visual hierarchy of the planning by providing a group of rules,
like where elements should enter the layout.
Makes
responsive
Responsive design is not
any longer a luxury, but rather a necessity because people experience apps and
websites on devices with a broad range of screen. This means that designers
cannot build for one device’s screen.
Quickens
the design process
Grids enable designers to
manage the proportions between UI elements, such as spacing and margins. This
helps to make pixel-perfect designs from the beginning and avoid timely
reworking caused by incorrect adjustments.
Makes
the design easier to modify and reuse
Unlike print production,
digital products are never finished — they’re constantly changing and evolving.
Grids provide a solid foundation because when everything conforms to a grid,
previous solutions can be easily reused to create a new version of the design.
Facilitates
collaboration
Grids make it easier for
designers to collaborate on designs by providing a plan for where to place
elements.
Grid systems help to
decouple work on interface design because multiple designers can work on
different parts of the layout, knowing that their work are going to be
seamlessly integrated and consistent.
Consider
your constraints:
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. Learning to design with
constraints is a skill that will help you focus on what’s really important to
your users.
Conclusion:
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.
Written by - Adarsh Rai
0 Comments