People have always intuitively used the sense of proportion. It is easy to confirm, because since the earliest civilizations we can see the connection of proportions with measurement and construction, the placement of objects relative to each other in space.

Grids, as a markup, a system of reference lines, were used to make construction plans and break down the territory, Renaissance artists used it to enlarge their sketches, and in cartography grids were the coordinate basis on which military plans were made.
In the designer’s work, when layouts consist of different elements, the grid helps to organize them. The grid allows, without calculating each distance and size separately, laying the key patterns in its construction only once, then simply reuse them.

For example, the grid allows you to observe the rule of proximity theory (you can also find this rule among the Gestalt principles of perception) and, in particular, the rule of external and internal, according to which internal distances must be smaller than external ones.

Once you start using the grid, it is hard not to notice its advantages:

• the grid defines a unified design style, rules for the arrangement of elements, alignment, adding new elements to the layout;
• speeds up work with the layout, because when you follow common rules, the time to decide where, what, and how it will be located is minimal, and also allows you to get a predictable result when working in a team
• reduces the likelihood of errors in the overuse of components layout. Component-based approach is used by developers in their work, so components allow the team to work in sync, easily maintain changes and save time;
• layout looks more aesthetically pleasing, elements are proportional and structured. In addition, if a grid is used in the design, it helps the user read the information faster. The grid creates visual order and orientation becomes easier.

What grids are.

Depending on what is taken as the basis for the grid, we can distinguish the following types: block (based on a block), column (columns), modular (module), hierarchical (visual weight and location of elements relative to each other).

Block or manuscript grid

is the simplest type of grid, which is usually used in print publications. Typically, such a grid is a standardized rectangle that contains the content on the page or screen.

A column grid

is a grid that has columns in its structure. The width of the intercolumn (gutter) is determined by his purpose, if he simply separates the elements from each other, it is reasonable to make his width the minimum necessary, but it should be in any case, noticeably larger than the line spacing, so that the lines in adjacent columns not look like extensions of each other.

A modular grid

is characterized by having both a vertical termination and a horizontal termination. What is formed at the intersections is a module – a rectangle with a given height and width that underlies the composition. The grid determines how the layout will look like as a whole and where individual elements will be located: text blocks, headings, images.

Hierarchical

a grid with intuitive placement of blocks, which focuses on the proportions and visual weight of elements in the design. This type of grid is often used when content is not standardized and uniform. Often found for business domains related to fashion, photography, art.

The most difficult to build is a modular grid, it includes the construction of columns. So let’s look at the principles of its creation.

Principles of constructing a modular grid

Modular grid is a tool, but not a method, so before you create a grid, you should make a rough page layout, think through the elements that can be used, and only then proceed to create it. To build a modular grid, you must first build a base grid, then apply a column grid to it, and by setting the module size, we will get a designer grid, i.e. your designed for a particular project.

So, let’s start with the base grid. It resembles millimeter paper. It will allow you to move the smallest elements of the layout, keeping all the distances between them equal and uniform. The pitch of the grid depends on the indivisible elements (atoms) of the layout. They can be a base font and line height, a radio button, a checkbox, the minimum distance between visible blocks of content, for example, between photos in the gallery or product cards.

Why 8-pixel?

A block of 8×8 pixels was chosen as the step for this grid because most popular devices have a multiple of eight pixels screen size, therefore it would be easier to design interfaces for them with this system. In addition, if all numerical values are even, it becomes easier to scale sizes and distances for a wide range of devices, keeping the design in its original form.
For example, devices with a resolution one and a half times larger than the original will have problems rendering odd values. Increasing an element five pixels in size by a factor and a half will result in a half pixel offset.

There is also a recommendation to use an 8-pixel grid in Apple’s Human Interface Guidelines.

Why not 10?

Because, again, most devices have a multiple of eight in pixel size, and the 10-pixel grid introduces more restrictions on element sizes.
8,16,24,32,40,48,56,64,72,80,88,96,104,112,120 15 dimensions
10,20,30,40,50,60,70,80,90,100,110,120 12 sizes
Eventually you may decide to use both the 10 and 6 pixel grids as your base grids. The main argument for choosing them should be the convenience of working, following the chosen rules and their support for you and your team.

