Advertisement

360 MacDev: Josh Abernathy on the mechanics of good UI design

As the 360 MacDev conference continued in Denver today, the attendees had a chance to stuff their faces with apple pie courtesy of a vendor, and then sat down to here a talk by Josh Abernathy of Maybe Apps on the mechanics of good UI design. Josh started by making a distinction between graphic design (making something pretty) and interaction design (making something that is a joy to use).

Abernathy was primarily focused on the graphic design of applications. He suggested that many developers hire a graphic designer to do this job, as programmers aren't necessarily good designers. Pixie, a UI "explorer" that is included in the Apple Developer Tools, was noted as a simple and useful assistant for seeing the closeup details of how other developers have achieved a certain effect.

Keeping a scrapbook of good designs is another hint that Abernathy brought up. He wasn't advocating stealing user interface elements -- something that several developers I talked with at lunch have had to put up with during the last few weeks -- but instead to use those elements as an inspiration for future designs. Abernathy suggested visiting Flyosity.com and 365psd.com for excellent hints on how to use graphic tools like Photoshop in designing user interfaces.






After discussing some hints and tips on graphic design, Abernathy moved on to discuss implementation; how programmers actually add these graphic elements to their code. Animations began to creep into Mac apps beginning with Snow Leopard, but they can be abused by overzealous developers and can also be a "pain in the a**" to implement. When used with caution and not overused in applications, animations can add a bit of pizazz to otherwise plain user interfaces. Abernathy has created some custom code to assist developers in easily implementing animations that can be found at https://github.com/joshaber.

The final part of Abernathy's talk was to show how some popular animations are actually implemented. As examples, he demonstrated the code required to mimic the animation found in Pages when creating a new document, the envelope / stamp animation in RealMac Software's Courier application, and the iOS-like push animation in the upcoming Reeder for Mac.

The first day of 360 MacDev is quickly coming to an end (except for the party, that is), and it appears that this new developer conference is a success. There are quite a few attendees, and if you didn't get a chance to attend this year, be sure to follow the 360 MacDev website (link at the top of this post) to see when and where the next conference will be held.