Styling einer Site mit dem Unsichtbaren

Planet Propaganda mit einer Farbe.

Der Unterschied zwischen einem Webdesign-Profi und einem User liegt nicht in deren Erfahrung mit Websites. Der Profi macht die Erfahrung, indem er Websites baut, der User, indem er diese anschaut. Beide sehen demnach dasselbe mit divergentem Blick. Wie verschieden die Auf­fassung ist, wird deutlich, wenn User zu Kunden eines Web­de­signers werden und Ihre Vor­stel­lungen äussern. Der bekannteste Wunsch klingt etwa so: »Kann mein Firmenlogo nicht größer gemacht werden?«, oder: »Beim Banner oben passen doch noch ein Facebook-Likebutton, ein Twitter-Follower-Link und ein Kundenlogin hinein?«. Ich will hier kein Kundenbashing betreiben, sondern aufzeigen, wie unähnlich die Blickweise ist und sein muss, wenn man wirklich gute professionelle Sites designen will. Es kommt nicht nur darauf an, was auf eine Site rauf soll. Es braucht einen Blick für das Unsichtbare der Gestaltung.

1. Weissraum

Fangen wir gleich mit dem Grausamsten an. Der teuer erkaufte Werbeplatz zahlender Firmen soll immer bis an den Anschlag vollgestopft werden: die Firmenwebsite. Alle Abteilungen drängen sich um einen guten Platz möglichst schon auf der Startsite. Der arme Webdesigner wird genötigt, möglichst viel an Links, Navigation, Spalten, Logo (!), Meldungen usw. unterzubringen. Seit dem Erfolg des »Minimal Designs« wissen wir, wie stark eine »leergeräumte« Site wirken kann! Deswegen ein paar Grundregeln:

  • Bleiben Sie stark gegenüber dem Kunden (arbeiten Sie mit AB-Tests zum Überzeugen)
  • Räumen Sie die Site leer (immer wieder angehen; Zusammenarbeit mit dem Texter beachten)
  • Vereinfachen Sie die Navigation (überflüssiges in den Footer schieben, wenn’s sein muss)
  • Verringern Sie die Zahl der Links (rein in die Unterseiten, siehe Navigation)
  • Ein Key Visual pro Site (ein starkes Foto, eine tolle Grafik und gut) reicht
  • Erhöhen und prüfen Sie den Zeilendurchschuss; meistens ist er zu gering

Viel Weissraum (im Wortsinne), starke Darstellung: Information Architects.

2. Raster

Heutzutage werden Inhalte auf irgendein Medium zusammengeschoben. Das ist die Grunderfahrung der Generation Word/Powerpoint (Twitter überlebt trotz Begrenzung der Textmenge deswegen, weil man immer wieder was loswerden kann, aber das ist ein anderes Thema). Wichtig ist die Beachtung der gestalterischen Grundregel, alle Elemente einer Site mit gestalterisch optischer Brille anzuschauen. Somit werden Überschriften, das bekannte Logo, Linien, Formelemente vereinheitlicht und gleich­ge­setzt. Diese Übung hat ein Laie nicht, er sieht immer nur Inhalte. Deswegen:

  • Skizzieren Sie Ihre Entwürfe von vorneherein auf kariertem Papier
  • Benutzen Sie in Photoshop Hilfslinien oder spezielle Rastergeneratoren
  • Suchen Sie sich ein Template mit Raster (für Photoshop)
  • Verwenden Sie Grid-Frameworks zum Programmieren, das bekannteste ist das 960Grid

Sauberes Raster, saubere Site: 3Degrees Design.

3 Degrees Design Agency

Ein bekanntes Beispiel kann illustrieren, wenn inhaltliche Elemente höher gewichtet werden als Form­elemente: das Facebook-Logo (als auch die Abbildung der Weltkarte) ist optisch nicht an dem Satz­spiegel ausgerichtet.
Der Willkommen-Screen von Facebook, so wie wir ihn bis jetzt kennen:

Facebook Willkommenscreen

Achten Sie auf den linken Rand—Willkommen-Screen von Facebook korrigiert:

