Every UX designer needs design tools to keep their work efficient and easy to manage. That is why we came up with 6 UX design tools to help any UX or aspiring UX designer.

Yes, this is a Listicle. That’s why you clicked on it. Let’s jump right in.

1. Video Camera + Editing Software

Remember: customer research is what makes or breaks the product, not the user interface interaction model or visual design. You should be spending a lot of time observing users, analyzing and discussing what you’ve observed.

At KRUTSCH, we use Sony video cameras and two styles of tripods: a full-sized model and a small, desktop model for placing on a conference table. I avoid using smartphones for recording interviews and observing test subjects. The dedicated cameras have better microphones for picking up sound. More importantly, dedicated cameras have better lenses that let you zoom into presentation displays, laptops or even smartphones.

For editing software, anything will do, but we use Final Cut Pro X, as it makes it easy to create highlight reels for our clients.

2. Art Supplies

Just what it sounds like: sketchpads, pens, whiteboard markers & Post-It® notes.

We’ve been using sketchpads more and more for client meetings and general note taking, because it encourages you to sketch on the fly. A client can be describing a business rule or product requirement, for example, and you can take notes that include page layout ideas, workflow diagramming, whatever. I used to take notes with Evernote, to be honest, but my design associate and I are almost always bringing sketchpads to meetings now.

For Post-It® notes, we’ve started carrying packs of these in our bags. Earlier in my career, I was a little cynical about the little sticky notes on the whiteboard. However, I’ve experienced how clients react to their use. Clients feel more connected to the design process when they get to physically place them and move them around.

When collaborating with clients, avoid using digital tools; people don’t focus as well. Use large sketch pads on a table. Stake holders will lean-in and become engaged. Encourage them to pick up a marker and add-to/change the flow or design.

“I am a believer in the power of tactile sensation as part of the design experience, which is probably why I still listen to vinyl.”

3. Diagram Software

After customer research, workflow analysis is the most important element of UX design. Workflow is the direct output of effective customer research. Call it the customer journey, if you like. Understanding how a customer goes from point A to point B smoothly, intuitively, while delivering on expectations is crucial.

Two points:

1. Use a digital tool. Period. This is not the place for sketchpads, although there is nothing wrong with starting with there. At KRUTSCH, we use OmniGraffle, but there are others.

2. Align your flow diagram with anticipated pages or screens. Label your diagram blocks with a number and descriptive names.

For example, a page in the diagram may be for customer login. Maybe login is a multi-step process that includes authentication, location identification and role assignment. Label the blocks in the diagram something like: 100 – Authentication, 110 – Location and 120 – Role Assignment.

As the design and development process move ahead, it’s much easier to say: “…let’s look at page 100…” instead of saying, let’s look at the login page, to which someone asks: “…which part?” As the application grows in complexity, we seen our workflow diagrams grow to dozens of pages with hundreds of discrete screens. Developers love this, once they see it in action.

4. Wireframe Tools

With a workflow in place, you need to start filling in some of the details. We find that iterative wire framing is a great next step, before prototyping with code.

Lots of options here, but at KRUTSCH we use Balsamiq, Axure and, yes, more sketchpads.

Our guidelines are these:

1. Sketchpads for wire framing with clients (i.e. collaborative meetings on-site);

2. Balsamiq or sketchpads for illustrating an idea to the development or product teams;

3. Axure for exploring user interaction models and getting a feel for application flow.

One of our associates has really done impressive work with Axure. You should exercise caution that the tool doesn’t become an end in itself. Move to working prototype code, as soon as possible (more on that in a minute).

5. Illustration Tools

With a workflow in place, you need to start filling in some of the details. We find that iterative wire framing is a great next step, before prototyping with code.

Lots of options here, but at KRUTSCH we use Balsamiq, Axure and, yes, more sketchpads.

Our guidelines are these:

1. Sketchpads for wire framing with clients (i.e. collaborative meetings on-site);

2. Balsamiq or sketchpads for illustrating an idea to the development or product teams;

3. Axure for exploring user interaction models and getting a feel for application flow.

One of our associates has really done impressive work with Axure. You should exercise caution that the tool doesn’t become an end in itself. Move to working prototype code, as soon as possible (more on that in a minute).

6. HTML/CSS/JavaScript Tools

Where possible, get right into code, building a simple prototype/mock-up with HTML, CSS and JavaScript.

Again, a massive number of options. You can almost measure the age a software developer by the code editor they use. For myself, I use Emacs (yikes!) for text editing and Dreamweaver for HTML, et al., editing.

The younger associates I work with use online editors in the ever-changing landscape that is front-end development.

Again, if you can’t code yourself, find someone who can build using stable CSS frameworks. The CSS framework will define the visual style more than anything else. The longer you wait to transition to prototype code, the farther away the real thing will be from your beautiful design.

Bonus tool: Zeplin.io. for design hand-off and collaboration. Like VAS above, Zeplin has changed the way we work and interact with dev teams. Whoever came up with the idea for Zeplin really understood the age-old problems:

1. Devs don’t have Photoshop and are endlessly asking for collaterals (images, color palettes, whatever);

2. Devs look at the design comps and then build their own CSS that doesn’t match what was designed.

These two problems have driven me bat-shit crazy my entire career, starting as a user interface programmer and then moving into UI/UX a number of years ago. Zeplin is one of those tools that make you wonder how any of this worked, beforehand.

The efficiency and effectiveness of UX design relies heavily on utilizing these design tools. These tools collectively enhance the design experience. This can ensure that you and your team can easily go from a concept to implementation, all while emphasizing user-centricity.

6 Design Tools Every UX Designer Needs