Visual Design Basics For FileMaker: Colour

Visual Design Basics for FileMaker: Colour

The fourth in a series on the basics of visual design for FileMaker. Colour is one of the most important elements of a design. Since vision is our most dominant sense, colour has an enormous impact on the feeling of a design. But it’s easy to overdo colour, so use it wisely! Here are some important facts about designing with colour.

When creating a design, choosing colours is one of the most important aesthetic decisions you will make, because it is one of the first things people will notice about it. You have the power to attract or repel users with your use of colour. (I hope you want to attract them, in which case, please read on!) Despite its importance, or maybe because of it, using colour well can be tricky.

Read More

Do You Make These 7 FileMaker Design Mistakes?

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.

Read More
Visual Design Basics For FileMaker: Shape

Visual Design Basics For FileMaker: Shape

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.

Read More

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

 



 

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