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

🌈 Survey

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.

Contents

A web model or Wireframe: what is it

The basic elements of a wireframe

Prototype of website : what is it

Web Mockup Creation Tools - Wireframe and Prototypes

1. Mockflow
2. Glify
3. Pidoco
4. UXpin
5. Frame box
6. iPlotz
7. Wireframe.cc
8. Moqups
9. Wirefy
10. Marvel
11. Whimsical
12. Hotgloo
13. InVision
14. Axure RP9
15. Adobe XD
16. Balsamiq
17. Photoshop
18. Pencil
19. Sketch
20. Origami Studio
21. Ulzard
22. PrecursorApp
23. Justinmind
24. Flinto
25. Proto.io
26. Principle
27. Framer Studio
28. Figma

Tools for wireframes and prototypes: mandatory?

Conclusion

In video

What is a Web Mockup?

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.

The basic elements of a web model: which ones?

In general, the most important things to show are:

• social network buttons
• menus
• search bar
• CTA
• text block (not worked)
• image (represented by simple rectangles)

The goal is to bring out something very synthetic, as synthetic as possible .

What is a web prototype?

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.

Are prototypes mandatory?

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?

The 28 Web Mockup Creation Tools - Wireframe and prototypes

Mockflow

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.

Gliffy

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.

Pidoco

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.

UXpin

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.

Framebox

As intuitive as it is, it is very popular because you don't even need to create an account to use it.

iPlotz

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.

Wireframe.cc

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).

Moqups

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.

Wirefy

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.

Marvel

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...).

Whimsical

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.

Hotgloo

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).

Web mockup with InVision 🤩

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.

Axure RP9

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.

Web mockup with Adobe XD 🤩

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.

Balsamiq

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.

Web mockup with Photoshop 🤩

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

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.

Web mockup with Sketch 🤩

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.

Origami Studio

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

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

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).

Web design : Justinmind

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.

Web design : 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 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.

Web design : Proto.io

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.

Web design : Principle

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.

Web mockup with Framer Studio 🤩

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.

Web mockup with Figma 🤩

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.

Using tools and software: mandatory or not?

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.

• With technological tools, you are more organized. It's true that there are those who prefer to work on paper (like in the good old days, and there's nothing wrong with that). But software and tools are more convenient. For example, when you send the web mockup to your client, you won't have to mail it, or even scan it before sending it by email.
• As you have seen in some tools and software for creating web models and prototypes, they allow 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 ask for some modifications. 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 template, you will immediately have an overview of the project's scope. So you can already think about how you are going to organize it to be as optimal as possible. A good preparation of this kind allows you to move forward more quickly. At the same time, you can take the opportunity to estimate the cost.
• It is difficult to lose sight of the web mockups and prototypes made with dedicated tools and software, because the sites you will create will be made on a computer as well. Therefore, the web mockups and prototypes will serve as a basis for the design. This is a way to make sure that you will not "overdo it" during the actual design, that you will not cross the limit and that you will stay within what has been agreed.
• Finally, a simple detail, but one that cannot be neglected: the creation of a web model allows you to anticipate the content needed for the site.

Conclusion

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!

Comment