Flash

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.

Advertisements

Creating Prototypes for testing

One of my job responsibilities is to create the prototypes for testing. Sometimes it is me, sometimes it is one of my team. They are all used however for testing. I run a UX user group, and we recently had a meeting about tools for UX. A lot of prototyping tools were mentioned. I’ll write another post about the tools of the trade soon, but there are already a lot of options and articles about the tools.

To start with, I bet a lot of people who have never done that before know it takes upwards of 4 weeks to get a test on the books. Where are the users going to come from? What do they need to know, what product(s) do they need to have used, and so on. Who will conduct the test, who moderates, what software will you use to capture the testing? So many variables. Lighting, computers, servers, speakers, one-way mirrors and more.

Creating a prototype for testing means creating smoke and mirrors illusions. It is all about the interactions, and what level of interactivity the tester and product owner needs from the prototype to get the information they need from the users. What we use to get that information doesn’t even matter.

The first prototype my team did was in Axure. A mobile prototype. Then I did my first one in Flash, based on a wireframe. I had a blast creating that one. So much grief deciding on Flash to start with, I had tried HTML, but the interaction was too complex. Then I thought Muse, nope. Fireworks, no again. InDesign interactive saved as a SWF, and no again. I actually spent a lot of time on those, and a disaster all based on the level of interactivity I needed. I finally finished and was happy with my Flash prototype.

Since then we’ve done HTML, paper, Axure several more times, Flash Builder, Muse and I am still trying to decide on the next one. This one now is tricky. Turns out iOS turned tricks on us, and you can’t get rid of the browser window on an HTML prototype any longer, past the home/index page. Janky move Apple. So, I am now trying different things out which will probably involve an app on the phone side to display the prototype. This one also involves lots of form fields, so I couldn’t use something that just creates hotspots.

So again, how the user needs to interact, rules. We’ll see what I find to create that prototype that emulates a native application. So many choices out there, surely I will find something suitable. Will keep you updated!