Web page layout design: Using mathematical modulus for precise layout

Many mathematical formulae can be used in the design, for example, the common golden ratio is one of them. In the design layout of Web pages, we can also get the ideal composition ratio by precise calculation, this article will introduce the use of mathematical "modulus" to calculate the page layout size, so as to obtain a more reasonable layout.

In the IT industry, built-in standards, international standards, national standards is the real meaning of the norms, and in the application area (including the development of Web applications), the standard is fragmented, if Microsoft does not consider the market and economic interests is not to hang these standards. I have to sweat one.

Application of modular web design

Well, despise the web design of pediatrics, let's talk about the use of "modulus" in web design.

(i) Size units in web design

The size units in the web design are a few: EM ex px pt pc in cm mm%
The most common is px (pixel), because this unit and picture units can be interoperable, so commonly used.

(ii) Common modulus in web page design

(1) The most commonly used is the multiples of 100, 10 and 5.
For example, when the column, full width of 950px, the left column 180px, the spacing between columns is 10px, 15px, 20px

(2) Modulus to try to take the whole or the lowest even

Here to mention the module in the concept is that do not meet the common modulus, the number of digits to try to use even, for the avoidance of ambiguity and good memory. There is a reason is that all even, then by the number of components of the combination of order, the superposition of results must be even, the end plus a component must be odd, so good to judge whether there is a mistake.

For example, your picture width is 231px, why not give 1 to the whole 230px;
For example, your picture high 237px, you can take 235px, 236px, 238px

(3) Advantages of using modulus--easy access to order beauty
What is beauty in this world? is Order. Look at the elemental crystals, see the snowflakes falling into your hands, see the human genome spiral structure, these microcosm of things, condensed the beauty of the source. But the nature, the animal kingdom, and even the Universe galaxy, because it contains the magazine and constantly decay changes, this "beauty" is only the appearance.

The reason why people are human is to always explore the origin of things. and constantly refining the essence of reducing beauty. In the Middle Ages people were obsessed with geometry, and in modern times people have fully improved it to industrial design. Industrial design is based on normative standards and computational design, sublimation into a set of pursuit of perfect order. The modulus of order is an increment, which can be multiples, square root, Power, pi, prime number, or an equation, and so on. And multiples are precisely the simplest way to form order. Therefore, in the industrial design, especially in the construction design of a large number of use of multiple to act as modulus.

Now that we have a simple multiple-class modulus, how does this modulus represent beauty?
You said I couldn't feel it. Correct, modulus of beauty is indeed a person can not directly feel. Because this kind of beauty not only manifests in the sensory, also manifests in the design production development process, it not only enhances the production efficiency, reduces the baffling cumulative error, but also has the whole design beauty to contain in the whole work, its beauty is the whole beauty and the partial beauty one kind of mutual transformation. More bluntly, you will feel an industrial design of "refinement" and "intentions" on the Web page. Conversely, the space between the modules in an interface or a module four boundary and its content interval, one will be 8px, one will be 12px, the general user will certainly in the subconscious feel not exquisite, because the designer has no intention, The order beauty is not designed with modulus.

How many UI designers don't know what modulus is?
How many UI designers lack the design beauty of the entire site because they don't use modules?
How many UI designers have used a multiple of orders, even in a local or a build, but have not used uniform modulus in full-page layouts and whole stations?

With your eyes carefully observed, with a magnifying glass to study, with the heart to feel, you will know what your designer level.

(4) not bound by modulus
The above has always said modulus to use multiples, to use even. To activate blood circulation ah, once the pursuit of order beauty and efficiency and norms conflict, which will give up modulus. For example, the size of the international standard Small logo picture is 88*31px, do you have to conform to the modulus and not follow the international standard and change into 88*30px?

Digression, in addition to modulus, IT industry also has its built-in set of standards, I do not bother to care about him, such as pictures and head size, there is a special set of modules, 16*6, 24*24, 32*32, 48*48, 64*64, 128*128, if you have to destroy this standard and change to 15*15, 25*25, 030*30, 50*50, 65*65, 130*130, I really have no language.

Yi, I found Paidai's head, incredibly is 50*50px, hehe. It seems that the performance layer does not have to adhere to modulus.

Design beauty is so simple, you have to use a calculator to layout!