Grundsatz 1: Sorge für klare Formen und Strukturen!
Klare Strukturen sorgen für schnelle Erkennbarkeit. Dies ist sehr wichtig, um sich auf einer Website zurechtzufinden. Hier spielen Schriftgrösse, -grad und -art eine entscheidende Rolle, um beispielsweise Titel vom Lauftext unterscheiden zu können. Auch die Wahl des Farbschemas ist massgebend. Hier empfiehlt es sich, möglichst wenige Farben zu verwenden, wie auch auf unkonventionelle Farbkombinationen zu verzichten. Wie im klassischen Layout gilt es, neben den Farben schwarz und weiss höchstens zwei weitere Buntfarben zu verwenden. So wird ein Farbchaos vermieden.
Am besten eignet sich die Schriftfarbe des Lauftexts wenn möglich schwarz auf weissem Hintergrund zu haben. Die Buntfarben dienen lediglich zur Formatierung von Auszeichnungen, Titeln, wie auch für Bedienelemente einer Website. Denn jede Farbe, jede Schrift muss ihren Zweck erfüllen. Wenn sie das nicht tut, dann gehört sie weg.
Auch klare Formen helfen, sich auf einer Website zurechtzufinden. Für ein modernes Design empfiehlt es sich daher mit Grundformen zu arbeiten, sprich: mit Quadraten, Doppelquadraten und Kreisen. Dies gilt für Flächen wie aber auch für Bilder.
Um Grundsatz 1 zu veranschaulichen, dient die Seite des Schweizer Presserats als Beispiel. Hier sind weder klare Formen, noch klare Strukturen ersichtlich:
Die Startseite des Schweizer Presserats. (Screenshot: www.presserat.ch)
Wenn man Grundsatz 1 hier anwendet, könnte sie folgendermassen aussehen:
Beispiel für die Startseite des Schweizer Presserats. (Gestaltung: Diego Sturzenegger)
Grundsatz 2: Weniger ist mehr. Reduziere auf das Nötigste!
Dieser Grundsatz bezieht sich auf den Inhalt der Website, bzw. dessen Elemente. Es gibt viele Seiten im Netz, in denen alles gleich in die Startseite gepackt wird, jedoch empfiehlt es sich auch hier: Weniger ist mehr. Natürlich kommt es darauf an, für welche Zielgruppe die Website gedacht ist. Ziel ist es deshalb, nur gerade so viel auf der Website zu platzieren wie nötig ist. Das heisst: Alle Elemente, Bilder, Flächen und Texte, die es für die einzelne Seite nicht braucht, sollten weggelassen werden. Dies hat zur Folge, dass die Seite wesentlich übersichtlicher wird und man bestehende Inhalte optimal präsentieren kann.
Um Grundsatz 2 zu veranschaulichen, dient die Seite des Bundesamts für Statistik als Beispiel. Diese wirkt mit den vielen Texten, Bildern und Grafiken überladen und unübersichtlich. Die Dinge, die man als Besucher höchstwahrscheinlich finden will, sind auf der Seite klein aufgelistet und werden daher kaum beachtet. Die Hauptspalte hingegen ist relativ vollgepackt mit Informationen. Jede Meldung wird mit einem Bulletpoint aufgelistet, es ist kaum Raum vorhanden zwischen den verschiedenen Meldungen. Der Inhalt der Seite wirkt sehr kompress und lädt nicht zum Lesen ein.
Die Startseite des Bundesamts für Statistik. (Screenshot: www.bfs.admin.ch)
Wenn man Grundsatz 2 anwendet, könnte die überarbeitete Seite folgendermassen aussehen:
Beispiel für die Startseite des Bundesamts für Statistik. (Gestaltung: Diego Sturzenegger)
Die Sparte «Aktuell» wurde entfernt, da sie über die Navigation zu finden ist. Dies bietet nun Platz für die anderen Sparten, die vorhin auf der Seite unscheinbar zu finden waren. Diese werden in Boxen dargestellt, um sie hervorzuheben. Dazu wurde zusätzlich der Übertitel «Alles auf einen Blick» erstellt, um dem Besucher die Suchmöglichkeiten sichtbar zu machen. Das Ganze wirkt nun geordneter, kompakter und übersichtlicher.
Grundsatz 3: Weg von der Imitation!
Wer sich jetzt fragt, warum die Seiten nicht pompöser gestaltet sind, dem sei ein Stichwort gegeben: Flat Design. Mehr dazu gleich.
Mit dem Aufkommen des PCs und später des Internets war Skeuomorphismus jahrelang die Stilrichtung, welche für das Design der Benutzeroberfläche im Betriebssystem wie auch im Webdesign massgebend war. Skeuomorphismus ist die Imitation realer, vertrauter Gegenstände und Werkzeuge.
Ein Beispiel für eine skeuomorphistisch gestaltete Website. (Screenshot: www.havanabar.co.nz)
Diese Stilrichtung half dem Benutzer die Funktionen eines Computers oder, wie in unserem Thema, die einer Website zu verstehen. Steve Jobs war ein Verfechter dieses Stils, was sich in Apples Betriebssystemen und Programmen jahrelang widerspiegelte. Mit dem Aufkommen des ersten Apple iOS fürs iPhone begann die Debatte «Skeuomorphismus vs. Flat Design».
Flat Design bildet den Gegensatz zum Skeuomorphismus. Dieser zeichnet sich durch extreme Reduktion der Elemente aus. Hierbei wird auf jegliche Imitation verzichtet. Buttons beispielsweise werden nicht mehr dreidimensional, sondern nur noch in Flächenform dargestellt.
Ein Beispiel für eine Flat-Design-Website. (Screenshot: www.acme-world.com)
Flat Design bietet sich deshalb an, da sich der Benutzer heutzutage auch ohne imitierte Hilfsmittel, wie beispielsweise den dreidimensionalen Button, auf der Website zurechtfindet und inzwischen auch mit der Benutzung der Geräte vertraut ist. Ein Vorteil ist, dass vieles bequem mithilfe von CSS programmiert werden kann. Dazu spart die Website auch an Datenmenge und benötigt so weniger Ladezeit.
Um Grundsatz 3 zu veranschaulichen dient nun die Seite der Migros als Beispiel. Der Skeuomoprhismus ist hier nicht so ausgeprägt, dennoch erkennt man ihn anhand der Navigation sowie der weissen Inhaltsfläche auf dem grauen Hintergrund. Die Elemente der Navigation wirken durch ihre Verläufe wie nachgeahmte Knöpfe. Die Inhaltsfläche hingegen sollte vermutlich an ein Blatt Papier oder an eine Quittung erinnern. Beides ist heute nicht mehr zeitgemäss. Auch die untere Navigation unter «Top-Aktionen» ist in der Gestaltung die eines Registers nachempfunden.
Die Startseite der Migros. (Screenshot: www.migros.ch)
Der Benutzer findet sich auch ohne diese Elemente zurecht. Deshalb: Weg damit! Wenn man Grundsatz 3 hier anwendet, könnte die Seite folgendermassen aussehen:
Beispiel für die Startseite der Migros. (Gestaltung: Diego Sturzenegger)
Die Seite wirkt ohne die weisse Inhaltsfläche und den nachgeahmten Buttons doch viel freier in der Gestaltung. Elemente wie «Drucken» oder die Dreiecke in den Buttons wurden weggelassen, da der Benutzer inzwischen selber weiss, dass er die Seite ausdrucken kann bzw. er vermutlich kaum noch druckt. Die Dreiecke symbolisieren die untergeordneten Seiten einer Kategorie, doch der Benutzer ist sich heute gewohnt mit dem Cursor über das Element zu fahren, um die Unterkategorien zu sehen. Auch Trennungen mit Linien sind heute nicht mehr nötig. Durch genug Raum zwischen den Elementen wird automatisch eine Trennung erzeugt. Das wird sichtbar bei den Sliders. Auch hier ist der aktuell sichtbare Slider mit einer orangen Linie gekennzeichnet, statt wie vorhin zusätzlich mit einem Pfeil. Das einzige, was übernommen wurde sind die Bons auf der rechten Seite. Mit ihren abgerundeten Ecken wirken sie skeuomorphistisch. In der finalen, überarbeiteten Version bräuchten auch diese keine abgerundeten Ecken mehr.
Wir fassen zusammen
Um eine attraktive und moderne Website zu gestalten braucht es nur wenige Elemente. Mit dem gezielten Einsatz von Bild, Text, Fläche und Farben kann man mit wenig viel erreichen. Und wenn man diese drei Grundsätze übernimmt und auf die eigene Website anwendet, sieht es nicht nur schnell gut aus, sondern hilft letztlich auch der Usability.
Flat Design mag Geschmacksache sein, doch tritt es vermehrt auf. Nicht zuletzt auch wegen dem Ansatz «Mobile First», bei welchem das Augenmerk zuerst auf die Gestaltung für Smartphones gelegt wird. Deshalb macht Flat Design gerade so viel Sinn. Man spart an Datenmenge und kann sich durch Reduktion klar auf den Inhalt und die Usability konzentrieren.
Die Vorschläge sind sehr grafisch, doch das ist kein Muss. Man kann die Flächen natürlich auch durch Bilder ersetzen. Wichtig ist hier, dass man sich auf ein, aber höchstens zwei Bildformate beschränkt. Im besten Fall arbeitet man mit den genannten Grundformen.
Diese drei Grundsätze sollten helfen, eine tolle Website aufzubauen oder zumindest die grössten Fehler ausmerzen. Die Websites mögen dann vielleicht etwas schlicht sein. Aber wer sagt, dass schlicht nicht auch schön sein kann?