UX Tools for Wireframing and Prototyping

UX Collective Editors
UX Collective
Published in
4 min readApr 30, 2016

--

What are the UX Design Tools you use to materialize and communicate your design ideas? What are the best tools for wireframing, prototyping, user testing, information architecture or simply managing your design activities?

We usually prefer tools that are unexpensive (ok, everyone does), that do not require software installation and that provide us with a good user experience when we’re projecting experiences for other people. After all, that’s how we spend a big part of the day.

See also: Tools for Analytics and Metrics, Information Organization, User Research, and Tools for Productivity.

Our Favorite Wireframing and Prototyping UX Tools:

UX Pin
Wide range of functionalities, including the ability to create responsive clickable prototypes on your browser.

Wireframe.cc
Open a new tab, create quick and dirty wireframes, and that’s it. Speed over pixel perfection.

Pixate
A great tool to test out complex mobile interactions, animations and transitions.

Sketch
A simple and efficient UI design tool with a strong community around it, taking over Fireworks aficionados’ hearts.

InVision
Upload jpgs and link them through to create clickable mockups and get feedback from your team and users.

P.O.P. app
Sketch your mobile UI on paper, take pictures with your phone and add links to simulate your mobile app.

Axure
The most complete wireframing and protoyping software in the market. The Photoshop of UX Designers.

Paper sketches
Never underestimate the power of pencil and paper. Fast, effortless and collaborative. Here are some templates.

More Tools

Flinto
“Flinto strikes the perfect balance between fast prototyping and realism. Prototypes run on iPhone or iPad and can be shared with anyone.”

Protoskecth
“With Protosketch from UI Stencils, your sketches become real, interactive prototypes that help you tell the whole story behind your great idea.”

Mockups.me
“Mockups.me lets you rapidly create interactive wireframes of your apps on your tablet.”

Appery
“The only cloud-based platform with visual development tools and integrated backend services.”

Realizer App
“The Realizer lets you create your very own presentation prototypes of iPhone and iPad apps.”

Framer JS
“A prototyping tool for animation and interaction on desktop and mobile.”

Easel
“Design & build in your browser. (It’s the fastest way to ship.)”

Moqups
“Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them.”

Keynote Kung Fu
“Use Keynote to create wireframes and clickable prototypes for the web and mobile devices.”

AppSketcher
“Build interactive prototypes quickly with HTML and jQuery components. No coding required.”

HotGloo
“What if there was a tool to create wireframes AND prototypes?”

FlairBuilder
“FlairBuilder is a prototyping tool that lets you create interactive wireframes for websites and mobile applications.”

Macaw
“Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS.”

Pencil Project
“An open-source GUI prototyping tool that’s available for ALL platforms.”

Concept.ly
“Transform your Mockups into clickable applications.”

MockingBird
“An online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.”

Mockflow
“Super-easy Wireframing. Design, collaborate user interface concepts for your software and websites.”

Balsamiq
“Balsamiq is a small group of passionate individuals who believe work should be fun and that life’s too short for bad software.”

OmniGraffle
“OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved.”

Proto.io
“Fully-interactive high-fidelity prototypes that look and work exactly like your app should”

Fluid
“Create interactive prototypes and wireframes of Android, iOS and Windows 8 apps.”

Composite
“A brand new way of creating interactive prototypes that automatically connects to your Photoshop® documents.”

This list was created by Fabricio Teixeira and Caio Braga. We hope you find it helpful and share it with your UX friends.

✔ Don’t forget to subscribe to our weekly UX newsletters.

❤ Like the links? Share the love below.

--

--