In this Balsamiq Mockups tutorial I'm showing you how to wireframe a website with this mockup tool. There'll be a follow-up video, where I make the visual de. So with Yotako keep on creating awesome designs the way you always did. Just upload the design (e.g. Adobe XD, Sketch, Adobe Photoshop, Balsamiq, etc.) to Yotako. Don't know how to design? Check out the Yotako Freehand Canvas to create mobile apps and websites from drawings in real-time! More info about the design tools Yotako currently supports.
UI and UX are two distinct facets of web design, yet they work hand-in-hand. While UI focuses on your design interface and how a user interacts with it, UX emphasizes a users experience as they use your product or service.
UI tools give designers what they need to design accurate hi-fi wireframes, mockups, and prototypes and render minimally viable products. They represent the nuts and bolts of a design, communicating its functionality.
UX tools focus on the user and how they’ll experience the content. These tools can help structure the information architecture, as well as how someone will flow through the experience. Since this is more conceptual, UX tools are about helping a designer paint the broader picture of how content and organization will affect experience.
We’re going to take a look at some UI and UX tools that you may find handy for your design process. Some of these tools have features that work in both UX or UI, but for the sake of your own user experience, we’ve divided the list into two categories
UI/UX design tools
In this list, the first 11 tools mentioned are great for UI design, while 12-17 are great for UX. Let’s dive into each one and learn how you can craft beautiful projects.
If you have any UI design experience, you've heard of Sketch. And there are quite a few reasons why it’s one of the design tools that’s so revered.
Being able to make universal changes — whether it's through their library of symbols, layer styles, or text styles, or its smooth resizing and alignment features — saves designers time to deliver consistent prototypes. It takes out what’s tedious and lets designers jump in and create. And with a multitude of third-party plugins that integrate without problems, there’s no shortage of tools out there that can be used with Sketch.
Bulk change file date. Popular read: From Sketch to Webflow: how to turn mockups into live websites
2. InVision Studio
With a full suite of applications, InVision gives designers all of the UI design tools they need to create fully realized and functional prototypes with dynamic elements and animations.
Along with these easy-to-use UI design tools, they also make communication easy — with collaboration features that let developers share their work as they design it, receive feedback, and make documented changes at each step. Another useful aspect of InVision is the digital whiteboard that allows team members to get their ideas out there, interact, and get that all important sign-off before moving forward.
Axure functions in prototyping and keeping track of the workflow. It features a smooth interface to document as you go. High fidelity drives this app, resulting in prototypes full of details.
Axure offers many of the other features of popular prototyping and UI design tools. It allows for testing of functionality and puts everything together for an easy developer handoff. This, combined with an emphasis on communication, ensures that everyone on a project is kept up-to-date with progress and changes as they happen in real time, making Axure a solid choice for UI design.
Craft, a plugin from InVision, works right alongside what you might be doing in Photoshop or Sketch, with a sync function that updates what you’re working on. Along with this time-saving feature, Craft offers everything you need for prototyping and collaboration. Changes in styling, edits, and other tweaks are updated across the board so that everyone is referring to and working from the same version of a project.
Craft sets itself apart from other UI design tools with its placeholder content. You get access to both Getty and iStock photos, letting you fill your layout with better visuals. And if there’s data in your layout, you can use your own or bring it in from other sources. Not many UI design tools let you fill your mockups with more meaningful content. This special feature of Craft gives your mockups a more accurate representation of what a final design might look like.
In their own words, Proto.io says using their UI design software results in 'Prototypes that feel real.' And Proto.io delivers on this, giving you what you need to create, organize, integrate, and test accurate mockups. It also smooths out the collaboration process, fostering communication between team members through comments and video feedback, as well as integrating with some of the more well-known testing products, like Lookback, Userlytics, and Validately.
6. Adobe XD
It's hard to knock Adobe off of their status as royalty in design software — their kingdom of design products reigns in the creative cloud. Adobe XD offers vector-based tools for creating prototypes and mockups with an interface that’s familiar to anyone who has used other Adobe products. This, along with real-time collaboration, makes it a go-to for many UI designers.
Adobe XD has many sophisticated tools for UI designers, but it is also stocked with what designers need to whip up interactions and other dynamic elements that can be integrated into prototypes or mockups. It’s one of the rare design platforms that can combine different disciplines together, without anything lacking.
Popular read: From Adobe XD to Webflow: how to turn your prototypes into live websites
Whether you've been a UI designer for awhile or if you're just stepping into the role, Marvel's design platform makes things easy. With the ability to create both low fidelity and hi-fi wireframes, interactive prototypes, and do user testing, it gives a UI designer everything they need — all wrapped into an intuitive interface. Marvel also has a feature called Handoff that gives developers all the HTML code and CSS styles they need to start building.
Figma lets designers build dynamic prototypes and mockups, test them for usability, and sync up all of the progress. Figma allows multiple people to work on or view a project at the same time, much like Google Docs — letting you see who has it open for real-time collaboration. You’ll see who’s working and what they’re doing. It’s also browser-based, making it accessible to everyone in an instant. And as an added bonus, it’s free for individual use so you can check it out and get familiar with how it works
Popular read: From Figma to Webflow: turning your static designs into interactive websites
9. Framer X
Framer X has evolved from its early days as a code-only prototyping application. Today it offers a host of UI tools for building functional prototypes and testing for usability. Its ability to work with React makes it ideal for UI designers who like to stay on top of the newest web design innovations.
Framer X also offers a variety of plugins in their store, giving UI designers features such as UI kits for integrating social media channels like Snapchat and Twitter, players for embedding a variety of media, grids, and other useful components that can be easily integrated.
10. Origami Studio
With a Facebook pedigree (it was built by and for Facebook designers), Origami Studio packs in more complexity than something like InVison or Sketch — which are a bit easier for beginners in design. For those who need a more advanced prototyping tool as a part of their design system, Origami Studio has a lot to offer.
This platform has the tools you need to build complete prototypes that are powered by a sophisticated patch editor, giving designers the opportunity to integrate advanced functionality. Prototypes end up looking and working like a real app or webpage.
Origami Studio also integrates well with Sketch. If you’re working in parallel with Sketch, it lets you brings in layers and copy and paste them directly without any hang-ups.
Okay, the self promotion you’ve been waiting for — but stick with us here. You want to speed up the design process, right?
Webflow gives you the power to design without knowing HTML or CSS. With drag and drop functionality and an intuitive interface, Webflow gives you the creative freedom to build whatever you imagine. Using Webflow for building a prototype gives you an actual website, and generates accurate HTML and CSS code. This saves time. Instead of taking what’s been drafted in a prototype and building a design from it, you already have what you need to give to a developer.
Even Ryan Morisson, lead designer at Webflow, decided to ditch prototyping tools and start designing and building straight in Webflow.
Build complex interactions and animations without even looking at code.
When developing a user experience strategy, designers need to pay attention to structure, flow, and corresponding sitemaps, which are all at the foundation of UX design.
Where so many tools out there try to combine UI and UX together into one platform, FlowMapp dedicates itself to the discipline of UX design. Building user flows and constructing visual sitemaps are indispensable for UX, and these are the pillars of FlowMapp’s UX design app.
Balsamiq Mockups Free
With a user friendly interface, Balsamiq makes it easy to create low fidelity wireframes. Even people with zero experience in wireframing could jump in and put together ones that look good. Balsamiq encompasses both UI and UX, but really stands out with its low fidelity wireframes. Balsamiq’s nod to the physicality of whiteboarding makes the tool accessible to anyone, no matter their skill level.
VisualSitemaps specializes in generating, you guessed it, visual sitemaps. It’s nice to have a tool designed specifically for this. This tool has complete automation, the capacity to go through password-protected websites that haven’t gone live yet, and the ability to import into Sketch. VisualSitemaps takes the process of creating visual sitemaps and supercharges it for UX designers, developers, and anyone else who needs to be involved with the process of creating them.
The visual components of a design are important, but without great content, it’s nothing but an empty vessel. Having quality content isn’t enough — it needs to be arranged in a flow and structure that will maximize its accessibility. This is where information architecture comes in.
Treejack specializes in information architecture. It lets you test the tree structure of a website with real users. It then generates the results that show a user’s path and navigation through the content, giving you valuable insights that you can use to edit and tweak the content organization.
Wireframes don’t have to be complicated, and keeping them simple lets them communicate in a straightforward way how a design needs to be structured.
Wireframe.cc keeps their wireframing tools focused on minimalism. Intentionally limiting the color palette and using simple rectangular elements — along with an uncomplicated interface — lets UX designers construct a low fidelity wireframe in a snap. There’s even an in-browser demo you can use to see how it works.
17. Optimal Workshop
As far as a UX design platform goes, Optimal Workshop has all you need to analyze usability, figure out information architecture, and test and evaluate a design.
Optimal Workshop distinguishes itself in giving insights and providing in-depth data about users and how they interact with a design. This carefully curated UX platform offers tree testing with Treejack, which we just talked about, first-click testing with Chalkmark, online surveys, and Reframer for doing qualitative research. Having these bundled together makes for a package of tools that any UX designer would find useful.
UI and UX is always evolving
Along with the changes and trends of web design, UI and UX must accommodate these new practices and approaches. Which UI and UX tools have you found helpful in meeting the needs of clients and staying on the cusp? Please share what’s helped you out in the comments below.
A prototyping tool enables a designer to weave visuals, navigational elements, and interactions together to give a solid representation of how a design will behave and feel. It's an essential tool in any UI/UX designer's arsenal. If you haven't found the right tool to suit your needs just yet, here's a comprehensive list of some of the best prototyping tools used by top designers in the industry.
Prototypes are an opportunity to try things out and fine-tune the details. They’re an essential tool in communicating to stakeholders, and decision makers, how all of the elements of an idea will function together.
14 prototyping tools for UI/UX designers
Here are 14 prototyping tools to help you with your own design process:
Balsamiq Web Design Software
Figma is an all-in-one tool that makes collaboration and accessibility easy for UX designers, developers, and anyone else on a team with a browser-based, cloud-hosted platform. If you’ve worked with Sketch before, you’ll find that Figma has a similar feel that makes it easy to get started with.
Consistency is a priority in web design, and you can use Figma’s flexible styles to control the appearance of text, grids, and other elements across a project. And a variety of useful plugins, like Autoflow for illustrating user flows, Figmotion for creating animations, and many others, enhance Figma’s functionality.
2. InVision Studio
Released in 2011, InVision has a well-established reputation, and their dedication to rolling out new functionality and adding to their design platform makes them a favorite among many designers.
With a host of well-designed tools, InVision gives designers the power to put together functional prototypes quickly and to share them with others. It offers so many nice features, including a handy vector drawing tool, repeatable components that can be changed sitewide, and tools for creating animations and other dynamic visual effects.
Collaboration and communication are also strengths of InVision. Freehand lets team members draw, add notes, and offer feedback. And through LiveShare, a prototype can be demonstrated with full interactivity. InVision makes it easy for team members to stay connected and work together throughout the course of a project.
3. Adobe XD
Adobe XD offers a vector-based system for putting together prototypes, including tools for creating interactions, transitions, and other types of dynamic functionality. Because it’s vector based, scaling and resizing elements is no problem.
Adobe XD work well alongside other Adobe family apps like Illustrator and Photoshop. It’s nice to be able to edit Adobe images, like a .psd, right in the application.
From UI design to UX design, Adobe XD covers all the tools a designer needs from conceptualization through high-resolution prototypes. And they’re continually adding to this product with monthly updates that expand its functionality.
As you may have noticed, we are Webflow. We know that you want a smoother and faster design process, and we're here to help you out.
With an intuitive drag-and-drop interface, a powerful CMS, and the capability to create advanced animations, transitions, and microinteractions, Webflow makes it possible to create any type of professional-level website.
If you want a speedy way to design and prototype, Webflow gives you what you need, all without knowing how to code, making it one of the best prototyping tools whatever your skill level. Designers and marketers can easily collaborate in Webflow as well.
You can also check out Webflow University for a wide range of tutorials on how to get started with prototyping in Webflow.
5. Axure RP 9
Axure RP 9 puts the power of wireframing and prototyping all in one package. It allows designers to create low to high resolution interactive prototypes of websites and apps, all without having to code.
Along with what you need to build the visuals, interactivity, and organization, Axure RP 9 also offers a comprehensive documentation tool, which makes keeping track of notes, tasks, and other important assets organized and accessible to those who need to see it.
Axure RP 9 also facilitates a better handoff to developers by letting a prototype be published on their cloud, with all of the code, specifications, and other assets they would need to build it.
Built for professionals, with attention to all of the intricacies of building functional prototypes, Axure RP 9 is for those designers who demand more from their prototyping tools.
6. Origami Studio
If you’re Facebook and your designers don’t have an app that they need, you build it for them. Origami Studio was created for Facebook designers out of necessity, and Facebook so graciously shared it with the rest of the design world.
For designers who need a more advanced system, Origami Studio offers powerful prototyping tools for websites and mobile apps. Central to Origami Studio is a patch editor that lets you build logic, behaviors, animations, and interactions. It comes with many prebuilt patches, and the site says you’ll most likely use just 15–20 of these for most of your prototyping work.
Origami Studio does have a bit of a learning curve that can be daunting at first. But the payoff of knowing how to use their prototyping tools and pulling off sophisticated prototypes makes it well worth learning. This power, along with its compatibility in working with Sketch, makes Origami Studio an important tool for designers who want to go above and beyond standard prototyping.
Justinmind has been gathering momentum as a popular prototyping tool. There are quite a few reasons why, from drag-and-drop functionality, the capabilities to create the simplest to most sophisticated of apps and web prototypes, and plenty of support, like videos and blogs to help you learn how to use it. Justinmind isn’t as huge as some of the other prototyping tools out there, but they’re certainly an up-and-comer.
Justinmind comes with UI libraries and templates, as well as many other practical features. It lets you create the logic for conditional navigation, allows for user testing, facilitates design team management, and more. There’s also a number of integrations that let you use Justinmind with Sketch, Adobe Suite, Azure DevOps Server, and Jira in your workflow.
Its simple interface makes it a great starting point for a beginner UX designer but also offers enough for more advanced designers.
Build complex interactions and animations without even looking at code.
So many UX designers use Sketch as a part of their workflow — and for good reason.
Uniformity and consistency drive much of Sketch’s functionality. Reusable elements can be used sitewide with a smart layout feature that changes their dimensions depending on what content is inside of them. Then there’s the ease of use. Along with a well-designed user interface, Sketch offers a host of shortcuts at your fingertips to speed up the design process.
Many consider Sketch an industry standard when it comes to wireframes and prototyping, and its feature-packed and user-friendly interface are just a few reasons why so many designers choose it.
9. Fluid UI
Fluid UI’s software makes for lightning-fast prototyping. With ready-made libraries for material design, iOs, and Windows, as well as gestures, Fluid UI gives you so much to get started with. And their simple user interface makes it super easy to put these components together.
Framer is a design tool that lets you build interactive prototypes extremely fast. With Framer, you can create completely functional prototypes — everything from linking pages together to creating 3D effects.
Framer also has thousands of resources in the Framer X Store. You have access to everything from live maps, UI kits, and media players all at your fingertips.
Do you need a prototyping tool that will let you whip up apps and websites quickly? And do it for free? Marvel gives you a complete suite of prototyping tools, without skimping on functionality.
Marvel lets you go beyond static mockups and offers interactivity, dynamic transitions, and gestures to bring prototypes to life and give a real user experience to anyone testing them out. Another nice addition is the handoff tool that gives developers all of the code and assets in their most current iteration to dive in and create a live website, automatically.
Marvel’s collaborative features let anyone on a design team — no matter how spread out, or whatever the stage of production — add notes, make changes, and share ideas in real time.
ESPN, Amazon, and PayPal are just a few of the big names that have used Proto.io. With a comprehensive selection of components and tools, interactive prototypes are made possible without having to type in a single line of code.
Within its web-based editor, Proto.io gives you a variety of drag-and-drop UI web components, templates, icon libraries, and audio and video integrations. You can also bring in anything you have created on your own in Photoshop or Sketch.
With an array of templates, tools, and other components to build prototypes, Proto.io has so much to offer.
Principle lets you create dazzling interactions and eye-catching animations, giving you prototypes that go beyond dull static representations.
With multiple artboards, a timeline-based animation builder, and the ability to import Figma frames, Principle allows you to design an impressive app or web design in a short amount of time.
With an attention to motion and interactivity, Principle stands out among the other prototyping apps out there.
Balsamiq is a low-fidelity wireframing tool. While it's not necessarily designed specifically for ready prototypes, like some of the tools mentioned above, it is a great place to create website wireframe mockups. But it can be used for more than just websites. Balsamiq is great for sketching product design, web apps, desktop software, mobile apps, and user interface wireframes.
Prototyping leads to a better design process
For large-scale projects with many moving parts, prototyping is indispensable. Prototypes let you gather feedback, test usability, and tweak a design along the way.
There are many tools out there to help you, starting with these 13 more widely adopted apps. What’s your favorite prototyping tool? Just let us know in the comments below!
Related reads:7 simple steps to the web design process