Eine Frage der Auslegeordnung

Joely Tafanalo Trauen Sie sich zu, eine Website direkt im Browser zu entwerfen? Oder gehen Sie (wie der Autor) lieber mit Programmen wie Experience Design, Photoshop, Illustrator oder Sketch ans Werk? Unabhängig davon gibt es Gesetz­mässigkeiten, die uns helfen, Websites erfolgreich(er) zu gestalten.

Vieles, das sich beim Kultmedium Papier bewährt hat, ist im Web gar nicht so anders. Für manche klassische Gestalter ist erfahrungsgemäss eher die im Responsive Web Design geforderte Dynamik und Flexi­bilität gewöhnungsbedürftig. Wie gelingt nun der Sprung von statischen Papierformaten zu wechselnden Bildschirmgrössen?

Klarheit und Ordnung schaffen

Gestaltung war schon immer Ge­schmacksache – unabhängig des bespiel­ten Mediums. Verschiedene Gesetzmässigkeiten helfen uns aber, damit visuelle Kommunikation von den Usern besser angenommen und aufgenommen wird. Überhaupt ist eine positive User-Experience im Endeffekt ausschlaggebend für alle vorangehenden Gestaltungsentscheide. Die Rede ist beispielsweise von ­Konsistenz und ansprechenden Kontrasten. Ersteres wird durch Raster und geschickte Seitenaufteilung erreicht. Kontraste entstehen durch passend gemischte Schriftfamilien, screenfreundliche Farbkombinationen und Proportionen, die dem jeweiligen Lesegerät schmeicheln. Überladene Web­sites kommen genauso schlecht an wie entsprechende Drucksachen. Aus diesem Grund gilt: Weniger ist mehr. Auch im Webdesign bleibt es die grösste Herausforderung, Klarheit und Ordnung zu schaffen.

«Lorem ipsum» war gestern

Angebotenen Platzhaltertext-Genera­toren zum Trotz – verwenden Sie am besten, was schon da ist an Content. Echter Text liest sich anders und läuft anders in den Spalten. Beim Lesen und Überfliegen des angelieferten Textes können so allfällige Muster herausgefunden und Rückschlüsse auf die passende Gestaltung gezogen werden. Um bei einer Magazinvorlage ein Bild über gewählte Schriften und Abstände zu bekommen, mag Platz­haltertext vielleicht mal nützlich sein. Mehr denn je heisst es «Content is King», und dies sollte auch auf Bildschirmen möglichst früh berücksichtigt werden.

Analog oder digital – Hauptsache Wireframes

Eine meiner Lieblingsbeschäftigungen als Typograf war das Skizzieren mit Stift und Papier. Glücklicherweise ist dies beim Entwerfen für digitale Produkte wieder wichtiger denn je. Setzen Sie sich mit dem zu gestaltenden Inhalt auseinander und bringen Sie die ersten Entwürfe zuerst auf Papier. Es empfiehlt sich, unbedingt mehr als nur ein bis zwei Layouts zu scribbeln.

Für einmal helfen hier Masse und Geschwindigkeit. Diese frühe Entwurfs­phase ist enorm wichtig und kann natürlich sowohl analog als auch digital geschehen. Viele Designer setzen auf Papierschnipsel, um die Elemente einer Website zu positionieren, oder zeichnen direkt mit Blei- oder Filzstift aufs Papier. Inzwischen bieten sich natürlich auch diverse Mobile- oder Desktop-Apps zum Skizzieren an. Egal auf welche Variante Sie setzen – alle vorkommenden Elemente sollten dabei miteinbezogen werden. Dies sind beispielsweise der Header-Bereich und die Navigation am Seitenanfang. Gefolgt vom eigentlichen Inhaltsbereich und der von Fussleiste einer Website. Nicht vergessen: Was um die Website herum passiert, gehört auch dazu.

Psychologie und Design

Als Anwender war es mir lange nicht so bewusst, doch Psychologie spielt im Design eine enorm wichtige Rolle.

