Design

Grid: Fluch oder Segen für modernes Webdesign?

Eine Website muss auf Screens von platzsparend bis raumgreifend alle möglichen Größen bedienen. Allein diese Tatsache hat Webdesign derartig verkompliziert, dass etliche Leitfäden und Tools entstanden sind, die die Arbeit eines Grafikers erleichtern. Diese Werkzeuge helfen, das Grid für jede Ansicht ganz genau einzuhalten – in sehr aufgeräumten, separierten Feldern. Das Ergebnis: sehr viele, sehr ähnliche Websites.

Dennis Wellbrock 13.06.2016

Grid für modernes Webdesign auf Monitor, Tablet und Smartphone

Beginnt ein Designer seine Arbeit in einem Standard-Layoutprogramm, fordert es ihn oft zuerst auf, ein sogenanntes Grid auszuwählen. Er soll also den Rahmen festlegen und die Seitenmaße, Spaltenanzahl und Abstände bestimmen. Es entsteht ein Gestaltungsraster. Auf diese Weise beginnen Grafiker schon eine kleine Ewigkeit die Arbeit an einem Print-Layout – und inzwischen auch meist die Arbeit für digitale Produkte. Nur dass dieses Grid je nach digitalem Endgerät sehr viele unterschiedliche Rahmen vorgibt. Innerhalb dieses Rahmens fügen die Bestandteile des Designs sich so ein, dass die Inhalte möglichst einfach zu erfassen und zu bedienen sind. Und das für diverse unterschiedliche Screengrößen gleichermaßen.

Die einzelnen Elemente einer Responsive Website werden der Einfachheit halber in separate Boxen eingefasst. Das hat den Vorteil, dass zum Beispiel ein Artikelteaser mit allen zugehörigen Einzelelementen, wie Headline, Text und Bild, je nach Vorgabe im Grid für die anvisierte Screengröße platziert werden kann. Ein praktischer Vorteil, der zudem noch dafür sorgt, dass die Seite von der kleinsten bis zur größten Ansicht sehr aufgeräumt wirkt.

 

Verführerisch einfach

Das reduzierte Design in der praktischen Kastenform setzte sich allerdings nicht nur aufgrund der klaren Optik durch: Es ist auch sehr einfach und günstig zu bekommen. Die Gratis-Templates sind mit den beigefügten Anleitungen auch für Gestalter ohne Programmierkenntnisse leicht anpassbar. Bei Wordpress zum Beispiel gibt es tausende Themes zur Auswahl – nicht alle gratis, aber die Mehrheit ist auch nicht wirklich teuer. Mit wenigen Handgriffen sind die eigenen Menüpunkte, Bilder und Texte eingefügt. Fertig: bereit zum Upload.

Wird die gesparte Zeit zumindest sinnvoll investiert?

Eigentlich wäre bei so viel eingespartem Aufwand mehr Zeit für die Konzeption und Inhalte übrig. Eine Verlagerung der Ressourcen in dieser Art ist jedoch selten an den Arbeitsergebnissen abzulesen. Es ist offensichtlich zu verführerisch das quasi fast fertige Produkt einfach mit dem zu befüllen, was an Text und Bildern vorhanden ist. Dann kann der Auftraggeber in extrem kurzer Zeit mit einer Website online gehen, die in den meisten Fällen um Welten besser aussieht als die Vorgänger-Version. Allerdings bewirkt sie nicht viel mehr als das alte Modell. Wie denn auch? Sie setzt sich mit ihrem Layout und ihrem Inhalt nicht von anderen ab. Dafür bräuchte die Website ein inhaltliches Konzept, das sich mit den gewünschten Besuchern auseinandersetzt und ihnen über Google Content vermittelt, den sie selbst aktiv suchen.
Die Ziele sollten für einen Website-Relaunch in jedem Fall etwas höher gesteckt und konkreter formuliert werden als „besser als vorher“.

Nicht für Geräte gestalten –  sondern für Kunden

Dieser Gestaltungsweg richtet sich an den Devices aus, die die Inhalte abrufen. Dabei wird allerdings der wichtigste Bedienungsaspekt hintangestellt: der Nutzer. Kein Arbeitsschritt sollte die Personae (oder auch Zielgruppe) aus den Augen verlieren. Dementsprechend gehen wir beim Relaunch einer Website in drei Schritten vor:

  1. Wir ermitteln die kommunikativen Ziele unserer Zielgruppen (und entwickeln Personae).
  2. Wir definieren Inhalte sowie Sinn und Zweck, den die Website erfüllen soll.
  3. Erst mit den Eckdaten aus 1. und 2. suchen wir die dazu passende Verpackung aus Webdesign und CMS.

Individuell und nachhaltig

Für jede Marke definieren wir ein Alleinstellungsmerkmal. Die Kampagnen und Inhalte produzieren wir aus dem Markenkern heraus. Wird dieser Kern konsequent berücksichtigt, entsteht zwangsläufig auch etwas Einzigartiges für die Markenwebsite. Ein Gestaltungsraster steht dem eigentlich nicht im Weg. Denn jeder Designer hört im Laufe seiner Ausbildung mindestens einmal den Satz:


„Ihr müsst ein Gefühl dafür entwickeln, an welcher Stelle ihr das Gestaltungsraster verlassen könnt.”


Wer die Grenzen gekonnt überschreiten kann, erzeugt zum Beispiel Kontraste zwischen Ordnung und Chaos – und bemerkenswerte Gestaltung lebt von Kontrasten.

Überschreiten wir heute allerdings die Grenzen unseres vorgegebenen Rasters, stellt das oft die grundlegende Struktur vor Probleme, die sich dann nicht mehr so reibungslos in die Ansichten für diverse mobile Geräte fügt. Die Vorlage muss dann angepasst werden. Das bedeutet Extra-Aufwand – und diese Anpassungen müssen wiederum getestet werden.
Gestaltung jenseits des Grids erfordert also tatsächlich Mut oder zumindest gute Gründe und lückenlose Abstimmung mit Auftraggeber und Team. Ein guter Grund wäre, dass sich der zusätzliche Aufwand lohnt: Denn das Ergebnis hebt sich wohltuend von der einheitlichen Masse ab. Das Markenerlebnis bleibt als bemerkenswerte, individuelle Ausnahme im Gedächtnis. Sind die Inhalte zudem für den Nutzer relevant und liefern ihm Antworten oder Problemlösungen, die er aktiv sucht, dann kehrt er wieder – oder empfiehlt Ihre Website.

Programmierende Designer oder gestaltende Programmierer?

Für wirklich einzigartige Layouts brauchen wir also Kollegen, die sehr eng zusammenarbeiten. Im Idealfall ist der Designer mit den Möglichkeiten aktueller Programmiersprachen vertraut und der Programmierer mit Gestaltungsgrundlagen. Die Berufsbilder verschwimmen zusehends. Neue Jobbezeichnungen entstehen, wie beispielsweise Hybriddesigner.
Am Besten sind sie darüber hinaus auch Informationsarchitekten. Die Nutzer haben sich nämlich an die Navigation innerhalb des weit verbreiteten Kastendesigns gewöhnt. Bietet die Website Bedienungsoptionen abseits dieser gelernten Strukturen, muss die Usability für den Besucher geprüft und optimiert werden.

Fazit

Für Qualitätsdesign gibt ein Grid wichtige Orientierungspunkte. Doch ebenso brauchen wir Wissen aus verschiedenen Gewerken und den regelmäßigen Blick über den Tellerrand, um immer wieder gekonnt aus dem Raster auszubrechen.