Home / Design Blog / Wireframing and Prototyping Tools

Wireframing and Prototyping Tools

By: Simon
Updated:
Oct 3, 2014
Posted: Jul 23, 2013

wireframe-and-prototyping-hero

In the early 90’s I can remember sketching my logos and using Rapidograph to finish the job before it went to camera. I remember the days of inking and airbrushing brochures. You know times have changed, but in the most important ways remains the same.

I have been an artist and musician all my life. I was an airbrush fanatic and then I got my first Mac loaded with Photoshop and Illustrator. I was hooked. No more frisk paper for me. Been using Adobe Photoshop since 1.5 (Gen 1).

Though I put the airbrush down, something throughout all these years remained the same. The fact that sketching ideas on paper makes for a better end product and that my mind is my best piece of software I have.

With the help of Interaction Design Association group at LinkedIn I compiled a list of tools with links and summaries. Maybe you have already heard of some of these tools I am sure and maybe not. Hat tip to all on that LinkedIn thread.

As a side note, I always do high fidelity after my sketches. I use Adobe Illustrator.

Before Software:

  • Sketches: Using pencil and pad, create the next killer app.
  • Whiteboard: That squeaky marker noise sounds like clicks to me.
  • Post It Notes: Remember the user, don’t forget.

The Software:

  • Axure: Axure RP is the standard in interactive wireframe software and gives you the power to quickly and easily deliver much more than typical mockup tools.
  • Balsamiq: Using Mockups feels like drawing, but because it’s digital, you can tweak and rearrange easily. Teams can come up with a design and iterate over it in real-time in the course of a meeting. Product managers, designers, developers, and even clients can now work together in the same tool to quickly iterate over wireframes, before writing code.
  • LiveCode: LiveCode is a flexible software platform that allows you to create any solution, the only limit is your imagination. Today millions of people around the world use Mobile Apps built on LiveCode. With the ability to deploy your apps to all the popular platforms, LiveCode offers unlimited possibilities for mobile app development.
  • Adobe Illustrator: Adobe Illustrator is a vector graphics editor developed and marketed by Adobe Systems. The latest version, Illustrator CC, is the seventeenth generation in the product line.
  • Omnigraffle: Need a diagram, process chart, quick page-layout, website wireframe or graphic design? OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click. Whether you need a quick sketch or an epic technical figure, OmniGraffle keeps it gorgeously understandable.
  • Mock Flow: Super-easy Wireframing. Design, collaborate user interface concepts for your software and websites.
  • Bootstrap: Sleek, intuitive, and powerful front-end framework for faster and easier web development.
  • Indigo Studio: The newest design tool from the leaders in UX, Indigo Studio lets you quickly and simply explore and create functional, animated UI prototypes while maintaining the focus on user experience at every step.
  • UXPin: Not Everyone’s A UX Design Expert – People outside of design don’t always know exactly what it is that UX designers do, and if you’re making your first foray into UX design, then you may not either! That’s okay, UXPin is built from the ground up on solid UX design principles and a collaborative methodology, offering you a full toolkit of good user design patterns and elements to build great designs in concert.
  • Proto.io: Awesome prototypes for any device. Turn your wireframes and designs into amazing interactive prototypes. Filled with rich media, animations and touch events.
  • Microsoft Visio: Create professional diagrams to simplify complex information with updated shapes, collaboration tools and data-linked diagrams.
  • Hot Gloo: Wireframe in real-time with your team to get work done even faster and communicate with your co-workers via the built in chat function to avoid distraction. Work on your projects wherever you are and whenever you want. Your account is accessible 24/7, regardless which operating system or browser you are using.
  • JustInMind: Create the most interactive prototypes you could imagine with rich interactions, gestures and stunning effects. You can even prototype data-driven apps and form validations … without a single line of code!
  • Briefs: Lifeless mockups don’t tell the entire story, but you don’t have time to build a prototype. We’ve been there, too. MartianCraft’s clients are some of the most demanding companies in the world. Your clients need a clear picture, so give them something to touch.

So that’s the list of Wireframing and Prototyping tools. Please let me know if I missed any.

Simon Urbina

Simon Urbina

Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.