Below I will give brief overviews of the required points which you need to pay attention when you create a web layout for the further transfer it to the layout.

  • Naming layout (Pages, frames — optional) must clearly convey the essence and purpose and be tied to logical pages or other large entities.
    (Example: “home — tablet”, “main — mobile”, “button”)


  • It is necessary to observe the structure of the document when working with layers, groups, components, and screens, to give them satisfactory titles
    (Example: main-background, settings, button, registration-page-mobile)
    (Bad example: frame 1, group 45, iphone, XR)


  • If you need a mobile version, then each screen should be designed the layout with a width of 320px (iPhone SE), in addition to which you can create models with higher resolution.


  • Icons (svg, …) should be paged correctly to open in browser. The size of the svg artboard must comply with the content and flow. You can collect sets of icons on separate art boards.


  • Pictures (graphic content) needs to be paged. To have a resolution of at least 2x. Be discharged without treatment. (Such as: rounded edges, opacity, drop shadow). With the exception of cases where such treatment was explicitly requested.


    1. You must take into account the size of the content area and that this size varies from solution to solution. Thus the “attachment point” should be designed.
    2. Content images should be uploaded as a single image.
      (Example: we Have a rectangular block with a [background] will change. Accordingly, to unload the picture needs the full background as in the example above.)


  • Color fonts should not contain alpha-channel (transparency), except for the cases when font is used on different backgrounds (gradients or images) and must have a logic.


  • Full list (zip.archive) used in the project fonts should be provided first (before the front).


  • Also need to pick a safe font (which is in all Windows, Mac, Linux, etc.), similar to the custom used to be to substitute in case of error loading a custom font
    (Example: ‘Roboto’, sans-serif)


  • If you are dealing with a custom icon font, the icon should apply accordingly, namely: the need to align to baseline grid, so that several icons in a row were not different sizes and with different margins. The number of faces, the base thickness of the tracings, the level of detail should be saved from the icons to the icon, otherwise they will look dissimilar, as if from different sets of fonts.


  • In the absence of special requirements to behavior of the logicblocks in the stream must preserve the sequence of their location in adaptive on those permits, which are reflected in the requirements.


  • The logic needs to be reflected in the design. For example, several identical cards, each displaying different content, different images, different state, etc., to have the opportunity to trace the relationship.


  • In addition to the layout of the welcome text description of the elements


  • To specify the behavior of items with overflow text
    (For example, to trim long text with ellipsis in the block, etc.)


  • Leave a comment and a description (in any way) to the animated and whose behavior cannot be clearly determined only by the layout.


  • There should be a page 404, 500 and other standard screens


All of the following items according to the guide, and the grid is allowed to draw on the page styles, where all of this will be structured is shown.

  • Description and layout of blocks associated General functionality provided in one section of the document.
    (For example, all pop-up Windows have a white background and 10px rounded corners, buttons … )


  • Typography needs to be described and illustrated further on a separate artboard.
    (Example: All the headers of the first level have a size of 24px and padding bottom 40px. All the headers of the second level … paragraphs … and so on.)


  • All links, buttons, checkboxes, etc. interactive elements should be drawn in a passive, imposed, active state. Similarly should be the condition for cellphones (touch devices) — passive, point-pressing. Status: (link, hover, active, focus, visited, disabled, process).


  • Navigation chain (Breadcrumbs) should be drawn in all States (active, previous, locked, …) and with regard to transfer lines.


  • Pagination should be rendered in all States (in first, last, intermediate step) And with different number of steps (1, many) given the large (3+) symbol number of digits.


  • Inputy (input fields), the form should be drawn in all States: default, focus, clicking, locked, error message, message correctness, and so on.
    [Input example]


  • To limit the number of used colors and shades


    1. All used colors should be given a guide.
      (Any new color in the layout will be considered an error and will be equal to the closest guide)
    2. Unique from the point of view of functionality, the colors should be described or linked to the entity.
      (For example, a widget action on halloween with only an orange background color: orange — color for stock on halloween)


Of course if you draw for “drible”, etc. you can do whatever you want, but for a serious project these items are needed for 100%.