In this post I wanted to look at some UI (User Interface) prototyping tools. These are tools that are extremely important for individual web developers and for large teams of developers. For a solo developer, the prototype user interface shows what an app (whether it’s a desktop or web or mobile app) should look like. For a large team, it defines a vision that everyone can align around.
Product managers and product designers will want to get familiar with these tools because they are essential to developing mobile apps, web apps and websites
Here are the tools that I have used for prototyping user interfaces.
Balsamiq is the original user interface prototyping tool. It includes stencils and examples of user interface items like buttons and tables and menus.
The key feature, at least for me, is that the interface looked like a sketch and not the final product, the interface really looks like a prototype. This makes it easier to sketch out ideas and not be too tied to one idea for an interface and leads to rapid iteration.
Balsamiq is now available in the cloud and for Google Drive (one of the online business tools that I use) along with the original desktop version. It’s also available for JIRA and Confluence.
They now offer courses for aspiring UI/UX designers to learn how to develop wireframes for products:
- Introduction to UI Wireframing
- The Psychology of UI Design
- Rapid Wireframing: Finding the Right Product Design
Pencil: an open source tool similar to Balsamiq and it comes with stencils for designing Android and iOS apps along with stencils for designing web apps.
It’s possible to combine Pencil with a tool like InVision to make an interactive set of wireframes for UI prototyping. Check out SourceContribute for a more in-depth look at the usefulness of Pencil as a UI prototyping tool.
InVision is a web-based tool that integrates with the workflow of designers who use tools such as Sketch and PhotoShop. With InVision, you create wireframes for your user interface in graphic design apps like Photoshop (or Illustrator or GIMP or Inkscape) and then upload it.
InVision lets you connect buttons and clicks on the user interface to other screens. This allows you to create an interactive prototype to see how navigation between screens will work and to test the UI’s effectiveness and see how the UX (User Experience) feels.
For product designers, InVision helps you work with product managers to rapidly iterate on the interactivity and the design of a feature or the entire product.