Facebook optisch korrigiert

3. Abstimmung und Rhythmus

Wie schon erwähnt, finden sich Inhalte schnell, na gut, früher oder später, aber dann mächtig. Eine Website wird vom stolzen Besitzer gerne als Füllhorn seiner Fähigkeiten und Produkte missbraucht. Deswegen sehen Sie zu, alle grafischen Elemente in Bezug zu systematisieren und zu staffeln. Das meint:

  • Maximal 3 Überschriftengrade verwenden: h1 für den Firmennamen »verbrauchen«, dann h2 für wichtige Titel, h3 für Zwischentitel (h4, h5 als Platzhalter für CSS-Spielerein)
  • Supergrosses Logo und Minitexte gehen nicht und sehen auf Dauer peinlich aus. Drucken Sie sich Screenshots Ihres aktuellen Websiteentwurfs mit diversen Größenabstufungen aus und hängen das zum Vergleich nebeneinander—da wird vieles deutlich
  • Die Breite des Banners, die Größe von Bildern wird gerne übertrieben. Webdesigner, geht der supertolle Slider nicht auch etwas kleiner?
  • Seien Sie pingelig, besser ein Pixelschubser sein, als über den Daumen peilen!

Gute Abstimmung, Goldener Schnitt, alles steckt in dieser Site: 52WeeksOfUX.

Zeichnung und SW

4. Verringerung der Farbmenge

Der größte Vorteil des Webdesigns gegenüber dem Print ist billige Verwendung beliebiger Farbmengen. Ein paar Klicks und jegliche Fläche wird mit Verlauf und diversen Farben verziert. Die besten Designer verzichten aber auf Farbenvielfalt und beschränken sich pro Site auf ganz wenige. Das heisst nicht, sie haben kein Farbengefühl! Die Menge der Farben und Farbkombinationen stehen jedem Designer un­be­grenzt zur Verfügung, nur für Websites sollten sie optimiert sein. Wie geht es?

  • Eine Hauptfarbe wählen, dazu eine oder zwei harmonische Farben gesellen
  • eine Leitfarbe (meistens die Firmenfarbe) führt durch alle Unterseiten
  • Logos haben Farben: auch diese müssen in das gesamte Farbspektrum eingerechnet werden
  • Fotos können auf eine Farbstimmung getrimmt werden, passend zu den verwendeten Sitefarben (oder andersherum)

Könnten Sie sich bei der folgenden Site noch eine weitere Farbe vorstellen? Planet Propaganda beschränkt sich zu Recht zugunsten eines starken Motivs.

Planet Propaganda mit einer Farbe.

5. Blickführung und Gestaltgesetze beachten

Im Laufe der Zeit haben sich scheinbare beste Regeln einer Sitegestaltung manifestiert. In Reihenfolge werden Logo, Slogan, Banner, Navigation, Content und Footer platziert. Schon die Einfügung einer Seitenleiste ist eine interessante Steigerung einer Site, weil diese Asymmetrie erzeugen kann. Der Laie sieht es nicht, aber die Folgen können per Eyetracking belegt werden: die Blickführung wird eine Andere. Jedes Seitenelement erweckt mehr oder minder die Aufmerksamkeit des Seiten­be­trachters. Künstler schaffen es, die Blick gezielt über eine Site zu führen, sodass der Fluss der Informationen geordnet daher kommt. Was kommt auf Sie als Designer zu:

  • Checken Sie die Größe der Elemente (viele, viele Tests machen, viele Versionen erzeugen, nur in Photoshop herumspielen bringt nichts)
  • Prüfen Sie die visuellen Abhängigkeiten aller Elemente. Passt der Button stilistisch zum Text?
  • Können Elemente einer Site zusammengefasst werden? Verringern Sie die Menge, helfen Sie dem Auge des Betrachters.

Schöne Blickführung trotz ungewöhnlicher Site, Klaas Design:

Kennen Sie auch noch einen »unsichtbaren« Aspekt guter Gestaltung, der auch beachtet werden sollte? Schreiben Sie hier Ihre Meinung!

Tags: , ,

Comments are closed.


QR Code Business Card