Let’s start by clearing up some common misconceptions. Some designers, and even their clients, have a tendency to use wireframe, mockup, and prototype, interchangeably. It’s true that all three represent a conceptual or early stage representation of a design.
Yet, the three are not one and the same thing, and they serve somewhat different purposes.
- A wireframe is a low-fidelity depiction of a design. It generally lacks detail, it is static, and while it may depict shape, it does not have substance.
- A mockup can provide a great deal of information about a design. It is generally a medium to high-fidelity depiction; but like a wireframe, it is also static.
- A prototype is a dynamic, mid-to-high fidelity representation of a design. It can be used to highlight certain features of a design. Some prototypes can be virtually indistinguishable, in terms of look and feel, from the proposed end product.
But, they do have several things in common. They can be used to show the current or proposed state of a design. And they are generally used for requesting feedback.
Prototypes don’t have to be attractive, but they must work well enough to show key design principles or features.
A typical prototype workflow:
- Sketch out how a user might navigate (the page flows)
- Build low-fidelity, digital versions of each page; run usability tests, and note lessons learned.
- Add detail until you have a high-fidelity model that can emulate the look and feel of the proposed final product.
Forbes recommends it, thousands of large companies and major enterprises use it — including most of the leading Fortune 100 companies — and the project managers who use it are quick to tell you that it simplifies virtually every aspect of their design workflow and team collaboration activities.
InVision is a thoroughly effective designer or project manager tool, since it allows collaboration to be done in-browser, in real time.
With InVision, you can create a pixel-perfect prototype, you can achieve faster design turnaround, and you can take advantage of unlimited, free testing of the prototype you create. Over 2 million designers already use InVision, and don’t have to worry about coding while doing so.
You can try out this excellent tool for free. Signing up for a free trial is easy. There are no setup fees involved, and you’re not obligated to make a purchase — although it’s likely you’ll decide to. First things first though: Click on the website link to find out more about how this top-tier prototyping tool could be put to work for you.
Pidoco’s main strength lies in creating fully interactive UX prototypes. It should be mentioned however, that if you happen to have a situation calling for a wireframe, Pidoco is an excellent wireframing tool as well.
Pidoco’s prototypes enable you to simulate the look and feel of a real website or app to the point that you can test and demonstrate the entire range of clicks, taps, swipes, device motions, and keyboard commands. Quite simply, this tool is ideal for web designers and mobile app designers.
Pidoco-generated prototypes can be tested in real time on iOS and Android devices, as well as on web browsers. The templates that come with this tool make prototype creation super-fast and ridiculously easy. You don’t need to install anything, since Pidoco resides in a cloud. Log in, and you’re there. Pidoco is easy to learn and does not require any coding.
Proto.io provides a mobile and web prototyping platform that is ideal for app designers who are building and testing fully interactive mobile app prototypes that have the look and feel of the target product. Proto.io is easy to use. I
t runs in most browsers, its dashboard enables you to manage your projects, its editor enables you to build them, and the player is used to view and interact with the prototype and to receive feedback.
Your prototypes can be tested directly on actual mobile devices, and free apps are provided that allow full screen and offline mode operation on iOS and Android devices.
Since large companies such as PayPal, Disney, and Airbnb rely on Proto.io, there are no risks involved in making this prototyping platform your tool of choice; plus, you’ll benefit by being able to speed up your design efforts and get a better product to the market in a shorter time.
Your website design automatically is adjusted for smaller devices, you can test your work on any device, and with Webflow you can bring team members into your design efforts. Not too many prototyping tools offers all of these extras.
PowerPoint users take note. Now might be a good time to download a free trial version of PowerMockup, and start building wireframes and mockups for websites or for mobile or desktop applications.
PowerMockup isn’t simply a tool that PowerPoint devotees can use to their advantage, PowerMockup was created as an add-on to PowerPoint.
It features a library of shapes, icons, and design elements that can be dropped onto PowerPoint slides to create wireframes or mockups. Having done that, simply use PowerPoint’s slideshow and animation features to make your prototype interactive.
Lucidchart is an online diagramming and wireframing application featuring a shape library containing a full range of icons and device types for websites and iOS or Android devices.
The Lucidchart package also includes a pre-built library of modern design elements, drag and drop technology, and an interactive demonstration capability, combined with layer technology that allows you do see how your design will behave in the real world.
Collaboration is easy as well, and Lucidchart is cloud based and fully integrated with Google Apps, Google Drive, Jive, and other useful applications; perfect, if you want to migrate design information to the cloud.
One of the challenges designers face is creating a good experience. With HotGloo, you can create web, mobile, or even wearable prototypes from the comfort of your own browser. A 2000+ UI elements library is at your disposal, along with a multiple licensed account that permits easy collaboration between you and your coworkers. Create, test and iterate to achieve a good experience for your clients.
Try HotGloo for free today! Full documentation, tutorial videos, and live webinars are easily accessed to help you on your way.
You should have little trouble finding a prototyping tool that meets your needs here. Whether this is the first time you’ve been in the market for such a tool, or you’re in need of something better. Hopefully, our opening discussion has cleared up any confusion you may have experienced on the differences between wireframes, mockups, and prototypes. Several of these tools allow you to create any combination of these design aids.
If you are in need of a tool to assist your collaboration or project management activities, there’s something here for you as well. All these products are among the best of their kind on the marketplace.
- 50 Free Wireframe Templates for Mobile, Web and UX Design
- 20 Inspiring Examples of Web and Mobile Wireframe Sketches
- Tips for Wireframing a Usable Mobile App UI
- 10 Useful Google Docs Templates for Web & Mobile App Designers
- 20 Free Mobile UI & Wireframe Kits for Sketch App
- Essential Sketchsheets for Designing Responsive Layouts
- To Wireframe or Not to Wireframe?
- Wireframes… Who Needs Them?
- The Free 3D Web UI Kit (Photoshop PSD)
- Wireframing, Prototyping, Mockuping – What’s the Difference?