Design of the mockup of your new website
By G. Lara & M. Soutto
The process for designing the mockup for a website starts when you accept our website design budget and based on the ideas and content for the project, we begin the process of creating the mockup for your new website. In this article we want to explain this process to you, to answer possible questions such as what is it? how do we do it? why is it important? and we will end with an example of a website mockup design, in this case for a real estate company.
The design of the mockup as an image is carried out according to the preferences that the client has for the design of the website and in the event that he does not have specific preferences Ailon Webs makes the web design that best adapts to the corporate image and material provided.
What is a website mockup?
The website mockup is the first phase of web design, it visually represents a website in a simple way, that shows the graphical interface of the website and establishes it's organization. This is a fundamental piece in the website creation process.
Therefore, the mockup of your new website helps us visualize the website before having it coded, to evaluate the usability and see how the components flow.
Objectives of the mockup of your new website
The main objectives of the design of the mockup of the website are:
- Obtain a graphic scheme to represent how the information will be displayed on the website's pages.
- Define the content flow of the user interface, to plan the layout and user interaction patterns.
Design process of the mockup of your new website
This is the process we follow to design the website mockup:
- Analysis of the web project.
- We create the organizational chart of the website or sitemap.
- Website mockup design . Graphic design to display the website in an image format.
When we start a website project we must make a list of requirements for that specific web project. Taking into consideration the goals and functionality that we want to offer to users.
1. Analysis of the web project
We analyze the ideas, objectives and material (logo, images, texts, etc.) that the client provided us for the web project.
We proceed to identify:
- Project requirements.
- Main objective.
- Define the call to action (what we want visitors to do when they come to the website).
- Important items.
- The visible elements in the screen area 'Above the fold' (area of the web page that is visible without having to scroll).
2.We create the organizational chart of the website
One we have created the organizational chart of the website, which is a diagram of the structure of the website, it makes is now easy to make the sitemap or list of web pages that will be accessible to users.
The goal is to have a outline of the entire web , a list of the pages and the interactions of every page with each other.
We divide the website by its content, so we can structure the flow of information by building the site map.
For example, this could be the content of a website:
- Home page: it is the most important part of a website. It is what your visitors see if they write your domain name, serves to consolidate your corporate brand and informs users of what you offer.
- Products or Services.
- Other specific sections.
3. Design of the mockup of your new website
For the design of the mockup for a website we start with a drawing of the neutral scheme that is made with paper and pencil where we reflect the structure of the website that we are going to represent. With this schematic sketch we can now design the final graphic sketch that we present to our client.
To understand the design of the web mockup we need to explain the basic structure of web pages.
3.1 Structure of a web page
The basic structure of a web page is:
- Header: upper area of the website where it is essential to show the logo and information of the company, together with the main navigation menu that allows the user to orient themselves and navigate the website.
- Body: intermediate area of the page where the content is displayed. Content varies from one page to another.
The header and part of the body are in the area of the web page that will be visible without having to scroll, called 'Above the fold'.
This image shows the basic structure of the web page, the header and footer are repeated in all the pages of the website, this gives consistency and also has the function of guiding the user when navigating the website.
If you have a project in mind, access our website to calculate the cost and request a quote for your new website.
3.2Drawing of the wireframe for the mockup of your new website
In this phase we draw the mockup schematically. This drawing must be neutral, made whith pencil and paper or with graphic design software, it is called a 'wireframe'.
Without getting distracted by details, the goal is to design the pillars of the website, place the largest structures or components, and mark the positions of the basic elements, such as the header, body, footer, and the website navigation menu. This gives us a global vision of the structure of the web page that we are designing.
Elaborating the wireframe of a website we design the pillars of the website that will guide us in the initial phases when we build the structure of the website.
In the following image you can see an example of the schematic drawing (wireframe) of the mockup for a fictitious real estate company with responsive web design, that is why we represent three screen widths or devices.
We follow these steps in the process of designing the wireframe for a responsive web page.
We draw three frames: for mobile, tablet and desktop computer, each one represents a device and the size the aspect ratio of the window in the web browser. We put the focus on translating the idea. If we do the drawing by hand it is not necessary that it's precise, in the following steps we will mark the precise dimensions.
When making the mockup of a website we have to keep in mind the content of that entire page and also of the 'Above the fold' screen, that first screen that shows when we load the web page without having to scroll through it.
To understand how the mockup will look like once turned into code, we must explain the concept of 'breakpoints', they are specific screen widths where we change the design layout. We use them to apply a specific style depending on the width of the device screen. We define the breakpoints in the style sheet (CSS) by using the media queries so we apply the style for each width of the screen.
We think of the best way to display the navigation menu, so that it is clear, usable and scalable.
We start by using a simple square with 3 horizontal stripes on the mobile or a rectangle in the rest to represent the navigation menu and position it horizontally or vertically, and we place it in the corresponding position on the web page. If it is necessary to add search to the website, then it is represented by the search icon or magnifying glass icon, with or without an associated search box or rectangle.
In the case of a mobile device it is usually necessary to use a hidden navigation menu with a hamburger button (commonly represented by 3 horizontal stripes). We can also show the expanded navigation menu depending on the content or needs of the web project.
To show that we are in a specific navigation link we can color the active link, underline it, surround it with a box or set a background color for the link.
We place content in the website mockup by drawing the largest elements, for example, titles or headings, text paragraphs, images, etc. In the mockup by hand we can represent titles with solid rectangles or thick lines, the text as fine lines and images as a rectangle with 2 lines running through from each corner forming an X.
We can also draw specific details, in order to have them present in the final mockup, such as, for example, cards or boxes with images, text and buttons, a carousel with customer testimonials, elements of a form (radiobutton, checkbox, etc.), dropdown menu for a secondary navigation, call-to-action (CTA) buttons, dialog boxes, and many more. We will represent them in a schematic way according to the component so that we can remember their position and therefore their interaction in the flow of the responsive website design.
Usability: All the components of the web page with which it is possible to interact, such as the navigation links or the icons, we will make sure that they are of a size large enough so that it is possible to easily touch them in a user interface that allows interaction with the fingers and they should also work properly with a mouse cursor or a touchpad.
3.3Design of the mockup of your new website
With the finished neutral wireframe drawing, we go on to design the final mockup that we are going to show the client. Our objective is to draw up a mockup with a graphic design that allows the client to visualize the website in a graphic way.
The wireframe - neutral schematic drawing - provides us with a connection between the conceptual and the visual structure, but to create the visual design of the website it is necessary to design the mockup.
The design process of the final mockup of the web page is carried out with a graphic design tool, taking as reference the previous steps of the website mockup design process so we obtain the graphic design of the website as a result.
As it is a responsive web design, we will need three work areas as shown in the following image, one for each device to which we assign a representative screen width (viewport). If we measure it in pixels it would be something like: mobile with a width of 576px, tablet with a width of 992px and desktop computer with a width of 1400px.
In this phase of the website mockup we carry out the design in a precise way, so the frames of the devices are drawn with the most precise dimensions and all the components of the structure as well.
Once the website mockup design for the new website is finished, we will have represented the three screen widths that correspond to mobile, tablet and desktop computer. The width of each one of them shows the breakpoints , which we have explained before and help us to change the style of the web page based on the screen width.
Once the website mockup design is finished, we proceed to publish it in a .PDF file format and we will email it to the client.
Each website project is unique and the design of the mockup for your new website allows the developers and the client to visualize the web project graphically. This is a good reason to say that the mockup for your new website is an essential element in the process of developing a website and the previous step to passinge the graphic design to web programming code.
We have seen in this article that combining the requirements of the project, objective and content, we designed the site map to visualize the distribution of the information flow of the website so we can then start the mockup for the website.
The purpose of the website mockup design for the webiste is that both the client and the developers can visualize the web content before starting the coding of the website and it is essential to carry out the programming of the web pages.
The mockup of your new website is a good starting point for constructive interaction between the web project client and the web developer.
We must remember that we start from scratch and we get a simple or complex website, but we will always look for it to be usable, beautiful and that it works as the visitor expects it to.
Each web project is different and we study the best possibilities for your next website. Ask us about your idea.
Receive our promotions
Categories: Web page design
Tags: web design, website design