Web mock-up that we use the most is of course the one that allows to create mock-ups and prototypes.
So I have a question for you. Do you use web mock-ups before you create your websites, or do you just go headfirst?
Moreover, we must distinguish between a web or wireframe model and a prototype because even if we tend today to put everything in the same basket, it's 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 mock-ups and prototypes before you mention it today.
Yes! (can you specify it in your commentary;) )
In any case, there are several tools and software dedicated to the creation of wireframes and prototypes.
We will see in this guide 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.
- Frame box
- Axure RP9
- Adobe XD
- Origami Studio
- Framer Studio
A web mock-up, what is it?
As you know, it's also called wireframe.
But what is it exactly?
This is a simple sketch of the website. It still contains nothing concrete: no words, no text, no pictures, nothing. Only the essential elements, i.e. the different areas of the site, the location of the buttons, etc., are shown.
You can even simulate it with the skeleton of the site. This is just the starting point. At this stage of the work, the design is not yet in the line of sight. Only the structures and functions of the site are thought out.
In reality, the purpose of creating the web model is to get both parties (clients and web designers) to agree on the basic elements that will appear on the site as well as how to place them. In any case, you have to expect several modifications from the client before he is really satisfied.
The basic elements of a web model: which ones?
In general, the most important things to show are:
- social networking buttons
- search bar
- block of text (not worked on)
- image (represented by simple rectangles)
The aim is to bring out something very synthetic, as synthetic as possible, by the way .
A web prototype: what is it?
But isn't a prototype the same as a web mock-up?
Not at all!
Indeed, it almost looks like the final product. I will even accentuate 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 it; you can interact on the prototypes. Once the prototypes are finished, all that remains is to test them. And if everything goes well (no bugs and complications), the team can finally move on to the design of the site.
Are prototypes mandatory?
The creation of prototypes is a logical continuation of that of the web model. As I just explained, it's 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 creating the site don't code, but use no code tools to create a website (Webflow among others), it will be even easier!
Let's assume there's something wrong with prototyping. We might as well identify it as soon as possible, so that we can fix it right away. Often, at this stage of the work, webdesigners find another creative idea (without changing everything) to add to the website.
Anyway, it all looks good. But is it doable on a piece of paper?
The 28 tools for creating Web Mock-ups - Wireframe and prototypes
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 site itself), but not only. Some people also use it for their profiles on social networks or other.
There's a free offer, but if you don't want to be limited in your plans, you'll need $19 a month.
Initially, it was intended for the creation of diagrams. Webdesigners and developers saw its potential and did not hesitate to use it for their web mock-up designs either.
It is distinguished by the fact that it can be used by more than one person. It is therefore very popular with teams of designers and developers, so that everyone can contribute to the wireframe.
As its name implies, its design focuses primarily on UX design. In fact, it was created by UX designers. With it, you can create the web mock-up of your websites easily and quickly; just a few clicks are enough.
As intuitive as it is, it is very popular because there is no need to even create an account to use it.
iPlotz has two versions (like so many other modeling tools by the way). One is free and the other is not. For free iPlotz, you get to create 5 wireframes. Even better, teamwork is possible with it.
His name already says a lot about him! 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 start with this tool. But that's just an impression. The fact that it offers only a few functions gives it an intuitive interface.
Moreover, you can add comments, share the URL... to members of your team. Indeed, collaborations are possible!
The basic features are available in free mode. To go further (for example, export your work), you can subscribe to a subscription starting at $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 him, you don't have to manipulate anything. In fact, the drag and drop function can do it all. Moqups also provides you with a well stocked library (elements and templates).
Once again, teamwork is often the key to creating websites (whether with other developers, webdesigners, translators, etc.). This is why this tool is linked to Confluence and JIRA.
Here's a special feature of Moqups: you can play with colors to distinguish the areas of the future site.
Starting at $13 per month, you have access to even more advanced features.
This one is somewhat complex, because you will only be able to take advantage of it if you master HTML and CSS.
Yeah, but it's just the wireframe, so why the prerequisite?
That's right. That's 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 website directly.
Animated prototypes also exist. Marvel is one of the softwares that offer 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 the wireframes and prototypes adapted to your project.
For only $12 per month (with a free 7-day trial), you have access to Hotgloo, a very complete tool. Indeed, it is much more than just a tool for creating wireframes and prototypes. Project management and various tests can be conducted there.
What we are interested in is the realization of interactive prototypes. Clients, team members... everything that wants and needs to be involved in your project has access to it (as long as you give them access).
Web design with InVision 🤩
Any risk of misunderstanding is avoided with InVision. You will be able to communicate directly with the customer on the platform. Once all the checks have been completed, you can easily export the web mock-up to other applications (Sketch, Slack, Confluence) to reproduce the final website design or to manage the progress of projects.
The problem with software is that you always wonder if it's compatible with the operating system you're using. Well with Axure RP9, the question no longer arises. It works on both Windows and Mac.
But then again, this software is "advanced". The design of web mock-ups for websites and mobile applications is only a small part of what it can achieve. Its field of intervention is indeed much wider (creation of brochures, flyers...).
Finally, for teams, there is a collaborative version of this software.
Web mock-up with Adobe XD 🤩
I don't need to describe to you what Adobe is anymore; it's world famous. I would even say that several entrepreneurs and teams have found their happiness at Adobe XD. It is not only used by web professionals; anything that is "design" can be done with it. Much more than a simple functional web modeling software, it is even able to create prototypes.
Here again, you can work easily with the 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, block of text, and many others. Wireframe design is really very simple: thanks to the drag and drop function.
All systems are compatible with Balsamiq: Windows, Linux and Mac. Of course, all this has a price: from $9 per month. First make sure it's suitable for your projects, by doing a 30-day free trial.
Web model with Photoshop 🤩
Some webdesigners also use Photoshop for the web design of their websites. Of course, it's not a dedicated tool, but as they say: it's the result that counts.
Pencil is completely free and yet you can achieve a lot! For example, linking pages together. You can also make your life easier, thanks to its library of templates and basic elements.
Web model with Sketch 🤩
I admit it's not the simplest of all these tools (a bit like a mix of Photoshop and Illustrator). On the other hand, a little training is enough to know it well. And as it's very well known in the webdesign world, you'll find a lot of tutorials about wireframes and prototypes creation on Sketch, on the web.
This software has been designed by Facebook designers, and is especially intended for site creators. No prerequisites are required to use it (not even knowing how to code).
The wireframes and prototypes are very complete. They are also compatible with Sketch. Unfortunately, it is only available on Mac. Tests can also be done on iOS smartphone, via the Origami application.
Ulzard's still in beta, but he's got potential. Here's a proof: from the wireframes created on Ulzard, we 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 teamwork, but the prototypes created with this software can also be tested on other media (tablets and smartphones).
Web model : Justinmind
Justinmind is free, but limited. For more advanced software, you would have to pay as low as $19 per month. With Justinmind, you are not limited to simple wireframes; it is also possible to create clickable prototypes.
Web model : Flinto
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 only works on mac. For this purpose, it is more thorough.
The little snag is in the subscription price. 99 is required for the Mac version and $20 for the online version. Before subscribing, don't forget that you are entitled to a 15 and 30-day free trial for the Lite and Flinto per Mac, respectively.
Web model : Proto.io
In the beginning, Proto.io was designed for web mock-ups and prototypes of mobile applications. However, it can also be used for web site designs. Simple and easy to use, this software is available starting at $24 per month. Depending on the number of projects you regularly take care of, but also on the size of your team, you may have to pay more.
Web model : Principle
If I had to describe it in one word, I'd say "fast". In only 5 minutes, you are indeed able to make a prototype (obviously, depending on the project). Only, it's only available on Mac. You get 15 days free trial; if you plan to continue using it, you need $99 a month.
Web design with Framer Studio 🤩
Framer Studio is a software purely for professionals. If you have been doing webdesign for a long time now, and can afford more advanced software, Framer Studio is a good alternative. You will have to pay $129 (with a free 15-day version).
Once you've finished the wireframe on Framer Studio, all you have to do is integrate it directly into the Sketch format. You still have the layers, which will help you create the prototype.
Web model with Figma 🤩
I've been saving the best for last. He's one of my favorites: Figma. Available both online and in software, it exists in a completely free version! Of course, you can create web mock-ups and website prototypes, but it can also handle other types of projects: mobile application among others.
Above all, it is easy to use, thanks to the drag-and-drop functionality. Also, the interface is very intuitive. Whether you're just starting out or not, you won't have any trouble handling this software. There is a version available online and 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.
Using tools and software: mandatory or not?
There is no law that requires you to use tools and software to create web mock-ups and prototypes. But trust me, in my experience, it's the right thing to do.
- With technology, you're more organized. It's true that there are those who prefer to work on paper (like in the good old days, and that's not bad). But software and tools are more practical. For example, when you send the web mock-up to your client, you won't have to send it by mail, or even scan it before sending it by email.
- As you may have seen in some tools and software for creating web mock-ups and prototypes, they allow for teamwork (whether with your clients or other professionals like you, or who work in the same field). And we all know very well that a first draft is not necessarily the right one. Clients have every right to refuse your first proposals, or at least to ask for some changes. With tools, it will be easier.
- I come back to the "teamwork" I often talk about. With software, you are sure to speak the same language as the other members of your team, so communication is easy.
- You also save a lot of time with these tools and software, and time is money. Let me explain: when you create the web mock-up, you'll immediately get an idea of the scope of the project. So you can already think about how you're going to organize it to be as optimal as possible. Good preparation of this kind allows you to move forward more quickly. At the same time, you can use this as an opportunity to calculate the costs.
- It's hard to lose sight of the web models and prototypes made with dedicated tools and software, because the sites you create will be made on a computer as well. Therefore, the web mock-ups and prototypes will be used as a basis for the design. This is a way to make sure that you don't "overdo it" during the actual design process, that you don't cross the line and that you stay within what has been agreed upon.
- Finally, a simple detail, but one that cannot be overlooked: the creation of a web mock-up makes it possible to anticipate the content needed for the site.
To each his preference. If I love Figma or Sketch, it doesn't necessarily mean you're gonna like them. So, according to this list, you can choose the one you think is best suited to your projects, but also to 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!