Basiskoffer

Ich komme viel herum. Als passionierter Globetrotter habe ich eine ganze Menge Länder bereist. Mal hatte ich während einer Reise ein klares Ziel vor Augen, das es zu entdecken galt und mal lies ich mich treiben. Ähnlich bewege ich mich auch im Web. Als Designer und Blogger durchstreife ich Woche für Woche mehrere hundert Seiten. Angefangen von der Recherche für eigene Projekte oder Blogartikel, über Besuche der einschlägigen Nachrichtenportale, die man vermutlich als Trampelpfade bezeichnen könnte, bis hin zu ausgiebigen Einkaufstouren, bei denen man niemals Schlange stehen muss, was ich sehr schätze. Zahlreiche Linktipps meiner Leser führen mich zu Orten, die ich vermutlich aus eigenem Antrieb heraus niemals entdeckt hätte. Von kurios, über informativ oder gar essentiell wichtig, bis erheiternd ist alles dabei.

Das Medium Internet prägt mich spätestens seit meiner Diplomarbeit 1999. Ich habe für Konzerne wie Preussag und Salzgitter AG die allerersten Webauftritte auf den Weg gebracht. Damals waren das überschaubare Projekte und noch viel freier hinsichtlich ihrer Restriktionen und Konventionen als man es heute in den allermeisten größeren Projekten vorfindet. Einen krassen Beleg für die Konformität von Webauftritten sind aktuell sicherlich deutsche Nachrichtensites, die sich hinsichtlich des Aufbaus, des Inhaltes aber auch in Bezug auf das Design kaum noch unterscheiden. Dieser, auch durch das Werbemitteldiktat hervorgerufene, Einheitslook zahlreicher Nachrichtenmarken im Web ist aber gleichzeitig eine Chance für all diejenigen, die sich bewusst unterscheiden wollen. Ein Bruch mit dem bestehenden Raster erleichtert dies und ist unabdingbar, wenn man Eigenständigkeit und Wiedererkennbarkeit erreichen will.

Egal ob ich in den Flieger steige oder ob der Relaunch eines neuen Projektes ansteht, ich habe immer ein paar Sachen dabei, ohne die ich nicht losziehe. Packen wir doch einmal einen Koffer, mit dem sich ein Webauftritt in Bezug auf das Design und die Aufbereitung der Inhalte bestens realisieren lässt. Ich habe deshalb einmal einen “Basiskoffer” zusammengestellt, der mit elementaren Komponenten befüllt ist und mir bei jedem Projekt zur Seite steht.

Aufbau

Ein guter Aufbau ist die Basis, das Schuhwerk gewissermaßen. Der Aufbau folgt dabei dem Inhalt, nicht umgekehrt. Nur so wird kein Korsett sondern ein Maßanzug draus. Bevor der erste Griff in die Farbpalette erfolgt, sollte der “grobe Rahmen”, das Gerüst stehen. Während der Konzeptionsphase wird der gesamte Inhalt sondiert und hinsichtlich seiner Position innerhalb des Webauftritts geordnet und strukturiert. Dabei kann z.B. auffallen, dass weder eine rechte Spalte noch eine linke von Nöten sind. Der Wunsch des Kunden bezüglich einer emotionalen Ansprache könnte wiederum eine zentrale Bühne für großformatige Fotos erforderlich machen. Der zukünftige Aufbau entwickelt sich also aus dem Projekt heraus. In dieser Phase der Konzeption wird nach dem Ausschlussprinzip vorgegangen. Hier wird man bereits sehen können, wie der Auftritt später NICHT aussehen wird.

Corporate Design

Als Freund von Konsistenz beginnt eine Entwurfsphase bei mir mit zwei elementaren Schritten. 1. In einer Recherche werden die Mitbewerber unter die Lupe genommen, vor allem die direkten Nachbarn, also jene mit ähnlichem Standort bzw. ähnlicher regionaler Ausrichtung. 2. Sofern vorhanden, schaue ich mir das Corporate Design-Handbuch des Auftraggebers an. Hier erlebe ich direkt zu Beginn oftmals Überraschungen. Wenn große Unternehmen oder gar Konzerne ihre Vorgaben in einer einseitigen Word-Datei bereithalten, kommt man schon einmal ins Grübeln. Und das kommt häufiger vor, als man glaubt. In jedem Fall werden die Vorgaben gewissenhaft durchleuchtet und die Basiselemente zusammengetragen.

Der Blick in das CD des Unternehmens schließt von vornherein einige Gestaltungsansätze aus. Nicht der eigene Gusto, sondern Hausfarben, Hausschriften und eventuell ein Gestaltungsraster legen den Rahmen fest, in dem man sich bewegen kann. Dieser ist immer noch groß genug um zahlreichen Alternativen herauszuarbeiten. Gibt es keine oder nur sehr weiche Vorgaben, werden alle Designansätze so aufbereitet, dass sie in ein späteres Corporate Design-Handbuchs münden. Es gilt also in nachvollziehbare Raster zu denken und zu gestalten. Die Einheitlichkeit des Erscheinungsbildes in digitalen und klassischen Medien ist eines der Ziele, das es zu erreichen gilt. Einheitlichkeit darf dabei nicht mit Gleichmacherei missverstanden werden. Adaption und Anlehnung sind die entscheidenden Schlüsselwörter an denen ich mich orientiere. Gegebenenfalls muss man auf Kundenseite, noch etwas Überzeugungsarbeit leisten, wenn Broschüren “1:1 ins Netz” gestellt werden sollen.

