Workflows

I can’t tell you how many UX people I know, don’t use any Adobe products. Yeah, seems crazy to me too. And, the really crazy part is they seem proud of it. If only they knew how productive they could really be with Adobe products.

Illustrator:
Thanks to artboards, this has “almost” replaced Fireworks for me. I said, almost and only because it is vector and doesn’t crash as often as my beloved FW does. I can easily use AI to create IA’s and task flows. Honestly, AI is just as easily as Omnigraffle. I just create some graphic styles, some paragraph styles, some symbols and thanks to the built in arrows in Strokes, I am ready to create almost anything. There are some nice wireframe kits for Illustrator out there, so that makes it easier to create really nice wires. I just wish there were more kits out there.

Creating reusable buttons in AI is a breeze. Here are the steps.

Add the text to the page you want inside your button. > Open the Appearance panel and add a new fill, then pull that under the characters in the panel. > Add a FX > Convert to Shape > Rounded Rectangle. Change those setting to what you need, change the fill color. If you’d like to also make that a Graphic style, feel free so you can make it over and over again. Then, add it to a library so you can share it. Now, it can have any text and it will always look the same.

Makes doing buttons a breeze instead of how I see people do them the hard way. Rectangle, then adding text on top, and then having to change the rectangle size every time you change the text. Ick.

Update: Since I originally wrote this, Creative Cloud now has libraries. InDesign, Photoshop and Illustrator. This makes a difference because you can not only share them between those apps, but between your team members. Making the “workflow” portion of this post more appropriate. Graphics, text styles and colors are what you can save/share through the libraries.

The only things that stop me is I can’t make clickable wires right there in AI, and it has maybe the worst slicing tool ever. But, it is easy enough to throw them into InDesign and add the buttons. AI, I still love you regardless.

InDesign:
Eight Shapes first introduced me to using ID for wireframes. Their kit was fantastic, but they have moved on to using HTML. I still say ID has its place. Of course it is also a vector tool. One or two things though that set it a part. It has interactivity. Super easy to create clickable wires. It also can simulate animation, so that is amazing. With the ability to also change the page size, it makes this a contender for multiple portions of the UX world.

Dreamweaver:
I hope by this point you’ll notice I have said nothing about Photoshop. It has its place in life, and no place in the UX world for me. Dreamweaver however is still great for creating prototypes, and wireframing. If you are adept at code, then like myself, I find wireframing a responsive site easier in the code. DW makes it a breeze.

Muse:
I am pretty well known for my initial dislike of Muse, but for prototyping, I can put together something for testing in just a few days. I can add interactivity from Edge Animate, and copy and past my own HTML into the pages. The way it creates a site map is awesome. I may not be a fan of using it to create code ready HTML, but like Flash Catalyst was, it makes a great wireframing and prototyping tool.

Edge Animate:
Animate is a great tool and could certainly be a great tool all alone. I could easily use it to wireframe and prototype without anything else. It is fantastic however with Muse and whatever. Easy enough if you have ever used After Effects. Nice thing for me, it also feels a lot like LiveMotion from a many years ago, and it really is easy to use.

Flash:
Yes, Flash. I have used this to prototype with, and with great success. Sometimes the interactions you need to test are complex, and Flash makes that easy. Forms, no problem. Animations… that makes me laugh. Turn into HTML, yep. I’m an old Flash chick, so using Flash is like when you drive home and you can’t remember getting there. It is easy to pick up that old friend and get things done fast.

Edge Reflow:
If you are doing a responsive/adaptive design and not using Reflow, shame on you. The beauty is it can be wires or the actual design. I really believe in creating breakpoints based on when the design literally breaks. I’ll do an in-depth tutorial soon so it will be clearer, but I love the tool.

I don’t know the state of this tool. It may be going away.

Edge Inspect:
I couldn’t live without Inspect. It allows me to see my work on actual devices. Same network, app on device and Chrome extension and those are the ingredients to test away. I once saw 37 devices connected. So easy to test with because you can use both the browser, and the device.

I did a presentation for Adobe on this topic. Here is the link.

Of course, I am not saying other tools are worth using. I use Axure on a regular basis and have done PLENTY of prototypes with that. InVisionApp, UXPin and anything else of course has its place, but if you already use Photoshop or whatever, and have Adobe CC, I think you’d be amazed how they can fit into your UX workflow.