Heavy Metal
It has not escaped me that both Macintosh applications I have released use the controversial metal window style, and, though I’ve been known to defend metal windows against charges of ugliness, I do occasionally find myself apologizing to people who think they’re getting out of hand. Every time I do, however, I remind myself that, unlike most indie developers out there, I at least understand the cardinal, unwritten rule of metal window design: for God’s sake, minimize the amount of visible metal!
Look at iTunes, iPhoto, iCal, NewsFire, Cocoalicious, or Delicious Library, and you’ll see this principle followed religiously. Compare this with the vast majority of metal indie apps out there (see, for example, Cinematics, which I’m not picking on–I just happen to have found it through Daniel Wilson’s del.icio.us links today), and you’ll see a different story. Notice the wide margins, all metal drawer, metal inset boxes, and the vast sea of metal at the bottom of the window? This kind of thing is what makes metal windows look heavy, and why they have a reputation for being ugly.
If you plan to develop a metal app, here’s my advice:
- Use small window margins. Even smaller than the ones specified by Apple’s UI guidelines. Look at iTunes, iPhoto, or iCal for examples.
- Use iTunes style bezels around table views and other boxes. AppKit doesn’t provide them out of the box, but the Cocoalicious project contains a class to draw them.
- Try not to use a toolbar, but if you must, follow Adam Betts’ advice about using back shadow instead of floor shadow on your icons. Or, do what Cocoalicious does and use NSSegmentedControls on a very thin toolbar.
- Try not to use a drawer, because metal drawers look icky. If you do, remember to follow the principle of minimizing the visible metal (see iCal and PodWorks).
Contrary to the common perception, metal apps need not be ugly, and I think that if more developers were to keep these principles in mind, they wouldn’t be.
August 2nd, 2005 at 2:24 pm
Word to Big Bird! The impression I got when launching Cinematics for the first time was of there being a lot of wasted space; the application just feels heavy. It’s not the metal, it’s the amount of it!
August 2nd, 2005 at 4:43 pm
Less metal. More cowbell! :-p
August 2nd, 2005 at 6:03 pm
Hey this is Drew from Delicious Monster. Great post (and thanks for the plug!). One thing if I may add it: bezeled text is absolutely key for good looking brushed metal windows.
It’s a one-pixel-downshifted gray shadow below any text that’s on the actual metal. Check out iTunes (or just about any other good metal app — in Delicious Library, we do it in all of the table view headings, for example) to see what I mean. Bezel your text and your metal apps will instantly improve 250%.
August 2nd, 2005 at 6:33 pm
This post fits in pretty well with my review for MacZealots on Friday. I am reviewing FrameVault: another application from the makers of Cinematics. The company doesn’t seem to understand anything about Mac OS X interface design. They make functional apps and then stop. There is no polish whatsoever.
August 3rd, 2005 at 1:29 pm
“Use small window margins. Even smaller than the ones specified by Apple’s UI guidelines. Look at iTunes, iPhoto, or iCal for examples.”
But iTunes do follow the Aqua Human Interface guidelines which specify different margins for metal windows and aqua windows. Sadly, Interface Builder does not follow the HIG for metal window layout so the pixels need to be counted by hand when laying out your GUI. ( the zoom-in universal access feature may come in handy here) iCal however, does not follow the guidelines with regard to border size.
August 3rd, 2005 at 3:32 pm
“Metal drawers look ugly”
Friend, ALL drawers look ugly.
I want to know what files I need to edit in /System to change that horrible lip on Aqua drawers. Surely I can find some .pngs somewhere I can replace to make those things look less like something that belongs in Microsoft Bob.
August 4th, 2005 at 10:25 am
And what about… fennel DVDManager (http://dvdmanager.free.fr/)
?
Note: The screenshot on their website is not sync’ed with their latest version (where margins have been reduced).
August 4th, 2005 at 2:50 pm
This is wonderfully practical advice. I would love to see a Will Shipley style GUI Insulting service, but I’m not qualified. Any takers?
August 5th, 2005 at 7:07 am
At the rick of being off topic … I was looking at Einstein’s Legacy for the Cinematics app you mentioned when I noticed that another of their apps,Frame Vault, uses an icon that’s a totally stolen and reworked copy of the “Illegal MiniDiscs” icon from David Brasgalla’s “Matrix Rebooted” icon set!
Poor window margins may be the least of their problems.
August 5th, 2005 at 1:31 pm
Wow–someone should tell Dave (unless he did it for them)! I thought their icons were unusually good relative to the rest of their UI design.
August 11th, 2005 at 8:09 am
Eh. I think you’re missing the point, which is that Metal is an ugly throwback to the NeXTstep DeathStar UI. For some of us, it will never look good, no matter what amount of it is visible beneath your content views.
If I could make all the Metal apps on my system use the “Unified Toolbar” look (without hacks), I certainly would.
Metal is like bell-bottoms in 1983 — time to let it go…
August 11th, 2005 at 8:18 am
Well, Chris, there’s no accounting for taste I guess.
August 22nd, 2005 at 11:31 am
Synaptic Pulse: No need for pixel-counting in Interface Builder; just hold down option while nudging an element with the arrow keys. Nice feature of Interface Builder; I just wish those little yellow boxes appeared when resizing the enclosing window.