Collected requirements for PSD to HTML5 / CSS3 convertion

In psd to html5 convertion, often problem is implementation of some elements drawn by designer, whether it is a button or some gradient. Developers often have to dodge or ask designer for changes, wasting their time.
If the customer is careful, inconsistencies arise with the final page look and designer mock-up. All these factors impose on developers dark spot, while the designers got their prize and rest.

That’s why, designers often need to be reminded about standards of “PSD to html5 css3″, which we strongly follow in convertion PSD to responsive HTML.

What we get in result of these rules?

  • The designers become more organized, they remember to comply with the rules and as a consequence psd layouts begin to weigh less, they lack the unused layers, the structure becomes clear not only for coder, but also for designer. In the future, when it is needed something to finish – coder doesn’t not have to look throught the blocks of psd layers, he goes to the unit folder and immediately gets to work.
  • Coder who gets the “right” layout, can more accurately assess the deadline, because it is no need for editing. Also reducing deadlines is also a plus.
  • The result becomes more identical to what is depicted, because all designer ideas can be implemented in the browser.

In total: designer is happy (it is no need to redo), coder is happy, customer (final layout corresponds to the approved layout) too. So everybody have profit from the introduction of these rules.

Here is the list of requirements:

  1. Compliance with the grid layout.
    Why?
  • Purely aesthetic pleasure
  • The ability to quickly assemble the frame pages and position elements on the page in accordance with layout, so coding could be more clear.
  • If you use a gradient to a layer, use the normal blending mode (blend Mode: normal) and its real colors.
    There should be no semi-transparent gradients and complex blending modes such as ”multiply, screen, overlay”, and so on.
  • It is undesirable to use a “layer on layer” to create various effects, such as a gradient layer should be one.
  • No gradient boundaries (Boarders, stroke).
  • Usage of sophisticated blend modes (blend mode) applies to any layer properties (such as inner shadow, drop shadow, etc.).
  • Be sure to attach to the layout fonts that were used in the layout, format TTF, OTF
  • If possible – do not use in the layout more than 2 non-standard fonts, their number greatly affect the page rendering in the browser, which adversely affects the attitude of user to the site.
  • Make sure to obtain separate layout, with standard elements of web pages typography (headings, paragraphs, tables, lists, block quotes).
  • If you draw a typical button, link, an element that have a status of “active” or pressing – do not make others to think how it should work. If there is a link, it is necessary to show the color when you move; if there is a button, show its look after pressing , as well as state of “inactivity”. This applies to any such elements, arrows in the gallery, etc.
  • Each block must be in its own folder and have the right name.
  • If there are hidden layers or folders that show any part of the site (modal windows, pull-down panel, etc.) – it is necessary to highlight the folder / layer – with color (as not to miss).

Conclusion: Compliance with these recommendations will help to realize “psd to html5”, as closely as possible to layout and help to avoid:

  • Discrepancy of final mock-up to the final layout;
  • Problems with the approval of the layout;
  • Problems with cross-browser compatibility and layout work as a whole.

GNS Projects

More About Web Development by GNS