Chiyoko Yoshida of chiyofm created a handy little file to help you visualize the changes to layout objects when you apply different themes. Each layout contains all the objects you could possibly style on your FileMaker layouts, such as buttons, tab and slide panels, portals, text, and more. You could use this as a base for a theme development file (see my previous post about working with themes and styles).
We’ve probably all done these at one time or other. The consequences of these mistakes can range anywhere from annoying to profound. Here they are, in no particular order.
1. Thinking that you don’t really need to know about visual design principles
Like any language, understanding how the visual design language is constructed helps you use it more effectively. You “know” the rules on a subconscious level already, because as a user you’ve been conditioned by all the programs and apps you’ve ever used.
But you may not be equipped to solve sticky design problems. Often, design principles compete with each other. A lot of a designer’s job is weighing all the factors to decide which ones are more important in a given situation. By formalizing your knowledge, you can better decide what is foundational, and where you can compromise.
I’m pleased to present a guest post from John Renfrew, a developer from attitude, FBA members in Birmingham, England. In it, he talks about one approach to implementing a progress tracker in FileMaker 13 that shows the user where they are in the process, by using the awesome new feature, Hide Object When.
The challenge of designing for FileMaker is like most other software environments: Starting with data and choosing the best way for it to be displayed, while adding meaning and value for the end user. Personally, the challenges I love best are the ones which combine both the scientific and artistic parts of my brain.
The third in a series on the basics of visual design for FileMaker. As visual creatures, humans are very sensitive to detecting the shapes of things we see. Interpreting shapes is one of the basic ways we navigate the world around us.
It seems beyond self-evident that every object, real or imagined, has a shape. We define objects by their shape. (Um, thanks…tell us something we don’t know.) But if we dig a little deeper into this obvious statement, we discover that shape has a profound impact on our interpretation, observation, and interaction with the objects in our surroundings.
If you haven’t started using themes and styles yet in your FileMaker development, you should! This article consolidates information from Andrew Paulsen, Adam Ward, and Bob Shockey, presented in sessions at the 2014 FileMaker Developer’s Conference in San Antonio, Texas.
Themes and styles are one of the most useful design tools FileMaker has provided in recent versions. By defining custom themes and styles, you have the potential to revolutionize your workflow, create a more consistent look from layout to layout, and easily change the look of individual elements across all layouts in a solution.
The Design Glossary is a series of posts explaining a basic graphic design concept.
What 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.
- 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.
- Select both boxes and duplicate them, then drag to place the left edge against the new guide.
- 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.)
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.