Mockups are a central component of the web design and development process although they’re often misunderstood. Often thought of as the same, wireframes, mockups and prototypes are actually distinct processes of their own and crucial to the final product. Failing to carry out each one individually can throw off your entire project and cause unwanted delays. Why? Each stage allows you to identify and correct issues before they are finalized as well as gather feedback on necessary improvements. In this post we’ll take a closer look at how each phase plays a role in the grander picture.

Wireframes Are the Blueprint

A wireframe, which typically follows the creation of a sketch, is a basic blueprint for the page. It allocates space for content, uses placeholders for visual images, and shows how the information is organized. Grey boxes usually come standard as placeholders in many design programs. Wireframes are effective for conveying the website’s design to different members of the team. Since the aesthetic level is bare, the wireframe gives only a rough idea of what the final product will look like, not taking into account customized details (i.e., font, color, shades, depth, etc.)

Mockups Include Aesthetic Features

Unlike wireframes, which are the most basic design, mockups have greater emphasis on the aesthetics. In other words, the mockup shows the product’s near-final appearance and basic functionality. These will show the images used, specific colors, font, and other visual features. Mockups are thought of as the high-profile visual drafts in the web development process.

We often hear the terms wireframe and mockup being used interchangeably but they are in fact distinct phases despite their many similarities.

They both:

  • Are static phases
  • Address the aesthetic features
  • Do not really require full functionality.

The mockup is a more refined version of the wireframe and it’s important that it be more developed as the project progresses. At this stage of the game it’s wise for clients and designers to identify what’s working in the layout, what’s not and possibly receive customer feedback (if appropriate). Since full functionality has not been added yet, there is still the time available to move or restructure key aspects of the page.

Prototypes Complete the Process

After creating both the wireframes and mockups, the next phase is the prototypes. A prototype includes the functionality and more minute details of the UI design. While mockups offer a more concrete conceptualization of the final product, the prototype should take it one step further by highlighting the actual content and interactive modes. In many cases, the prototype is one of the most crucial phases because it is your last attempt to identify and tweak issues before releasing to the public.

Many companies, like Apple, actually create hundreds of prototypes in the early stages. This likely isn’t a reasonable option for small to mid size companies but there are advantages to creating more than one. Overall, these three phases act as roadmaps for designers and managers to collaborate. While not all designers make use of mockups, they do offer tremendous insight and opportunities for design improvement.