The concepts of Hard and Soft grids

There are two approaches to using a basic grid.

• When using a hard grid, all elements are a multiple of the base grid block, for example 8 if we are talking about an 8 pixel grid, and are placed strictly on the grid.
• The second approach is the soft-grid, which boils down to using distances between elements that are multiples of 8 in our case.

The main advantage of using a hard grid is that no matter how you group the elements together, you can always control the inner and outer indentations and move the containers of elements around like bricks. Material Design, where everything is designed using a 4-pixel grid (typography, icons, and some other elements are designed using a 4x pixel grid, and other components using an 8 pixel grid) is usually fully consistent with this method.

The good thing about a soft grid is that when it comes time to layout your layout, using a grid is more likely to cause difficulties because programming languages do not use the same structure to specify meshes. When speed of implementation comes first, soft grids are more flexible and minimalist in their code structure. It will also be preferred for iOS design, where most system graphical elements are not defined by a hard grid.

Vertical rhythm.

When choosing a base grid, it is important to remember that the pitch of the grid must fit evenly with the height of the main text line. Let’s say you’ve chosen a font with a font size of 16 pixels as your base font, then according to the recommendations of modern typography the interlineage will be 150-200% of the size (sometimes more). In order for the 8-pixel block of the base grid to fit evenly into the height of the line, you can choose a value of 24 pixels as the interlineage. Based on this line height of the main text, you can vary the layout and follow the vertical rhythm.

Which approach to take will depend on the skills and experience of the team, because native mobile apps have the ability to work with a baseline of text, but it’s harder with a browser. You’ll have to work from a baseline and then use very specific intervals to make your content align.

This means that each design element will now occupy a certain number of lines in height. Rhythm is easy to work with, you measure everything in lines, not pixels. For example, the first level menu and header are 2 lines, the image is 8 lines, the button is 1 line, the indent is 1 line, etc.

Column grid

The column grid is responsible for horizontal rhythm, which you can get by choosing a column width to indentation ratio that makes it easy to change the position of larger blocks.

Why is the 12-column grid so popular?

Because the number 12 is divided into: 12, 6, 4, 3, 2, 1. Therefore, the grid is flexible and allows you to layout blocks of almost any number or width. Moreover, by discarding 1 or 2 columns as margins on the edges of the layout, you get a block in the center that is also divided by 10, 5 or 8.

What to consider when building a column grid

• Breakpoints

In adaptive design you need to keep the layout structure and neatness of information for all resolutions, so layouts should be made for all control points. Columns of the grid can remain static and be added as the screen width increases, and elements can change their position by obeying the column rhythm and breakpoints. These can be 480, 600, 840, 960, 1280 and 1440. And for each screen resolution, respectively, will be a different number of columns. As a detailed example, we recommend reading the Material Design responsive layout grid. With a hard deadline, you can choose the most popular 2-3 transition points using your resource’s or your competitors’ web analytics.

Or you can keep the number of columns for all the transition points and change the size of the columns and inter-columns between them proportionally.

For a better understanding of how responsive layout works, where, when and how it is used, as well as the concept of responsive design, see our video about designing websites and pages for different devices

An example of calculating a grid for a transition point of 1280 pixels.

Determine the number of columns. For example, there will be a gallery of six photos with text descriptions, two large graphics and three paragraphs of text. Then the number of columns should be a multiple of 2, 3 and 6. A number of 12 will do. Dividing the grid area of 1280 pixels into 12 columns with gutters of 20 pixels would produce 85 columns of width while leaving an indentation of 20 pixels to the left and right edges. So you have 12 columns of 85 pixels, 11 gutters of 20 pixels, and 20 pixels left and right margins.
1280px = (85px12)+(20px11)+(20px+20px)
This distribution gives combinations of elements of different sizes.