Das oberste Credo bei der Webgestaltung sollte sein: Menschen zuerst. Wie und wann nutzen künftige User mein Produkt beziehungsweise das entsprechende Lesegerät? Wie reagieren Menschen auf unterschiedliche Farben und deren Kombinationen? Mit welchen Stilmitteln gelingt es mir, beim User oder zwischen den Usern Emotionen zu wecken? Wie gestalte und priorisiere ich meine Elemente, damit es für den User ansprechend daherkommt und konsumierbar ist?

Zu diesen Themen gibt es gute Fachliteratur. Sehr hilfreich kann es sein, Mitmenschen (oder sich selbst) bei der Nutzung von Websites und Apps zu beobachten. Was sich im Umgang mit Gestaltung und Interaktionen meistens auszahlt, ist Schlichtheit. Der Grundsatz lautet dabei: «Keep it simple and stupid.»

Grundsätze im Layout

Wenn man das Layouten wortwörtlich als Auslegeordnung betrachtet, entdeckt man die einzelnen Inhaltselemente und kann über deren Priorisierung und Positionierung bestimmen. Diese Form der Umsetzung nennt sich auch modulares Design und hilft dann, wenn vor lauter Content der Verlust des Überblicks droht.

Dabei gestalten wir anstelle von fertigen Seiten einzelne Module wie Formularfelder, Navigationen, Buttons, Teaser und so weiter. Hierzu hat der Webdesigner Brad Frost einige gute Veröffentlichungen und Thesen verfasst, welche auf Patternlab.io und Bradfrost.com nachzulesen sind.

Das Prinzip der Ausgewogenheit unterstützt uns beim Entwerfen von Seiten. Ein Gleichgewicht kann sowohl durch symmetrischen Aufbau (zwei identische Spalten, Hälften) als auch durch spannende Wechsel mit Asymmetrie erreicht werden. Die Elemente können demnach auf identischen Spalten und Hälften sein oder abwechselnd einen harmonischen Rhythmus bilden. Auch dieses Prinzip schätzen wir natürlich in der Drucksachengestaltung.

Häufig und gerne folgen auf ein grosses «Hero-Bild» entweder abwechselnde «Zickzack-Sections» oder eine Anordnung im «Cards-Design». Als Grundsatz kann man sich auch vornehmen, grosszügig und aufgeräumt zu gestalten.

Entlarvende Graustufen

Einen bereits fortgeschrittenen Entwurf für ein Webdesign sollte man zwischendurch in Graustufen anschauen. Dies hilft enorm, sich auf die Elemente zu fokussieren, ohne von der Farbigkeit abgelenkt zu werden.

Tipp: Photoshop-Anwender legen hierfür am besten eine Einstellungsebene Schwarzweiß über das gesamte Dokument. Anders herum gesehen kann ein Wireframe oder Entwurf zuerst in Graustufen angelegt werden und nachträglich in das «Look & Feel» des Auftraggebers überführt werden.

Was sich auch bewährt hat: Das gesamte Design einfach mal auf den Kopf zu drehen. So fallen allfällige Inkonsistenzen sofort auf bzw. aus dem Rahmen.

Bewährte Gesetzmässigkeiten

Beim Gesetz der Geschlossenheit geht es darum, zusammenzutun, was zusammengehört. Durch farbliches oder räumliches Gruppieren von Elementen entstehen Leseführung und schnellere Erfassung. Auf das Webdesign übertragen nimmt das Auge dann Elemente, die von einer Fläche oder einem Rahmen umschlossen werden, klarer als Einheit wahr. Wenn es um die Wiedererkennung eines Produktes geht, kommen das Gesetz der Ähnlichkeit und das Gesetz der Erfahrung zur Anwendung. Dank gestalterischer und konzeptioneller Konsistenz im Umgang mit Inhaltselementen gewöhnt sich der User daran und bedient die Seite intuitiver. Dies lässt sich zum Beispiel bei Icons und anderen Navigationselementen beobachten. Das uns allen bekannte Gesetz der Schwerkraft lässt wiederum oben stehende Objekte dynamischer wirken als weiter unten platzierte.

