Collected Website Psd Layout Requirements
Hi, frontend developers!
When making a site with a psd layout, we are constantly faced with the problem of implementing some of the elements that the designer has drawn. Be it a button, or some tricky gradient. We have to either dodge, wasting our working time on it, or ask the designer to redo it or at least to score and do more or less something similar.
If our customer is terribly attentive, then often making the last decision, we have problems of inconsistency of what was drafted in the end, with what the designer drew. All these factors impose a dark spot on us - the developers, while the designer received his award and already drinks cocktails, they throw tomatoes at us and accuse us of incompetence, although the problem is far from us, but that the designer is sometimes not even familiar with with the basics of layout and does not know that some things can not be drawn.
')
I gained a little weight in the brain and status in the company, at some point I realized that I could not go on like this and started collecting my requirements in psd layouts.
After some time, I was able to evaluate the entire profit from the introduction of these standards and requirements:
- the designer becomes more organized, he remembers that it is necessary to follow the rules and as a result, psd layouts start to weigh less, they lack unused layers, the structure becomes clear not only to the coder, but also to the designer himself. In the future, when he needs to finish drawing something, he doesn’t have to search for layers in the whole psd file, and he goes to the folder in the block and immediately gets to work. Also in this case, it is possible to create a folder with the previous version of the block right in the file.
- The coder who receives the “correct” layout can more accurately assess the deadline, since he understands that he will not have to go anywhere else and ask for something to be redone, you can also add here the shortening of deadlines. As in the case of compliance with the rules, it becomes possible to use things like csshat.com + lesshat.com
- the output result is more identical to what is drawn, since everything that the designer has “done” can be implemented in the browser.
Bottom line: the designer is happy (nothing needs to be redone), the layout maker is happy (everything is well put together and the night is spent on additional work to keep up and the nerves are ok), the customer (the laid out layout corresponds to the approved layout), in the end everything remains in the profit from the introduction of these the rules.
Below is a list of requirements:
1) Compliance with the grid in the layout, if you know what it is and how to “prepare” it.
What for? o_o:
- purely aesthetic pleasure
- the ability to quickly assemble the page frame and position elements on
page in accordance with the presented layout to make the layout more honest with respect to what you have drawn (a).
2) If a gradient is applied to a layer, use the normal blend mode (blend Mode: normal) and its real colors.
There should be no translucent gradients and complex blend modes like 'multiply, screen, overlay, etc. ".
Bad: joxi.ru/Md6l32D
Good joxi.ru/M2w9Nwe and another example joxi.ru/11ndBHq
3) It is undesirable to use a “layer on a layer” to create different effects, such as a gradient, the layer should be one.
Example: joxi.ru/AGx4CQy
4) No gradient borders (border, stroke).
5) The use of complex blend modes (blend mode) applies to any layer properties (such as inner shadow, drop shadow, etc.).
6) MUST attach to the layout the fonts that were used in the layout, in the format of TTF, OTF
7) If possible, do not use more than 2 non-standard fonts in the layout, their number greatly affects the rendering of the page in the browser, which negatively affects the user's attitude to the site.
8) Be sure to have a separate layout, which presents the design of standard typography elements of a web page (headings, paragraphs, tables, lists, blocks of quotation) joxi.ru/MKnCZQM
9) If you draw a typical button, link, element, which has a state of "pointing", pressing - do not make us think out how this should work. If there is a link, show its color when hovering; if there is a button, show its appearance when hovering or clicking, as well as when its state is “inactive”. This applies to any such elements, arrows in the gallery, etc. etc. joxi.ru/ZSmaLye
10) Each block should be in its own folder and has the correct human name, so as not to collect parts of the block throughout the layout. joxi.ru/Agsfo3L
11) If there are hidden layers or folders that show some parts of the site (modal windows, drop-down panels, etc.) - you must select the folder / layer - in color so as not to miss it, it must also have a name that is close within the meaning of its functionality. joxi.ru/G1h9LbN
Conclusion: Compliance with these recommendations will help to implement the project creation stage - layout, as accurate as possible to the created layout and help avoid:
- discrepancy between the layout and the imposed version;
- problems with the approval of the layout;
- problems with cross-browser compatibility and layout in general.
Thank.
When making a site with a psd layout, we are constantly faced with the problem of implementing some of the elements that the designer has drawn. Be it a button, or some tricky gradient. We have to either dodge, wasting our working time on it, or ask the designer to redo it or at least to score and do more or less something similar.
If our customer is terribly attentive, then often making the last decision, we have problems of inconsistency of what was drafted in the end, with what the designer drew. All these factors impose a dark spot on us - the developers, while the designer received his award and already drinks cocktails, they throw tomatoes at us and accuse us of incompetence, although the problem is far from us, but that the designer is sometimes not even familiar with with the basics of layout and does not know that some things can not be drawn.
')
I gained a little weight in the brain and status in the company, at some point I realized that I could not go on like this and started collecting my requirements in psd layouts.
After some time, I was able to evaluate the entire profit from the introduction of these standards and requirements:
- the designer becomes more organized, he remembers that it is necessary to follow the rules and as a result, psd layouts start to weigh less, they lack unused layers, the structure becomes clear not only to the coder, but also to the designer himself. In the future, when he needs to finish drawing something, he doesn’t have to search for layers in the whole psd file, and he goes to the folder in the block and immediately gets to work. Also in this case, it is possible to create a folder with the previous version of the block right in the file.
- The coder who receives the “correct” layout can more accurately assess the deadline, since he understands that he will not have to go anywhere else and ask for something to be redone, you can also add here the shortening of deadlines. As in the case of compliance with the rules, it becomes possible to use things like csshat.com + lesshat.com
- the output result is more identical to what is drawn, since everything that the designer has “done” can be implemented in the browser.
Bottom line: the designer is happy (nothing needs to be redone), the layout maker is happy (everything is well put together and the night is spent on additional work to keep up and the nerves are ok), the customer (the laid out layout corresponds to the approved layout), in the end everything remains in the profit from the introduction of these the rules.
Below is a list of requirements:
1) Compliance with the grid in the layout, if you know what it is and how to “prepare” it.
What for? o_o:
- purely aesthetic pleasure
- the ability to quickly assemble the page frame and position elements on
page in accordance with the presented layout to make the layout more honest with respect to what you have drawn (a).
2) If a gradient is applied to a layer, use the normal blend mode (blend Mode: normal) and its real colors.
There should be no translucent gradients and complex blend modes like 'multiply, screen, overlay, etc. ".
Bad: joxi.ru/Md6l32D
Good joxi.ru/M2w9Nwe and another example joxi.ru/11ndBHq
3) It is undesirable to use a “layer on a layer” to create different effects, such as a gradient, the layer should be one.
Example: joxi.ru/AGx4CQy
4) No gradient borders (border, stroke).
5) The use of complex blend modes (blend mode) applies to any layer properties (such as inner shadow, drop shadow, etc.).
6) MUST attach to the layout the fonts that were used in the layout, in the format of TTF, OTF
7) If possible, do not use more than 2 non-standard fonts in the layout, their number greatly affects the rendering of the page in the browser, which negatively affects the user's attitude to the site.
8) Be sure to have a separate layout, which presents the design of standard typography elements of a web page (headings, paragraphs, tables, lists, blocks of quotation) joxi.ru/MKnCZQM
9) If you draw a typical button, link, element, which has a state of "pointing", pressing - do not make us think out how this should work. If there is a link, show its color when hovering; if there is a button, show its appearance when hovering or clicking, as well as when its state is “inactive”. This applies to any such elements, arrows in the gallery, etc. etc. joxi.ru/ZSmaLye
10) Each block should be in its own folder and has the correct human name, so as not to collect parts of the block throughout the layout. joxi.ru/Agsfo3L
11) If there are hidden layers or folders that show some parts of the site (modal windows, drop-down panels, etc.) - you must select the folder / layer - in color so as not to miss it, it must also have a name that is close within the meaning of its functionality. joxi.ru/G1h9LbN
Conclusion: Compliance with these recommendations will help to implement the project creation stage - layout, as accurate as possible to the created layout and help avoid:
- discrepancy between the layout and the imposed version;
- problems with the approval of the layout;
- problems with cross-browser compatibility and layout in general.
Thank.
Source: https://habr.com/ru/post/197588/
All Articles