The concept of Fluid Grid or “rubber” grid is also used in the web. Its peculiarity is that its distances are not specified in pixels, but in percent. For 100% is taken content area. Below is a simplified example for a 1000 pixel wide layout with 6 columns.

Designer Grid

Having constructed the base grid, and having defined the column grid, we get the intersection of columns and rows, which forms a module – the basic unit of the modular grid. When choosing a module size, you should keep in mind that a module that is too large will produce an inflexible grid, a module that is too small will be meaningless. Modules can and should be combined into groups, so we get a design grid – the final version of a modular grid designed for a specific project.
As a rule, you are practically limited to a combination of a base grid and a column grid, since development and maintenance of a designer grid is rather labor-intensive.

The designer’s (final modular) grid may consist of two narrow columns on each side and one wide one in the center. It can be of identical columns with wide indents, or it can consist of “floating” columns (when two, when five), but so that it becomes visible by repeating the layout of materials and nesting “less in more”.

Grid within a grid

If the project is complex and multi-component, it is possible to use several nested grids. For example: the layout uses columns with large text, and inside one of them lies a calculator form with a bunch of controls, laid out on a square 4-pixel grid. In addition, some of the content can be extraneous and embedded at all: players, online cards, widgets, payment frames, etc. These elements will have their own internal grids that you have no control over. What you can do is follow the inside-outside rule for containers containing these blocks, give enough air (including vertically) around them so they don’t stick to the rest of the content, look detached and drag extraneous elements into their visual zone.

In lieu of a conclusion…

Don’t start your search for a design solution by building a grid. First you need to:

• decide on the structure of the page and make a rough sketch of it, even on paper;
• get the high-priority blocks into a consistent layout;
• then build a rough grid of your design ideas;
• Grid in blocks whose location is not crucial.

Only now can you begin to work through the grid:

• Choose a base grid pitch based on the typography you’ll use and the size of the basic elements: buttons, input fields, checkboxes, etc. You can limit your support to vertical rhythm only, based on the line height of the base font;
• determine the optimal number of columns depending on the content structure;
• choose the number of transition points you will support;
• build a column grid and try to arrange the key elements of the interface;
• determine the module size that will allow you to create content blocks (you can omit this step, in practice it is rarely used due to the labor-intensive support).

Important! The grid should not dictate, but help in the design. Therefore, you can deviate from the grid! There is no need to align everything unconditionally on the grid. If some block does not fit into your grid in any way, you don’t have to adjust it.

Try it and you will succeed!

What is a website layout

A website layout is a realistic prototype created in a graphics program like Photoshop. It looks like a ready-made website: with all the blocks of text and images, buttons, wallpaper, and so on. The only difference is that the layout has no functional content: for example, the product page is filled with description templates.

Why do we need a website layout?

Site layout – is the result of the designer’s work on behalf of the customer. Then the layout is transferred to a codifier and programmer, these professionals have converted a graphic file into a real site.

Ideally, the creation of a site layout involves many professionals, except the designer and layout designer: copywriter, user interface designer, backend programmer, and even a marketer.

Layout is needed so that the whole process went quickly: the performers had to make minimum changes, and the customer saved time and money.

Layout helps in this whole process:

• See in advance how the customer’s wishes will look like in practice, including the mobile version of the site and animation elements.
• To develop a unified design for all pages of the site and all of its typical elements.
• Thinking over the content elements – text and images.
• Coordinate the entire project team, set a clear framework for the work.

Layout development site: we work step by step.

Let’s understand in detail how a layout comes into being and what to take into account during the creation process.

The terms of reference

Always start “on the shore”, with the drawing up of the terms of reference. Even if you make your own layout, the task will come in handy: when you caught the designer’s courage and have been playing with fonts for three hours, the task will get you back on track. What should be in it:

• The goals of the site – what it will specifically do for your business.
• A brief analysis of the target audience – who you’re making the site for, what those people’s needs are.
• User scenarios – how your visitors will use the site, how you plan to bring them to the action you want.
• The number and approximate content pages of the site. Just in case, do not forget to draw and page 404.
• Deadline – it is worth prescribing, if you involve outside experts.

