I loved computers when I was growing up. With my dad being a computer engineer who worked at IBM in the late 80’s to early 90’s, we always had a computer in our house. As a kid, if I wasn’t playing outside, or in front of the TV playing Nintendo (back when Nintendo was hot!), you could usually find me at my dad’s desk messing around on his computer.
My dad, being the entrepreneur that he is, was always drawing up plans for some big new initiative – whether it was working with architects to build a new building, or to build out and add on to an existing one. I often found myself playing around with his drafting software. I had no idea what I was doing, but every time I reorganized my room, I would use the software to create shapes for my TV, bed, couch, etc, and rearrange them on the screen. I was always dreaming and coming up with systems to improve current situations or workflows.
Fast forward to today. I had no idea that the things I would do as a kid would play into my role as a User Experience Designer. I have been in the industry for over 14 years and have seen tools come and go. Some of them I had to literally put on a dream list to buy. But there are some tried and true tools to help improve the workflow of the everyday designer. Whether you’re a UX Designer, a Web Designer, or better yet, you’re that kid like me who just loved to tinker and dream big, these are the tools that I have used and absolutely love. I use these in my current workflow to this day.
Note: There are a ton of resources for free and paid apps that help with creating wireframes – some are just okay, some I absolutely hate. The key to finding the right tools is to find what works best for you. What tools compliment your workflow? Don’t just use a tool because it lists “Nike” or “Discovery Channel” as part of its user base. Although you may see their logo on the site, chances are the user could have been anybody on their staff who tried it once for a tiny project, or internally test driving the new tool because they have a huge budget to do that. So don’t be awe struck just because big name logos or quotes are listed on these apps. Test drive them all for yourself and find out what works best for you. The ones I recommend below are tools I have used on multiple projects and still use today:
OmniGraffle | omnigroup.com/omnigraffle
Although it has a nice price tag, this is my #1 tool for wire framing, prototyping, and working on sitemaps. I love how quickly I can create site maps and site architectures. I have used this tool to create multiple user workflows, websites, etc. There are also a bunch of great resources out there that work well with Bootstrap, Foundation and other website frameworks.
The one thing that really sets it off for me with OmniGraffle is not only the layers, but also the quick ease of exporting my comps into multiple formats, including Illustrator and Photoshop. That alone was a win for me. It was a dream buy and once I saved up the funds to buy it, I was 100% hooked. The main downside I’ve found is that it’s not an online tool I can use on multiple computers when commuting. In addition, I’ve found that many designers don’t know about OmniGraffle.
InVision | invisionapp.com
I don’t consider InVision a wire framing tool. It’s more of a prototyping tool. However, this is one of those tools I absolutely love as well, and have used for years. The great benefit to InVision is that when I show clients their comps it somehow always just clicks for them. If I show them straight JPG, PNG, or PDF comps, they often don’t get it. But the second they see it in InVision, it all makes sense. Because of this, InVision is another one of my favorites I keep in my design tool box.
(A gift from InVision: Click the link above and get 3 months of the starter plan for free)
UXPin | uxpin.com
For online tools, I absolutely love UXPin. They continue to enhance their product, and I actually used their product to redesign the U.S. Army Medal of Honor Website. Great tool and great people behind the app.
Yup, Illustrator! I have worked on projects with all types of budgets but the one tried and true resource has been Adobe Illustrator. One of the benefits is that, regardless of the budget, you can always jump straight into Illustrator and layout your wireframe, and then take it directly into Photoshop.
Project Comet | www.adobe.com/ProjectComet
A future tool I am eager to try out is Project Comet. It’s a UX tool created by Adobe, and one that I am eager to start pixel pushing with. From the outside it it looks like it could really enhance and speed up my current workflow. However, since it’s not released I can’t verify that yet. I’m trying to get a beta version to start messing around with it. So, if Adobe is reading this, how about it? I really want to use Project Comet so that I can share with the world how revolutionizing it actually is.
Since writing this blog Adobe just announced they are accepting applications to join their beta program to test out Project Comet.
I mention Photoshop last for a reason. Though it is (by far) my favorite tool, it is also the one I have to force myself to stay away from when starting a project. It can be really tempting to just jump straight into Photoshop and start designing. However, there are both pros and cons to moving straight into the design phase. For me, it’s always best to have a fully thought out plan before moving to Photoshop, so that my concepts have been fully dissected and actually work.
I hope this resource list is helpful to you. Please share your thoughts and your favorite tools of the trade. What tools have helped you grow most in your design career?