Modular grid in web design. Modern website design web guideline. responsive layout

A comprehensive collection of phone data for research analysis.
Post Reply
siam00
Posts: 25
Joined: Sun Dec 22, 2024 3:21 am

Modular grid in web design. Modern website design web guideline. responsive layout

Post by siam00 »

The beginning of construction is determining the vertical rhythm. To do this, you need to set and calculate the base line height (line spacing) and the base font size (font size). With a fixed media size and ready key content, you can immediately set the line spacing. If there is no such information, you need to determine the font size. The base font size should be the same as the main body of the text (usually 13-16 pt), and the line spacing will be 150-200% of the font size . Sometimes more. Thus, the vertical rhythm is determined and you can line the layout.

Then the number of columns and the intercolumn interval are set. The number of columns depends on the content. The size of the occupied area, the ratio of types and the number of information blocks are determined, and indents are set. When working with large projects, where there are many pages and layouts, it is better to immediately increase the number of columns by 2-3 times - to create a safety margin.

Modular grid in web design. Correct website design web guideline

The column spacing is set so that the blocks do not overlap each other, and there is "air" between them, which will make the visual perception of the page more pleasant. Of course, a modern website design can be created without taking into account the column spacing. This is also acceptable. The size can be equal to the column size or, more often, several times smaller than its width. Everything depends on the content that will be placed on the page, its type and goals.

We will help you create a unique website
Contact us to find out the terms and cost of work.
Write
What is a module?
Here is the ready modular grid. What is a module? It is a simple proportion. Its height is equal to several lines, and its width is equal to the width of a column. However, it is not forbidden to build a complex structure. A module can be stretched, stretched horizontally or vertically, you can alternate modules of different heights. If there is logic and regularity in this, preserving the vertical rhythm.

When creating a complex multi-component project, several nested grids are often used. This may be extraneous or embedded information: online maps, payment systems, players, and so on. There is no need to be afraid of this. You just need to take into account the indents for such blocks, provide clear space around them, both vertically and horizontally. Visually separate the main content - this will isolate third-party elements and add balance.

The modular grid is simply a methodology. It simplifies calculations and the construction of a correct website design. It is not a law and can be changed if the designer's inner intuition and visual perception require it. Sometimes optical illusions and distortions occur, due to which it is worth changing the location of certain blocks. This can be easily done.

Adaptability
There are many subtleties of modern website design. The construction of the layout with the placement and presentation of content depends on the visual mass of the blocks and the mass of the elements surrounding them. Also, the development depends on the platform on which the resource will be loaded. Undoubtedly, the use of different devices leads to distortion of the display of pages. Therefore, pixel-fitting of all blocks does not make sense. It is almost impossible to get an ideal picture. Therefore, you should approach the development philosophically and not complicate your work unnecessarily.


When creating a layout, it is necessary to be able to design a modular grid and navigation system, form an information structure, highlight certain blocks and build their hierarchy. Thanks to this, the information will be easily perceived visually. The user will be able to conveniently work with the resource and find the necessary elements. This is most easily achieved by using a modular grid. After all, web design is the creation of a beautiful, practical and, of course, convenient system.

Did you like the article? Stay up to date with new australia email address list articles about marketing and advertising!
Enter your e-mail
Share with friends

Image


Related articles
Interview
SEO
Social media
Graphic design
Web design
Marketing
Branding
Articles
Post Reply