oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

FileMaker Pro Design Tips

by Alan Graham

Editor's Note -- This is the second in our ongoing series of articles exploring FileMaker Pro. In the first installment, Alan Graham introduced you to this venerable cross-platform relative database. Now in this article he shares some tips to help you design a clean, attractive user interface.

There's designing a database, and then there's designing a database. In this article we're going to discuss the latter, or at least some best practices for building an effective UI for an FMP solution. You'll also have access to some support files to help you with your work.

Most database solutions have a front end where users interface with data on a daily basis. Because of this you want to build an effective, yet attractive GUI for them to work with. I'll say it again, building an FMP solution is building an application within an application. And while a UI is an important factor, FMP is not the graphic designe's friend. It doesn't support transparency layers, and the graphics tools are circa 1986. Even so, you can still pull off some wonderful feats of design.

When designing an interface, remember that the people who'll use the solution aren't FMP developers. They don't know how to navigate layouts, create reports, jump between windows, build scripts, etc. This means that you have to build your solution just like any other application, making sure that users have a clean, clear, and consistent UI to work within.

Building a good UI has a lot to do with past experience, but even seasoned developers can't foresee every UI issue until the solution actually gets in front of its audience. I know that some of my best ideas have been shot down because I was thinking with my higher "developer brain" and not my primal "user brain."

The following tips have been gleaned from my Best Practices list. I will explore many of these in more detail in future articles.

The Prototype

Don't waste energy on a nice graphic design until you've had time to test the functionality of the solution and get it into some type of alpha/beta testing phase. Since FMP is not a graphic design application, you'll find that it can be rather unforgiving at times, so you don't want to jump back and forth between apps until you are comfortable that there won't be too many changes with the UI.

Mac OS X Hacks

Related Reading

Mac OS X Hacks
100 Industrial-Strength Tips & Tricks
By Rael Dornfest, Kevin Hemenway

Use a Library

Use a vector-based graphics program to create a library of common icons, buttons, and UI elements that you can use from solution to solution. I use Adobe's LiveMotion because it specializes in creating vector graphics for the Web, and file size is an issue when creating an FMP solution. I just copy and paste items between LiveMotion and FMP.

Common icons, buttons, and other elements.
With just these basic elements, you can build just about anything. Mix, match, combine!

The Unforgiven Image

FMP doesn't respect transparency layers, so if you create drop shadows for UI elements, realize that you have a large marquis coming along for the ride. This means that a simple 32x32 icon could be more like 40x40 with a drop shadow and marquis. You can use these effects, just keep them tight.

Pages: 1, 2

Next Pagearrow