Fun with FileMaker Button Bars, Part 3: Tips for Designing Great Icons

In Part 1 (“Check Please,”) and Part 2 (“Expert Panel,”) of this series, we had some fun doing things with button bars that showed off some of their unique usefulness within the FileMaker design-layer toolbox. Often as not, your button bars are going to include icon labels, with or without a supporting text label, and you want those icons to look great.

In button bars, you want a consistent visual weight across all the segments, and in both button bars and standalone buttons, you want icons that look crisp on both high-resolution (“Retina”) and standard-resolution displays. This article will help you achieve both of these goals.

So, to quote that hard-boiled private investigator, Nick Danger, in The Further Adventures of Nick Danger, Third Eye, “Let’s get down to business”…

A quick review of FileMaker button iconry

Once you move beyond the handful of bundled icons and start designing your own, you’ll need to understand a bit about the pros and cons of the supported graphic formats.

Basically, you have two choices: PNG or SVG. We’re going to be focusing on the latter, but let’s briefly mention that you may occasionally want to use PNG icons. You’ll sacrifice both the resolution-independence of SVGs and the ability to color your icons using FileMaker state-specific styling (and/or conditional formatting). But an icon saved as a PNG will retain rich, full-color detailing, including inner and outer shadows that are not-supported in FileMaker’s implementation of the SVG standard.

Mind you, by specifying fill color(s) in your SVG icons (and not adding the “class=fm_fill” attribute, see below), you can retain full-color detailing (but not strokes or shadows) and still enjoy their resolution independence, so occasionally that may be the way to go. More often, in today’s flat-aesthetic world, you’re going to want to eschew the full-color approach in favor of controlling the icon color within FileMaker. As described here in more detail, this means either removing all fill attributes that would override the top-level “class=fm_fill” attribute that FileMaker adds internally, or adding the “class=fm_fill” attribute yourself before bringing into FileMaker.

Check out the links at the end of this article for more information about using SVG icons in FileMaker.

TIP 1.  Use padding in your icon designs to ensure consistent visual weight

Consider this button bar using 3 of the bundled icons, with the icon size set to 14 points in the Button Bar Setup dialog:

The left-most icon looks fine, but the middle one is so small as to be almost unrecognizable. The icon in the third button is better than the middle one, but still seems mismatched to the first button. Aesthetically, the composition just doesn’t seem right.

As expected, the vertical button bar arrangement suffers from the same problem:

Now consider these examples:

and

Now, that’s better! But why the difference?

Let’s look at the XML of one of the original icons:

The critical part is this:

That 24×24-pixel box is the SVG’s “viewport,” and it’s mapped to whatever size (in points) you set for your icons in the Button Bar Setup dialog. The viewport may not always be square, in which case it’s actually the larger of the two dimensions that’s mapped to the icon size specified in FileMaker. In FileMaker’s bundled icons, the viewport size is always cropped to just contain the icon imagery, so the greater dimension of each icon determines its size in the button bar. Mathematically, this would seem to make the icons likely to appear comparable in size, but in visual design, the eye always trumps math. As seen in the first couple of screenshots above, mapping the longest dimension of each icon to the same size doesn’t guarantee evenly matched visual weight when they’re used together in a button bar.

The answer lies in adjusting the icon imagery’s proportions within the viewport before bringing the icon into FileMaker. When you create icons in Sketch or Illustrator, your artboard size will define the viewport’s “width” and “height” dimensions when it’s exported to SVG format. Round or square icons need a little padding added around all sides. (Note that I’m talking about space designed into the icon when its created, keeping the imagery from completely filling the viewport, not the Padding setting in FileMaker’s Inspector.)

Here is an icon created in Sketch, on a 24×24-pixel artboard, zoomed in for illustration purposes. Notice that I added padding around all four sides (3 pixels in this example, but let your eye be the guide):

An icon that is particularly elongated in one dimension, on the other hand, can and often should extend to the edges of the artboard, helping to ensure that desirable consistency in visual weight:

I used the same approach to tweak the icons in the examples at the top of the post, adding padding to the icons in the first and third buttons (and then bumping the icon size in the Button Bar Setup dialog to 20 points to compensate), and the results are seen in the third and fourth images above.

Does the exact size of your artboard matter here? Mostly not, so long as you use a consistent size when creating a cohesive icon set, so that you can visually judge how well they match each other. You can later scale your icons in the Button Bar Setup dialog as you place them on your FileMaker layouts. But I’m glad you asked, as we’ll see in the next tip that artboard size is important in some cases.

TIP 2. Fixing blurry icons (or “When resolution-independence isn’t”)

