Ein gutes Layout ist die Grundlage für eine gute Programmierung. Wenn die Programmierung schlecht ausgefallen ist, hat es zu einer sehr hohen Wahrscheinlichkeit entweder damit zu tun, dass das Layout schlecht war oder die Layoutübergabe wurde schlecht gemacht.
Ein Layout ist wie ein virtueller 3D Aufbau von einem Möbelstück und der Programmierer ist wie ein Schreiner der es umsetzt. Wenn der Designer eines Möbelstücks schlecht gearbeitet hat, wird der Schreiner auch Probleme bei der Umsetzung haben.
Dieser Beitrag soll dazu dienen, euch mitzuteilen, was ich als Programmierer an Erfahrung gesammelt habe.
Leserlichkeit
Das Layout wird vom Programmierer sozusagen gelesen und er bestimmt dann anschließend, wie er seine HTML Struktur aufbaut. Die css einer Webseite kann immer wieder verändert werden jedoch sollte die HTML Struktur so gut wie nie angefasst werden. Deswegen sollte der Designer drauf achten, dass der Aufbau seiner Elemente so gut leserlich wie möglich sind.
Farbpalette
Die Übergabedatei sollte eine Tabelle mit allen Farben und deren Anwendungsgebieten beinhalten. Hauptelemente dieser Liste sind zum Beispiel:
- Textfarbe
- H1 Farbe
- H2 Farbe
- Hintergrund Farbe
- Hover Hintergrundfarbe
- Rahmenfarbe
- …
Der Programmierer speichert sich diese Farben in Variablen ab und kann diese dann überall wieder abrufen. Wird eine Farbe angepasst, braucht man nur die Variable ändern und es wird automatisch überall übernommen.
Die Farbton Vergebung gibt es nur in Print Projekten und werden auf digitalen Medien nicht unterstützt. Werden die dennoch genutzt, muss der Programmierer die Layout Datei als png speichern, es in Photoshop öffnen und die Farbe auslesen. Das ist nicht performant.
Genauigkeit
Sogar drei Pixel können sehr viel ausmachen. Das müsste dem Designer auch klar sein und er muss sein Übergabedokument so sauber gestalten, dass er auf jeden Pixel achtet. 2,87 Pixel gibt es nicht und deswegen sollte der Designer auch seine Pixelangaben sauber überprüfen.
Wenn an einer Stelle des Übergabedokumentes die Überschrift 20 Pixel groß ist und auf der anderen 23 Pixel, geht der Programmierer davon aus, dass hier zwei unterschiedliche Größen gefordert sind und programmiert seinen HTML Code auch entsprechend. Das führt dann zu unnötiger Verkomplizierung des Projektes, was durch ein bisschen Kontrolle vermieden werden kann.
Bilder / Logos / Icons
Alle genutzten Bilder / Logos und Icons sollten auf jeden Fall entweder als Zip Archiv oder in einem gemeinsamen Ordner im richtigen Web-Format vorhanden sein. Wenn der Designer seine Aufgabe sauber gemacht hat, wird der Programmierer nicht einmal nach einem Bild fragen müssen.
Damit das auch einwandfrei funktioniert, muss der Designer sich im Vorfeld Gedanken über das richtige Format und die richtige Größe gemacht haben. Wenn der Designer dem Programmierer fragt, in welcher Größe er die Bilder ausgeben soll, ist das nicht richtig.
