Mockups design is a critical step in creating a website. In order for your website to be nice, it is naturally necessary to pay attention to the graphic design, but most of all, in order for your website to be effective, you will have to build an smart layout which is suited for your audience.
The realization of web mockups must go through several stages, from functional design in black and white, to graphic design integrating your identity and colors. In this article, we will give you all the keys to succeed in this fundamental step in all website creation projects. Whoever prepares the mockup, you, a web agency or your intern (bad idea…), having clear ideas on the topic is very useful to drive the mockup design phasis for your website project.
The realization of web mockups must go through several stages, from functional design in black and white, to graphic design integrating your identity and colors. In this article, we will give you all the keys to succeed in this fundamental step in all website creation projects. Whoever prepares the mockup, you, a web agency or your intern (bad idea…), having clear ideas on the topic is very useful to drive the mockup design phasis for your website project.
Overview
The preparation of page mockups, a key step in creating your website
Modesl, wireframe, ergo layout, mockup or graphic interface: what are we exactly talking about?
Web professionals are generally creative in terms of semantics. There are about ten different terms to describe a web mockups. If the most popular is probably wireframe, have you ever heard of an ergo layout or of a wire-model? This semantic richness should not conceal the essential, the term mockup encompasses two completely different realities.
The functional model (wireframe)
It is about the page layout definition in black and white, the organization of various elements, even the main texts. It is this type of model that we call wireframe, ergo layout or mock-up. The term mock-up qualifies precisely a functional scale 1 to 1 model. The term zoning refers to a functional model consisting solely of blocks, it is wireframe’s first stage.
The wireframe provided here has been prepared by using the Balsamiq software.
The wireframe provided here has been prepared by using the Balsamiq software.
Artwork model (Photoshop)
An extension of the functional model, the artwork model integrates the colours and the brand identity. It is an accurate representation of the web page that will later have to be integrated (= coded in HTML / CSS) by the developed ones, perhaps with the exception of the texts that are often still dummy text ( lorem ipsum ). Generally, artwork models are produced through Adobe Photoshop (or Illustrator ..)
Why do you have to prepare carefully your website’s mockups?
Changing the page layout or the graphic identity of a website is not obvious. Even if the website is being built with the help of a website creation software, this is a quite difficult job all the same. So how do we get toice and effective graphic mockups? First, by taking the time to properly create functional models for all the main pages. Ideally, you should iterate over these functional models: prepare a first version, ask for an opinion around, rework the wireframe, ask for opinions again, and so on.
This question takes a different meaning depending on the way the website is developed. If the creation of the website is entrusted to a service provider, the web agency should be invited to prepare functional models well before starting website’s development. Contrarily to what one may think, web agencies try to achieve projects as soon as possible, in order not to work on too many projects simultaneously. Consequently, wireframing is often done too quickly with a single two-way trip with the customer. If you are developing the website yourself, the difficulty is to force yourself to prepare (and to iterate over) functional models before creating the page with the help of your CMS interface (or of a good old notepad for the purists …). One often has the impression of having a sufficiently clear idea of the page layout so as to spare oneself the wireframing work, but unless you are a UX experienced designer, the returns that can be obtained on the basis of a simple functional model are precious.
This question takes a different meaning depending on the way the website is developed. If the creation of the website is entrusted to a service provider, the web agency should be invited to prepare functional models well before starting website’s development. Contrarily to what one may think, web agencies try to achieve projects as soon as possible, in order not to work on too many projects simultaneously. Consequently, wireframing is often done too quickly with a single two-way trip with the customer. If you are developing the website yourself, the difficulty is to force yourself to prepare (and to iterate over) functional models before creating the page with the help of your CMS interface (or of a good old notepad for the purists …). One often has the impression of having a sufficiently clear idea of the page layout so as to spare oneself the wireframing work, but unless you are a UX experienced designer, the returns that can be obtained on the basis of a simple functional model are precious.
White sheet, Visio, Powerpoint, Photoshop or Balsamiq: which one is the best too to create website’s mockups?
Traditional solutions
In order to create the functional models of a website, many web agencies still use solutions that can be described as traditional in the SaaS software era. These solutions have the disadvantage of not facilitating the management of proportions, which is always restrictive when you have to think about the page layout of many devices formats.
- Paper: although the average age of web professionals is around 30 more than 50 years, there are still many fervent advocates of functional models on paper. Fast, accessible, flexible, the advantages of paper for wireframing are many.
- Microsoft Visio: integrated with Office Pro, this software allows the preparation of complex business diagrams. It is widely used by software and computing services companies to represent software engineering architectures (DB, Servers, UML diagram, etc.).
Some web agencies use it to create the tree view of the pages, or even the functional models. Personally, I would not recommend it, it is quite heavy and not very suitable for our use. - Microsoft Powerpoint: the famous software can also be used to produce functional models, especially because there are libraries of additional components designed for wireframing, for example PowerMockup. Although PowerPoint (or Keynote) has not been designed for this purpose, the flexibility and simplicity of the tool, especially for manipulating simple formats, make it a suitable tool for simple wireframing.
Wireframes software / mock-ups
These mock-up software, normally SaaS tools usable through a web browser, are designed to create the functional models of web pages. In most cases, they allow one to manage the representation scale and the proportions between the different components, and above all they are often collaborative. There are many wireframes software, from the lightest to the most complex, from free to charged, and the purpose of this article is not to list them all. We will briefly present three very different tools with the aim of indicating different approaches to you, especially in terms of detail levels. We invite you to discover the summary table prepared by SocialCompare in order to find out the main wireframes software on the market.
- Cacoo: A SaaS software resolutely oriented towards collaborative, Cacoo is available in a free version sufficient for a single use. Very easy to use, Cacoo allows the making of all types of wireframes and diagrams.
- Balsamiq: Available in a dektop ($ 79) or in a web version ($ 12 / month), Balsamiq is a reference in the world of website creation. Simple and powerful at once, Balsamiq allows anyone to create functional models of rather complex pages.
- Axure RP: Probably the most complete and powerful software for wireframing and prototyping web interfaces on the market. It is typically used by high-level agencies or freelance designers. The standard software version is available for $ 249.
Graphics software
Once functional models have been realized, and “challenged” by your friends, it’s time to move on to the graphic prototyping phase. If wireframes softwares are very easy to access to, this is not the case for graphics software, and particularly for the Adobe suite. You will not become a web designer in one night, if you need to be convinced, just open Adobe Photoshop… This software reigns supreme in the graphic design field. Powerful, flexible and suitable for the cutting phase needed for the integration into HTML / CSS, Photoshop is THE software for UI design. Among the alternatives, one can mention Gimp (open source) or Paint Shop Pro, but … the domination of Adobe Photoshop in this area is such that the associated file format, .PSD, has become a substantive in the jargon of web professionals.
From the tree view to the Photoshop mockups of your website
We are about to work through the main steps in order to help you organize the mockups implementation phase. Of course, this organization will have to be adapted to the specific needs of your project.
Step 1 – Tree view
Before thinking about pages layout, you should have a very good overview on the website. It is very important to be able to identify the page “templates”, or more precisely, layouts common to multiple pages, for example, “blog post” or “product page” templates. Of course, you have to start by modelling the page templates before working on specific pages like homepage. In addition to being interesting for the production of wireframes, the tree view is very useful for designing effective customer processes and for preparing internal pages networking with perfect SEO compliance. This phasis is very useful to raise interesting issues with all the team members, the tree view crystallises many key points of the website creation project. We recommend clearly to work on the tree view from the beginning of your thoughts about your web project.
Step 2 – Main pages wireframes
First of all, we advise you to only create the wireframes related to the main pages, or to the main page templates. Two reasons justify this piece of advice. The first is that this will help you identify graphical components you can use again in secondary pages. And, in my experience, it is common that the initial tree view is changed after the making of the main pages templates. That’s why it is recommended that you work on wireframes in a very iterative way, to facilitate continious improvements. In practice, this would mean making a quick drawing of the 3 key pages of the customer process, looking for advice and then reworking those 3 pages by going a little more into detail, asking for opinions again, reworking the 3 pages and adding 3 more, and so on. This may seem tedious, but I assure you that an iterative approach of this kind can be very effective, though it often requires a mindset change.
Step 3 – Components definition & detailed wireframes
Once the main pages wireframes have been validated, we recommend that you bring all the pages closer in order to identify the set of “graphical components” which are shared between pages. By “component” we mean blocks, tables or tabs, all the graphical objects that you will be able to use again. The objective of this work is to try to re-use the same components when it is possible. The goal is not only to reduce work for developpers, it is essential to create a strong and harmonious user experience, with a true consistency between pages.
It is now time to go into detail and work on secondary page templates. At this level, the key issue is often the balance between discussing each detail and accept the first design proposed by the webdesigner. Of course, it depends on the web designer you’re working with. Personally, this is a question I address since my first discussion with the project’s web designer. I rarely get a clear answer, but that helps me understand the profile and the desired level of freedom. Generally, I give few details in the first pages, and I later modify them on the basis of the first delivered graphical mockups.
It is now time to go into detail and work on secondary page templates. At this level, the key issue is often the balance between discussing each detail and accept the first design proposed by the webdesigner. Of course, it depends on the web designer you’re working with. Personally, this is a question I address since my first discussion with the project’s web designer. I rarely get a clear answer, but that helps me understand the profile and the desired level of freedom. Generally, I give few details in the first pages, and I later modify them on the basis of the first delivered graphical mockups.
Step 4 – Graphic page mockups
During the functional prototyping phase, it is the project owner, who knows his target and his market, who has to lead the wireframing work, even if he is not creating wireframes himself.
Graphical prototyping is different, more creative, more freedom needs to be given to the web designer. As client, you have to give graphical inspirations, explain clearly your brand positioning, but you should also pay attention not to restrain the web designer’s creativity by giving too detailed instructions.
If you have good functional wireframes and a specific creative brief, you will be a perfect client for any webdesigner. Your designer will have all the cards in his hands, and often more motivation to deliver great UI designs!
Graphical prototyping is different, more creative, more freedom needs to be given to the web designer. As client, you have to give graphical inspirations, explain clearly your brand positioning, but you should also pay attention not to restrain the web designer’s creativity by giving too detailed instructions.
If you have good functional wireframes and a specific creative brief, you will be a perfect client for any webdesigner. Your designer will have all the cards in his hands, and often more motivation to deliver great UI designs!
Conlusion
In conclusion, I hope that we have convinced you to spend some time on the website mockups implementation phase. This is a key step to create a website that is both enjoyable and effective.
And in order to make your website really suitable for its target, we cannot repeat enough that it is very useful to show your mockups to people outside the project as often as possible. Creating a strong user experience is a job, User Experience Designer, whose key qualities are listening and determination to continuously improve its work.
And in order to make your website really suitable for its target, we cannot repeat enough that it is very useful to show your mockups to people outside the project as often as possible. Creating a strong user experience is a job, User Experience Designer, whose key qualities are listening and determination to continuously improve its work.
Webolto EN
Webolto ES
Webolto PT
Leave a Reply