Mockups vs. Wire­frames

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 im­ple­men­ta­tion further on down the track a lot easier. It also means that you can impress customers with your new site or app, or explain to pro­gram­mers how the web project should look and work when it’s done. You may also end up finding some dis­crep­an­cies 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 wire­frames as the design elements are added. There’s more to an app or website mock-up than the basic layout, de­scrip­tions of functions, and content place­hold­ers; it’s prac­ti­cal­ly the first version of the final design. A mock-up includes:

• Colors
• Ty­pog­ra­phy
• 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 in­ter­ac­tive pro­to­types (click dummies) that already contain coding based on HTML, CSS, etc.

If you put these measures in place early enough in the con­cep­tion of your web project, you will dra­mat­i­cal­ly increase your chances of success. If you work in a team, you have even more chance of reaching a common de­nom­i­na­tor 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-optimized website doesn’t nec­es­sar­i­ly have to involve both types of drafts we’ve mentioned. You could find that a wireframe is suf­fi­cient: for example, if you’re just planning on making an existing website in­ter­ac­tive, com­plet­ing a mock-up is a bit un­nec­es­sary since the design is already there, for the most part. The situation is similar when it comes to expanding web ap­pli­ca­tions. 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 visualize how the finished product will look at the finish line.

When it comes down to pre­sent­ing 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 pre­lim­i­nary design template. A multi-part, in­ter­ac­tive 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 pro­to­types are no longer needed.

The focus is moving more and more towards re­spon­sive design, leading to wire­frames and mock-ups becoming ever more complex. A single sketch used to be entirely suf­fi­cient, but now several versions may be needed, one for each display size. There are also func­tion­al dif­fer­ences such as input means (mouse, keyboard, touch screen) und various technical re­quire­ments (data trans­mis­sion, etc.) that need to be con­sid­ered in the design concept.

The changed cir­cum­stances have led to mock-ups being used less fre­quent­ly and de­vel­op­ers reaching straight for a re­spon­sive prototype, which has the ability to adapt au­to­mat­i­cal­ly to numerous devices. However, the software de­vel­op­ers of wireframe and mock-up tools have responded to market changes and have sim­pli­fied 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 sep­a­rate­ly.