To prepare a layout, checklist. What else?

Hello, friend.

For me the comfort of the designer. I am an aspiring web designer.

<teg>WE'll SEE </teg>

You know sometimes it happens that working in a different field, looking for representatives of any profession and think, " what the hell? Well, kaaaaak in such an interesting niche such poor quality?" But the post is not about that :)

I read all sorts of articles, watching different videos, I wanted to understand how to get the most you can make life easier for the coder, to make such conditions that there was a minimum of edits and flaws. The first layout I've drawn without a grid, a rectangle, and then long assured the designer that he is a nerd :))

I want to list a check sheet your how I prepare the layout for a coder. What have I forgotten? Anything to add/improve/what to pay attention? What infuriates you the designers? What infuriates you about the design? Did you if the designer knew the basics of CSS and HTML in speed of development?


1) Create a project folder
2) Indentation observe the same everywhere, paint on the grid. It concerns the content.
3) I draw 3 types of layouts. Organize them in folders: "PC, to tablet, to smartphone." Fill in each appropriate folder layouts.
4) Make a file in a separate PSD, which shows all versions of the headers and text color of the document and text, line spacing, buttons, forms (writing looks like validation and show immediately in the file example, write and show how the button looks like when pressed/hover/clicking, if necessary, throw off the link to a site with some animations that could be used, if there are any popup I also draw and write a review in which part of the screen they should come up whether you need background fading, etc.)
5) the Fonts used in the layout I put in the fonts folder, archives
6) Elements that require definition I do SVG in, the rest in Jpg.
7) All SVG images and I also pour in a single folder (I don't quite understand what it means "including options for retina" in one of the replies to a similar post)
8) Discuss the effects : "here is this unit needs to swim smoothly so that, for example as here" (give a link to the website.)
9) the layout, I adhere to the following rules:
- remove unnecessary guides
- remove unnecessary hidden items
- crushed by blocks: the header, footer, content : block 1, block 2, block 3, window 1, window 2, application form etc. giving Names in Russian. Better in English?
- observe the hierarchy of layers.

What have I forgotten? Is there feyspalmy listed? What is not considered? As best as possible? What are life hacks?

June 10th 19 at 15:11
3 answers
June 10th 19 at 15:13
Lord let such designers fruitful and multiply!

And now, in fact.

1) give better Names to English.
2) do Not abuse the number of fonts - will be enough two or three (the Font for text, font for titles, microdelay font for signing under the logo or other decorations)
3) a little bit to be aware of the fact that you can mark up and what is not - for example the color of the header gradient, or picture - can be implemented in css, but this does work except in Chrome.
4) do Not crop images making them round - use a mask overlapping or something like this, in the layout there is no circles, only rectangles and a square as special rectangle, but visually to make the picture round and say with the possible border styles - the source of the pictures will be square or rectangle.
5) Using the shade to make them separate from the images.
6) form Elements to draw without fanaticism and try to leave them for who they are rendered by the browser in regards to checkboxes/radio buttons drop-down lists, they can be styled, but still these are crutches and hemorrhagic, that already lit, and then burns bekendste, as they to realize all this through the ass necessary.
7) Before we can draw some supermega cool beautiful thing, to ask the coder (if possible) he will be able to implement it.
Good answer, brother, PN.

I'm a little Posada?

paragraph 4) the first layout, but did them only 2, I was taking pictures it is round, without masks :D
item 5) please explain here e.g. I have a collage of 5 photos, one over the other, and from each example falls a faint shadow. How to be here? If the shadow is not drawn separately, but use the layer property. She singled out? How?
item 6) What do you think about this? Knock it out. This is my second form (the first was just trash), and the second I drew after 100 articles of all sorts of Babich, Gorbunov and other dudes. I think my form is great. She's nice, clear, submit button works only when filling all, if you for example forget 1 digit or omit the year field is highlighted with a pleasant orange. In the mobile version of the right-hand column respectively fall down and 1 column. The date I made the left rather than the right, because I believe that in this form it is clearer and more convenient. Where year I offered to make the hint. I FSI? Or form really good? Well, I used Roboto. As I read that forms are good for different devices and popular.

5a32c097abd0a901864741.png - donnie.Cruickshank commented on June 10th 19 at 15:16
On item 5, there is a shadow is a simple layer style rules, the style can be off and to save the image without shadows, in General, that's the key thing - you should be able to save the image without the shadows, filters, stroke and other things.

Form of rules in the plan to impose the same problems do not see. And so for the future try to not think such large blocks, say, this form consists of elements, an element has a label and input, eventually in production form can be (and is!) changed beyond recognition, change the set of fields, change their order, so the coolest is to do environment so that it does not peretasoval your items they will still look great. Google UI/UX kit is essentially a large sheet with the items you can squeeze anywhere and everywhere they will look holistically and within the same design/style.

While writing said:

Although the example radio button "Reasons" to break very simple, just add two or three and they will not be built in one line, this is most likely not well thought out.

Most likely the testers "pixelcity" will ask to do so type a phone number and name was the same width and drop-down lists make, Model.

Here is a good report for designers by Vadim Makeev. - Marshall67 commented on June 10th 19 at 15:19
Thanks for the links! Makeeva so loved that he signed up for courses on the basis of shtml and CSS :) 2 months ago. Watched the movie, but now opened again and we know that many people have ignored.

about the form:

there are only 3 options and there can be no longer, I elaborate on each item, so instead of this stupid list I decided to Bang a group of radio buttons, just deducted that day article about it :) So it will not break, Lucas :3

And about margin, I just realized 1 thing, after seeing hundreds of good forms. Length under the real needs. Wilhelmina long name and rare, so the maximum width is customized to fit your phone.

I just don't understand, honestly, how you have to be cerebral palsy to take shape across the width of the screens. I see it in a different portfolio. (there are cases are rare, when it is justified) - donnie.Cruickshank commented on June 10th 19 at 15:22
"to do form across the width of the screens" - is the psychology of people like the symmetry, the correct geometry and so on, it is pleasing to the eye, therefore, these elements are trying to do similar.

"and there could be no more" - experience tells me I can) even if not, there are translations into other languages and the same word in different languages will have different number of characters, hence the different width elements and all broke)

There as be there rather in the fact that designers think in static images, web designers work with all the unknown variables in the type of content and to do well it is always better to assume the worst, if the designer put in a block of three rows, then we need to provide option with 0 rows and with a 30, because in practice this unit kontesici or the customer will put the text in 100 rows. - Marshall67 commented on June 10th 19 at 15:25
June 10th 19 at 15:15
Who was here in search of answers:

Requirements for PSD layouts
June 10th 19 at 15:17
I wanted to overstate your layout

Find more questions by tags Layouts and prototypesLayoutWeb Development