A good layout is the basis for good programming. If the programming was bad, it was very likely either that the layout was bad or the layout handover was bad.
A layout is like a 3D virtual construction of a piece of furniture and the programmer is like a carpenter who builds it. If the designer of a piece of furniture has worked poorly, the carpenter will also have problems with the implementation.
This post should serve to tell you what I have learned in 16 years as a programmer.
Legibility
The layout is read by the programmer and he determines how he builds up his HTML structure. The css of a web page can be changed again and again, but the HTML structure should almost never be touched. Therefore, the designer should make sure that the structure of its elements are as legible as possible.
Color palette
The transfer file should contain a table of all colors and their fields of application. Main elements of this list are for example:
- Text color
- H1 color
- H2 color
- Background color
- Hover background color
- Border color
- …
The programmer saves these colors in variables and can retrieve them everywhere. If a color is adjusted, you only need to change one variable and it will automatically be applied everywhere.
Color hue is only available in print projects and is not supported on digital media. If they are still used, the programmer has to save the layout file as png, open it in Photoshop and read the color. That is not performing.
Accuracy
Even three pixels can make a lot of difference. The Designer should also know this and he must make his transfer document clean by paying attention to every pixel. There are no 2.87 pixels on a monitor and that’s why the designer should also check his pixel details clean.
If the headline fontsize is 20 pixels in one place and 23 pixels on the other place, the programmer assumes that two different sizes are required here and also programs his HTML code accordingly. This leads to unnecessary complication of the project, which can be avoided by a bit of control.
Pictures / Logos / Icons
All used images / logos and icons should be available either as a zip archive or in a common folder in the right web format. Once the designer has done his job, the programmer will not even have to ask for a picture.
In order for this to work perfectly, the designer must have thought in advance about the right format and the right size. If the designer asks the programmer what size to export the images… that is not correct.
