The most used web mockup is the one that allows you to create mockups and prototypes.
So I have a question for you. Do you use web mockups before creating your websites, or do you just go for it?
Moreover, we must distinguish between web mockup or wireframe and prototype because even if we tend today to put them all in the same basket, it is totally different!
#wireframes #prototypes #webflow
If not, do you use a tool for that?
No, I'm a beginner, I don't know anything about web mockups and prototypes until you talk about it today.
Yes! (can you specify it in a comment? ;) )
In any case, there are several tools and software dedicated to the creation of wireframes and prototypes.
In this guide we will see 28 of them, which can easily be used for the creation of a site on Webflow, but also for any other platform and web application.
As you know, it is also called wireframe.
But what is it exactly?
It is a simple sketch of the website. It does not contain anything concrete yet: no words, no text, no images, nothing. Only the essential elements, i.e.: the different areas of the site, the location of buttons, etc.
We can even simulate it in the skeleton of the site. This is only the starting point. At this stage of work, the design is not yet in focus. Only the structures and functionalities of the site are thought of.
In reality, the creation of the web mockup has for objective: the agreement of the 2 parties (clients and web designers); they agree on the basic elements that will appear on the site as well as the way to place them. Anyway, you have to expect several modifications from the client before he is really satisfied.
In general, the most important things to show are:
The goal is to bring out something very synthetic, as synthetic as possible .
But isn't a prototype the same thing as a web model?
Not at all!
Indeed, it almost looks like the final product. I'll even emphasize the word "almost", because it is not quite. It is half created, and is only useful to simulate the UI of the website.
For this purpose, it is obvious that you can click on them; you can interact with the prototypes. Once the prototypes are completed, all that remains is to test them. And if everything goes well (no bugs or complications), the team can finally move on to the design of the site.
The creation of prototypes is a logical continuation of the web model. As I just explained to you, it is an opportunity to test if everything works well or not. This allows developers to save time in their coding.
And if, like me, those in charge of the creation of the site do not code, but use no-code tools to create a website (Webflow among others), it will be even easier!
Let's assume that there is something wrong with the prototyping process. It's best to identify it as soon as possible, so it can be fixed right away. Often, at this stage of the work, web designers find another creative idea (without changing everything) to add to the website.
In short, it all sounds very nice. But is it feasible on a piece of paper?
You've probably already heard of Mockflow. It is used to create wireframes for websites (from the creation of the sitemap to the wireframes, to the publication of the website itself), but not only. Some people also use it for their profiles on social networks or others.
There is a free offer, but if you don't want to be limited in your projects, you will need $19 per month.
At first, it was intended for the creation of diagrams. As web designers and developers saw its potential, they did not hesitate to use it for their web mockup drawings either.
It stands out by the fact that it can be used by several people. It is therefore very popular with teams of designers and developers, so that everyone can contribute to the wireframe.
As its name suggests, its design focuses mainly on UX design. In fact, it was created by UX designers. With it, you can create the web model of your websites easily and quickly; a few clicks are enough.
As intuitive as it is, it is very popular because you don't even need to create an account to use it.
iPlotz has two versions (like so many other modeling tools). One is free while the other is paid. For free iPlotz, you get to create 5 wireframes. Even better, teamwork is possible with it.
Its name already says a lot about it! It is simply dedicated to the creation of wireframes (functional web models). It has very few functions, which is not necessarily a bad thing. It allows you to go straight to the point.
It is normal that you think Wireframe.cc is difficult to handle, especially if you are a beginner with this tool. But this is just an impression. The fact that it offers only a few functions makes it an intuitive interface.
By the way, you can add comments, share the URL... to your team members. Indeed, collaborations are possible!
The basic features are available in free mode. To go further (for example, export your work), you can subscribe for $16 per month.
Also, wireframe.cc allows a visualization of the web model on other terminals (tablets and smartphones).
Do you remember the no code tools I told you about? Well, Moqups is one of them. With it, you don't need to manipulate anything. In fact, the drag-and-drop function can do everything. Moqups also provides you with a well-filled library (elements and templates).
Once again, teamwork is often required when creating websites (whether with other developers, web designers, translators, etc.). That's why this tool is linked to Confluence and JIRA.
Here is a particularity of Moqups: you can play with the colors to distinguish the zones of the future site.
Starting at $13 per month, you get access to even more advanced features.
This one is a bit complex, because you can only take advantage of it if you master HTML and CSS.
Yes, but it's only the wireframe, so why the prerequisite?
That's true. This is exactly what sets Wirefy apart from the rest. You kill two birds with one stone. You don't just do the web design, but at the same time, you code the site directly.
Animated prototypes also exist. Marvel is one of the software that offers it. Even better, the tool can be synchronized with other software such as Sketch, Drive and Dropbox.
For a single project, it is free. Then, $12 per month will be charged to you to go further (team work, more projects and features...).
Whimscical's library is very complete, which only simplifies the rest of your work: all you have to do is insert them, modify them... to have wireframes and prototypes adapted to your project.
For only $12 a month (with a 7-day free trial), you get access to Hotgloo, a very complete tool. Indeed, it is much more than a simple wireframe and prototype creation tool. Project management and various tests can be conducted.
What we are interested in, however, is the realization of interactive prototypes. Clients, team members... anyone who wants and needs to work on your project has access to it (as long as you give them access).
With InVision, there is no risk of misunderstanding. Indeed, your exchanges with the client can be done directly on the platform. Once all the verifications are done, exporting the web model to other applications (Sketch, Slack, Confluence) is very easy, whether it is to reproduce the final design of the site or to manage the progress of projects.
The problem with software is that you always wonder if it is compatible with the operating system you are using. Well, with Axure RP9, the question no longer arises. It works on both Windows and Mac.
But again, this software is "advanced". The design of web models for websites and mobile applications is only a small part of what it can achieve. His field of intervention is indeed much wider (creation of brochures, flyers...).
Finally, for teams, there is a collaborative version of this software.
I don't need to describe to you what Adobe is anymore; it is world famous. I would even say that many entrepreneurs and teams have found their happiness with Adobe XD. It is not only used by web professionals; everything that is "design" can be done with it. Much more than a simple functional web mockup software, it is even able to create prototypes.
Here again, you can easily work with other members of your team. This software is equally suitable for professionals who work alone.
As simple as it is, it offers a wide range of basic elements in its library: CTA, text block, and many more. Designing wireframes is really easy: using drag and drop.
All systems are compatible with Balsamiq: Windows, Linux and Mac. Of course, all this comes at a price: starting at $9 per month. First, make sure it's suitable for your projects, by doing a 30-day free trial.
Some webdesigners also use Photoshop for the web mockup of their websites. Of course, it is not a dedicated tool, but as they say: it's the result that counts.
Pencil is completely free and yet you can do many things! For example, you can link pages together. You can also make your life easier, thanks to its library of templates and basic elements.
I admit that it is not the easiest of all these tools (a bit like a mix of Photoshop and Illustrator). However, a little practice is enough to know it well. And as it is very well known in the web design world, you will find a lot of tutorials on how to create wireframes and prototypes on Sketch, on the web.
This software has been designed by Facebook designers, and is especially intended for site creators. No prerequisites are needed to use it (not even knowing how to code).
Wireframes and prototypes are very complete. They are also compatible with Sketch. Unfortunately, it is only available on Mac. Testing can also be done on iOS smartphones, via the Origami application.
Ulzard is still in beta version, but it has potential. Here is a proof: from wireframes created on Ulzard, you can directly create Sketch prototypes.
PrecursorApp is free. This does not prevent it from being as powerful as the other tools and software we have just seen. Not only does it allow for teamwork, but the prototypes created with this software can also be tested on other media (tablets and smartphones).
Justinmind is free, but limited. To get more advanced software, you'd have to pay $19 a month and up. With Justinmind, you're not limited to simple wireframes; it's also possible to create clickable prototypes.
Flinto is divided in 2: Flinto Lite and Flinto for Mac.
The first one is used to make prototypes, directly on the internet. The second one works only on Mac. For this purpose, it is more thorough.
The small snag is in the subscription price. 99$ are needed for the Mac version while it will be 20$ for the online version. Before subscribing, don't forget that you are entitled to, respectively 15 and 30 days free trial, for Lite and Flinto per mac.
Initially, Proto.io was designed for web mockups and mobile application prototypes. However, it can also be used for web design. Simple and easy to use, this software is available from $24 per month. Depending on the number of projects you work on regularly, but also on the size of your team, you may have to pay more.
If I had to describe it in one word, I would say "fast". In only 5 minutes, you are indeed able to make a prototype (obviously, depending on the project). Only, it is only available on Mac. You get a 15-day free trial; if you plan to continue using it, it costs $99 a month.
Framer Studio is a software purely for professionals. If you have been doing web design for a long time now, and you can afford a more advanced software, Framer Studio is a good alternative. You will have to pay $129 (with a free 15-day version).
Once you have finished the wireframe in Framer Studio, you just have to integrate it directly into Sketch. You still have the layers, which will help you create the prototype.
I saved the best for last. It is one of my favorites: Figma. Available both online and in software, it comes in a completely free version! Of course, you can create web mockups and website prototypes, but it can also handle other types of projects: mobile application among others.
It is especially easy to use, thanks to the drag and drop functionality. Also, the interface is very intuitive. Whether you are a beginner or not, you will have no trouble handling this software. There is a version available online and it is totally free. I think it's great, especially for those who work in teams or those who want to send their work directly to their clients.
There is no law that says you have to use web mockup and prototype tools and software. But trust me, from experience, it's the right thing to do.
To each his own. If I love Figma or Sketch, it doesn't necessarily mean that you will like them. So, based on this list, you can choose the one that you think is best for your projects, but also for your budget. In any case, none of these 28 is better. Each one of them is just as good, in its own way. It's up to you!