How would you design something like this?

For the last 2 years I’ve been doing all of my user interface and web site designs in Apple’s Keynote for the Mac.  Both the SWIX app and corporate web site were done this way.  I haven’t found another person that does it this way, but I thought it may be worth sharing why I believe Keynote is the best app around for doing software interface design.

First, here’s an example of what a variation of the page above looks like when I un-layer everything so you can see the pieces:

(click the image to zoom)

Pretty much the entire user interface for SWIX is just a bunch of layered rectangles with effects like borders, rounded corners, shadows and gradients.  I use transparency to do composite objects like buttons and panels and then group those objects together to form 3d looking shapes.

For example, here’s a glossy button:

It’s magical.

Now for the Top Reasons I Love Keynote

  1. One design = one file:  I do one slide for each screen I’m mocking up.  At times when I need to show variations of a single screen, Keynote lets you indent slides to form a ‘tree’, so you can expand/collapse portions of your slide list.  This makes maintaining a document with 100 slides rather easy.
  2. Easy sharing:  Keynote, with (BETA), has one click sharing to the Web so you can invite your coworkers to checkout your design online or download a copy in PDF or Keynote (or even Powerpoint).  They can comment with sticky notes right on the Web version and you get notified of every comment.
  3. Everything is a vector:  All the shapes you work with are vectors which means you can easily transform them, scale them, skew them, and apply effects to them.  By ‘making shape editable’ (from the menu), basic shapes in Keynote rival what the non-pro would do with something like Adobe Illustrator.  Of course, you can always just copy and paste your bitmaps or photos in there too and mix them with your design.
  4. Easy compositing:  Want to build a glossy button?  Easy, 3 shapes:  a background rounded rectangle, the text on top, and an intermediate gradient to give it that glowy look.  Group all 3 objects and resize the composite to grow or shrink your new button.  The text will stay centered on the resized object automatically.
  5. Great text handling:  Most bitmap or vector tools have lousy text handling.  Keynote’s rivals a word processor.  Plus, every shape can have text on it.  Control letter spacing, baselining, etc.
  6. Copy and paste styles:  got a shape to have just the look you want (say, beveled with a sheen and a tinted image background)?  Hit the copy-style button and paste-style on another object to give it all the same trimmings.
  7. Easy saving to PNG:  Since a slide/screen is now just a bunch of composite objects, like toolbars, buttons, panels, etc., just select an object, copy to the clipboard, paste into your image editor of choice (mine is Pixelmator, for $60, it rivals Photoshop), and save as PNG.  Easy cutting your design up into HTML ready images.  Don’t bother splitting a toolbar into top/middle/bottom like you would in the old days of HTML.  Just use CSS attributes like margins and z-index to layer things properly.  Also, saving these objects to PNG’s keeps the nice drop shadows and lets your browser do the compositing.
  8. Simple prototyping:  I’ve never had the need for this, but Keynote even lets you make shapes into live hyperlinks from one slide to another, so when you ‘play’ the slideshow, you can click on buttons and be taken to different screens.  Great smoke & mirrors for presenting your design.
  9. Advanced toys:  You can mask images, use magic wand ‘instant alpha’ to get right of background in photos, do color correction on your bitmaps, work with tables & charts, lock objects in place, copy and paste common headers & footers, create templates with common elements you use regularly in your design…  You can even embed videos into your slides.
  10. Plays nice with iWeb:  You can copy entire pages out of your Keynote file and paste them into iWeb to quickly get something (possibly with real hyperlinks) up on the Web.  The SWIX web-site is done entirely in iWeb so I can open it, make a change, and publish it again inside 5 seconds.  No mucking with raw HTML/CSS.  It automatically converts all those vector objects into PNGs for you and generates all the HTML you need.  Bevelling and embossing text, it’s all there.
  11. Plays nice with iWork and everything else on your Mac:  Need to write docs for your app?  Copy and paste elements like your toolbars into your Pages documents and then write around them.

One of most common reasons I hear designers stick with Photoshop is that they love their layers & layer groups.  With Keynote, you get layer groups simply by selecting a couple objects and grouping them from the toolbar.  You don’t get your list of layers on the side like you do in Photoshop, but in practice I haven’t found that to be an issue.  I think of it as a page full of little bits of construction paper that I can move around without having to select layers.  I don’t need no stinkin’ list of layers! ;)

For most app designs, I would dare say that Keynote not only lets you generate most of the fancy stylistic elements you see in app designs today, but from a productivity point of view, I’d bet my hand against any avid Photoshop user when it comes to producing the stuff FAST with no loss in cool factor.

It’s definitely a learned skill.  There’s enough there in front of you that you can pick it up really fast and get going.  But speaking as someone who’s been doing it this way for a couple years now, I can tell you I’m still learning little tricks about how to create new UI effects (textures, 3d looks, etc.) beyond a simple drop shadow.  The biggest jump occurs when your brain flips that switch and starts to see the whole world as a bunch of composite objects on a canvas, rather than as a big bitmap portrait.

Having become a power user, I’ve noticed a few things that I still get caught up on and have to switch to another tool for.  I would LOVE to see them in a future version of Keynote and it wouldn’t surprise me:

  1. Inner shadow:  Sometimes called inner glow, vector based tools typically have this.  Keynote already has shadow and an inner glow is really just a shadow falling inside the object instead of outside.  I don’t think this would be too hard and it opens up a whole new possibility of sunken items, instead of extruded items.
  2. Filters:  OSX already has a bunch of built-in filters it can apply to objects.  So far, not supported in Keynote.  Too bad.  Things like:  blur and noise would be especially great for creating textures.
  3. Boolean operations for shapes:  By making a shape editable, you can add new points and create stencils.  It would be great (faster) if I could just subtract a circle from a square for example, to get a square with a hole in the middle.  Combining shapes into one like this is especially useful when applying shadows…  Sometimes you don’t want each object to have its own shadow, but you want the whole set to have one combined shadow.

One final feature that would blow my mind would be if they’d take the Core Effects/Animation ability from OSX and let you ‘transform’ shapes on a 3d axis, like HTML5 can do.  They already can rotate the canvas of a chart on a 3d plane – why not shapes?

To sum it up, Keynote is great for beginner designers because it’ll make you proficient faster than any image editor I’ve ever used.  But for the experienced designer, there’s actually much more than meets the eye and very little loss in power compared to your tool of choice.  So it’s a best of both worlds kind of deal.