3 rules in web design that make life easier for developers

Since the beginning of my career as a web designer, I have come across a situation where the layouts are not layout because of the mess everywhere. Several times I had to redo the work, because the typesetters sent it back (with obscenities). Some nervous…

Law of Life #1

Law of Life #1

Having fairly beaten the pillow, I gathered my “will into a fist” and formalized the standards and rules by which the layout of the site will be designed. I call them potions for nerves. In this article I will describe what is “under the hood” of my layouts.

1 nerve potion – Grid options

Where did I start? Of course with layout sizes and grids. There is no way around the question: “Which grid to use: Bootstrap or google.material? For myself, I chose to combine these two methodologies. As a designer, their grid systems are clear to me, and the developers already have breakpoints.

So, the Bootstrap 5 framework offers interface creators 6 grid levels, each with its own container size. Based on these requirements, I build modular grids (base grid + column grid) in 8 px increments.

Resolution XX-Large

The overall width of the layout is 1480 px, and the side margins on the right and left are 80 px each.

The overall width of the layout is 1480 px, and the side margins on the right and left are 80 px each.

Duplicate information from the picture: The width of the layout is 1480 px, the width of the container is 1320 px, the number of columns is 12, the width of 1 column is 88 px , the padding width is 24 px. Sitebar off – 64 px, type – left. Sitebar on – 200 px, type – left. Download image here.

This seemed to me not enough, and I decided to place a fixed size sitebar off and sitebar on in the XX-Large, X-Large and Large grid. This stub is for when the grid will be used for 1 screen, with the option to use the side menu possible.

Resolution X-Large

The overall width of the layout is 1272 px, and the side margins on the right and left are 72 px each.

The overall width of the layout is 1272 px, and the side margins on the right and left are 72 px each.

Duplicate information from the picture: The width of the layout is 1272 px, the width of the container is 1128 px, the number of columns is 12, the width of 1 column is 72 px , the padding width is 24 px. Sitebar off – 64 px, type – left. Sitebar on – 200 px, type – left. Download image here.

Large Resolution

The overall width of the layout is 1096 px, and the side margins on the right and left are 80 px each.

The overall width of the layout is 1096 px, and the side margins on the right and left are 80 px each.

Duplicate information from the picture: The width of the layout is 1096 px, the width of the container is 936 px, the number of columns is 12, the width of 1 column is 56 px , the padding width is 24 px. Sitebar off – 64 px, type – left. Sitebar on – 200 px, type – left. Download image here.

Medium Resolution

The overall width of the layout is 808 px, and the side margins on the right and left are 32 px each.

The overall width of the layout is 808 px, and the side margins on the right and left are 32 px each.

Duplicate information from the picture: The width of the layout is 808 px, the width of the container is 744 px, the number of columns is 12, the width of 1 column is 40 px , the padding is 24 px. Sitebar off – 48 px, type – left. Sitebar on – 160 px, type – left. Download image here.

Small resolution

The total width of the layout is 592 px, and the side margins on the right and left are 16 px each.

The total width of the layout is 592 px, and the side margins on the right and left are 16 px each.

Duplicate information from the picture: The width of the layout is 592 px, the width of the container is 560 px, the number of columns is 8, the width of 1 column is 56 px , the padding width is 16 px. Download image here.

Fixed burger space size 32×32 px, type Right, Top. Icon “Burger” – 21 px.

Place for a burger menu

Place for a burger menu

The menu expands to 100% screen resolution. I leave myself a reminder of the Icon “Clouse” – 21 px.

An example of how the opened “burger” will look like

An example of how the opened “burger” will look like

Resolution Extra Small

The total width of the layout is 368 px, and the side margins on the right and left are 16 px each.

The total width of the layout is 368 px, and the side margins on the right and left are 16 px each.

Duplicate information from the image: Layout width 368 px, container width – Auto, number of columns – 4, width of 1 column – Auto , padding width – 16 px. Download image here.

Fixed burger space size 24×24 px, type Right, Top. Icon “Burger” – 21 px.

Place for a burger menu

Place for a burger menu

The menu expands to 100% screen resolution. I leave myself a reminder of the Icon “Clouse” – 21 px.

An example of how the opened “burger” will look like

An example of how the opened “burger” will look like

Explanation.

Despite the large number of grids described, I basically make 3 resolutions for the client: XX-Large, Medium, Extra Small. The rest of the permissions I perform only when asked to work out the design in detail.

2 potion for nerves – Layer names

Once you get into the habit of naming the layers correctly, and that’s it – these principles have forever stuck in your head. Work has become much faster and it has become easier to return to projects after many years.

Layer nesting scheme

Layer nesting scheme

The logic here is fabulous “the needle is in the egg, the egg is in the duck, and the duck is in the hare.” Let me explain in words, there is always only one container. Its width is defined above based on the screen resolution. I will be relying a lot on grid sizes, because the principle of uniformity is important for treating developer nerves.

Basic principle in web design

Basic principle in web design

We continue the conversation, this container contains screen 1, screen 2, etc. This Screen would be, for example, the main screen or call to action (Call To Action). And inside each screen, the content is according to the statement of work.

The main thing to remember is 6 words:

  1. container;

  2. screen;

  3. Column(-s);

  4. image;

  5. Raw(-s);

  6. Icon (-s).

Layer layout screenshot

Layer layout screenshot

Download image here.

3 potion for nerves – Indents

Where to retreat and by what rules design courses are taught, this is called horizontal and vertical rhythms. I will not dwell in detail, but rather show my version of changing distances depending on the size of the container.

px padding table

px padding table

Download image here.

Moreover, I use level 1 as indents between blocks. Which levels to use and where, the designer decides. I think it’s clear that where there was a 48 px padding on XX-Large, it will become 32 px in Medium resolution. It is important to use the same values ​​from layout to layout so that the degree of tension in the team (for example, in large projects) is minimized.

Conclusion

Of course, I did not discover a new country, but only showed my achievements. These 3 potions for nerves are called “basic knowledge” in courses for web designers and talk about the rules for their use, but say little about the exact values.

And as a very meticulous person, I am only interested in numbers and “how much to hang in grams”. Developers have enough worries, so don’t add layout headaches to them.

And strong tea.  Or no tea.

And strong tea. Or no tea.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *