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

 



 

Prevent Jump After Drop-Down List Selection

When a user selects a value from a drop-down list, FileMaker’s expected behaviour is to move the cursor automatically to the next field (or object) in the tab order. If that field also has a drop-down list attached, this will have the effect of activating the list.

Under normal circumstances, this is fine and even desirable. But sometimes you don’t want this to happen, and there is no native option to prevent the cursor from jumping to the next object after a user selects from a list.

Why would you want to do this in the first place? Well, I was creating a global search field at the top of a layout with a drop-down list attached, and a script trigger On Object Save that finds a set of records corresponding to the user’s list selection. I wanted it to stay on the field after the user selected an item from the list, since the interaction is essentially over at that point.

Activated List

Read More

Alexis Allen Video Interview by FileMakerProGurus.com

Don Clark of FileMakerProGurus has started a video interview series with what he calls “influential people in the FileMaker community,” and I’m very honoured and pleased to be the first interviewee!

He asked me how I became a FileMaker developer, what design tools I like to use, and more. Watch the video to learn more about me and why I love design and FileMaker. You can read Don’s original article and link to the video here. Check out the rest of his site while you’re there.

Thanks Don!

 

 

Visual Design Basics For FileMaker: 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

Video: How to Create a Usable Touch UI by Luke Wroblewski

Luke Wroblewski, author of the excellent book Mobile First, discusses the importance of allowing plenty of space in touch user interfaces in this short video.

Luke says:

Creating a usable touch interface means embracing the constraints of direct manipulation. When our hands are input we need to consider touch target sized controls, spacing, and the inevitable simplification of our interfaces. I walk through these considerations and more in this quick 4 minute video.

Watch the video here.

9 Creative Improv Lessons for Designers

I’ve always been curious about how to develop creativity. Since creative skills overlap disciplines, it’s worth examining how people in other creative pursuits go about learning their craft. What important things can we learn that also apply to FileMaker design and development? This article explores how lessons in spontaneity from improv theatre can help us generate new ideas and be more confident designers.

Improv

Read More