features of wireframe, mockup and prototype


What is a wireframe?

A wire frame is the first performance of a design. In the case of a website a series of boxes and lines that indicate what type of content will be located and where it is. Although it is usual starting paper wire frames, then digitized to work with exact measurements. In the sketch on paper you can have a general idea of ​​where the items are, but to improve and digitize the sketch no longer treated with approximate, but accurate measurements to be followed when switching to the next design phase. It is clear, then, that wire frames basically have two objectives:

  • Show the type of content that makes up the site design
  • Show where that content is located

Wire frames are the first representation which has the structure design. At the same time, also they represent major elements, but at a fairly basic level. That is, what kind of elements are placed is known, but has not yet approximate the visual appearance of the element.

While it is important to create an accurate representation of the final design, it does not have details of certain elements. They are like a guide that helps team members understand the structure of the site, but even the appearance of elements is unknown. For this reason it is usually depicted with boxes go areas where items or buttons, lines and paragraphs titles and text.

What is a mock up?

A mock up is a visual and static representation of a design. In the field of web design the mockups are used for team members have a clearer idea of ​​how the website will look like. In fact, rather than being close, it is an exact idea of ​​how the site will look once you move to the next phase.

The mock ups are made on the basis of the measures and the organization previously established in wireframe, but unlike this a mock up already has more sense for the customer as it is more visual. All elements such as text, icons and images look. Since it is a static display, some items you want to add as videos must be represented by an image and the play icon. Also, there is some interaction between the menu items, buttons, links, etc.

They usually do many designers it is to create mock ups also how the buttons will look in different ways, so the web developer can know exactly what changes should do. Also they serve to explain the customer more precisely how interactions work on the website.

As mentioned, the mock ups are helpful when working in a team, it helps to better visualize the whole team final site design. They are also useful to show customer design without adding any kind of interactivity. They are perfect when you want to receive comments or reviews by the customer.

What is a prototype?

A prototype is also a representation of the final version of a web design that also simulates interactivity. It is understood that although it is a prototype, the design should be close to the final version of the design. Often, it is done based on the wireframe mockups and providing the designer. For this reason, usually accurate measurements and, of course, the structure is also maintained. If the design is close to the final version, interactions must also be developed very carefully, considering its resemblance to the final version of the website. Then, a prototype used to examine not only the content but also the interactivity of the site.

A prototype is often used to test certain features of the site and verify usability is appropriate. Based on these tests you can proceed to make changes as appropriate. Since a prototype is a close to the final product, both in design and interaction approach is a process that usually takes longer, but it may be necessary in certain web pages. For example, if it is a web application should be tested to see if it works properly before offering the product to customers.

In conclusion

As you can see, each of these products have their own function. In many cases, products such as wireframes are considered basic to begin designing, whether it is a simple web site or a complex web application. On the other hand, the prototypes are not always used, particularly if budget and time are simply not enough. So although each is useful, they not always all are present in the design process.