FMLayoutMode.com

All right, then. The wild layout has been house-broken. This is just a quick post to show the various iterations of the layout, from its wild infancy, to its charming and debonair adulthood.

This is the original layout from my May 26, 2010 post. As you can see, it had issues.

The very first thing I had to do was (as I so charmingly put it) clean up the clown puke. I mean really, our layout can’t be seen wearing that! We turned everything white as a starting point and gave it a light blue header.

Greyish tones seem to be pretty popular right now. Remember when picking a colour, the closer the RGB values are to each other, the more the colour tends toward some shade of grey — or a grey shade of some colour.

The next thing we had to do was solve a couple of icon puzzles. What was Grover trying to tell us? What happens if we click that rolodex card icon?

We found out that Grover was there to show us that this client is marked as a current client (come on now, that should have been obvious!), and the rolodex was a button to print the current layout. That one was so obvious that the developer forgot and even created a new button that does the same thing.

As a tribute to the developers in the crowd who think that icons generally have a place on layouts (I’m talking about you, Darren Lunn!), we added a printer icon to the Print button — you know … just in case users have trouble reading that five-letter word.

In Part 3, we decided to do some Textual Healing (cheesy, I know, but I still find it kind of funny!). We limited the layout to three different font sizes: Two for the header area, and one other for everything else on the layout.

In Part 4, we discussed — and got rid of — the inconsistent and overdone effects. We gave buttons an embossed effect, with a line width of 1 pt, while taking all effects away from the field borders: just a simple 1 pt black border. In a later post, we changed that black field border to grey — to soften things up a little.

Part 5 was where we looked at how we should separate and align layout objects. Here’s where we learned Spafford’s Principle of Boxy Layouts: Everything should be aligned using the bottom and left edges; if possible, also do the top and right edges. In most cases, field labels are an exception to my principle.

We folded some space in Part 6, by adding a tab control panel to put some separate data on our layout.

In Part 7 we added some related portal data to the extra tabs we had created. Hyperlinks in the portal gives users the ability to navigate to related data, and that allowed us to delete a couple of the buttons from the right of the screen.

Part 8 was nice. There’s when we added a little more refinement to the layout. We incorporated those right-hand buttons into the layout more, and made them look a little nicer — not so in-your-face.

Part 9 introduced one of my favourite features to come out of FileMaker 9: auto-resizing. We made sure that when we change the size of our window, our layout doesn’t do goofy stuff. You can be sure, that until you’ve played with it a lot, any auto-resizing you set up is guaranteed to do goofy stuff — but don’t worry, I have faith that you can fix it!

Part 10, the final chapter. We just looked at some common data entry aids we can provide using value lists.

It was a fun ride. For those of you who are sick of looking at this one layout, my next post will start tackling more general techniques again.

Paul Spafford
FMLayoutMode.com
Spafford Data Solutions