Why HTML coders don't like web designers
During my work as a typesetter, I happened to deal with a bunch of different layouts, both from design novices (or sometimes just left-handed people) and to professionals. And during this time I managed to collect a decent sample of the most typical bugs in the layouts that even the venerable experts are not able to avoid. Immediately make a reservation - in some organizations there are internal “requirements for design layouts”, and in theory, if the design does not meet these requirements, it should be sent for revision without question, but the reality is that it is often easier to make the necessary changes yourself than to drive the document there - here on the tracker. But even in these “requirements” not all obvious “jambs” are mentioned. I will try to bring the most popular and universal (without personal binding). Yes, by the way, I cite all the bugs for the use of photoshop psd - well, this is de facto a standard in web layouts. Yes, and I did not come across more layouts in the vector (and I must say, thank God).
1. Markup. The basis of the page, the so-called layout or skeleton.
a) The most well-known and scored on edge, but no less popular from this - the width of the layout should always be less than the implied width of the display device by 20-24 pixels (correctly - at least 24 pixels). Those. If we prepare a document for a horizontal resolution of 1024 pixels, then the maximum width of the layout is 1000 pixels. I hope it is clear why we take into account the width of the scrollbar and the window borders. If someone thinks that with a small height of the layouts, it is permissible not to take into account the scrollbar - then I can see that the user can always squeeze the window vertically and ... This is perhaps the most time-consuming bug to edit (if you have to work with the typesetter) - sometimes the built-in graphics and / or the markup simply does not allow to do it adequately. We have to cut pieces, scale, fit the rest of the content, etc. Horror, in short!
b) Modular grid. Or rather, not even a grid, but guides drawn to the main blocks / pictures - allow you to just draw a ruler between them and drive the resulting value into css. Not critical, but very cool makes life easier. It should be noted that layouts without guides are very rare. But in most cases, the designer costs just a few guides for the main speakers.
c) Also the known scourge of layout is the so-called “fish”, which is usually inscribed perfectly, and almost no one ever inserts examples of extreme content. And you have to guess, clarify the behavior of a block when the content is full or lacking (for example, the proportions of the picture do not correspond to what is in the layout - sprinkle, if so, how to enter, etc., or the user's first / last name will be longer than “Ivanov Ivan" well, etc.)
d) "Rubber". Do you want "rubber"? Be so kind as to attach 2 layouts for the minimum and maximum resolution so that the layout designer wonders what kind of blocks and how they will be pulled!
2. Typography.
a) headsets. There is a well-known list of "safe fonts". Most aware of it. But sometimes they mold some Myriad Pro and it raced ... You begin to explain that it is not included in the standard delivery with the OS, despite the fact that it is wildly popular. In most cases, the designer goes to meet and makes the replacement of the headset, but there are those who are starting to learn ... Say, and you do not know the @ font-face property. Yes, I know, but 1 - give me a normal quality font, so that I can convert it (all sorts of font-squirell are very nasty rendering not "typical" pins), 2- but do we not violate any copyrights? In most cases, it turns out, yes - the font is paid. In short, a lot of problems.
b) Font smoothing should always be disabled! And do not “treat” me that someone from the browsers can do something there. Well, IE can, for example, - so what? It has no idea about Photoshop "sharply", "smoothly", etc. And in fact it turns out - the manager claims one layout, and at the output of the layout we have a clumsy unreadable garbage. And who is to blame?
c) Leading. You should always put at least “auto” (usually, this means the following “standard” value after the size, but not exactly - you have to select it manually), but rather a specific value. Because css always requires both the value of the size and leading. And you won’t believe it - during my career in the window of leading values, I saw, probably, all possible values ​​in principle.
d) A non-default (100%) letter / word spacing also causes a sharp strain - what is it? Remains of the "old settings"? Whim designer? Or really conscious reception - it is necessary to specify.
e) From text effects, only a shadow is permissible, and everything that can be emulated with its ability (glow and stroke), the inner shadow and gradient are not supported via css (and even js is something else “pleasure”).
')
3. Effects and graphics.
a) Effects for layers is better not to reduce - since some effects can be implemented through CSS, and this is optimization.
b) In layers and effects, NEVER use any layer blending mode other than Normal, since it depends on the underlying layers - and this even extends to flattening and pasting using graphics. This is generally epic! How to overlay some kind of overlay, and the only way out is to reduce all the layers and clipping the element, and this, it should be noted, is sometimes akin to drawing in a vector - especially if there are any kind of glow / shadow with a large radius.
c) Use effects wisely - why put inscriptions on one color and then use the “color overlay” effect ??? Why use the outer and inner shadow at the same time? etc. Gradient - ok, negotiated separately ...
d) For embedded graphics (icons, buttons and other decor) - it is desirable to reduce the layers so that the layout designer does not rummage through the layout in search of the desired layers. And it is better to insert a smart object - the injected picture is done very quickly and, if necessary, you can make changes to it.
4. Other.
a) It would be nice to have a ready css sprite with all the design elements and guides affixed - but this is from the NF area!
b) It is advisable to accompany the mock-up explanatory note, which will be listed:
- used headsets (to be able to immediately register the main font family for the page and modify it only for individual blocks);
- blocks with the use of "manual" leading and spacing;
- color scheme - colors for the main text blocks are immediately spelled out (it does not make sense to list all used colors), link colors - by default, when hovering, visited; reference colors of gradients used, etc.
Here, perhaps, the main thing. As you can see, there is not so much and it is not too stressful for a designer to take these moments into account. But the time of the layout is reduced well by half for sure! I would be glad if someone would take it as a guide to action, and at least partially make their layouts better - and suddenly it happens to work together.
PS Illustrated examples do not spread by, you know, what reasons. If you have any questions - ask.
PPS Thanks UFO!
1. Markup. The basis of the page, the so-called layout or skeleton.
a) The most well-known and scored on edge, but no less popular from this - the width of the layout should always be less than the implied width of the display device by 20-24 pixels (correctly - at least 24 pixels). Those. If we prepare a document for a horizontal resolution of 1024 pixels, then the maximum width of the layout is 1000 pixels. I hope it is clear why we take into account the width of the scrollbar and the window borders. If someone thinks that with a small height of the layouts, it is permissible not to take into account the scrollbar - then I can see that the user can always squeeze the window vertically and ... This is perhaps the most time-consuming bug to edit (if you have to work with the typesetter) - sometimes the built-in graphics and / or the markup simply does not allow to do it adequately. We have to cut pieces, scale, fit the rest of the content, etc. Horror, in short!
b) Modular grid. Or rather, not even a grid, but guides drawn to the main blocks / pictures - allow you to just draw a ruler between them and drive the resulting value into css. Not critical, but very cool makes life easier. It should be noted that layouts without guides are very rare. But in most cases, the designer costs just a few guides for the main speakers.
c) Also the known scourge of layout is the so-called “fish”, which is usually inscribed perfectly, and almost no one ever inserts examples of extreme content. And you have to guess, clarify the behavior of a block when the content is full or lacking (for example, the proportions of the picture do not correspond to what is in the layout - sprinkle, if so, how to enter, etc., or the user's first / last name will be longer than “Ivanov Ivan" well, etc.)
d) "Rubber". Do you want "rubber"? Be so kind as to attach 2 layouts for the minimum and maximum resolution so that the layout designer wonders what kind of blocks and how they will be pulled!
2. Typography.
a) headsets. There is a well-known list of "safe fonts". Most aware of it. But sometimes they mold some Myriad Pro and it raced ... You begin to explain that it is not included in the standard delivery with the OS, despite the fact that it is wildly popular. In most cases, the designer goes to meet and makes the replacement of the headset, but there are those who are starting to learn ... Say, and you do not know the @ font-face property. Yes, I know, but 1 - give me a normal quality font, so that I can convert it (all sorts of font-squirell are very nasty rendering not "typical" pins), 2- but do we not violate any copyrights? In most cases, it turns out, yes - the font is paid. In short, a lot of problems.
b) Font smoothing should always be disabled! And do not “treat” me that someone from the browsers can do something there. Well, IE can, for example, - so what? It has no idea about Photoshop "sharply", "smoothly", etc. And in fact it turns out - the manager claims one layout, and at the output of the layout we have a clumsy unreadable garbage. And who is to blame?
c) Leading. You should always put at least “auto” (usually, this means the following “standard” value after the size, but not exactly - you have to select it manually), but rather a specific value. Because css always requires both the value of the size and leading. And you won’t believe it - during my career in the window of leading values, I saw, probably, all possible values ​​in principle.
d) A non-default (100%) letter / word spacing also causes a sharp strain - what is it? Remains of the "old settings"? Whim designer? Or really conscious reception - it is necessary to specify.
e) From text effects, only a shadow is permissible, and everything that can be emulated with its ability (glow and stroke), the inner shadow and gradient are not supported via css (and even js is something else “pleasure”).
')
3. Effects and graphics.
a) Effects for layers is better not to reduce - since some effects can be implemented through CSS, and this is optimization.
b) In layers and effects, NEVER use any layer blending mode other than Normal, since it depends on the underlying layers - and this even extends to flattening and pasting using graphics. This is generally epic! How to overlay some kind of overlay, and the only way out is to reduce all the layers and clipping the element, and this, it should be noted, is sometimes akin to drawing in a vector - especially if there are any kind of glow / shadow with a large radius.
c) Use effects wisely - why put inscriptions on one color and then use the “color overlay” effect ??? Why use the outer and inner shadow at the same time? etc. Gradient - ok, negotiated separately ...
d) For embedded graphics (icons, buttons and other decor) - it is desirable to reduce the layers so that the layout designer does not rummage through the layout in search of the desired layers. And it is better to insert a smart object - the injected picture is done very quickly and, if necessary, you can make changes to it.
4. Other.
a) It would be nice to have a ready css sprite with all the design elements and guides affixed - but this is from the NF area!
b) It is advisable to accompany the mock-up explanatory note, which will be listed:
- used headsets (to be able to immediately register the main font family for the page and modify it only for individual blocks);
- blocks with the use of "manual" leading and spacing;
- color scheme - colors for the main text blocks are immediately spelled out (it does not make sense to list all used colors), link colors - by default, when hovering, visited; reference colors of gradients used, etc.
Here, perhaps, the main thing. As you can see, there is not so much and it is not too stressful for a designer to take these moments into account. But the time of the layout is reduced well by half for sure! I would be glad if someone would take it as a guide to action, and at least partially make their layouts better - and suddenly it happens to work together.
PS Illustrated examples do not spread by, you know, what reasons. If you have any questions - ask.
PPS Thanks UFO!
Source: https://habr.com/ru/post/173271/
All Articles