Prototype

When the job is prescribed, you can make a block structure of the site layout, that is, a prototype. This is a schematic drawing, which shows the location of the main elements: the header, footer, content blocks on the page, the approximate ratio of their sizes.

Color matching

Select no more than five colors – a couple for the font, a couple of base colors for the background and one accent color. If you have a logo or brand book, refer to it.

Those who find it difficult to choose colors can use a special service. There are a lot of them, here are some free ones:

• Adobe Color
• ColorCode
• ColrD
• Cohensive Colors
• ColorHunter

Font selection

For the layout of the site you also need a couple of fonts – one for titles, the other for the main text. At most, you can pick up a third if you really need to. What you need to keep in mind when choosing a font:

• Copyright. You either have to buy the font or find one you can use for free. Look for free fonts on Google Fonts, Font Space, 1001 free fonts.
• The right characters and fonts. Sometimes a font doesn’t have italics or bold, or special characters like currencies or the letter “e” are missing. Of course, you can style the font with the built-in tools of Photoshop and add signs from the other, but this violates the integrity of the font and the overall look of the page, and add prosthetics.

Working out

Now you can start directly creating the layout of the site.

1. Create a grid of guides, which will adjust the objects on the page.
2. Partition the page according to the prototype – determine the place for the header, footer, main content blocks.
3. Create some basic elements – an example button, description, header and others you need, and put them outside the workspace. Be able to copy and paste them where you want them.
4. Start working out each area in detail.
5. Don’t forget to draw interactive elements in different states. For example, if a button changes state when you click it or a font increases when you hover it, create separate layers for both states.
6. In one of the next sections, I’ll show you step by step how to create a website layout in Photoshop according to this scheme.

Important! Draw each element on a separate layer and name it logically. Button – button, product name – item name and so on. Don’t forget to group layers logically and give groups names.

Creating a guide

It is a good idea to make a description of the layout of the site for the codifier. In the description you can fix all the main characteristics of the layout:

• colors chosen,
• the size of the grid,
• descriptions of basic elements and so on.

Also add to the description of the elements that may cause doubt in the codifier, such as screenshots of the states of interactive elements with a description of the animation. Describe the typography used: fonts, their colors and sizes, line spacing.

How to create a website layout in Photoshop

I will quickly show you how to create a site layout in Photoshop. We will make the main page of the online store of mugs, it will have a header, blocks with categories of products and footer – everything is simple. The images for the site I will take from the free photobank Unsplash, and you can find somewhere else – for example, in one of the free photobanks in our selection.

Look at what devices people are more likely to come to your site from – phones, tablets or computers. The first thing you need to do is make a version for the most popular version and work out the rest from that.

Create a new file in Photoshop. You can customize it yourself or go to the “For the Web” tab. By default, the program offers a “Custom” layout with a size of 1366 by 4000 pixels, I’ll round up the width a bit to 1380 pixels. This is a common size, fitting the size of your computer or laptop screen. The color model is RGB, the resolution is 72 pixels per inch, and the background is transparent.

Now we set the modular grid. Go to the “View” tab of the top menu and choose “New Guide Layout” there. By default, the program offers to create eight columns with margins and internal indents, but we will make 12 – so it will be more convenient to divide the page into 2, 3, 4 or 6 blocks.

Also set the middle value of 15 pixels (this is the internal gap between columns), the top and bottom field will be set to zero, right and left – 30 pixels. You can choose your own values, but remember that the indents and margins must be a multiple of one digit, such as 5.

Now let’s fill in the background. To do this, use the adjustment layer – it will be easier to change its color if necessary, so you don’t have to fill it all over again. In the “Layers” panel, we choose the circle icon, click on it and choose the “Color” option and specify the desired shade. Now all that’s left is to remove the mask from this layer so that only the color remains.

Don’t forget to rename the layer, preferably in Latin characters, and you can lock it immediately with the lock icon button in the Layers panel.

