FMLayoutMode.com

Remember this layout? This is from my May 26, 2010 post. I had promised that over time, we would clean this up to be a layout you wouldn’t be ashamed to show your boss. Guess I’d better start delivering, eh?

I’ll start off with an easy one: Colour. …well, easy-ish.

Quick, Robin! To Layout Mode!

Will you look at all those colours? Quite often, someone’s first database is all white, and then they discover how to add colour. That’s when they start saying, “Well, I really want the Print button to stand out; let’s change the colour.”

But then they want everything to stand out. The end result is what those of us in the business (okay mostly just me) refer to as “clown puke” — because in my world a clown would puke an entire rainbow of colours.

So let’s start with a clean palette. We’ll just get rid of all colour.

You can do this. Hit Cmd-A on your keyboard (Ctrl-A on Windows) to select everything on your layout. Now on the Appearance tab of your Inspector, select a fill of white.

Hold the phone. Why didn’t the background change? You need to select each layout part separately and change their colour. So click on the handle for Header (just under the “C” for “Clients” at the top of the layout). Now change its fill to white. Do the same thing with the Body.

Now, some of you may be saying, “It’s too bland!” … and you’re right, but before we start adding colour, let’s look at this in the context of your computer. You have a picture of the sunset from your last holiday on your desktop; you have a pile of colours on the icons on your dock or taskbar. If you put a lot of colours on your layout, they can end up clashing with all those colours.

Also, look at the colours of some of your other applications — especially if you’re on a Mac. Apple gets a lot of credit for their interface design, so you should take notice. Here’s a screenshot of the toolbar on Safari:

Do you see a lot of colours there? Almost none.

But, we should add some colour. Where’s the best place to get some inspiration? How about your client’s company web site? It was probably designed by a graphic designer — they always know what colours to use.

You can usually ask someone to send you the RGB value for their company colours, or there are tools you can use for discovering them. You probably won’t be using one of the 88 colours that FileMaker has in its colour palette. At the bottom of the palette for the colour picker, there is a spot that says, “Other color”. Depending on whether you’re on a Mac or a PC, this will invoke one of the following dialogs:

You’ll notice they both have spots for you to set values for Red, Green, and Blue. These are the RGB values. Each value can be between 0 and 255. So RGB (255,0,0) will give you the colour red (maximum amount of red, 0 of green and blue).

… and here’s a little tip: no matter what those values are, as they get closer to each other, the colour tends toward some shade of grey. Greyish versions of colours seem to blend in a little better, with less possibility of clashing.

So, back into Layout Mode. Click on the handle for the Header, and select “Other color” for the Fill Color.

We’re going to make this header blue. So we’ll start out by setting Red to 0, Green to 0, and Blue to 255. That’s a serious blue, friends. Let’s mute that a little bit by tending it toward grey.

We’ll leave Blue at 255, and put Red and Green up to 105. Still a little bit loud.

Try this: RGB (211,211,255).

That’s a mellower blue — sort of the same colour as the blue chalk your teacher used to use. Let’s go with that.

Now you need to select the word “Clients” and the container field. Either give them the same fill colour, or make them have a transparent fill. Go back into Browse Mode and the result will be this.

Even with all the other problems this layout still has, it looks much crisper, doesn’t it? Even Grover doesn’t look too out of place (but still a little).

General rules:

1. Unless you’re a graphic designer (those dudes just know how to make colours look good together), it’s best to limit your layouts to having just one colour — maybe two.
2. Re rule #1: White, black and grey don’t count as colours — as long as you’re only using one shade of grey. Multiple shades of grey can even look a little busy.
3. As colours tend toward grey, they become more muted, and a little less loud.

Paul Spafford
FMLayoutMode.com
Spafford Data Solutions