• About
  • Portfolio
  • Blog
Menu

Jeffrey Humble

Street Address
City, State, Zip
Phone Number
UX Designer

Your Custom Text Here

Jeffrey Humble

  • About
  • Portfolio
  • Blog

Lightning-Fast Prototyping On a Budget

March 4, 2015 Jeffrey Humble

Why Illustrator?

There are thousands of tools you can use to prototype your ideas, but Illustrator is probably not one that comes to mind. If you're a designer, Illustrator should be at the top of your list for prototyping. I've been making wireframes in Illustrator for a while now, and I love how fast the process is. Not only is Illustrator fast, it takes a modular approach to text and symbols allowing you to make global edits with very few clicks. Some might see Illustrator's lightweight design options as a reason to choose Photoshop instead, but I've found this simplicity helps to keep my designs clean and concise. 

My Workflow

For mobile applications, the multiple artboard functionality is what really makes Illustrator perfect for prototyping. I can wireframe every screen of my app on its own artboard. I can experiment with multiple layouts, and export these as PDFs for initial UX Flow reviews. Once you have an information architecture worth testing, I use an Illustrator script called MultiExporter to export every artboard in my document as a separate PNG with one click. Now that I have all the screens, I drop them into InVision (this is a great tool for teams and it's free!) and add hotspots for live prototyping and collaboration. Once the UX flow has been decided you can use a wonderful little Illustrator plugin called Specctr to annotate your wires. WARNING: your developer may give you a big fat kiss on the lips for giving him annotating designs. I think including your developer in early prototype conversations is a must, and having annotated wires will help alleviate headaches later on. Another key aspect of prototyping is animation. While InVision does have some animation options, I will often use Keynote to throw some animation ideas together. As a bonus, Keynote allows you to copy/paste from Illustrator so it's an easy process to mock up any animation. With a few plugins and free programs, Illustrator will have you prototyping at top speed. More importantly, all of the designs you create will be very easy to tweak and adjust, making you a truly agile designer.

Process-Prototyping.png

Explore Further

  • For more on using Illustrator for UX prototyping, check out this article from Adobe
  • Check out how this guy recreated Google Material Design with Keynote animations
← Interactive album covers using CSSUX Flow: 4 Ways to Walk a New User Through Your App →