The next step is to choose the colors. I have already chosen the background image, so we will use the Adobe Color service as a starting point. Go into the service, choose “Extract Theme” in the menu, load the picture and get a few ready combinations. The resulting color codes can be copied.

Done, you can start rendering directly. I’m going to have a small and simple landing page, so I’m not going to work through the block structure, but I’m going to start creating elements right away. If you’re doing something more complicated, it’s better to sketch a schematic first.

The first thing we’ll do is create a header with the company logo and links to other sections of the site. The basis will be a rectangle filled with one of the selected colors. I do not have a logo, so I’ll just write an invented name in the header and create headers for other sections of the site.

Now I will add the main image of the page and write a little slogan on it. Container for the banner, the banner and the text on it grouped in a folder Banner. If you will be placing an image as in my example, leaving no field on one side – be sure to make a mark for the codifier, as the picture should behave when stretching the page width. For example, that it should remain “glued” and the right side will be an empty field, or it should increase with the page.

It’s time to make category blocks, and I’m going to have six of them. In order not to make them too small, I will place them in two rows of three blocks. Given that the layout has 12 columns, one block will take up exactly four columns. I will not work out each block at once, but I will create a template with a gray bar and multiply it into the necessary positions:

Fill the blocks with their pictures and change the text. In parallel, we group the elements so that the picture box, the picture itself, and the caption are in the same subgroup.

At this point, I don’t really like the margins between the blocks – they’re quite narrow, and the photos blend together. To fix this, I will reduce each block by 10 pixels on the left and right. Note that the header elements have also moved to fit the categories: the logo 10 pixels to the right, the “About Us” element 10 pixels to the left.

The only thing left is the footer. Let’s put a form here to collect mail and contact information. To avoid the usual colored background, I found another picture and put it in the footer. And note that the footer elements are also indented 10 pixels from the guide, as are the categories above them. Don’t forget – be sure to group the layers and give them normal names, so that it’s easier for the layout designer to figure it out later.

The remaining height of the canvas can be trimmed and enjoy the result. I’m sure your website layout will come out much cooler :).

How to create a website layout online or in a program

Picked for you five services where you can create a layout of the site online, and one convenient free desktop program.

Wilda

Russian-language online designer, where you can create a layout of the site, document, brochure, banner, and so on. The user chooses one of the templates (for sites there are 16) or works from scratch.

The service has a very simple editor: layouts are built from just six types of elements. There is a picture, a background block, a free-form figure, a logo, text and a line. The editor is connected to a photobank with free images, so you can upload pictures directly when creating a layout.

Price: layouts are created free of charge. You should pay from 150 rubles for one download, or 50 rubles for publishing online. When buying a package plan will be cheaper.

Mockflow

A tool for rapid prototyping sites, designed for UI/UX design. The site layout is composed of ready-made blocks, such as header, product card, banner or “These products were recently searched…” block. These blocks can only be resized, their color or content cannot be edited. Before creating the layout, you need to choose which interface you are going to prototype, this will affect the set of blocks.

Price: There is a free rate for one project of no more than three pages. Then from $15 per month.

iPlotz

A handy, though slightly outdated, online site layout builder. Works on Flash Player, so it can lag, especially on weak computers.

The sense is similar to the Mockflow – there is a set of ready-made elements of the site, which should be dragged over to the work panel, changing only their size. Almost all elements are made in grayscale, color is very little.

There are also two sets of icons, bitmapped and vector, and a set of cursors in the form of “pointing fingers” – apparently, it is designed to create cues coder and programmer, how to click or move a certain element.

Price: free for one five-page project, then from $ 15 per month.

Moqups

In this online layout builder you can make a website, diagram or chart, prepare a business report.

There are 24 website layout templates and the ability to create a layout from scratch. The user is offered to assemble his site from ready-made blocks: text, button, link, radio switch, text entry field, page scrolling, banner and so on. All elements can be customized: change color, size and text on them. If you create a project of several pages, you can link them together to make the site more realistic.

