Website mockups: what’s the difference between a mockup and a wireframe
A mockup is a model of the design of the site or app. It has the look of the project, but it’s not the final project. Nowadays, most designers prefer to create them using image software like Photoshop or Illustrator.
Example of website mockup by Joanna Cortez.
The difference between mockups and wireframes is that most wireframes are drawn by UX designers, and don’t have colour, typography and photos. The mockups do have them, and most are done by the designers. Of course, if it’s a single-person team, one can do everything.
Some UX designers present wireframes with mood boards to clients and designers, to show what they want/need in the project. Mood boards, or concept boards, are wireframes with some colour, but some UX designers think it should be used in a later part of the development process. We recommend this post from Jakub Linowski about mood boards.
The prototypes, on the other hand, are more complex, because they provide part (if not all) the functionality of a website or program. For example, if you can click, navigate, search, and have interaction, it will be a prototype.
When to use wireframes, mockups and prototypes
Wireframes are done to understand the space, the navigation and the structure of the project. They are built without details to get people’s attention to the structure. Think of them as the outlines or the floor plan of a building. You have to pay attention because they’re not meant to restrict designers’ work, but to improve it.
Mockups are better to get clients to understand how the site is going to be. Some clients, mainly the less experienced ones, when see a wireframe, black and white, without his logo and with Lorem Ipsun text, don’t like and reject the project. This can be avoided with a mockup.
A prototype is a more advanced thing, to be used when you have a difficult project to specify, with interactive details, such as movements, transitions, and all have to be approved before coding. Also, they can be used for testing, both usability and to sell the project to clients. Since it’s easier to make a working prototype with software such as Justinmind Prototyper than coding everything, we have seen several clients doing all the testing and approving with a functional prototype.
Should I use Justinmind Prototyper to create a mockup?
If you want to create several pages, and show the interactions between them, we strongly recommend so. You can create the look and feel in your favourite design software, export them as images, and insert into your wireframe easily, and using templates, create a functional prototype with ease. This way, you’ll be able to present something very much alike what you’ll have after coding, simplifying the project of approval and finalization, with clients and co-workers.
Example of website mockup by Joanna Cortez
Extremely interesting blog post thank you for sharing I have added your website to my bookmarks and will check back
Wassup thank you for the entry.