18 rules of the ideal psd-layout - a useful check-list for designers

General principle - Do not make a marriage.
Do not take a marriage. Do not marry.

We rarely take projects with already implemented design into development, but this happens. When the layouts are created inside the studio, at any problem stage of the layout, the developer can check with the project manager or the designer himself, what was meant and how it should look. But in a situation where the customer has already given someone money for the layouts and then came to you for development, it will not work: communication between the designer and the developer becomes impossible, and there is nobody to correct the flaws in the layouts. From this article you will find out where the grief-designers are working and what is worth checking out before handing out layouts for layout.

"Almost" on the grid

The grid is designed to simplify layout and locate key elements. In some cases, designers intentionally move away from the 12-column grid to create an unusual design.
But if you still adhere to the grid when creating the layout - please be sure that this is true. Imposers now and again complain that in the design from page to page the design can be very different: identical blocks appear to the left, then to the right, icons of different sizes, and the buttons do not look like each other.
creativity slider ".

Copier of the layers

In Photoshop, it is convenient to duplicate layers: copied along with the style and all settings and dragged to the desired location. In the creative impulse, some designers do not bother to give adequate names to the layers and order them among themselves, and after that they can no longer understand to which block which layer belongs and where to find it at all on the layout.
18 rules of the ideal psd-layout - a useful check-list for designers
When submitting to layout make sure that your layers are named uniquely and distributed to folders based on the layout logic. And do not forget to remove unnecessary or at least glue the layers with the effects among themselves (why not always so be done - below).

Incomprehensible indentation

In an ideal layout, all indents and sizes of the blocks must be unified. There's one pixel more, then - one less, and then the typing tool and then choose how to correctly. Perhaps, this will not affect the appearance of the page, although customers are different: someone each extra pixel catches your eye. And maybe the tester will impose a ready layout on the source layout via the plugin Pixel Perfect and will write a list of a million bugs, finding such discrepancies an error. Make sure that the indents of the content area from the header and basement are the same on all your pages.
Objects also conceal hidden dangers - sometimes when creating shapes in Photoshop, even if the designer used a grid, there are such errors:

The layout is unlikely to take into account these subtleties and, most likely, cut the size of the object so that it fits into the grid exactly. Therefore, the rule - ALL objects must have integer sizes, otherwise the result can be very different from the original layout.

Colors "on the eye"

In Photoshop there is a convenient tool - a "pipette", and designers like to use it - poked, and do not remember the color number. But if you poke the edge of the element, the color may be distorted by the background tone. Another danger - if the radius of the pipette is more than 1 pixel, Photoshop will show the average value between adjacent colors.
Andrew, the developer
"It is especially annoying when the designer defined colors by eye, and then you sit with a set of different gray ones and do not know which one to use. This is due to the fact that there is no trivial color map of the project, which the designer himself could rely on when working on internal pages, and the layout designer. "
An unspoken rule does not recommend using black under number # 000000 - it is too contrasting against a white background. Look at the difference:

Another design of designers, which irritates layout designers - to make the color lighter (including text), the designer simply increases the transparency of the layer. The coder will have to use a pipette, and again, the probability of error is high (especially in cases with gradient fills in the elements).

The rasterized elements are



If the designer has been making layouts for printing in the printing house for a while, he can sin to rasterize the text, but for a make-up artist this becomes a serious problem: it's impossible to copy this text - you can just re-type it manually. And this is the lesser of the problems: whence the typographer to take the outline, the size and color of the rasterized text - that's the question.

Shadows and gradients

When making the layout, it is more convenient for the developer to look at the parameters of the shadow or gradient than poking the pipette in different areas of this zone when the layer is rasterized. This speeds up the layout and affects the result: the chances of making a mistake with the color transition are less.
If a dark background (for example, a hover) is superimposed over the image, it can not be glued to the image itself - it must be a separate translucent or gradient layer so that you can look into its parameters.

Overlay effects

When superimposed, the content of the lower layers is taken into account, and it is not easy to transmit such effects when making a layout, so the layouts strongly dislike them. And not for nothing: not every version of the browser is ready to display them as the designer intended.

Overlay effects in different browsers

Problems with the font


The fractional dimensions are

Usually this happens by chance, if to the entire block used, for example, the transformation tool - the font increased /decreased in proportion to the picture. The problem is that browsers do not take into account fractional values ​​and simply round them up to the nearest.

A lot of fonts

