WEB DESIGN: Personalization
Hello, haber reader! I work as a web designer, and today we will continue to develop the theme begun in the last article . Namely, let's talk about the interaction of two specialists, who usually work together, when creating websites. The article is devoted to designers and their some typical mistakes when working with layouts.
Here are 8 situations in which the web-designer - Dmitry, who works in Photoshop, and the coder - Vladimir, will participate. These two guys know their stuff, but they constantly have conflicts, and sometimes one of them has a strange desire to hit the other on the head with a monitor. However, we are all civilized people and cannot afford such a denouement. And so now we will understand some of the causes of the conflict of these two priceless specialists.
')
Dmitry (D) finished the site layout rendering and with a clear conscience gives it to Vladimir (B). The site is simple, but because our coder managed with him for the day. However, the result of the layout embarrassed Dmitry a little.
D: What about informers? They seem to have become smaller.
Q: I had to cut them from all sides by 1 pixel.
D :?
Q: They had no clear boundaries, I deleted the blurry pixels.
Our coder had to cut off the informers a little more than the designer had planned. As a result, extra padding appeared in the layout. But only this problem is not limited. Later it turned out that all the graphic elements of the layout, which had strictly vertical and horizontal lines, were also not sufficiently clear, which, ultimately, strained the user's eyes and caused him a headache.
All images are clickable
No matter how Dmitry tried to convince Vladimir of the illegality of his actions in relation to the informers, Dmitry would still be guilty, 100%. The maker-up should not guess at what pixels he cut elements.
Photoshop has support for vector graphics. But if, for example, to create a square, most likely its borders will be fuzzy. This is due to the fact that when specifying the size of a square, the mouse does not always fall exactly between the pixels, in this case the border of the primitive touches the adjacent pixel, making it translucent.
It is better to correct these inaccuracies right away: you can multiply the scale and precisely specify the border of the primitive, without touching neighboring pixels, or you can use a square eraser, but for this you will have to rasterize the primitive, which is undesirable in most cases. In general, the problem is solved easily and quickly, the main thing about it is not to forget. The same applies to icons and thin stripes. Wherever there are vertical and horizontal boundaries / lines, it is necessary to control their maximum sharpness.
Now Dmitry monitors the clarity of his layouts and no longer causes migraines among users and Vladimir, but this was only the first simple test. New order, new layout.
Q: A day should be in time.
3 days have passed ...
D: Vladimir, do you have problems?
Q: The layout has such a number of gradients with shadows that I needed a couple of sleepless nights and a bit of RedBull, but in the end I managed.
D: Ok, the order failed, so put yourself in order, we have a new one. These two extra days turned out to be extremely important for the customer, he did not want to work with us further.
Q: ...
D: Vladimir?
Well, again this awkwardness. The customer liked the layout and even approved it, but the layout work took much longer than expected. Why? On the one hand, an incorrect estimate of the scope of work by the designer, on the other hand, the layout is overloaded with elements of pseudo 3D.
Shadows - they have no clear boundaries, it expands objects, and in some cases they add the need to use transparency. Sometimes the shadows can intersect with neighboring objects, and this is a real hemorrhoids for the layout designer. Consider: do they really carry an informational or functional idea? Not sure? Then take them away. Yes, now the shadows can be implemented by means of CSS, but they, most likely, will not be displayed everywhere as intended by the designer.
Gradients are not such a big problem compared to shadows. Sometimes they very well emphasize the smoothness of the style, give the layout peace of mind. And sometimes they clutter up the graphics or, if the gradient is insignificant, add extra code. And if we are talking about a nonlinear gradient, in this case, you should be 200% sure of the need to use it.
Dmitry and Vladimir are ready to work on a new project. Yes, one order is lost, perhaps even a part of its reputation has been lost, but they are resolute and persistent. Reputation can be restored if you try. Highly. The layout is ready, approved, clarity is in order, pseudo 3D in moderation, nothing foreshadowed trouble:
Q: What color is this text?
D: In the sense of "what", look in the attributes.
Q: I am looking. In the attributes it is black, but the text is clearly lighter.
D: Use the pipette.
Q: Can you tell exactly what number this color has?
D: For a second, I'll see now ...
Q: And?
D: Just stick it with a dropper.
Q: ...
There are situations where neither the coder, nor even the designer himself, can accurately determine the color of the text in the layout. How is that even possible? Easy. When selecting colors for text, designers sometimes use not the color attributes, but the transparency of the layer. It is easier and faster. There is a background, for example, red. It should be text, light, but not white. The designer sets white in the text attributes and then simply plays with the layer's transparency, in which case he will never miss the tonality. But to find out the true value of the resulting color will be impossible. Very bad designer habit.
It's very simple: never use transparency for the text for nothing. Pick up the color immediately without transparency, in the future protect yourself from problems.
If you are still in such an unpleasant situation, the only quick way is to give the text a giant size and add fat to make it more accurate to use a pipette on it. It remains to hope that the text has not been rasterized.
Of course, it is not necessary to completely abandon transparency. For example, a floating horizontal menu with little transparency, visually facilitates the layout and does not disorient the user.
This is how the experience is gained, but the relationship between the designer and the coder is not getting any better. You need to at least superficially understand what and how your colleague does, otherwise there will be conflicts. For example, such as this:
Q: Did you use the overlay effect in this layer?
D: Yes, problems?
Q: Large. I will not impose this until you remove the interaction of the layers.
D: You can remove it yourself.
Q: ...
Never use layer blending effects in layouts. Never. These effects work only in Photoshop. The designer must learn this rule once and for all.
If the use of blending effects is really necessary, you need to transform the layers in such a way that everything would be in the layout without interaction of the layers, otherwise it would be useless to impose. Perhaps, for this, the designer will need to merge the result of the interaction into a separate image and reuse it, which, of course, is inconvenient, but leaving the effects for the layout designer is unacceptable.
No matter what, our couple continues to work. And it does not matter that Vladimir is already naturally afraid of every new layout of Dmitry, orders for the approach. The new project did not need an extensive schedule, there is simply nowhere to be mistaken - so our layout designer thought.
Q: Dmitry, I don’t understand why it was such a mockery of this text.
D: We have almost no graphics, everything keeps on the text, I used it as much as possible.
Q: You have increased its height, reduced width, changed the character spacing - is that some kind of ambitious plan?
D: You just need to learn how to typeset the text.
Q: ...
Applying attributes to the text and changing its properties takes place only if such text is subsequently rasterized and used, for example, in some slides. But now, even in slides, they try not to rasterize the text. There are many fonts that satisfy the needs of any type designer. Do not make life difficult for designers, it is not worth it.
If the text is not rasterized, it should not have a change in the properties, with it, we are talking about the types of style. If you have conceived to use somewhere bold typeface, do not add boldness to the functions of Photoshop. Each adequate font has several ready-made outlines that are specially adapted to a specific font - this is more than enough.
After all that has happened, Vladimir seriously begins to think about the possibility of working with another designer, and our Dmitry, in turn, would be happy to work with a coder who wouldn’t scream on any occasion, but would just do his job. The only problem is that Dmitry will never find such a typesetter, not because there are none, but because our designer does not understand even the basics of typesetting, and this is sad, both for Dmitry and Vladimir.
D: When I gave you the layout, there were 3 key colors in it, and the orange now does not correspond to what was in the layout.
Q: What code corresponded to your orange?
D: Can you not just use the pipette again?
Q: I can.
D: Then what's the problem?
Q: Your mockup has more orange than you think ...
If you are a designer, then all the work with color falls entirely on you. Remember, every inaccuracy in your layout, subsequently, will surely make itself known at the most inopportune moment. What is obvious to the designer is not at all obvious to the layout designer - always remember this.
Dmitry used orange as one of the key colors in the layout. But he was too lazy to copy the color code for a new orange item every time. As a result, Vladimir receives a model with a full set of orange flowers that do not coincide with each other in the code. What to do? Most likely, the coder will take the first orange code and use it everywhere, and most likely it will not go unnoticed.
A designer has many ways to make a coder hate himself. Lots of. But we consider only a few. However, they will be enough to achieve the goal. Conflict can happen even on level ground. Perfect layout made without any complaints. But Vladimir feels there is a catch somewhere.
D: Are you kidding me?
Q: I finished the layout, why should I joke?
D: Yes, there is not enough of a good third of the elements from the layout!
Q: It can not be, I did everything on it.
D: You're kidding, open the layout and find 10 differences with what you show me!
Q: I do not see any differences ...
D: Very funny.
Q: ...
The situation is incredible, but absolutely realistic. Guilty, in part, both, to identify someone specifically impossible. Until these poor fellows finally reach it, it may take a long time, and many words can be said, not the most pleasant ones. Absolutely unpleasant.
If anyone has not figured it out, the problem lies in the different brightness settings of the monitors. The designer worked on the layout on the monitor with a lower brightness, compared with the layout monitors. Dmitry worked on the site, mainly in the light scale: a lot of white, and some elements are light gray. He perfectly distinguished them on his monitor, but on a new monitor with high brightness and LED backlighting, these elements are simply not visible.
This is actually the real situation. The solution to the banality is simple: make sure that you and your colleague monitors have about the same brightness / contrast settings. Calibrate your monitors by one calibration test, and the world will immediately become kinder.
After the following situation, our couple used a lot of not very censorship expressions, so I can’t give them below. The new project turned out to be very capacious:
It does not matter.
Run
Ps. Thank you for your attention, I hope this article will help you not to get into any of the above situations, and I also wish mutual understanding to designers and layout designers, because the quality of our Internet environment depends on them, to no small extent.
All images were drawn specifically for the article and are clickable (for viewing in its original size).
Here are 8 situations in which the web-designer - Dmitry, who works in Photoshop, and the coder - Vladimir, will participate. These two guys know their stuff, but they constantly have conflicts, and sometimes one of them has a strange desire to hit the other on the head with a monitor. However, we are all civilized people and cannot afford such a denouement. And so now we will understand some of the causes of the conflict of these two priceless specialists.
')
1. Clarity
Dmitry (D) finished the site layout rendering and with a clear conscience gives it to Vladimir (B). The site is simple, but because our coder managed with him for the day. However, the result of the layout embarrassed Dmitry a little.
D: What about informers? They seem to have become smaller.
Q: I had to cut them from all sides by 1 pixel.
D :?
Q: They had no clear boundaries, I deleted the blurry pixels.
Our coder had to cut off the informers a little more than the designer had planned. As a result, extra padding appeared in the layout. But only this problem is not limited. Later it turned out that all the graphic elements of the layout, which had strictly vertical and horizontal lines, were also not sufficiently clear, which, ultimately, strained the user's eyes and caused him a headache.
All images are clickable
Who is guilty?
No matter how Dmitry tried to convince Vladimir of the illegality of his actions in relation to the informers, Dmitry would still be guilty, 100%. The maker-up should not guess at what pixels he cut elements.
What to do?
Photoshop has support for vector graphics. But if, for example, to create a square, most likely its borders will be fuzzy. This is due to the fact that when specifying the size of a square, the mouse does not always fall exactly between the pixels, in this case the border of the primitive touches the adjacent pixel, making it translucent.
It is better to correct these inaccuracies right away: you can multiply the scale and precisely specify the border of the primitive, without touching neighboring pixels, or you can use a square eraser, but for this you will have to rasterize the primitive, which is undesirable in most cases. In general, the problem is solved easily and quickly, the main thing about it is not to forget. The same applies to icons and thin stripes. Wherever there are vertical and horizontal boundaries / lines, it is necessary to control their maximum sharpness.
2. Pseudo 3D
Now Dmitry monitors the clarity of his layouts and no longer causes migraines among users and Vladimir, but this was only the first simple test. New order, new layout.
Q: A day should be in time.
3 days have passed ...
D: Vladimir, do you have problems?
Q: The layout has such a number of gradients with shadows that I needed a couple of sleepless nights and a bit of RedBull, but in the end I managed.
D: Ok, the order failed, so put yourself in order, we have a new one. These two extra days turned out to be extremely important for the customer, he did not want to work with us further.
Q: ...
D: Vladimir?
Who is guilty?
Well, again this awkwardness. The customer liked the layout and even approved it, but the layout work took much longer than expected. Why? On the one hand, an incorrect estimate of the scope of work by the designer, on the other hand, the layout is overloaded with elements of pseudo 3D.
What to do?
Shadows - they have no clear boundaries, it expands objects, and in some cases they add the need to use transparency. Sometimes the shadows can intersect with neighboring objects, and this is a real hemorrhoids for the layout designer. Consider: do they really carry an informational or functional idea? Not sure? Then take them away. Yes, now the shadows can be implemented by means of CSS, but they, most likely, will not be displayed everywhere as intended by the designer.
Gradients are not such a big problem compared to shadows. Sometimes they very well emphasize the smoothness of the style, give the layout peace of mind. And sometimes they clutter up the graphics or, if the gradient is insignificant, add extra code. And if we are talking about a nonlinear gradient, in this case, you should be 200% sure of the need to use it.
3. Transparency
Dmitry and Vladimir are ready to work on a new project. Yes, one order is lost, perhaps even a part of its reputation has been lost, but they are resolute and persistent. Reputation can be restored if you try. Highly. The layout is ready, approved, clarity is in order, pseudo 3D in moderation, nothing foreshadowed trouble:
Q: What color is this text?
D: In the sense of "what", look in the attributes.
Q: I am looking. In the attributes it is black, but the text is clearly lighter.
D: Use the pipette.
Q: Can you tell exactly what number this color has?
D: For a second, I'll see now ...
Q: And?
D: Just stick it with a dropper.
Q: ...
Who is guilty?
There are situations where neither the coder, nor even the designer himself, can accurately determine the color of the text in the layout. How is that even possible? Easy. When selecting colors for text, designers sometimes use not the color attributes, but the transparency of the layer. It is easier and faster. There is a background, for example, red. It should be text, light, but not white. The designer sets white in the text attributes and then simply plays with the layer's transparency, in which case he will never miss the tonality. But to find out the true value of the resulting color will be impossible. Very bad designer habit.
What to do?
It's very simple: never use transparency for the text for nothing. Pick up the color immediately without transparency, in the future protect yourself from problems.
If you are still in such an unpleasant situation, the only quick way is to give the text a giant size and add fat to make it more accurate to use a pipette on it. It remains to hope that the text has not been rasterized.
Of course, it is not necessary to completely abandon transparency. For example, a floating horizontal menu with little transparency, visually facilitates the layout and does not disorient the user.
4. Overlay Effects
This is how the experience is gained, but the relationship between the designer and the coder is not getting any better. You need to at least superficially understand what and how your colleague does, otherwise there will be conflicts. For example, such as this:
Q: Did you use the overlay effect in this layer?
D: Yes, problems?
Q: Large. I will not impose this until you remove the interaction of the layers.
D: You can remove it yourself.
Q: ...
Who is guilty?
Never use layer blending effects in layouts. Never. These effects work only in Photoshop. The designer must learn this rule once and for all.
What to do?
If the use of blending effects is really necessary, you need to transform the layers in such a way that everything would be in the layout without interaction of the layers, otherwise it would be useless to impose. Perhaps, for this, the designer will need to merge the result of the interaction into a separate image and reuse it, which, of course, is inconvenient, but leaving the effects for the layout designer is unacceptable.
5. Text Attributes
No matter what, our couple continues to work. And it does not matter that Vladimir is already naturally afraid of every new layout of Dmitry, orders for the approach. The new project did not need an extensive schedule, there is simply nowhere to be mistaken - so our layout designer thought.
Q: Dmitry, I don’t understand why it was such a mockery of this text.
D: We have almost no graphics, everything keeps on the text, I used it as much as possible.
Q: You have increased its height, reduced width, changed the character spacing - is that some kind of ambitious plan?
D: You just need to learn how to typeset the text.
Q: ...
Who is guilty?
Applying attributes to the text and changing its properties takes place only if such text is subsequently rasterized and used, for example, in some slides. But now, even in slides, they try not to rasterize the text. There are many fonts that satisfy the needs of any type designer. Do not make life difficult for designers, it is not worth it.
What to do?
If the text is not rasterized, it should not have a change in the properties, with it, we are talking about the types of style. If you have conceived to use somewhere bold typeface, do not add boldness to the functions of Photoshop. Each adequate font has several ready-made outlines that are specially adapted to a specific font - this is more than enough.
6. Color range
After all that has happened, Vladimir seriously begins to think about the possibility of working with another designer, and our Dmitry, in turn, would be happy to work with a coder who wouldn’t scream on any occasion, but would just do his job. The only problem is that Dmitry will never find such a typesetter, not because there are none, but because our designer does not understand even the basics of typesetting, and this is sad, both for Dmitry and Vladimir.
D: When I gave you the layout, there were 3 key colors in it, and the orange now does not correspond to what was in the layout.
Q: What code corresponded to your orange?
D: Can you not just use the pipette again?
Q: I can.
D: Then what's the problem?
Q: Your mockup has more orange than you think ...
Who is guilty?
If you are a designer, then all the work with color falls entirely on you. Remember, every inaccuracy in your layout, subsequently, will surely make itself known at the most inopportune moment. What is obvious to the designer is not at all obvious to the layout designer - always remember this.
What to do?
Dmitry used orange as one of the key colors in the layout. But he was too lazy to copy the color code for a new orange item every time. As a result, Vladimir receives a model with a full set of orange flowers that do not coincide with each other in the code. What to do? Most likely, the coder will take the first orange code and use it everywhere, and most likely it will not go unnoticed.
7. Brightness
A designer has many ways to make a coder hate himself. Lots of. But we consider only a few. However, they will be enough to achieve the goal. Conflict can happen even on level ground. Perfect layout made without any complaints. But Vladimir feels there is a catch somewhere.
D: Are you kidding me?
Q: I finished the layout, why should I joke?
D: Yes, there is not enough of a good third of the elements from the layout!
Q: It can not be, I did everything on it.
D: You're kidding, open the layout and find 10 differences with what you show me!
Q: I do not see any differences ...
D: Very funny.
Q: ...
Who is guilty?
The situation is incredible, but absolutely realistic. Guilty, in part, both, to identify someone specifically impossible. Until these poor fellows finally reach it, it may take a long time, and many words can be said, not the most pleasant ones. Absolutely unpleasant.
What to do?
If anyone has not figured it out, the problem lies in the different brightness settings of the monitors. The designer worked on the layout on the monitor with a lower brightness, compared with the layout monitors. Dmitry worked on the site, mainly in the light scale: a lot of white, and some elements are light gray. He perfectly distinguished them on his monitor, but on a new monitor with high brightness and LED backlighting, these elements are simply not visible.
This is actually the real situation. The solution to the banality is simple: make sure that you and your colleague monitors have about the same brightness / contrast settings. Calibrate your monitors by one calibration test, and the world will immediately become kinder.
8. FATAL ERROR!
After the following situation, our couple used a lot of not very censorship expressions, so I can’t give them below. The new project turned out to be very capacious:
Who is guilty?
It does not matter.
What to do?
Run
Ps. Thank you for your attention, I hope this article will help you not to get into any of the above situations, and I also wish mutual understanding to designers and layout designers, because the quality of our Internet environment depends on them, to no small extent.
All images were drawn specifically for the article and are clickable (for viewing in its original size).
Source: https://habr.com/ru/post/175083/
All Articles