Imitation is the sincerest form of flattery

The Notes 8 Home page includes some cool button icons. I'm reworking some of my own apps (more on that shortly) and wanted to include a launcher page that has the Notes 8 look and feel. I trust Mary Beth Raven's team did some extensive studies of what worked on the Home page, so (without getting too cliche) why reinvent the wheel and recreate everything from scratch?

Start with a blank canvas

The icons on the Notes 8 Home page look like this:





In order to create your own it's easiest to wipe out the default icon. This proved easier said than done for me because the button background is a gradient. Yes, it's extremely subtle, but trust me, it's a gradient. I use Fireworks for my very rudimentary graphics work and couldn't figure out how to select an area and fill it with a gradient, so I went through and overlaid it pixel by pixel. Yeah it was tedious, but here's the final result:





Yay, a blank canvas!

Build a better button

Finding images that work was a little challenging. The icon in the center is 32 x 32 pixels. Through lots of trial and error I determined that you can go as large as 40 x 40 pixels, but after that it starts crowding the frame and looking constrained. A while back I stumbled across some really cool icons from Rokey.net that I've been using for some internal apps at work, so I thought I'd use some of those here. It is important that you pick something that has transparency, and that will scale down to at least 40 pixels (32 pixels is ideal) without getting too ugly.

Here is what I picked (from the wifun PNG library)









Cute, huh? There is also a 32 x 32 version, and when I put it on the button here is how it ended up.





Tip: Each button is 48 pixels wide, including the borders. To put a 32 x 32 image in the center of the blue button it should be positioned at 8, 8 (X, Y). For the orange button it will be 57, 8. And here's another tip: after you position the image on the left, do a copy and paste of it. In Fireworks this puts a copy of it on top of the original, so then all you have to do is move it horizontally using the arrow keys. This is easier than trying to drag it around and position it. Since I already did the calculations for the offsets for you, you could just as easily type in the coordinates, too.

Conclusion

When you're working on updating applications don't feel like you have to continually reinvent the wheel. Lotus misses the mark on some UI queues, but for graphics and iconography they do pretty well. And don't dismiss the usability studies and other work that went into the Notes 8 UI.

Keeping things consistent for users increases their rate of adoption and lowers the barrier to entry. And hey, reusing other people's work just makes it easier for you. :-) If you can, have fun with it even if it's just for the early releases and demos. Who knows, maybe the stuffed shirt who designs the TPS reports might actually like to see a screaming box of chocolates as an icon.