Thursday September 20, 2007
Luis Stole My Elephant Gun
“Where is my binky?”
"I love me some Adobe Illustrator.” I have been using Illustrator for a long time. It has served me well. It is my binky. I use Illustrator for everything, UX design, illustrated process flows, and of course, wireframes. It’s the last one on the list where I get the most flack from my colleagues. My associate Luis even had the gall to say, and I quote, “Using Illustrator for wireframes is like hunting flies with an elephant gun.” And you know, he might be right?
“32 Meg...Sheesh!”
I recently completed a document for a client that included 21 graphical flows and 12 high-fidelity wireframes. Oh yes, all created in Illustrator, copied and placed directly into my 40 page Keynote presentation. Heck, it was only 32 Meg (The .PDF I exported out of Keynote was only 26 meg...hehe). I carelessly spoke out in our team room lamenting over the size of my document which then caused Luis to voice his before-mentioned, yet eloquent, rebuttal concerning my wrongful use of the pachyderm propellant.
The room spun and I began spiraling into the abyss of introspection which led me to reconsider a long lost relationship with OmniGraffle Pro. Hey, all the other information architects had drunk the Kool-aid maybe there was something tangible that I had previously overlooked? I mean, if I was hit by a bus who would be left to masterfully coerce Illustrator into creating my wireframes? I daresay few would posses such powers–but I digress.
“O.G.P...Yah, you know me!”
I decide to take one of the wireframes I had created for my presentation and challenge myself to recreate it using OmniGraffle. Now the first thing I notice is that the user controls are not as intuitive as the tools I am accustomed to in Illustrator; although with some futzing around (and a few brief Q+As with Garrett, who at the time was deeply involved in his preparation for WebMaster Jam, yet, as always, quite amiable and patient with my inquisition) I become more accustomed/familiar with OGP's toolset configuration.
There are actually a couple of features that I really found interesting and useful. First on the list is the Create Tables feature. I usually create data grids in Illustrator by painfully setting up tabs for all the columns and adding gray-bar boxes in alternating rows (remember, I said I was creating high-fidelity wireframes). Well in OmniGraffle you can easily create this effect using the Create Tables feature. I mean it was really easy and it was painless to adjust and re-adjust to size. Re-adjusting width in Illustrator could have time-consuming consequences.
I was also pleased to see the addition of an intersect, combine, subtract shape feature. I use this feature quite a bit in Illustrator when creating tabs motifs. The only issue I have with this tool is that it is hidden within the interface. I would not have even known it was there if I hadn't visited the Omni site.
On a sidebar, I recently attended a Microsoft Expressions Design workshop and Microsoft had really done their homework–all the Illustrator shortcuts and key combinations worked within the Expressions Design application. I found it promising that Microsoft had put that much thought towards designing an application with the future user in mind.
Now back to OmniGraffle Pro and Illustrator...remember earlier I stated that my original 40-page Keynote presentation was 32 Meg? Well, I did a little experiment–after creating the duplicate wireframe using OmniGraffle Pro I placed it in its own Keynote file; I did the same thing with the Illustrator wireframe. It was then that I could hear Luis in the back of my head saying, “Told you so! Told you so!” The Keynote file containing the Illustrator wireframe was more than twice the size as the OmniGraffle Pro Keynote file. Doh!
Empathy for the Fly
Do not get me wrong...I’m not thinking of getting rid of my larger than average mammal bereft-er. I will admit that there are several good reasons why I should use OmniGraffle Pro when creating wireframes. In a consulting team environment where projects change at the blink of an eye, it makes sense to use a common tool that lends itself to cross-pollination. The possibilities of me being ran-over by a bus might be slim but the chances of moving on to another project is very likely.
Despite the un-intuitiveness of it's tool palettes, OmniGraffle Pro actually contains everything needed to create a successful wireframe. Once you figure out where the tools are, applying them is rather straight forward. The two strongest points for my decision to make the switch from Illustrator to OmniGraffle Pro for wireframes are the strong desire for our team to use a common toolset and a needed reduction in final file size. Personal usability, in this case, will have to take a backseat to team practicality. That said, it looks as if I will be switching to OmniGraffle Pro for future wireframes. If you listen carefully you might hear a distant swarm of flies sigh in mutual relief.
Comments on “Luis Stole My Elephant Gun”
EMC helps organizations create superior IT environments, from infrastructure solutions all the way up to software development and user experience design.
Learn more…About This 404er
T. Scott Stromberg
T.Scott is an info junkie (banned by his wife from Half Price Books) which is reflected by his career choice as an Information Architect. He has a love for good design and thoughtful alliteration. When not working on projects for EMC, he can be found relaxing in his studio while listening to classic jazz and attacking a freshly primed canvas with a palette and paintbrush.
I’m glad I could impact your productivity in a positive way for once.
Much like you I have my own set of tools that I could not live without. I started out working on MAC’s and I could not live without my freehand application. However I used that tool a little bit differently. I was using if for illustrations and it was simple to use and was compatible with all of the other Macromedia programs out there at the time. I then switched gears and started working on creating wireframes for SharePoint. I ditched my MAC and got a PC. All of my tools now were MS Office based so I started using Visio. Like you I looked into other applications that do the same thing but Visio by far blew everything away! Since it is a standard MS Office product it was easy to share it with others versus always saving it out to PDF for viewing or collaboration. Some people think of Visio as clunky or used to just make boxes and squares. This is not the case I have created wireframes that the clients thought it was a real screenshot from SharePoint.
Sample SharePoint wireframe from Visio: http://eswenson.spaces.live.com/
If you have a few moments sometime, we’d love to hear what you found unintuitive about OmniGraffle’s controls while the experience is still fresh in your mind. (We do try to put ourselves in the shoes of a new user, but it’s always easier to actually hear from one!)
(The best way to make sure we receive that feedback is to select “Send Feedback” from the Help menu; we’ll typically reply within a business day.)
If you don’t have time to send us more details, I certainly understand; thanks for posting what you already have!
I’ve recently switched the other way, though to Adobe Fireworks CS3. After using OmniGraffle Pro for many years, I’ve noticed a downward swing in software quality that’s affecting my work.
For instance, I can draw a simple box, position it, flip to another canvas, then flip back to my box…and it’s moved a pixel out of sync. Small detail, but annoying.
I’ve also grown increasingly frustrated with the lack of typography tools in OminGraffle; you can only set size, font and colour but not specific line-height. If you’re happy with the defaults, then great, but I’m not.
Finally, printing to PDF can be a real hassle. What you see on screen is not what’s outputted in preview or on paper. You need to manually tweak numerous elements just to print it correctly.
For me, Fireworks is much faster, more intuitive and has an overall higher build quality.
Geof: I too am a big fan of Fireworks. I agree, it is better quality. I’ll use OmniGraffle for low-fi wireframing. In some cases, its limitations are good, because they keep me focused on producing something rather than nit-picking details. When an interface really needs to have some polish, I will set up a grid in Fireworks and go to town.
Scott –
Just stopped by as promised. Site looks great.
YITB
Nathan: I also use (well, in the past) OmniGraffle for lo-fi diagramming, but it turns out I was wasting time and money rebuilding the wireframe in Fireworks once it went to production. If I just start and finish in Fireworks, I can re-use much of my original work.
@ Ken, I will definitely take some time and send you some notes on my thoughts concerning the usability of your product. I hope you found my comments/ramblings constructive. I think OGP is an excellent product and It is the primary application used by the majority of our IAs when creating wireframes.
@Scott: Thanks, we look forward to hearing from you!
@Geof: Thanks for all the feedback here!
Sorry to hear about the pixel-out-of-sync bug, this is the first I’d heard of it (though perhaps Joel is familiar with it). If you could send us some specific steps we can use to reproduce that bug, that would help us track it down and fix it.
As for typography tools, it sounds like you’ve found the general controls in the inspector, but missed the in-depth controls in the ruler. While editing some text in OmniGraffle, try bringing up the ruler (with Command-R) and you’ll see those text layout controls appear along the top of the ruler. There’s a pull-down there to set the line and paragraph spacing; if you select the “Other…” option you’ll get a sheet with options for a line height multiplier, line height in points (either as an exact value, or with minimums and maximums), inter-line spacing, and paragraph spacing (both before and after the current paragraph). This affects the current text selection, so you can set different values for different paragraphs in the same shape.
As for printing to PDF, please do let us know of any bugs you encounter. Our drawing model is based around PDF and we use the same code to draw to the screen and to PDF, but font metrics and other things can vary from screen to “print”, causing unwanted discrepancies. The more of these we know about, the more we can fix.
I hope the tip about OmniGraffle’s typography controls is helpful, and (if you have time) I hope we can get more details on the other issues so we can track them down and fix them. Thanks again!
@Ken – the tip certainly helped me. Thanks for being part of the conversation.
I had to concede that my love of illustrator for all things design to IA (the difference of which can be debated in another blog)….blinded me from the realization that I was using a samurai sword to peal an apple. In that case it’s still a pretty cool sword…but a smaller more specialized tool, say a pear-ing knife, would do a better job. I was directed to Omnigraffle by a very MAC centric client. Since this was after my aforementioned Illustrator concession I saw the value of Omnigraffle., even its value over Visio, however it is Mac only. To me this is like having a left-handed only pear-ing knife…in which case I am stuck with Visio…and my large, all powerful , but ambidextrous…samurai sword.