On the whole project it is desirable to use no more than 3 traces - this can be fonts of one headset (Light, Regular and Bold) or different. This is not a strict restriction - it all depends on the tasks of the project, but there is a certain meaning in it: the fewer variations of the font, the higher the focus on the text of the reader. It is considered a rule, together with the layout, to transfer the headsets that were used there, or at least to give links to Google Fonts.
Andrew, the developer:
"Now most browsers have moved away from the fonts in the formats TTF, OTF - and if the developer will use them in the old fashioned way, not everywhere they will be displayed correctly. We in the studio have long switched to the WOFF or WOFF2 format, so that there would be no problems. Translate the font to it can be here or here ".

Use of non-standard fonts

Non-standard fonts and their outlines should be checked for a web version. The fact is that such fonts affect the speed of loading the page - to display them the browser needs to download them first, and this will take some time. In a good way, the weight of a non-standard font should not exceed 1 megabyte. And it's better that there is only one such font on the page. Well, do not forget that fonts cost money. Sometimes - large. We had cases where the font was specially developed for a specific project - that's another problem.

Typical typography

It often happens that the line spacing and indent between paragraphs do not match inside the blocks on the layout and are different from page to page - make sure they are the same. Do not separate the headers from paragraphs in separate text blocks to manually increase the margin between them - use the leading and paragraph settings.
Evgeny, developer:
"If possible, do not use complex effects on typical text pages, if it is assumed that the customer himself can change them from the admin panel. Most likely, he will succeed in "wrapping" such elements in a div. Sometimes this is solved by snippets or other methods, but still causes complexity when filling with content. "
It is necessary to show on the layout the design of the paragraph, paragraph, headings 1-4 of the level (h? h? h? h4), bulleted and numbered lists. And it's even better to put it all together in a separate document - a front-end or UI-kit. You can also add link behavior here (active, when hovered, visited).

UI-kit for the project " The Spassky Tower "

Incomprehensible animation

Elements like buttons or drop-down lists have several states, but often designers draw only one of them. Due to this, for example, ungentlely popups are obtained, which, for lack of a sample, the make-up artist made himself.
Verify that the objects involved in animations and interactive interactions are divided in layers. For example: the view when hovering on an object - one layer, the view when clicking on it - another, the kind in statics - the third. The same rules work for banners.
It is desirable to mark the layers with animations and interactives with colors and accompany them with comments. It is also very desirable in the comments to prescribe how this should work and give examples.
Eugene, art director:
"Photoshop Photoshop, but now there are so many progressive tools inside of which to each element immediately created the right lines of code - the coder is not difficult to turn the layout into a page. And in general, of course, it all depends on the coder himself - if he's the norm, then the result will be the norms, in whatever editor this is drawn :) "

Icons in PNG

In the project, depending on the tasks, the icons are different: sometimes the designer creates a unique set with his own hand, sometimes it's easier and faster to find the one from a million options somewhere here and modify it if necessary.
But it happens that designers use icons in PNG format - in it when scaling on screens with higher resolution (and now even on mobile phones the density of pixels is frenzied), the edges of the image blur. Hence the rule: all icons should be in SVG format - so they remain clear, no matter what their size.
Some layout designers prefer that the icons be collected in one place - in a separate folder - and that their names are identical to the layers in the layout. Another convenient way is for SVG images to be embedded in the main file, since it's so much easier and faster to cut out svg from the layout than to look for the desired icon in another folder.


In the creative impulse, it's hard to see to it that everything is done right. There, the layer was copied and left without a name, where the object climbed a little behind the edge of the column, then the font accidentally "zasirnilsya" built-in photoshop settings, instead of selecting the desired shape - who does not happen? And with someone who has our check-list!

Check-list for preparing a Photoshop layout for transfer to layout

If the designer used the grid, all the blocks on the layout are located strictly on it.
All objects on the layout have integer sizes.
Duplicate items on the pages are always SINGLE.
All layers are grouped by folders and distributed according to the logic of the layout. Superfluous deleted, similar - combined.
Indents from elements are unified.
Colors on the layout coincide with the main colors of the project.
Text as text (not rasterized).
The effects of blending, shadows and gradients are not rasterized.
The use of imposition effects is advisable.
Font sizes are not large.
The fonts used in the project are collected in a separate folder.
The non-standard fonts and their outlines are checked for a web version. The weight of one non-standard font does not exceed 1 MB.
Line spacing and indentation in the text are unified.
All icons in SVG format are collected in one place. The names of icons are the same and understandable, coincide with the name of identical layers on the layout.
For all active elements, there are layers with hoverers.
Objects participating in animations /interactive interactions are layered. For banners - the same.
Comments and examples are provided for animations and interactive interactions, as it should look.
For the layout, a guide is created with a palette of project colors and text styles.
+ 0 -

Add comment