The Guide to Mockups: A Designer's Take

As the role of the designer changes within business, the clarity of design terms is becoming more and more important. During a site redesign project, for example, it is not uncommon to have someone request an example of the completed site from the designer. Perhaps the project manager or client asks for “a wireframe, but with images and navigation examples,” or “a prototype, sort of like a mockup.” This leaves the designer wondering if they have been tasked with creating a wireframe, mockup or prototype. For many people, those three words are interchangeable. In reality, however, each of those terms represents a specific tier of web design.

Wireframes

Wireframes are used at the beginning of the design process to help map out the basic site layout and hierarchy without spending too much time finessing the details. Wireframing is a good tool for making sure all of the important components are included in the design.

Mockups

Mockups come after the wireframe is approved and add another level of detail and visual accuracy to the design. Colors, hierarchy and navigation are fleshed out at this stage, and clients tend to prefer these as a deliverable because they have a closer tie to the final product.

Prototypes

Prototypes offer the highest fidelity (meaning they are the closest to a final, live site) and help clients understand the interactions that will occur on the site. Hovers, animations, drop downs, and other user interactions can be included in the prototype to help clients understand small details that will be incorporated into the final product.

Out of the three stages, mockups are often the most effective at communicating the visual design goals of a project. They provide an accurate look at the aesthetics of the final product and a general idea of how it might function. The eBook “The Guide to Mockups” from UXPin deals with the method, uses and importance of (shocker!) mockups.

Aside from the basics surrounding the implementation of mockups, the PDF focuses on the importance of determining the level of fidelity required for each stage of the design process. In order to determine the necessary level of fidelity, and thus whether you need to create a wireframe, mockup or prototype, it is important to weigh the value of the deliverable against the amount of time it will take to make. Some fidelity suggestions include:

Starting by presenting the clients with a lo-fidelity wireframe, which can help eliminate rework and problems down the line by getting approval on the basic layout.
Remember that choosing between a mid-level (for example: using full colors, but including placeholder images and graphics) and a hi-fidelity mockup or prototype is ultimately a judgment call.
A hi-fidelity mockup is a good tool for developers to reference, but eventually they will need to start from the beginning with their coding. Large amounts of time could be spent creating a flawless hi-fidelity prototype, but clients and designers need to remember that a prototype is not a live site; therefore the lowest level of fidelity necessary to convey a point is recommended.

“The Guide to Mockups” also includes suggestions for choosing the right tool to create mockups: mockup-specific software, graphic design tools or lightly coded html mockups. Again, this decision stems from the level of fidelity required to help clients and test users understand the plan for the site. Suggestions for how to use mockups in the design process include:

Wireframe first
Look at competitors sites to determine their mistakes and make improvements on your site
Determine required fidelity
Determine whether prototyping is necessary with a hi-fidelity mockup.

Follow this link to download the PDF and learn how to get the most out of your mockup, or contact us to get started on your web project.