Hierarchien, Klassen und Abstände

Webnutzer sind dankbar, wenn sie schnell durch eine Website navigieren können. Einheitliche Farben jeweils für Links, für Überschriften und für nicht verlinkten Text sorgen dafür, dass dies möglich ist. Wichtige Objekte sollten groß und weniger wichtige Elemente klein abgebildet werden. Was profan klingt und selbstverständlich sein sollte findet sich dennoch in unzähligen Webauftritten unzureichend wieder. Eine gute Orientierung beginnt mit einem in sich schlüssigen Schriftklassenkonzept. Die Feinjustierung von Abständen hingegen ist eine typische Maßnahme kurz vor dem Relaunch.

Abstände sind ein stark vernachlässigtes Ordnungssystem. Sie sind vermutlich das am meisten unterschätze Gestaltungsmittel überhaupt. Um es einmal mit der Reisemetapher auszudrücken: Mit Abständen ist es, wie mit guten Wanderschuhen. Wenn man keine hat, gibts wunde Stellen. Zu große oder zu geringe Abstände fallen beim Webdesign sofort ins Auge. Ausgewogene Abstände nimmt man nicht wahr, und das ist auch gut so. Ein Seitentitel als wichtigste Information einer Webseite benötigt nicht nur eine entsprechende Größe, die in der CSS-Datei h1 zuzuordnen ist, sondern zusätzlich genügend Freiraum. Das Selbe gilt auch für das Logo, den Fließtext inklusive der Zeilen, Tabelleninhalten, Fotos, Abschnitte auf Übersichtsseiten, etc… Weißraum will genauso gestaltet sein, wie der Inhalt, den es abzubilden gilt. Optimale Abstände sorgen für Übersichtlichkeit. Sie schaffen gemeinsam mit den angesprochenen Hierarchien einen besseren, weil nutzerfreundlicheren Webauftritt.

Usability

Keiner dürfte den Begriff “Usability” in Verbindung mit den digitalen Medien so mit Inhalt gefüllt haben, wie Jakob Nielsen. Man muss nicht alle seiner Ansichten teilen. Mit zahlreichen Publikationen hat er aber dafür gesorgt, dass ein Faktor in Bezug auf das Web- oder Interfacedesign in seiner Position gestärkt wurde – das Nutzerverhalten. Die Gebrauchsfähigkeit einer Website bildet eine Allianz mit dem Nutzen (Utility).

Man kann unterstellen, dass die allermeisten Besucher ein Ziel vor Augen haben und so schnell wie möglich an eine bestimmte Information gelangen möchten. Design ist nichts, was diesem Streben im Wege stehen sollte, es aber zwangläufig tut, da nicht jeder diese Sichtweise für sich entdeckt hat und in die Rolle des Nutzers schlüpft. Wer sich darauf einlässt wird feststellen, dass Usability keineswegs der Königsmörder des Designs ist. Viel mehr unterstützt es die Kreation, macht sie einen Entwurf doch erst nachhaltig. Hierarchien, Abstände und ein Farbkonzept bestimmen die Gebrauchsfähigkeit einer Site ebenso wie grundlegende Gegebenheiten wie Leserichtung und Blickführung.

Navigationskonzept

Ein Navigationsgerät, das einen ständig fehl leitet sollte man ebenso schnell austauschen, wie eine Website, auf der man die Orientierung verloren hat. Rolltreppen in Kaufhäusern tragen Nummern, so dass man erkennt auf welcher Etage man sich befindet. Ebenso zeigen Schilder oberhalb der Supermarkregale in welchem Gang man sich befindet. Das ist so selbstverständlich, dass keiner jemals auf die Idee käme die Schilder einfach wegzulassen was uns zu der Frage führt, weshalb es immer noch so viele Websites gibt, bei denen man nach drei Klicks nicht mehr weiß in welchem Bereich man sich befindet. Kein Projekt geht bei mir auf die Reise, ohne dass es eine Kennzeichnung des Klickpfades gibt. Die Hervorhebung der angeklickten Navigationstasten gewährleistet eine sichere Standortermittlung. Wer seine Position kennt, kann seine Bewegung zielgerichteter fortsetzen.

In komplexen Sites ist nach wie vor ein Brotkrumenpfad als Unterstützung hilfreich. Unterschiedliche Nutzer navigieren unterschiedlich, deswegen machen sich auch eine Volltextsuche und bedürfnisorientierte Einstiege für Zielgruppen gut. Einheitliche Linkfarben, treffende Begriffe sowie eine semantische Ordnung, in der Gruppen gleicher Gewichtung in Haupt-, Zielgruppen, Meta- und Footer-Navigation zusammengeführt werden, erleichtern die Bedienung und das Zurechtfinden. Eine gute Haptik, hervorgerufen durch gute Rollover-Zustände der Links, Buttons und Schaltflächen, verleiht dem Joy-of-Use den letzen Schliff.

Mit dieser Ausrüstungs- und Packliste sollte man auch für Projekte in wilden Fahrwassern und unwegsamen Terrain gewappnet sein. Sie erhebt nicht den Anspruch vollständig zu sein, ist aber vielleicht Orientierungshilfe, wenn es darum geht sich durch ein Webprojekt zu hangeln.

Ich wünsche eine gute Reise!

Der Artikel ist erschienen im Web Designer´s Sketchbook.