Mockups vs. Wireframes

Since a new website or app is not much more than a thought-construct in its early stages, it’s crucial to have a design concept at its core. This will make the technical implementation a lot easier further down the line. It also means that you can impress customers with your new site or app, or explain to programmers how the web project should look and work when it’s done. You may also end up finding some discrepancies that you can then eliminate before the finished version goes live. Two terms you often hear  being spoken about are 'mock-up' and ‘wireframe’. But what are these two different types of designs?

A mock-up also serves as a visual aid for the planned concept of the web project and is an expansion of pre-drawn wireframes as the design elements are added. There’s more to an app or website mock-up than the basic layout, descriptions of functions, and content placeholders; it’s practically the first version of the final design. A mock-up includes:

• Colours
• Typography
• Images
• and graphic elements

These elements bring the layout to life and enable you to gain a good insight into how the web project could possibly look in the browser or on different displays when it’s finished. There are numerous graphic programs available to help you create your mock-up, such as the infamous Photoshop. There are also specific mock-up tools like Balsamiq, that enable you to add links as well as create different pages in a simple fashion. Such complex mock-ups are very similar to the interactive prototypes (click dummies) that already contain coding based on HTML, CSS, etc.

If you put these measures in place early enough in the conception of your web project, you will dramatically increase your chances of success. If you work in a team, you have even more chance of reaching a common denominator more quickly. Hiring an external web developer means your ideas couldn’t possibly be presented any better. They will also be able to tell you which features are feasible, which pose problems, and what can be done to increase the website’s usability. Drafts on paper are also the best way to present your ideas to website customer and investors.

The path to achieving your fully-optimised website doesn’t necessarily have to involve both types of drafts we’ve mentioned. You could find that a wireframe is sufficient: for example, if you’re just planning on making an existing website interactive, completing a mock-up is a bit unnecessary since the design is already there, for the most part. The situation is similar when it comes to expanding web applications. If you have hired a graphic designer to create the design and want to give them as much freedom as possible, a wireframe is also the best way to visualise how the finished product will look at the finish line.

When it comes down to presenting your own ideas for the graphic elements, you can’t go wrong with a mock-up. The more detailed the wireframe draft is, the easier it is to create a preliminary design template. A multi-part, interactive mock-up including site and link structure usually requires more effort and higher costs. Having said that, it may mean in certain cases that code-based prototypes are no longer needed.

The focus is moving more and more towards responsive design, leading to wireframes and mock-ups becoming ever more complex. A single sketch used to be entirely sufficient, but now several versions may be needed, one for each display size. There are also functional differences such as input means (mouse, keyboard, touch screen) und various technical requirements (data transmission, etc.) that need to be considered in the design concept.

The changed circumstances have led to mock-ups being used less frequently and developers reaching straight for a responsive prototype, which has the ability to adapt automatically to numerous devices. However, the software developers of wireframe and mock-up tools have responded to market changes and have simplified the design creation process. If you do choose to draw your wireframe by hand, you’re left with no option but to create every design separately.