Tipp: Für Abstände einen Grundwert definieren (meist in Pixeln) und diesen bei Bedarf multiplizieren oder dividieren.

Seitenaufteilung mit System

So genannte Grid-Systeme im Webdesign sind nichts anderes als die Satzspiegel und -raster, welche wir alle aus mehrseitigen Drucksachen kennen. Ein Grid-System baut idealerweise auf einem der bewährten Frameworks auf. Selbstverständlich lassen sich aber auch eigene vertikale Raster einrichten und programmieren.

Das 12-spaltige Raster scheint mir das flexibelste. Vor allem weil es leicht in Hälften, Viertel und Drittel geteilt werden kann und so massiv mehr Layoutmöglichkeiten bietet.

Für die horizontale Unterteilung einer Seite in Teilbereiche dienen uns entweder Flächen oder Hilfslinien im Layoutprogramm. Die beliebte Erzählform des One-Pager spielt bewusst mit solchen Unterteilungen beim Scrollen von oben nach unten. Was wir jedoch auf Screens selten bis gar nie verwenden, sind Grundlinienraster. Sie haben sich schlicht als unpraktisch und wenig hilfreich erwiesen. Wer ein bestimmtes Raster einsetzt, sollte dieses auch nutzen und die Elemente sauber daran ausrichten. Doch keine Regel ohne Ausnahme, wagen Sie auch mal, das Grid zu durchbrechen oder asymmetrisch einzuteilen. Websites wie 960Grid.com, oder gridcalculator.dk geben weiterführende Informationen.

Frameworks

Immer häufiger ist bei Webprojekten von Frameworks die Rede. Ein Framework hilft, wiederkehrende Aufgaben schneller zu lösen.

Im Bereich des Webdesigns ist ein Responsive Web Framework ein Baukasten mit vorgefertigten und dynamischen Gestaltungselementen. Dieser Baukasten kann einem Gestalter helfen, das Design unter Berücksichtigung des ausgewählten Web-CMS aufzubauen, oder unterstützt den Webentwickler, eine neue Seite noch effizienter aufzubauen. Beliebte Frame­works sind zum Beispiel Foundation (Zurb) oder Bootstrap (Twitter).

Für uns Gestalter gibt es im weltweiten Netz Vorlagen für fast alle Layoutprogramme, meist direkt von den jeweiligen Anbietern der Frameworks.

Das Webseitenformat

Anders als auf Papier zählen im Browser mehrere Arten von Seitenformaten. Der sichtbare Bereich ist matchentscheidend und durch das Lesegerät und dessen Bildschirmauflösung gegeben. Die effektive Grösse bzw. Höhe entsteht dann durch die Menge an zu platzierenden Inhalten.

Anpassungsfähige Seiten sind heutzutage sozusagen Standard. Für Webdesigner bringen sie jedoch zusätzliche Ansichten und Breiten mit sich, die es zu konzipieren gilt.

Die Seite screensiz.es schafft im Dschungel der Bildschirmgrössen und -auflösungen einen guten Überblick. Der sichtbare Bereich bildet nicht nur die Begrenzung der Website, sondern beherbergt auch die Hintergrund­fläche. Diese ist ein nicht unwesentlicher Teil des gesamten Layouts.

Farben im Web

Die Physik der Farben gibt uns für das Medium Bildschirm bekanntlich Rot-Grün-Blau vor. Das additive Farbmodell sollte möglichst in lebendigen Farbschemas zur Anwendung kommen. Auch hier gibt es unzählige Applikationen im Internet oder in Apps, um Farbkombinationen zu definieren. Je nach Verwendungszweck der Website sind ein bis zwei stark kontrastierende Farben angebracht. Der Unterschied zwischen Hintergrund und Text muss aber keineswegs so hart ausfallen, wie wir es auf Papier häufig lieben.

