Gestaltungsregeln für Programmierer: Die häufigsten Fehler bei der Umsetzung von Layout-Entwürfen

Eine Website ist ein komplexes Produkt, an dessen Entstehung die unterschiedlichsten Menschen mitwirken. Meistens ist es so, dass ein Designer das Layout vorgibt, welches der Programmierer dann umsetzen soll. Nun ist es aber auch so, dass Designer und Programmierer zwei völlig unterschiedliche "Wesen" sind, deren Aufmerksamkeit sich eben auch auf sehr unterschiedliche Aspekte der gleichen Sache richtet. Das bedeutet: Während der Designer sich in erster Linie für die Oberfläche und das äußere Erscheinungsbild einer Anwendung interessiert, findet der Programmierer eher Gefallen an den Funktionalitäten und den technischen Aspekten. Beide sind natürlich von der Wichtigkeit und Priorität ihres eigenen Themas - zu Recht - völlig überzeugt.

Prüfen: Stimmen Entwurf und Umsetzung überein?

In der Regel geht der Designer davon aus, dass mit dem Entwurf einer Oberfläche seine Arbeit beendet ist. Doch manchmal kann es passieren, dass der Design-Entwurf und die tatsächlich programmierte Anwendung sich im Auge des Designers - und auch des Kunden, der den Entwurf des Designers abgesegnet hat - zu stark unterscheiden. Was in der Entwurfs-Präsentation noch so harmonisch aussah, hat nach der Umsetzung plötzlich ein ganz anderes Gesicht.
Um diesen Missverständnissen vorzubeugen, sollte der Programmierer ein Grundverständnis dafür entwickeln, auf was der Designer im Allgemeinen bei der Umsetzung seines Entwurfs Wert legt. Das Motto und erklärte Ziel lautet: Qualität durch Perfektion im Detail! Doch das ist nur zu erreichen, wenn sich alle Beteiligten auf dieses gemeinsame Ziel ausrichten.

Verstehen: Die Denk- und Verhaltensweisen eines Designers

Um das gegenseitige Verständnis zu fördern, soll für Programmierer an dieser Stelle ein Einblick in die Denk- und Verhaltensweisen eines Designers gegeben werden:
Der Designer ist ein visuell orientiertes Wesen. Er überprüft deshalb bei jeder Oberfläche, die ihm unter die Augen kommt, automatisch und aus Reflex, ob eine einheitliche Struktur besteht: Er sucht instinktiv alle möglichen Gestaltungsachsen horizontal und vertikal ab - auch da, wo auf den ersten Blick keine zu sehen sind. Er sucht nach Gemeinsamkeiten und Verhältnismäßigkeiten. Vergleicht Abstände und Zwischenräume, schaut auf Außenränder und wägt beispielsweise ab, ob ein Icon zentriert vor dem Text steht.
Das Urteil fällt meist kritisch aus und die Auslöser des Unmuts sind oft die gleichen. Folgende typische Aussagen kommentieren die vom Designer am häufigsten bemängelten Aspekte nach der Umsetzung einer Designvorlage:

1. Der Designer sagt „Des is nich bündig!“,
wenn neben- oder untereinander stehende Elemente in ihrer Höhe, Breite und Position nicht immer an Gestaltungsachsen (Layoutraster) ausgerichtet sind.

2. Der Designer sagt „Des springt noch!“,
wenn Icons nicht direkt und zentriert vor einem Link oder vor einem Textelement stehen.

3. Der Designer sagt „Des da klebt und des klemmt!“,
wenn Texte und Icons oben, unten, rechts und links an Linien, Flächen oder an das Browserfenster anstoßen.

4. Der Designer sagt „Des is nich mittig, die Abstände sind unterschiedlich!“,
wenn Abstände zwischen Texten oder grafischen Elementen innerhalb einer Gruppe oder aber Abstände zur nächsten Gruppe nicht immer gleich groß sind.

Berücksichtigen: Gestaltungsgrundregeln für Programmierer

Was kann der friedliebende Programmierer also tun, um den Designer nicht unnötig mit den immer gleichen „Design-Faux-pas“ (unbeabsichtigt) zu verärgern? Er sollte sich die folgenden 4 Gestaltungsregeln zu eigen machen und bei der zukünftigen Umsetzung von Design-Vorlagen berücksichtigen:

  1. Regel: Horizontale und vertikale Gestaltungsachsen einhalten!
    Regel Nr. 1: Horizontale und vertikale Gestaltungsachsen einhalten!
  2. Regel: Icons zentriert platzieren!
    Regel Nr. 2: Icons zentriert platzieren!
  3. Regel: Zwischen einzelnen Elementen Abstand halten!
    Regel Nr. 3: Zwischen einzelnen Elementen Abstand halten!
  4. Regel: Einheitliche Zwischenabstände verwenden!
    Regel Nr. 4: Einheitliche Zwischenabstände verwenden!

Damit und mit ein wenig gegenseitigem Verständnis (für die Detailgenauigkeit des Designers wie auch für die Technikversessenheit des Programmierers) sollte einer harmonischen Zusammenarbeit nichts mehr im Wege stehen!

Quellen / Downloads:

Den //SEIBERT/MEDIA-Podcast abonnieren


Mehr über die Creative-Commons-Lizenz erfahren