Have you ever noticed icons that look a bit blurry, particularly on standard-resolution displays? Shouldn’t SVG icons always look crisp?

As mentioned above, SVGs are resolution independent: that’s the “S” in “Scalable Vector Graphics.” Their shapes are defined mathematically, and thus render faithfully at any size and screen resolution. That helps to avoid the jaggies that are particularly noticeable on diagonal and curved edges when a fixed-resolution (e.g., PNG) image is scaled up. Even SVGs potentially have jagged edges down at the pixel level. When SVGs are rendered on a display, however, the rendering engine adds some smoothing (anti-aliasing) to blur out those jaggies and thus improve the appearance of diagonal and curved edges. The effect is most easily observed on standard-resolution displays, since the eye can generally see the individual pixels on those displays. It results in a subtle bit of fuzziness, but gets rid of jagged edges and is a clear improvement over non-anti-aliased rendering. An example, magnified:

High-resolution displays also render SVGs with anti-aliasing, but the display resolution is so fine that it hardly matters: lines and edges of all orientations simply looks great when the pixel size is at or near the resolution of the human eye.

This combination of resolution-independence and anti-aliased rendering makes SVG icons look good when scaled, even on standard-resolution displays.

But there’s a problem with this assumption of resolution independence, and it rears its head with vertical and horizontal edges. It’s especially noticeable on standard-resolution displays, but a sharp eye will notice some impact on high-res displays, as well. The next screenshot was taken on a standard-resolution display; you’ll quickly notice a difference in the quality of the first icon compared with the next two (all SVGs).

In the first icon, the horizontal edges of the three bars are precisely aligned on the display’s pixel edges, hence a crisp icon. In the other two, the bars’ edges are not aligned on pixel edges, so the rendering engine adds anti-aliasing to retain the apparent, relative location of the lines at the expense of some fuzziness. This fuzziness is much more noticeable on vertical and horizontal edges than on curves or diagonal lines. In the middle button, the horizontal edges of the bars were not aligned with respect to pixel edges when the icon was created in Sketch (shown here zoomed in, and with background shading added to better delineate the pixel grid):

In the third button, the bar edges were aligned with pixels on creation in Sketch, on a 20×20-pixel artboard:

…but the icon was then scaled down to 18-point size in FileMaker, throwing off that alignment:

As soon as the icons are scaled to anything other than their original size (or some multiple thereof), here come those fuzzy edges! Resolution independence has some limits!

The solution is to create your icons at the same size that you intend to use them in FileMaker. If you’re going to set your icons to 18 points in the Button Bar Setup dialog, then creating them on 18×18-pixel artboards in your graphics program will help you ensure that those edges align with pixel boundaries — turn on “Show Pixels” as you draw — and will continue to do so when used at that same size in FileMaker.

Remember these two tips, and your button bars will begin looking more professional immediately.

About The Blog Series

When I first saw the FileMaker Button Bar demoed, I was a bit underwhelmed. It’s not that it didn’t look potentially useful to have a new layout object type that keeps a group of buttons permanently joined at the hip, but that’s about all I thought it did. Once I got my hands on button bars, however, I discovered the nuances that make them far more than just a permanent grouping of individual buttons.

The “Fun with Button Bars” series explores some uses I’ve been putting them to. In Part 1, “Check Please,” we used a button bar to provide a modern, highly styleable alternative to native, FileMaker checkbox controls for Boolean (yes/no) fields. Then, in Part 2, “Expert Panel,” we turned to button bars to do the same for dowdy, native FileMaker tab panels. In today’s article, we’re taking a bit of a breather from special tricks to focus on making sure those button bars look as sharp as they deserve to look. There are a lot more tricks that button bars have up their sleeves, so stay tuned.

About the author

Mark Scott is a Senior FileMaker Developer at Beezwax. When not coding, he can be found riding his bright green Ninja-300 motorcycle in the mountains of the San Francisco Bay area, practicing new songs on guitar, and getting up to the Sierra Nevada on a regular basis.

Acknowledgements

Many thanks to Jay Gonzales for whipping this article into final shape for publishing.

References

Here are a few other articles about using SVGs in FileMaker and about SVGs in general:

FileMaker Pro 14 SVG Grammar for Button Icons, FileMaker’s official documentation on using SVGs

SVG Custom Icons and FileMaker 14, by Matt Larson

14 Points for Glyphindor!, by Bob Shockey

Custom Button Icons, by Emory Brown

Charmed by SVG, by Chris Irvine

How Designers Should Think About SVG, by Peter Nowell (thanks to my fellow Bee, Brian Schick for bringing this one to my attention!)