Hello Web Design (Early Access) © 2020 by Tracy Osborn
S E C T I O N 2 .1
GRID
OU R F I R S T P R I N C I P L E I S A N E A SY O N E : line things up!
You may have heard this common designer complaint:
A designer builds a pixel-perfect mock-up and passes it along
to the developer to build. The developer builds the design,
but the built design differs from the mock-up by something
arbitrary like two pixels!
“Silly designer,” says the developer. “Why does something so
small matter? It’s basically the same.”
Here’s the thing — small pixel differences really do matter,
especially when it comes to elements on a page. If one element
is close to but not completely lined up with another element, it
can create a tiny bit of unevenness, and that little bit of chaos
leads to a feeling of unease and clutter (Figure 2-2).
T h eor y and D esi g n Princi p les 9
Hello Web Design (Early Access) © 2020 by Tracy Osborn
Figure 2-2: The two screenshots are basically the same, but the one on the left, where
everything is slightly out of line, looks less cohesive and professional.
Figure 2-3: The New York Times website uses a grid to effectively organize a large number
of elements and showcase items on its home page.
The easiest way to make sure
that elements line up with one
another is to add a grid to our
design. A grid adds an invisible
skeleton to our app, a scaffold-
ing that we can use to set up
and arrange our elements so
the overall layout looks tidy
Figure 2-4: The Gridset website demos a compound 4+6 grid with and without
guidelines
10 c h a p ter 2
Hello Web Design (Early Access) © 2020 by Tracy Osborn
1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12
Figure 2-5: The 12-column grid system in the Bootstrap CSS framework.
and ordered. Aligning elements to an underlying grid will
help you achieve alignment and consistency throughout your
design.
The New York Times website (figure 2-3) uses five main col-
umns to organize a large amount of information. The spaces
between the columns highlighted in red are gutters. Objects in
your grid can span multiple columns, and some objects might
break out of the grid, but everything more or less adheres to
the grid.
You can use any number of columns in your design (figure 2-4),
but a 12-column grid (figure 2-5) is the most often used for
versatility.
A grid also helps you create a plan for your website’s layout
because it constrains you to place elements within certain
areas rather than having the entire page to choose from. Win
win win.
In essence: Got a bunch of elements? Line them up (horizon-
tally, vertically, or both) to create a feeling of cohesiveness.
T h eor y and D esi g n Princi p les 11
Hello Web Design (Early Access) © 2020 by Tracy Osborn
Shortcuts
The theory here is simple — just line things up — but there are
many tools that make it easy to ensure we’re using the grid.
Grids in mock-up programs
If you’re working on something that you won’t be building in
CSS, you’ll need to add guides to your design.
All mock-up programs — Photoshop, Sketch, or GIMP —
allow you to set guides to float over your design, which makes
it easy to align elements to the guide.
If you’re working on a website mock-up in something like
Photoshop, you can use grid templates to lay out your website
using the same columns you’d use in your website framework
system (Figure 2-6).
Guides are also accessible in most slide programs and other
simple layouts, such as Keynote (figure 2-7).
For slides, you don’t need to add a whole 12-column grid to
your system — the slides in figure 2-7 have only a few guides,
just enough to keep elements on separate pages along the
same lines.
However, if you’re designing something a bit more complex,
you can download quite a few templates with multiple columns
already set up, such as the 960.gs (hellobks.com/hwd/4) system.
Grids for web design
I highly recommend using a CSS framework with a grid
included, such as Bootstrap (hellobks.com/hwd/5), Foundation
(hellobks.com/hwd/6), Skeleton (hellobks.com/hwd/7), mini.css
(hellobks.com/hwd/8), or PureCSS (hellobks.com/hwd/9)
(figure 2-8).
12 c h a p ter 2
Hello Web Design (Early Access) © 2020 by Tracy Osborn
Figure 2-6: Guides can be set by dragging from the rulers at the left and top
of the screen in Photoshop.
Figure 2-7: Keynote also lets you pull out guides from the rulers on the screens.
Many other programs have similar options.
T h eor y and D esi g n Princi p les 13
Hello Web Design (Early Access) © 2020 by Tracy Osborn
Figure 2-8: The grid system included in the Bootstrap CSS framework.
Figure 2-9: Some of the CSS classes included in Bootstrap to align and set your objects
in the underlying grid.
Figure 2-10: CSS Grid docs on the Mozilla Developer Network (hellobks.com/hwd/10).
14 c h a p ter 2
Hello Web Design (Early Access) © 2020 by Tracy Osborn
Figure 2-11: On the left, the original widget. On the right, we’ve lined up the edges of the
elements in the box, making it feel a bit cleaner and less chaotic.
By using the HTML classes that constrain your design to the
underlying CSS grid, your elements will naturally align with
other elements on the page (figure 2-9). Just keep in mind that
additional margins or padding that might be added in CSS may
bump elements out of alignment.
CSS is getting a new element called CSS Grid (how convenient!)
that makes it super simple to align elements to a grid without
using a CSS framework. At the time of this book’s writing, CSS
Grid is on the verge of being released and covered by most
browsers. While this book doesn’t cover CSS, using CSS Grid will
make it easier to implement grid-based designs (figure 2-10).
Real-life examples
Remember the little widget we introduced at the beginning of
this chapter? Let’s update the design by lining up the elements
(figure 2-11).
While the widget still has issues (after all, we’re just getting
started), you can see that this little change has made a small
but significant positive difference. All of the interior elements
are now lined up: headline, content, input, button. The input’s
placeholder text is bumped out a bit because of the padding
T h eor y and D esi g n Princi p les 15
Hello Web Design (Early Access) © 2020 by Tracy Osborn
in the form, but its containing element aligns to the grid. The
overall feeling is just a bit more cohesive, a little less chaotic.
Again, in a nutshell: just line things up. Add guides to align
your elements to an invisible grid, and pay attention to the
little pixel differences and misalignments that can make a
design feel more chaotic. Feel free to break the rules occasion-
ally and go off the grid (ha), but using a grid for most of your
elements will create a cleaner, more organized design.
Next up, we’re going to talk color!
16 c h a p ter 2
