Imagine or think about that client who comes to you and commissions you to design a website. It may be that you have to design the theme that it is going to use, and that it will be the first impression that it will leave on the thousands or millions of people who are going to visit it. How would you present it to him? Would you take screenshots of a website where you worked on the design and show it to them? Wouldn't it be better to use a web mock up?
Wait, Didn't you know that there was also a web mock up? Well, then this topic interests you. And a lot. Because you can give your presentation a better presence and make the client leave much happier after seeing images where it seems that the website is already operational. And the truth is that it will not cost you so much to do it.
What is a website mockup
First of all, let us explain a little what a website mock up. As you know, a mockup is actually a “real image” representation that shows what the final result of your work would look like.
In the case of a website, would be an image of the result of that web page.
This type of collage they are used to give more realism to the work, since many times, when you present it, it may be empty or not represent one hundred percent what you have done. In addition, the client has a more visual way of getting an idea.
And you will say, why not show him the website you have worked on? It could be done, but not as a presentation of the work but you would have to let the client navigate the web for him to get to know her thoroughly and, many times, they don't have time to do it, so you don't make sure that he has seen everything.
On the other hand, with a web mockup you would achieve it because you would highlight everything you want to see in those images.
How are they made
Now, how are these web mock ups made? Is there a program to create them? Are they collage that are taken from the Internet?
Actually there are several free tools that they can give you a hand to create these, and that they can give you options, not only with the examples that we are going to give you a little later.
With this you could even create a collection of them for that client, putting the design in different sequences that make the final result look much better.
These tools are:
Gliffy
This tool is online and it's free. With it you can create web mock up because has many schematics and an API with which you can get the job done in a matter of minutes.
In fact, it's a of the most used and that gives you many options.
Kacoo
In this case we must warn you that, although we are going to focus on the free part, the tool it is also paid and that means that will be more limited in what you can do.
To get an idea, you can only export in PNG (so it is not so customizable if you want to use it with other clients).
The good thing is that if you work with a team you could work together at the same time (ie in real time).
wirify
wirify is one of the tools can turn a website into a Wireframe and, with it, work with the client showing you the web to your liking. But of course, here it would be necessary to choose a photo of a computer, tablet or mobile to mount the result of this program.
As you may have guessed, all the tools give you an image of the web design, but it would be necessary to actually assemble it in a real image. For this, you have to access photos where computers, mobiles, tablets are shown in order to insert your design on top and get a photo that unites both (and that looks good).
To do this you can use ready-made mockups or create them yourself with an image editing program.
Web mock up that you can download
If you do not want to overwhelm yourself too much to present the work, here we leave you some examples of website mock up that you can download and use. You will save time.
Realistic website mock up
We start with a scene that anyone could have. It is a desk and a computer screen on top (keyboard and mouse below). In the background a bookcase with books. However, this bookcase is in black and white, as are the decorative elements of the desk (more books and a lamp) and the wall, which is in a gray tone.
Why? So that the gaze is focused on the page displayed by the monitor. in your case could be the home of the page, or representative parts that you want to show the client.
You download it here.
Simple website mockup
A simpler representation, where with a gray background (although it can be customized) it does not show a screen in which we will have inserted the web page.
It stands out that, if you look at the screen, it has a lighter part and a darker part, because it simulates that the light falls on it.
This can be interesting for parts where you want the client looks exclusively at them.
You download it here.
Samsung Galaxy S5 Mockup
This in particular is a mockup of the Samsung Galaxy S5 but it can be perfect for you to show, in the same image, three parts of the web design that you have made so that the client appreciates how it would look on a mobile.
Keep in mind that Google now empowers businesses more than use a responsive website, that is, that it looks good whether you use a computer, a tablet or a mobile. Therefore, it is not enough that it looks good on the computer, you have to make sure on all other platforms.
You can download it here.
Mockup for tablet and mobile
In this case, you will not be able to show 100% of the web on a tablet, but you can on the mobile. And it is that if you want to show your design on these two devices you can also do it, so that the client gets an idea of how it will look.
Of course, keep in mind that on the tablet it will be displayed in landscape format Meanwhile he will have it vertical. It's a way for him to see your design change to fit both devices.
You got it here.
Do you have some examples of web mock up? You can share them in the comments.