Für die technische Umsetzung in Styleguides sollten zusätzlich niemals die Hexa­dezi­malwerte (z. B. #ff0000) vergessen werden.

Bewährte Layout-Patterns

Manche Darstellungsmuster oder User-Interface-Elemente haben sich durchgesetzt und tauchen überall im Web auf. Insofern soll und muss die Welt nicht mehr neu erfunden werden. Als Beispiel sei das dreibalkige «Hamburger-Menü» erwähnt, welches zwar nicht unumstritten ist, aber jeden User sofort auf eine versteckte Navigation hinweist. Hero-Images als einleitender Blickfang auf einer Website sind gang und gäbe. Geschickt mit Hintergrundvideos oder Animationen kombiniert, fallen sie nach wie vor auf. Das Off-Canvas-Pattern spielt mit dem unsichtbaren Bereich einer Website und kompensiert so die fehlende Darstellungsgrösse auf Mobilgeräten.

Seit Pinterest und Microsofts Metro-Design sind auch die Cards-Layouts nicht mehr wegzudenken. Die kachelartige Darstellung hilft vor allem, viele verschiedene Informationen ansprechend zu bündeln. Ein Prinzip, welches auch Responsive Designs, also umbrechende Layouts unterstützt. Luke Wroblewski (@lukew) ist ein absoluter Crack auf diesem Gebiet und beschreibt auf seiner Seite Lukew.com diverse dieser Layout-­Patterns.

Einsatz von Schriften

Ohne zum Einheitsbrei zu verkommen, sind einfache serifenlose Schriftarten den komplexeren tendenziell vorzuziehen. Text soll damit auch in kleinen Grössen lesbar bleiben. Wie schon in der klassischen Typografie – der Mix machts aus. Egal für welche Fonts Sie sich entscheiden, vorgängig muss abgeklärt werden, ob auch spezifische Webfonts vorhanden sind. Sämtliche Onlineanbieter von Schriften zeigen aber den Verwendungszweck und die diesbezügliche Lizenz an. Blocksatz ist eher verpönt, obschon das inzwischen technisch mehr oder weniger gut lösbar ist. Ein tolles Buch mit dem Titel Webtypografie von Jason Santa Maria (@jasonsantamaria) ist 2015 im dpunkt.verlag erschienen.

Stile und Trends

Im schnelllebigen Web kommen und gehen Stile und Trends wie in der Mode. So kriegte das allgegenwärtige Flatdesign zum Beispiel von Googles Materialdesign Gesellschaft. Letzteres als eine vielseitigere Weiterführung von Flatdesign. Responsive Web Design ist inzwischen nicht mehr Trend, sondern Best Practice.

In Absprache mit dem Entwickler sollte man hier aber auf Perfor­mance-Fallen achtgeben. Um den Rahmen nicht zu sprengen, empfiehlt es sich, einen Blick auf die Designprinzipien von Facebook, Microsoft, Android, Apple oder Google zu werfen.

Die grosse Gefahr der Langeweile im Webdesign liegt meines Erachtens beim riesigen Markt der Templates für die Web-CMS-Systeme. Ohne angemessene Budgets sind längerfristig keine eigenständigen und wegweisenden Designkonzepte mehr möglich.

Fazit

In der Hoffnung, mit dieser Auslegeordnung der Gesetzmässigkeiten im Webdesign etwas Inspiration und An­regung geboten zu haben, wünsche ich viel Spass beim Anwenden. Regelmässiges Lesen der einschlägigen Blogs und Newsletter hilft, den Überblick einigermassen zu wahren, und darf ruhig Teil der Alltagsroutine werden.

Egal was Sie tun, konzeptionelle und visuelle Designs sollten stets aus Sicht des Nutzers gewählt werden. Und nicht vergessen, beim Webdesign geht es nicht bloss um Regeln und Gesetze, sondern darum, die beste Lösung zu finden.

Hier gelangen Sie zu einer ausführlichen Linkliste passend zum Artikel.