skip to Main Content

Design Glossary: Grid

The Design Glossary is a series of posts explaining a basic graphic design concept.

Design GlossaryWhat is a page layout grid?
A grid is a series of intersecting horizontal and vertical lines along which the structure of a page layout is organized. These lines could be literally drawn on the page, but usually they are invisible guides against which the layout’s objects are aligned. A grid can add instant organization to the page, as it satisfies our preference for order and alignment. Using the same grid structure on each of a system’s layouts lends immediate consistency between different screens.

In Layout Essentials: 100 Design Principles for Using Grids, author Beth Tondreau describes grids this way: “A grid is used to organize space and information for the reader; it maps out a plan for the overall project. In addition, a grid is a holding pen for information and a way to ordain and maintain order.”

In Making and Breaking the Grid, Timothy Samara says: “The grid renders the elements it controls into a neutral spatial field of regularity that permits accessibility—viewers know where to locate information they seek because the junctures of horizontal and vertical divisions act as signposts for locating that information…In one sense, the grid is like a visual filing cabinet.”

Just to clarify a possible point of confusion: FileMaker’s grid refers to the gridlines FileMaker can draw for you in Layout mode—we’re talking about something slightly different here, which is the more general concept of using an arrangement of lines to set up an organizational structure for the page as a whole. You’d actually implement this type of page grid using guides in FileMaker.

What kinds of grids are there?
There are many variations of grid styles, such as: single column, two column, three column, or modular (like a calendar). A table is a common type of grid familiar to FileMaker developers.

The width of the columns in two- and three- column grids might vary. For instance, in a two-column grid layout, the left column might take up one-third of the space, while the right column takes up the remaining two-thirds.

When aligning objects against a grid, be sure to allow space for the header, footer, a margin on the left and right sides, and gutters between grid columns.

How do I use a grid?
To use a grid to lay out your page, you’ll make use of both grids and guides in FileMaker. In Layout Mode, open an Inspector window. Under Position > Grid, click the “Show grid” box. Adjust the major and minor grid spacing to whatever you want. I like to use a 48-pt major grid spacing, with a minor grid step of 6. This means that every minor grid step is 8 pts wide (48/6 = 8).

You can now drag guides onto the layout to create your page layout grid. For example, let’s say you want to divide your layout evenly into thirds, with equal gutters, left and right margins. You’ve decided that each margin and gutter will be two minor grid steps wide.

You could do some math to figure out where to place all the guides, but I’ll show you an alternate method that works, as long as your total layout width, margins and gutters are a multiple of your minor grid step. [Updated from the original method to be easier and more accurate.]

  • Drag a guide to place the left margin (in this example it is two minor grid steps from the edge).
  • Determine the column width:
Column width = Round ( (Total layout width - left margin + right margin) – (margin * (number of columns – 1)) )  / number of columns ; 0)
  • Create a rectangle the same width as your column width. Place the left edge of this rectangle against your left margin guide, and drag another guide to its right edge.

Left Margin, First Column Guide

  • Create a small rectangle that is the same width as your margin (in this case, 16 x 16 pts). Fill it with a colour so you can see it clearly. At these small sizes, it’s easier to see it if there are no line attributes applied.
  • Place the left edge of this box against the right edge of the column guide, and then drag another guide to its right edge.

Left Margin, First Column and Gutter

 

  • Select both boxes and duplicate them, then drag to place the left edge against the new guide.

Two Columns

  • Repeat the above for as many columns as you have. (Because of rounding, you may be out by one point on the right edge. Don’t round if you have a lot of columns, or this is important to you.)

Three Columns

  • Voilà!

Delete the boxes when you’re done, or drag them past the layout boundary to the inactive part of the layout. Or, if you have FileMaker 13, you can keep them on the layout so that you can snap other objects to them, and use “Hide Object When” to hide them when not in Layout mode!

You can adapt this method to accommodate different numbers of columns and different widths of margins. Once you have your guides in place, you can decide to turn off FileMaker’s grid, and use only the guides, or keep it on to more precisely place your layout objects.

FileMaker help topics:
Using the rulers and grid
Using guides and dynamic guides

 



 

Space

Visual Design Basics for FileMaker: Space

The second in a series on the basics of visual design for FileMaker. Space is the basic element that designers work with. How we divide it up determines what we ultimately present to the user as our design.

Space: The final frontier… (Okay, that was bad.) But as designers, we are all “space explorers.” In fact, our main activity as designers is to “explore” the space on the screen by dividing it up in a way that helps users meet their goals.

As we move through an application’s windows, there’s a sense of existence in space, of “coming” and “going” somewhere. We use “forward” and “back” buttons to help find ourselves in the application. This journey happens only in our minds as we discover the various features and functions, but that doesn’t make it any less important.

Read More

5 Ways to Create a Polished Solution

There are some details that, if left unattended, can detract from a good user experience. Learn about some things you can do to make your solution look more polished and professional.

What makes the difference between a good solution and a great one? Cool fonts, beautifully-rendered icons, and the latest new interface techniques? Those can make your app look cool, for sure. But I’d venture to say that…drumroll please…Consistency and attention to detail are even more important than nice graphics.

Read More
Back To Top