Posts Tagged ‘Difference’

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.

The difference between mockup and wireframe 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 the 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.

Justinmind Prototyper is the simulation and prototyping tool for designing high fidelity wireframes and mockups. For more information, subscribe to Justinmind’s blog or drop us a line on twitter.


Article from articlesbase.com

More Mockup Articles


What the Main difference between system prototyping and throwaway protyping?


what is throw-away prototyping in software development?

i need detailed infromation about throw-away prototyping and the difference between throw-away prototyping and evolutionary prototyping


What is the difference between Autodesk 3D Max 2010 and Autodesk 3D Max Design 2010?

I accidently ordered Autodesk 3D max 2010 instead of the Design version and I major in Interior Design and Architecture and my brother will be majoring in Game Designing soon. Should I return the version I got for the design version? Or just keep it since it’s not much of a major difference. I would love to know your opinions.


Prototyping and production cost difference. Average percentage?

I am working on a prototype and I am looking for an average cost of production based off the prototype cost. If there is such a relation ship. I know production cost will depend on quantity ordered and involvement.
So if my prototype cost $500, what could I expect a production cost to be?
Basic product details:
CNC milled from aluminum
4 pieces make up the whole part.
Ask me for additional details. :)


What Is The Difference Between 3-d Printing And Fused Deposition Modeling? ?

I see alot of similarites but both are in 2 different categories of rapid prototyping; so whats the difference?
Please someone who has knowledge in the topic of rapid prototype