Content
What is a website layout?
A mockup is a static design of a future website that gives a general idea of how its pages will look. Often, a mockup is a sketch of a website created online, but even a simple hand-drawn drawing can be considered a mockup.
The layout may not have a color scheme or any design details that could distract from the purpose of the layout - to give a general picture of the purpose, appearance and operation of the future site.
There are actually two points of view on what website layouts are . According to the first, the layout should reflect the final version of the site. The second considers the layout as a transitional stage; its creation should not take too much time and average accuracy in design is enough.
Low/medium fidelity mockups include the basic structure of the site, main blocks of content, and no visuals.
A high-precision layout , in turn, is thought out down to the pixels, including font size, color palette, field sizes, etc.
high fidelity mockup
Example of a high fidelity layout
Why create a website layout?
There are many reasons why creating a mockup (not just for a website) is a good kazakhstan phone number library idea. For example, do you know how McDonald’s kitchen was designed ? The McDonald brothers drew a floor plan of the kitchen, marking the order of all the items, and asked employees to move around as if they were in a real kitchen. This way, they determined the best path for each worker to take in accordance with their tasks. The effort the brothers spent on designing the kitchen this way ultimately saved time and money. Now, the speed of order preparation is only 30 seconds, which allows them to serve many more customers at the same time.
If we talk about a website layout, its tasks are similar: to reduce costs for future development, to minimize expensive and time-consuming changes to an already finished website. What else can a layout be useful for:
The customer can design the future site. The customer often develops the layout: it is easier to convey how he sees his future site. It is good that even a non-designer or a person with no experience can create a layout.
By creating a mockup, you will understand how the design can be improved. You can get valuable feedback before the website development begins. Providing a high-quality website mockup is a great way to reassure the client that you are definitely moving in the right direction.
It will help you identify design errors early on. With the help of a website mockup, you will be able to analyze whether your design really works or not, both from a functional and aesthetic point of view. You can change and improve until you reach your goal.
A mockup is a good way to improve communication with the team. A mockup will eliminate the problem of communication between different people in the team (if the mockup and the website development are not done by one person). A full mockup of the website with recommendations on design and general structure helps developers to immediately start turning the mockup into a full-fledged website.
Logical layout design
There is no point in creating a website if you do not yet know who it is intended for. Website layout development includes analysis of visitors, themes and structure of the website. This way you will get the most relevant website.
Target audience
You need a concrete idea of who your site's visitors will be before you start working on your website layout.
You can gather this kind of information during the user research phase, collect data and create a single portrait from the mass. The number of portraits from your project, but remember: the fewer, the better. When developing a website layout, it will be easier to keep in mind several people, rather than 20, which will make the final product more holistic and relevant. Examples below:
user portrait
Relevance to the topic
You must answer the question of why you need this site. Despite the simplicity of the question, this is the key to the success of your project. The site is usually aimed at informing about the company, promoting services, supporting customers, selling goods. If the goals of many sites are similar, then the subject matter may differ significantly. For example, a medical site and an online school have the same goal - to promote their services, but the subject matter will be significantly different.
The topic of the site content should be thought out as early as possible. You should analyze competitors' sites on this topic, make a list of the necessary elements on the site, and then start working on its layout.
Site structure
Before you start designing your website layout, make sure that your website architecture is well thought out. Architecture is the structure of your website pages, and it determines the best way to organize the information on your website. Ideally, each page should be three clicks away from the home page so that users can easily find it, which will lead to a great UX (user experience).
In the article about creating the correct website structure , you will find ready-made examples for a corporate, sales and news website.
