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?
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
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.
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:
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-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.
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.
Give your website that extra edge and add a personalized Favicon to your page. Try out the IONOS Favicon Generator now for free!
Instead of creating a website yourself, buying a ready-made website is also an option. This way you can reduce your workload and receive a complete web presence including existing visitors and customer base. But which risks are associated with buying a ready-made website? And what costs can you expect?
The internet is becoming increasingly more mobile, which is proving challenging for website operators. There are still many websites which aren’t properly optimized for smartphones and tablets and can only be partly displayed. Since Google’s mobile update, these sites can expect significant visibility losses. Separate mobile websites, adaptive and responsive designs, and mobile plugins for content...
Did you know that you can submit your site to Google, Bing, and Yahoo! in order for it to be found more easily in the search results? These search engine providers allow web operators to submit their URLs so they can be added to the search index. We’ll show you how to register your web project – a simple procedure that can increase its online visibility.
Designers and developers put a lot of time and effort into creating a web project. During the journey from initial idea to finished product, there are many decisions to be made, plans to be devised, as well as there being the possibility of having to start all over again. Mock-ups and wireframes are important tools that can help in the early development phase when creating simple prototypes of...
Developing new digital products can easily become an expensive investment. What can help you to make a decision in advance about whether the effort will pay off? Include users in the product development process. This approach, which benefits the company and customers equally, is called user-centered design.
Provide powerful and reliable service to your clients with a web hosting package from IONOS.
View packages