Price: one project with a maximum of 200 elements is available free of charge, then from $16 a month.

Marvel

Another service for creating a website layout online. A nice modern interface, a few tools, but enough to work. There are already ready elements of the site with the ability to edit, shapes – rectangle, ellipse, line, and images with built-in photobank.

And Marvel will also help you simulate a working site even before the layout. How it works: you upload ready-made page layouts to the service and set up their links – for example, select the button area on one page and select another page to go to when you click on that button. As a result you get a simulation of the site or application, where you can “tap” and evaluate the convenience and logic of communication pages.

Price: free for one project without the ability to download the created files. After that, from $12 per month.

Justinmind

A desktop program with extensive features. In the beginning, the user chooses which interface the design will be created for: mobile on Android or iPhone, desktop or tablet. Then the user mixes the page with ready-made components, which can be flexibly customized: change the color, size, text and pictures.

The program compares favorably with similar online services the number of features, even in the free version. You can see a simulation of how the page will look on your device, and export the result in HTML format. The interface is reminiscent of Photoshop – it will be easy for designers to understand. The program accepts files from Photoshop, Sketch and Adobe XD for input.

Price: unlimited free version. The paid ones start at $19 per month and feature teamwork, expanded feature sets, enhanced support, and other bonuses.
Price: there is a free rate for one project of no more than three pages. Then from $15 per month.

Mistakes in the creation of site layout

The most common mistakes in the layout can be divided into two groups – mistakes that affect the perception and the overall “beauty” of the site, and errors due to which the codifier creates the site incorrectly for the ready-made layout.

Errors in design.

When the site economize, they hire a cheap designer or even entrust the case to a non-professional. Then there are the typical mistakes in design that spoil the look of the layout of the site.

Avoid these mistakes:

• Unbalanced color scheme or mismatched fonts.
• The excess of elements – too many blocks, buttons, labels. The visitor is lost on the page and will not perform the desired action.
• Absence of a mobile version of the site.

Errors critical to the layout.

Sometimes the layout of the site is all good, but with the layout of the flaws come out. This happens because there are some unnoticeable mistakes which the codifier doesn’t understand and carries over “as is”. That’s what you should avoid to make a layout perfect:

• Clutter in layers. You need to remove unnecessary layers – hidden, empty. Normalize naming all the remaining ones and grouping them logically. Ideally you should do this at the design stage of the layout of the site, not when handing over, otherwise you will get confused.
• Effects of transparency and overlay. To make a color lighter, just use a different color, but in no case transparency. Don’t apply blend effects – they display unpredictably in different browsers.
• Elements will wander back and forth by a couple of pixels. Align everything strictly to the grid, otherwise the layout designer can simply cut the object, which protrudes beyond the guideline.
• Confusion with indents. Check the indents – they should be expressed in whole even numbers to make it easier for the caster to move them.
• Incomplete files. Attach fonts and all images to the layout – separate archive for fonts, separate for images. If the fonts are on Google Fonts, you can provide links to them.

Creating a layout of the site: what is worth remembering

Layout – a complete model of the future site. It is needed to coordinate the work of the designer, layout designer and programmer, as well as to clearly show the customer the course of the work.

Creating a layout is as follows:

• Terms of Reference
• Drawing a block scheme – a prototype
• Color matching
• Font selection
• Drawing a layout
• A guide on the layout for the codifier

What mistakes should be avoided to make the site layout look good and it was easy to cobble together:

1. Mismatched colors or fonts.
2. The excess of colors, fonts, elements.
3. The lack of a mobile version of the site.
4. Confusion in the layers – in the names, grouping.
5. Presence of transparency and overlay effects.
6. Non-compliance with the modular grid.
7. Random indent sizes, especially fractional.
8. Images and fonts are not attached to the layout in separate files.

To make a layout, you can hire a designer or spend time on your own – there are many free services and programs, just find the right one for you. And when the site is ready, be sure to connect to SendPulse – with us it is easy to collect leads and do the mailing via email, SMS, push, Viber and chat-bots.