Mock-ups and wireframes: visualizing your web concept

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 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 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?

Wireframe: the functional framework

A 'wireframe' lets you present an underlying concept in a graphical way, even before the actual source code is programmed. It’s purely about making the relationship tangible between the various elements that make up the website’s structure. Wireframes are like sketches that show the functionality and layout. Each draft contains

  • Navigation elements
  • Traditional web elements such as header, body, forms, and links
  • Layout of individual elements
  • And the types of content to be used

The draft aims to optimize the final product’s usability even at such an early stage of development. The graphical display and planned content aren’t very crucial at this stage, since these drafts are only represent the framework for preparing the designs and simply appear as placeholders for text and images. Depending on the type and what they are to be used for, wireframes are usually drawn by hand or created digitally with the help of presentation programs or image editing programs.

Mock-up: the preliminary design template

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:

  • Colors
  • 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.

Wireframe or mock-up?

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-optimized 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 visualize 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.

Which role does responsive web design play regarding design creation?

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.

Tip

Give your website that extra edge and add a personalized Favicon to your page. Try out the 1&1 IONOS Favicon Generator now for free!


Wait! We’ve got something for you!
Have a look at our great prices for different domain extensions.


Enter the web address of your choice in the search bar to check its availability.
.club
$1/1st year
then $15/year
.com
$1/1st year
then $15/year
.info
$1/1st year
then $20/year
.me
$1/1st year
then $20/year