How to Make a Layout of the Site?

How to Make a Layout of the Site?

The site layout is a preliminary sketch that defines the site’s appearance and its functionality. Before building a house, you draw a blueprint, so before developing a website, you first need to visualize it in a particular program.

This article will be helpful for web designers, developers, web admins, and site owners – anyone who creates designs or uses them in their work. The best example of stunning website design are companies that help write my paper for cheap.

Rules for creating a good website layout

I’ve created a small website layout for you as an example to show you what principles you need to adhere to when designing. These principles will help successfully promote the site in the future: the design largely depends on whether the user will stay long on the pages, whether he will come back or recommend it to his friends. In addition, a competently designed layout makes the team’s further work that makes the site more convenient.

UI/UX design

UI/UX stands for “User Interface” and “User Experience.

The user shouldn’t get stumped, wander around the site and solve quests. Most users will not return to the resource if the interface is too complex and incomprehensible.

The site’s architecture is often left to the designer, especially if he has experience in UI/UX. His main task is to build the structure of the pages and link them correctly so that the user can easily navigate the site. It is facilitated by:

  • Multiple paths lead to a single page.
  • Design that helps to understand that elements are interactive and clickable (classic button shapes, underlining under links, highlighting or resizing when hovering).
  • The use of logical icons and clear calls to action.

It is essential to focus on the usual signals to people – the location of the elements, shape, colors, and phrases.

For example, in the form of a registration button pale gray color means that it is inactive. It signals the user: you need to fill out another field or check a checkbox. When everything is done correctly, the button turns green – it can be clicked on.

Site layout – it’s not just beauty but also architecture, which affects the user’s comfort and impression of the company.


Here, too, no need to “reinvent the wheel. There is a classic layout, which is already accustomed to the visitor. If you stick to it, the user can easily find all the site sections.

Traditionally, sites have this composition (from top to bottom):

Cap with a menu (header) may look differently – with or without a banner, a slider, video, feedback form, buttons, phones, and icons of social networks. Its primary function – navigation.

The top information section (body). It contains information about the company and its products, portfolio, and the best offers and promotions. And in the contact section, you can see the address and phone numbers of the company.

Footer (basement, footer) again duplicates the basic information – contacts, site map, icons, social networks. Here they often place a copyright sign and a warning about copyright protection.

All layout components should be located symmetrically to comply with the mathematical harmony. If you have a layout with centering elements, they should be evident in the middle, with the same indentation on the left and right. If you make up a gallery of photographs – the side, top, and bottom indents should be the same.

The asymmetric layout is also subject to the laws of symmetry, as strange as it may sound. For example, all the photos can be different widths, but the heights and indents are the same.

There is no need to rely on your eyesight – even the ace is not perfect. Use a grid and guides. They allow you to line up the composition along the principal axes and see the alignment of the elements.

Design Consistency

All sections and pages should have the same design logic – the number of columns in the layout, the location of recurring elements, titles, fonts. If the designer’s imagination changes direction from page to page, the overall appearance is sloppy and illogical.

Visual (style elements and images) should match the site’s theme. Colors, shapes, and pictures carry information as well as text. For example, rounded corners translate softness, and a combination of red and black are used to demonstrate strength and masculinity.

Images should also be chosen under the general mood of the site and in a similar style. One place may use studio photos, the other – reportage, cut out of real life, and the third has no pictures but only graphics. If the semantic message of the content – easy and joyful, then it is better to pick up the photos light, with smiling people and kitties. And if the theme – horror stories, then use grim digital graphics with ghosts and skeletons. You need to create a uniform policy regarding images and stick to it.

Adaptive Layout

Now all sites are made with adaptation for different screens. The adaptive layout is also called rubber layout – the site is stretched and compressed by the screen’s width, trying to adjust to the visitor’s device.

56% of users come to websites from smartphones, so it’s essential to think of a mobile version. Moreover – a popular site design, Mobile First, when the emphasis on the layout is placed on cell phones, and the desktop version is relegated to the second plan.

When layout should consider how the design will behave on different screens, to control this process, CSS has media queries that change element parameters according to the screen width of the user’s gadget.

For example, the header in the desktop version is 72px high, the header is centered and takes two lines. On the mobile version, that size would be gigantic. The title will try to fit into the screen in several rows, but some of it will be left out of the display area or will climb into the next block. So you can set the size to 24px for mobile devices.

You can change the width and height, transparency and color, and hide elements.

The designer should understand how adaptive layout behaves, such as how blocks are rearranged from horizontal to vertical.


The main thing in the text is not beauty but readability. So avoid ornate, complex fonts. And if the headings are still allowed to experiment, in the main text is better to take only proven and simple fonts.

It is also essential to consider how the text will be read in the browser. A rare font may not be recognized, and the user receives a set of incomprehensible characters.

It is better to choose the most popular fonts. Pay attention to the basic Google Fonts – they are built not only in all browsers but also in modern graphic editors. 

You can also safely take the standard fonts of the Windows family – Calibri, Cambria, Candara, Georgia, Tahoma, and others. With Times New Roman and Arial, better be careful – they are read everywhere, but too bored users.


When a web designer receives an order from an existing brand, he should be given a palette of corporate colors with codes (such as #8ED4FC, #FFECEC). If the customer does not have a corporate design, the question of the primary colors of the site should be discussed.

Coloring should be harmonious enough not to irritate the eyes. It does not mean that you can not use bright colors – it is more important to their relationship. If you select the background of light green and make the text black, it would be painful to read. But if you make the buttons or arrows light green, and the main background is white, you get a fun and bright picture.

For the user to be comfortable reading the content, it is necessary to calculate the contrast of text about the background. It can be determined by using an analyzer. The best contrast ratio is 7:1. The minimum acceptable value is 4.5:1.

Care about the designer

The layout site is transferred to the codifier, who will implement it in the code. And here, it is essential that he understood the designer’s ideas.

The layout should be oriented to standard screen sizes. It is essential to set the correct width. For example, the standard width of the computer screen is 1366 px, laptop – 1024 px, for small tablets – 769 px, for smartphones – 360 px. The number of layout versions is discussed when drawing up the ToR.

It is necessary to sign each element and group them by site areas. For example, the banner area and all the features should be grouped under “Banner” – then the layout designer will understand where these layers are in the structure.

Ideally, the web designer should know the markup and sign the sections with terms: header, body, footer, button, menu.

There are implicit rules, according to which it is better to name the elements in English and not by content, but by functionality.

Show the site both statically and dynamically. 

A web designer should show how buttons and other interactive elements look when users interact with them. What color the operational control highlights, how the menu unfolds, what the visited links look like, etc. The layout reflects the static appearance of the site and its behavior.



Jeanna Bray is a person who finds the right words and forms of presentation to convey the benefits students get when addressing PaperHelp experts for research and writing assistance. You can hardly name a top-ranked copywriting course – free or paid – that she hasn’t attended while pursuing a BA in Digital Communication.