Website mockup - how to design it?

Are you planning to create a website? The page mockup is the first stage of work on the new website. Find out what the process of designing a website mock-up looks like, learn about proven methods, and create a functional mock-up of the website yourself using several recommended programs.


What will you learn in this article?

What is a website mockup?

Low fidelity (lo-fi) mockup

High fidelity (hi-fi) mockup

Why is it worth designing a mockup of a website?

Step-by-step creation of a functional page layout


Step 1: Check out the competition

Step 2: Get to know the user

Step 3: Plan your navigation

Step 4: Take care of the correct color of the page layout

Step 5: Test the mockup on the user

Step 6: Make changes to the mockup of the functional page

Step 7: Give the site mockup to the developers


Website mockup - some useful tips

Programs that allow you to design a mock-up of a website

What is a website mockup?


The mockup of the website is a pictorial representation of the concept of the appearance of the new website. It combines the logic and structure of the website skeleton with graphic solutions. It is a simulation of the site's appearance, such as its outline. Usually, it includes the hierarchy and layout of the page, information on how the user will use the page, visualization of page elements and their size, position, spacing between individual components, colors, typography, graphic files, and photos. The mockup defines the most important elements of the page. There are lo-fi and hi-fi mockups. How are they different?


  • Low fidelity (lo-fi) mockup

The lo-fi mockup is the first attempt to present a website in graphic form. All you need to create it is a piece of paper and a pencil. This is a very simple drawing that contains diagrams of the page being designed. It is worth carrying out tests with potential users at this level. The paper version of the mock-up allows you to detect incomprehensible elements on a potential page and improve its usability.


  • High fidelity (hi-fi) mockup

The hi-fi mockup has more details. After gathering information, it can be more extensive thanks to the initial tests. The mockup has colors, photos, logos, navigation, and much more information needed to create a website.


Why is it worth designing a mockup of a website?


Why design a page mockup? Mainly due to efficiency and development costs, which are significantly reduced thanks to the layout of the website. A website mock-up allows you to check at an early stage whether the project is functional or whether it works for the target customer as we expect. It allows you to analyze the appearance of the page, consider the spacing between elements, and the final colors. It is a great tool for communication between the client ordering the website and the team of programmers creating it. If it is prepared in detail and contains key information, it avoids costly rework.


In conclusion, the page mockup:


  • lowers development costs,

  • improves the introduction of the product to the market,

  • allows you to detect errors at an early stage of work,

  • facilitates communication between the client and programmers,

  • specifies the appearance of the website,

  • allows you to test the website navigation,

  • allows the customer to visually see the home page,

  • reduces the costs of reworking the finished product,

  • has a positive effect on the website's UX.




Step-by-step creation of a functional page layout

When creating a website mock-up, remember that it is primarily intended for user testing. It must be prepared in such a way that potential consumers can check it and provide feedback. In order to develop the right functional mockup of the website, you need to create personas (to understand the expectations of the target group), analyze market opportunities, plan web navigation, think about visual issues, but most of all, test, test and test the solution again until it is successful. It is worth taking a closer look at these elements.


Step 1: Check out the competition

First, analyze the market opportunities, and check what the competition is offering. Think about what your site is to be used for, and define its purpose. Perhaps during the analysis, it will turn out that you will change your idea, but at this stage, there is a time and place for it.


Step 2: Get to know the user

Creating user personas will allow you to analyze the purpose of the project and check what the market really expects. It is worth knowing who exactly the potential users of the website are, what they like and don't like, what they pay attention to, and what works for them. The number of personas is arbitrary, but it should be remembered that the multitude of information will blur the expectations of customers and the inability to implement so many guidelines. Three or four personas is a good number.


Step 3: Plan your navigation

Before you start creating a mock-up, think about the navigation. Draw it on a piece of paper and test it on several users, check how they approach the solution and whether it appeals to them. These are the first tests. The layout of the site, the arrangement of elements, and the size of the gaps between them are very important. Test and improve the design until it works. When the functional mock-up of the website prepared on the sheet meets the users' expectations, use the mock-up program and transfer the project to the computer.


Step 4: Take care of the correct colour of the page layout

When you know what the page diagram should look like, the layout of the user interface, and key functionalities are thought out, you can proceed to the visual version of the website. The website mock-up should be nice. It is worth taking care of navigation and call to action on the website, designing buttons, and thinking about how to use them. Plan the appearance of individual elements on the website, and define the spacing between them. Colours play a key role in the user experience. This is the stage at which the website colours should be proposed. Remember about quality images. Take care of typography, too many types of fonts can disturb the proper perception of information by the consumer. Define the hierarchy of elements, and make sure that the texts are legible.


Step 5: Test the mockup on the user

Even the wrong choice of button colours can ruin the entire project, so the final decision on the appearance of the page should be made after testing it. Users will help determine the readability and functionality of the website. Perhaps the font is too small or too large? Do you have too many elements on your home page, or maybe the colours are not pleasing to the eye and create contrast where it should not? Test existing solutions.


Step 6: Make changes to the mockup of the functional page

It is very important to make changes at this stage. Perhaps the tests will show that the concept is bad and needs to be changed completely, but this is what the mockup is for. Its key role is to limit changes to the actual project and prepare it to meet the expectations of users. The mock-up of the website affects the functionality of the website and its usability. Better to make changes at this stage than to create costly websites that don't fit your purpose.


Step 7: Hand over the page mockup to the developers

After testing and detailing the requirements and expectations of consumers, the project can be handed over to developers. Certainly, working on a website that has a mock-up is much more efficient