Website mockups: whats 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 its 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 (www.flickr.com/photos/joannacortez38)
The difference between mockup and wireframe is that most wireframes are drawn by UX designers, and dont have colour, typography and photos. The mockups do have them, and most are done by the designers. Of course, if its 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 peoples attention to the structure. Think of them as the outlines or the floor plan of a building. You have to pay attention because theyre 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, dont 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 its 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, youll be able to present something very much alike what youll have after coding, simplifying the project of approval and finalization, with clients and co-workers.
Example of website mockup by Joanna Cortez (www.flickr.com/photos/joannacortez38)
