Minimalistisches Design - Fortschritt oder Rückschritt? (Quelle: http://www.markenpersonal.de)

Auch im Web hat sich in den letzten Jahren durchaus viel getan. Web 2.0. Social Communities. eCommerce. Das spiegelte sich natürlich auch im Erscheinungsbild des www wieder. Altbekanntes wurde verbessert, neue Technologien ersetzten alte und ermöglichten ganz neue Vorgehensweisen der Web-Präsentation. Traditionen wurden über den Haufen geworfen, neue Trends entstanden.

Und auch für das neue Jahr 2010 gibt es Tendenzen und Richtungen, in die die Gestaltung geht. Zwar ändert sich nicht alles am 1. Januar, doch die Entwicklung vom Beginn des Jahres bis jetzt zeigt doch recht klar, in welche Richtung der Weg gehen könnte. Das reicht von der optischen Gestaltung, der Platzierung von Headern und übergroßen Footern bis hin zum erneut auflebenden Retro-Look der im Gegensatz zum einschlägigen Minimalismus steht.

Die Trends unterscheiden sich nicht von Grund auf von dem was 2009 aktuell war. Und was auch immer der Anwender, Designer oder Programmierer von den Trends halten mag, ob sie gefallen oder nicht, hängt sicherlich auch von persönlichen Faktoren ab. Dennoch wollen wir uns die Trends zumindest ansehen, um gewappnet zu sein, mitreden zu können und uns evtl. weiterzuentwickeln…

Trend 1: Logos & Headers mit Übergröße

Ein trendy Kopfbereich macht Lust auf mehr. (Quelle: http://www.spoongraphics.co.uk/)

Intro-Seiten sind von Gestern. Sogar von Vorgestern, wenn nicht sogar von Vorvorgestern. Wie sonst aber erreicht man einen unvergessliches Erlebnis für den User, der auf die Seiten kommt? Trend im neuen Jahr wird sein, unvergessliche Eindrücke und Eye-Catcher-Elemente mittels riesiger Logos auf vergleichsweise großflächigen Logos einzunehmen. Im Extrem nehmen diese Header sogar den ganzen Bildschirm flächig ein, ohne eigentlichen und wichtigen Content zu präsentieren. Der Benutzer muss dafür einfach nur nach unten (oder zur Seite) scrollen. Das hilft vor allem dabei, da viele Anwender einfach klickfaul geworden sind. Immerhin sind sie schon von selbst auf die Seite gesurft. Da sollen die Weiteren Informationen einfach nur präsentiert werden, ohne das der Anwender noch viel zutun muss.

Trend 2: Handgemalte Layouts

So persönliche wie Urlaubsfotos: Handgemaltes Design (Quelle: http://www.casioexilimlab.com/)

Garantiert nichts Neues ist die Platzierung von händisch gemalten Layouts auf Internetpräsenzen. Sicherlich aber ist es eine eigene Kunst für sich solche Layouts zu entwickeln. Die einen beherrschen sie, andere würden gerne, haben aber Angst es zu tun. Im Trend für 2010 geht es nun nicht darum die Site komplett im handgemalten Designglanz erstrahlen zu lassen, sondern vielmehr darum, an und für sich nüchtern daherkommende Sites durch akzentgebende eigenständig gescribbelten, gezeichneten oder gemaltet Grafiken mehr Identität und Personalität zu schenken. Handzeichnungen als Trend werden 2010 elementarer werden. Nicht im Mittelpunkt stehend, sondern vielmehr unterstützend und subtil.

Trend 3: Typo

Schrift setzt Akzente. (Quelle: http://www.montylounge.com/)

Eine schwierige Thematik im Bezug auf Trends ist die Gestaltung des Schriftbildes. Dies wird auch 2010 nicht anders sein. Nach wie vor ist Typgraphie ein schwieriges Feld. Usability wird groß geschrieben. Die einfach Benutzbarkeit mit modernen Schriften wird von vielen als Problemstelle indentifiziert. Webdesigner haben deshalb durchaus Angst, in Sachen Typo Neues auszuprobieren und alle Möglichkeiten auszuloten, die sich ihnen bieten. Momentan ist es noch undenkbar – und Ausnahmen bestätigen auch hier die Regel – Schriftschnitte zu vermischen. Drei Schnitte sind noch tragbar, während 7 schon zu viel des Guten sind. In Zukunft werden Schriften noch mehr ausgelotet werden. Sie werden kombiniert und den Bedürfnissen angepasst werden. Platziert man sie dann noch richtig auf der Präsenz, rückt die typografische Gestaltung in den Mittelpunk des Layouts. Das macht den eigentlichen Inhalt interessanter und setzt den Fokus auf Selbigen – ganz ohne die Site mit Bildern zu überladen.

Trend 4: Einseitige Layouts

Alle Infos auf einer Seite. (Quelle: http://www.vlourenco.com/)

Eine kompakte Site die sich auf das Wesentliche beschränkt: Das sind sog. One-Page-Layouts. Die Webpräsenz als Trend 2010 besteht nur aus einer einzigen Seite. Weg von einer umständliche Navigation hin zu einer Annäherung auf die Hauptpunkte. Der Vergleich mit einer elektronischen Visitenkarte eignet sich hierbei am besten. Einseitige Layouts sind persönliche Profile und keine Unternehmensdarstellung. Die Person die sich präsentiert, steht im Vordergrund.

Trend 5: Interaktives Intuitivdesign

100% Flash for Interactive Design. (Quelle: http://www.crowleywebb.com/)

Auch Flash hat seine Hoch-Zeit schon hinter sich. Gut erinnern wir uns an die Tage, an denen man keine Website benutzen konnte, ohne auf eine Benutzeroberfläche aus Flash zu stoßen. Teilweise musste man sogar auswählen, ob man eine Flash-Version oder die HTML-Version (dann aber ohne die tollen BlingBling-Effekte) benutzen wollte, wobei beide Varianten nicht durch ihre Umsetzung glänzten. Zum Glück wird Flash heutzutage viel besonnener eingesetzt. Zwar ist ein Trend in Richtung jQuery zu beobachten, jedoch ist Flash noch immer ein angemessenes Werkzeug, wenn es darum geht, Akzente auf einer Site zu setzen. Denn eines ist klar: Nichts ist so interaktiv wie Flash. 2010 geht der Trend in zwar wieder in Richtung Flash, es wird aber auf die Elemente beschränkt, die einen wirklichen Mehrwert auf die Site bringen. Das wird ein wahnsinnig intuitives Design ermöglichen.

Trend 6: Modale Boxen

Die modale Box (Quelle: http://davidwalsh.name)

Modale Boxen sind keineswegs neu. Sie nehmen im neuen Jahr jedoch erneut an Fahrt auf. Eine modale Box ist vergleichbar mir dem Pop-up 2.0. Wenn man hier im Blog auf die Bilder klickt, werden diese auch in modalen Boxen präsentiert. Sie schauen gut aus und wirken irgendwie edler. Sie sind einfach zu gestalten, leicht zu benutzen und bieten zugleich einen tauglichen Grad an Usability. Der Trend 2010 wird dazu führen, dass diese Art von Pop-ups noch weiter verbreitet und universal eingesetzt werden.

Trend 7: Minimalismus

Klare Linien, purer Auftritt (Quelle: http://www.janreichle.com/)

Mein persönlicher Lieblingstrend. Deshalb, da Minimalismus 2010 nicht mit dem Minimalismus dieser zahlreichen altertümlichen und verschlafenen Sites von gestern zu tun hat. Zeitgemäße minimalistische Websites bieten viel Luft und Weißraum, präsentieren die Essenz der Site und überraschen mit beeindruckendem Schriftbild und fantastischer Farbwelt. Minimalismus ist nicht kalt und gefühllos. Es ist warmes Design und bringt Dinge auf den Punkt.

Trend 8: Print-Layouts

"Printline" - Magazine im Web (Quelle: http://www.macalicious.com/)

Studien belegen, das Jahr für Jahr immer mehr Konsumenten der traditionellen Presse den Rücken zukehren in Richtung Online-Konsum. Was die Konsumenten dabei jedoch nicht verlieren möchten, ist der Komfort, den Sie vom Print her kennen. Viele Menschen sind regelrecht verliebt in ihre Lieblingszeitschrift. Viel weniger aber haben eine wirkliche Lieblingssite. Designer stehen nun vor der Herrausforderung, diese “Konvertierten” anwendergerecht und gemäß bestehender Gewohnheiten zu begrüßen. Die Entwicklung zeigt, das es durchaus einen Hand zu Layouts gibt, sie sich vom traditionellen Print zunehmend wenig unterscheiden. Content wird sorfältig aufbereitet, meist auf einer Seite. Das vom Print bekannte Layout schafft eine gewohnte Umgebung, bietet einen hohen Grad des so erwünschten Wohlfühlfaktors und sorgt für ein heimeliges Gefühl.

Und das bedeutet, dass die Verantwortung der Suchmaschinenoptimierung (SEO) in die Hände des Webdesigners fällt. Dieses Thema geht jedoch am eigentlich Design Thema vorbei und fällt nicht zwingend unter die Kernkompetenzen eines Webdesigners.

Darum kommen hier ein paar nützliche Starter-Tips, die dem einen oder anderen unter euch helfen mögen. Viel Spaß! Kein Anspruch auf Vollständigkeit…

1. Code besser layouten als das Design.

Wenn wir die Oberfläche der Site erstellst, ist sicherzustellen, dass man semantisch korrekten Code benutzt. Durch das Benutzen von beschreibenden Tags in den Seiten wird es Suchmaschinen ermöglicht den Content zu erfassen und ihn besser einordnen zu können. Zudem erleichtert das den Formungsprozess der Website selbst.

2. Schlüsselwörter benutzen, aber nicht missbrauchen.

Schlüsselwörter beschreiben den Inhalt deiner Site. Sie müssen zum Inhalt passen. Wichtig hierbei ist es, dass sie überall an den relevanten Positionen auf der Site erscheinen. Die Schlüsselwörter sollten in der URL, dem Seitentitel und den heading-tags erscheinen. Die Schlüsselwörter müssen auch im Fließtext der Seite auftauchen. Hier ist Besonnenheit gefragt, da eine Überfüllung mit Schlüsselwörtern wiederum ein schlechteres Ranking zur Folge hat.

3. Flash für Navigation vermeiden.

Es ist verführerisch einige brilliante Effekte und intuitive Navigationssysteme mit Flash zu implementieren. Man sollte davon aber die Finger von lassen. Suchmaschinen können Flash-Dateien nicht wirklich auslesen, je nach Programmiergeschick und Sprachversion in der Datei. Das bedeutet das Suchmaschinen die Site nicht erfassen und entsprechend indizieren können. Deshalb: Navigation ohne Flash realisieren.

4. Bilder nicht vergessen.

Es ist sicherzusetellen, dass das alt-Attribut von implementierten Bildern korrekt zu benutzen. Dessen Inhalt muss den Bildinhalt treffend beschreiben. Suchmaschinen können das Bild an sich selbst nicht interpretieren. Zeichnet man Bilder nicht aus, verpasst man zudem Traffic der durch die Bildersuche entsteht.

5. Keine generischen Links benutzen.

Das Wichtigste für Suchmaschinen sind die Links. Beim Verlinken auf den Content ist es deshalb wichtig, ein Schlüsselwort zu benutzen, das dem Zielcontent entspricht. Ein Beispiel: Ein Link der zum Freistellen von Haaren mit Photoshop führt, sollte statt: “Freistellen mit Photoshop” eher folgende Bezeichnung haben: Haarige Angelegenheiten: Freistellen mit Photoshop.

Ansatz zur Problemlösung kann die Optimierung auf spezielle Browser sein. Doch derer gibt es viele. Wie schaut die Site in anderen Browsern aus, für die die Site nicht optimiert wurde? Welche Browser gibt es überhaupt und muss ich alle auf meinem Testsystem installiert haben?

BrowserShots. Check browser compatibility

browsershots.org schafft hier Abhilfe. Einfach Link zur Site (z.B. hochgeladen auf einen Testserver) eingeben, gewünschte Browser auswählen und staunen, wie entstellt die eigene Seite auf exotischen Browsern daherkommt – ganz ohne lästige Installation unbenötiger Browser. Versierte Anwender wählen noch Details wie Bildschirmgroße, Farbtiefe, Java-, JavaScript und Flash-Aktivierung aus.

Abschließend stehen die png-Screenshots als zip gepackt zum Download und Vergleichen bereit. So macht Optimierung Spaß!

Das Ausgangsbild - haarig schön! (Quelle: http://kwerfeldein.de)

Pünklich zum Start in das Wochenene will ich mit diesem Tutorial zeigen, wie man auf relativ schnelle und bequeme Art und Weise Haare mit Hilfe des Filters “Extrahieren” freistellen kann.

Bevor wir durchstarten jedoch eine Anmerkung: Freistellen, egal welche Objekte man bearbeitet, ist und bleibt eine Arbeit, bei der man sehr viel Geduld braucht, will man es gut machen. Kein Objekt gleicht dem Anderen. Und je nach Hinter- / Untergrund des freizustellenden Objektes gibt es mehr oder weniger gute Vorgehensweisen. Dies gilt auch und vor allem für das Freistellen von Haaren.

Möglicherweise gibt es auch verschiedene Bezahl-Plugins und Filter. Heute allerdings stellen wir mit Photoshop-Bordmitteln frei. Auf geht’s!

Vorraussetzungen:

• Adobe Photoshop
• Filter “Extrahieren” (in den neuen Versionen nicht per Standartinstallation mitgeliefert. Erhältlich auf CD oder hier für Windows und Mac)
• Bild mit Haaren, Fell, Gras, etc.

Auswählen und Freistellen werden oft in einem Zuge genannt. Im Grunde passiert zwar grob gesagt das Selbe, jedoch unterscheiden sich beide Verfahren doch erheblich. So ist das Auswählen meist eine Vorstufe zum Freistellen. Meist wählt man zunächst aus, anschließend wird die Auswahl dann freigestellt.

Photoshop bietet aber auch andere Vorgehensweisen. Ein Beispiel für heute ist der Filter “Extrahieren”. Das komplexe Werkzeug dient vor allem dazu, weiche Konturen zu übernehmen. Auch problematische Randzonen wie Haare, Fell oder sonstige feine Strukturen können verarbeitet werden (bei dieser Art von Aufgaben eignet sich der Filter besonders gut).

Der Filter befindet sich in folgendem Menü: “Filter” -> “Extrahieren…” Eventuell muss der Filter manuell nachinstalliert werden, da in den neueren Versionen von Adobe Photoshop andere Werkzeuge eine ähnliche Aufgabe übernehmen. Für unser erstes Tutorial zum Thema Haare freistellen genügt der Filter jedoch vollkommen. Ihr erhaltet den Filter entweder über die oben genannten Links, oder aber ihr seht auf euren Installationsdisks nach.

Der Extrahieren-Filter. Kanten markiert, Fläche gefüllt!

Schritt 1: Aller Anfang ist leicht

Bevor es losgeht, müssen wir das Ausgangsbild in Photoshop laden. Dies sollte kein Problem sein. Danach öffnen wir direkt den Extrahieren-Filter über das Menü “Filter” -> “Extrahieren…”

Das sich nun öffnende Fenster zeigt das zuvor in Photoshop geladene Bild. Auf der linken Bildseite befinden sich zahlreiche Tools, von denen das Oberste standartmäßig zu Beginn ausgewählt ist. Es handelt sich dabei um den sog. Kantenmarker. Darunter befindet sich ein Füllwerkzeug und der Radiergummi. Die weiteren Werkzeuge auf der linken Seite dienen der späteren Verfeinerung im Laufe des Vorgangs (siehe Schritt 3).

Mit dem Kantenmarker umfährt man nun die Kontur des freizustellenden Objektes. Dabei fährt man auf dessen Außenkante entlang. Die Umrandungslinie muss dabei so liegen, das Teile des Hintergrundes mit in der entstehenden Konturlinie liegen (grüne Linie). Auf diese Weise lassen sich Objekte mit eher weicher Kontur freistellen. Besonders geeignet ist das Werkzeug eben auch dazu, komplexe, ausgefranste Konturen freizustellen, wie man sie von Haaren kennt.

Wichtig bei Umgang mit Haaren im Filter “Extrahieren” ist, für die Kantenmarkierung einen größeren Pinsel zu verwenden. Es entsteht eine breite und unregelmäßige Kontur (siehe Bild). Diese Kontur braucht nicht wirklich exakt zu sein. Im Gegenteil, mit der Zeit bekommt man ein Gespür, wo mehr und wo weniger genau gearbeitet werden muss. Wichtig ist, das man alle Haare mit dem Konturmarker gewissenhaft einfängt. In den Bereichen wo die einzelnen Haarspitzen weiter vom Kopf entfernt sind, scheint meistens auch mehr Hintergrund durch. Der äußere Konturrand muss deshalb bei Haaren deutlich mehr Hintergrund mit einfangen, also beispielsweise bei den Armen, wo die Kontur härter fällt.

Ist dies geschafft, füllt man die eingeschlossene Fläche mit der Maske (blaue Fläche). Dies geht nur, wenn die Kontur eine Fläche einschließt. Die Seitenränder des Bildes gelten auch als Flächenbegrenzung.

Preview mit ersten Ergebnissen. Auf zum Verfeinern...

Schritt 2: Preview und Nachbearbeitung

Ein Klick auf Preview wendet unsere Einstellungen in einer Vorschau an. Für den bisher eingesetzten Aufwand kann sich das Ergebnis durchaus sehen lassen. Mit den Werkzeugen auf der linken Seite lassen sich die Ergebnisse weiter optimieren. Hier am besten Ausprobieren. Es gibt keine allgemeingültige Regel, denn jedes Bild erfordert eine spezielle Vorgehensweise. Hilreich jedoch erweist sich das Umschalten der Ansicht mit verschiedenen Hintergründen. Dies ist auf der rechten Seite um Bereich “Preview” unter dem Drop-Down-Menü “Display” möglich.

Im Extrahieren-Filter nachbearbeitet.

Vor allem sollte auf Transparenzbereiche geachtet werden, wo keine sein sollen. In meinem Beispiel ist dies bei den Armen der Fall, vor allem beim Linken. Der Effekt entsteht durch eine zu breit angesetzte Konturlinie vom Kantenmarker. Hier kann mit den Werkzeugen nachbearbeitet werden. Was zuviel wegextrahiert wurde, kann mit dem Radiergummi wieder sichtbar gemacht werden. Bei den Haaren ist dies schwieriger. Ein Radieren hätte zur Folge, auch den Hintergrund sichtbar zu machen.

Schritt 3: Finishing

Der Klick auf OK bestätigt die Einstellungen und wendet den Filter an. Ergebnis ist das freigestellte Bild auf transparentem Hintergrund. Den letzten Schliff erhält das Bild nun mit Hilfe folgender Ansätze:

Der Protokollpinsel holt bereiche zurück, die durch den Filter zerstört wurden.

Bereits in Schritt zwei haben wir gröbere Fehler des Filters eliminiert. Nun folgt das Finishing. Im fertigen Bild können überflüssige Bereiche, die durch den Filter übersehen wurden, gelöscht werden. Dazu verwendet man den Radiergummi, oder komfortabel eine Ebenenmaske. Bereiche die der Filter zuviel entfernt hat, lassen sich mit dem Protokollpinsel zurückholen (im Beispiel vor allem wieder im Bereich des linken Armes).

Der Protokollpinsel (Standartmäßig über “Y” per Shortcut auswählbar) übermalt das aktuelle Bild mit einer früheren Bildversion. Welche Version verwendet wird, kann über die Protokoll-Palette ausgewählt werden. Dazu klickt man im Protokoll auf das vorgesehene freie Feld. Des Symbol des Protokollpinsels erscheint. Als Protokollquelle sollte sinnvollerweise der Bildzustand vor dem Anwenden des Filters in der Protokoll-Palette markiert werden. Der Pinsel weiß nun, welche Bilddaten als Quelle in Frage kommen. Die transparenten Löcher im Beispiel lassen sich so bequem wieder zurückholen.

Fertig, nicht vollendet. Das Ergebnis!

Schritt 4: Platzierung

Das freigestellte Bild kann nun in verschiedenster Art und Weise montiert werden. Im Beispiel habe ich das Bild einfach mit Transparenzwerten gespeichert und vor einen anderen Hintergrund geladen. Was in Transparenz noch störend, fransig oder gekörnt wirkt, fällt vor Hintergrund nicht mehr auf.

Um die Arbeit jedoch perfekt zu machen, müsste man sicherlich noch fabklimatisch Optimieren. Zusätzlich währen Gedanken zum Thema Nachbelichtung angebracht. Doch dazu mehr in einem anderen Tutorial.

Das Endergebnis

Geschafft! Viel Spaß beim Freistellen. (Quelle Hintergrund: http://desk08.customize.org/)

Beim Website-Erstellungsprozesses stößt man früher oder später auf die Frage, welcher Inhalt kommuniziert werden soll. Ist dieser Inhalt bei Websites meist unterschiedlich, so gilt für dessen Gestaltung umso mehr das Gesetz des Screen-Designs. Wichtiges Merkmal hierbei: Der Inhalt muss einfach und präszise zu erfassen sein – die Kommunikation muss schnell funktionieren. Teil 4 der Reihe “Visuelle Rhetorik” beschreibt, inwiefern Textgestaltung und Inhalt zusammenpassen müssen.

Schritt 1: Erstellung eines Grundrasters. (zum Beispiel mit 960.gs)

Standart-Raster. Wo muss nun der Text hin!?

Bei Online-Darstellungen mit Navigation ergibt sich beinahe automatisch die Notwendigkeit eines vertikalen Gestaltungsrasters. Die Gestaltungsfläche wird dabei in mehrere Spalten aufgeteilt. Die Spalten schaffen die Grundordnung der Site. Demnach sind die Spalten immer gleich breit. Benötigt der Layouter allerdings mehr Breite, als ihm eine Spalte zur Verfügung stellt, so kann er zwei oder mehrere Spalten zusammenfassen, solange er eben im Raster bleibt.

Das Beispiel rechts zeigt eine klassische Aufteilung der Gestaltungsfläche mittels vertikalem Gestaltungsraster. Es scheint leicht, Inhalte einzufügen. Doch wo würde man klassische Navigationspunkte ansetzen? Für eine Navigation in Form eines Registers empfiehlt sich ein Vorgehen analog zum Raster. Pro Spalte eine Navigations-Rubrik.

Schritt 2: Platzierung der Inhalte am Raster.

Der Text klebt am Raster...

Der Text muss mit Überlegung an den Spalten platziert werden. Klebt man den Text direkt an den Spaltenrand, erhält man ein am Raster ausgerichtetes Schriftbild. Das wirkt sehr streng und langweilig. Es ist zuwenig Luft und Auflockerung vorhanden.

Auch wenn man im finalen Layout die Rasterlinien nicht wie im Beispiel zwangsläufig sieht, so fällt dennnoch auf, das die momentane Darstellung relativ bedrückend, sogar unordentlich wirkt – und das trotz der Verwendung eines Gestaltungsrasters. Dabei sollte das Raster eigentlich dabei helfen, die Übersichtlichkeit zu erhöhen.

Schritt 3: Ordnung durch sichtbare Rasterlinien.

Sichtbare Rasterlinien. Besserung in Sicht !?

Um mehr Ordnung und Führung für das Auge zu erhalten, setzt man sichtbare Rasterlinien ein. Diese sollten nicht zu dominant gestaltet sein, sondern filigran und schlicht.

Das Zwischenziel: Zweckmäßig und schlicht.

Zeitlos und schnell - sichtbare Rasterlinien

Nun wird das Raster ausgeblendet, denn es dient dem Layouter lediglich als Hilfestellung für das Setzen der Inhalte. Der Empfänger der Website erledigt hier Kopfarbeit, indem er das Raster zwar nicht sieht, es aber dennoch unterbewusst wahrnimmt.

Für die bloße Benutzung von Text auf der Site wäre das Raster soweit ausreichend. Bei einer Website als multimediale Kommunikationsform (visuell, auditiv) ist es im Grunde jedoch eine Ausnahme, nur mit Text zu arbeiten. Zum Text gesellen sich meist mindestens Grafiken oder Tabellen hinzu.

Überlegung: Nicht nur Text !?

Das Raster wird gebrochen

Doch was geschieht, wenn Text auf einer Fläche platziert werden soll? Dies wäre zum Beispiel bei Tabellen, grafischen Boxen oder Buttons der Fall. Setzt man einfach wie gewohnt die Inhalte ins Raster, so stimmt zwar die Ausrichtung am Raster, allerdings ist die Textausrichtung im Eimer. Grund hierfür ist folgender Tatbestand: Der Text braucht Abstand zur Container-Box, um wirken zu können. Hält man diesen Abstand nicht, entseht ein beklemmendes Gefühl (Text klebt am Raster). Man muss Abstand zur Container-Box halten.

Ein Raster, zwei Führungslinien

Dieses Halten des Abstandes macht es jedoch unmöglich, sämtliche Inhalte des Rasters auf eine optische Linie zu bringen.

Schritt 4: Einheitliche Textausrichtung.

Um das Entstehen dieser verschiedener Führungslinien zu verhindern, muss der Text neu ausgerichtet werden. Dies geschieht mittels einer Neuausrichtung des gesamten Textes. Ziel ist ein einheitlicher Abstand von Text zu Box – egal ob die Box gerade sichtbar ist, oder nicht, bei Ausrichtung zu einer einzigen optischen Führungslinie. Dabei kann der Spaltenabstand zwischen den Boxen verringert werden.

Nach der Neuausrichtung: Eine Linie steht für Ordnung.

Schritt 5: Ein neues Raster entsteht.

Was nun entsteht ist ein neues Raster. Das Raster beinhaltet eine Spalte für Text (dunkelgrün hinterlegt) und eine Spalte für Boxen (magenta Linien).

Ein neues Raster wird beiden Ansprüchen gerecht.

Resultat ist eine saubere Textlinie und klare Linien als Eingrenzung für spätere Inhalte (Boxen, Bilder, Tabellen). Das schenkt dem Auge Klarheit und ermöglich ihm, Inhalte schnell zu erfassen.

Das Endergebnis.

Am Ende der Mühen steht ein finalisiertes Raster, das verschiedenen Ansprüchen gerecht wird. Text kann simpel gesetzt werden, was die künftige Arbeit an der Site vereinfacht und vor allem auch beschleunigt. Mithilfe der Boxen kann Text zum einen hervorgehoben werden, zum anderen dienen die Boxen als Platzhalter für etwaige Grafiken. Mittels des Rasters kann die Site klar und strukturiert Botschaften übermitteln.

Das Endergebnis.

Deshalb obliegt der Erstellung eines Rasters für eine Site besonderes Augenmerk. Ähnlich dem Hausbau wird mit diesem Grundgerüst dem weiteren Vorgehen die Richtung gewiesen.  Je nach  zu transportierenden Inhalten sollte das Raster den Anforderungen entsprechend erarbeitet werden.

Für die Praxis empfiehlt sich das Aufteilen der “Rasterarbeit” in zwei Schritte. Zum Einen das Layouten mittels entsprechender Software, zum Anderen das technische Umsetzen und Implementieren der Rastergestaltung in der Website.

Stimmungsbild für eine Website mit Thema Kaffee

Das Tutorial zeigt Vorgehensweisen zur Extraktion und Reduzierung eines Farbschemas mit Adobe Photoshop CS3, wie man es für die Erstellung einer Website benötigt.

Im Laufe eines Website-Erstellungsprozesses stellt sich üblicherweise die Frage nach der farblichen Gestaltung der Web-Präsenz. Das Farbklima soll letztlich auch zur Botschaft, zur Aussage und zur Stimmung der Präsenz passen und diese unterstreichen. Im Teil 4 der Reihe “Visuelle Rhetorik” wird beschrieben, inwiefern Stimmungsbilder zur Klima- und Farbschemafindung beitragen können.

Vorraussetzungen:

• Stimmungsbild, welches die Aussage der Web-Präsenz verkörpert, ist vorhanden. (Bild- und Dateiformat egal)

Variante 1: Der Mosaik-Filter.

1. Bild in Photoshop öffnen.


Stimmungsbild auf weniger Farben reduziert

2. Filter Mosaikeffekt für das Bild aufrufen. (Filter ->Vergröberungsfilter -> Mosaikeffekt …)
3. In der Filtervorschau den Wert für die Größe der Mosaiksteine soweit erhöhen, bis eine sichtbare Reduktion der Farben eintritt. (Im Beispiel: 19 Quadrat)
4. Durch Klick auf OK bestätigen.
5. Mit dem Pippette-Werkzeug gewünschte Farbe als Vordergrundfarbe übertragen.
6. Auf die gewählte Vordergrundfarbe doppelt klicken. (Das Fenster “Farbwähler (Vordergrundfarbe)” öffnet sich.)
7. Farbe mit Klick auf Zu Farbfeldern hinzufügen abspeichern.
8. Für jede weitere gewünschte Farbe Vorgang ab Schritt 5 wiederholen.

Die Farbpalette kann nun für die Verwendung in anderen Adobe Programmen exportiert werden.

Vorteil: präzise Auswahl und individuelle Bestimmung der Farben.

Nachteil: Aufwendige Extraktion jeder Farbe einzeln.

Variante 2: Für Web speichern.

Einstellungen "Für Web speichern..."

1. Bild in Photoshop öffnen.
2. Bild für Web sichern. (Datei -> Für Web speichern… )
3. Unter Vorgabe “GIF 32 Dithering” auswählen. (oberer Pfeil)
4. Darunter wird eine Vorschau der reduzierten Farbpalette angezeigt.
5. Menü zur Farbpalette öffnen. (unterer Pfeil)
6. Farbpalette mit Klick auf Farbpalette speichern… abspeichern.

Die gespeicherte Farbpalette kann nun für die weitere Verwendung in die meisten Adobe Produkte eingelesen werden. Es stehen damit immer die gleichen Farbwerte zur Verfügung.

Vorteil: schnelle Reduktion “farbenfroher” Bilder.

Nachteil: mathematische Berechnung des Farbschemas, nicht zwingend harmonisch.

Variante 3: Web-Servive nutzen. (THX @ Tobi)

Variante 3 ist keine Lösung mit Photoshop, sondern setzt auf die Extraktion der Farbpalette per webbasiertem Tool.

1. http://www.cssdrive.com/imagepalette/index.php aufrufen.
2. Bild auswählen (entweder per Upload oder per URL).
3. Auf “Get Palette” klicken.
4. Palette am Seitenende entweder als CSS-Stylesheet oder als Photoshop-Farbpalette sichern.
   

   Medium Color Palette per CSS Drive.

Der Web-Service liefert nach der Verarbeitung des Bildes mehrere Palettenvarianten: Eine komplette Variante und jeweils eine (7 Farben) für die Helligkeitsstufen Light, Medium und Dark.

Vorteil: Drei Palettenvorschläge für unterschiedliche Helligkeitsstufen schnell und einfach.

Nachteil: Ergebnis sehr stark abhängig vom Klima des Ausgangsbildes.

Es ist möglich und sinnvoll, die Varianten zu kombinieren.

Nach längerer Zeit persönlicher Abwesenheit folgt nun Teil 4 der Reihe. Ich habe mich entschieden, die Publikation über die Binnengliederung einer Website wegzulassen. Somit wird dies der vorerst letzte Teil der Reihe werden. Sollte der Wunsch nach Informationen über die Binnengliederung bestehen, kann ich einen entsprechenden Artikel natürlich nachliefern.

Die Website befindet sich nun in einem Stadium, in welchem die Eckpfeiler bereits gesetzt sind. Die Grenzen der Site sind gezogen. Was folgt, müssen Inhalte sein. Dabei soll nicht erklärt werden, wie man zu Inhalten kommt (denn diese sollten – wie wir wissen – längst feststehen). Vielmehr geht es um die Frage, wie Inhalte auf gestalterischer Ebene aufbereitet werden können. Wie kann Inhalt aussehen? Inhalt und Form müssen zusammenpassen und rhetorisch überzeugen.

Design - zeitlos oder modisch?

Wichtig hierbei sind Gedanken zur Dramaturgie, aber auch zur Kontinuität. Dabei steht im Mittelpunkt das bewusste Gestalten unterschiedlicher Seitentypen für verschiedene Inhalte. Ein verbreitetes Beispiel dafür kennt jeder. Die Homepage einer Internetpräsenz unterscheidet sich meist von den eigentlich Inhaltsseiten. Die Homepage selbst enthält nur die wichtigsten Informationen, meist das Kernthema der Präsenz. Allein schon aufgrund der unterschiedlichen Inhaltsdichte unterscheidet sich die Gestaltung der Seiten. Der Nutzer kann Sinn und Zweck unterschiedlicher Seiten direkt an deren Erscheinung erkennen. Umso wichtiger ist es deshalb, Seiten mit ähnlichen Inhalten gleich darzustellen. Die benötigte Kontinuität kann durch ein einheitliches Raster ausreichend gewährleistet werden.

Dabei wird modernes und zeitloses Design durch klare Formen und wenig Dekoration dominiert. Viel Logos, viel Ethos, aber wenig Pathos. Modisches Design zitiert bekannte Formen oder Designelemente und verwendet diese reichlich in Dekoration und Bildsprache. Viel Pathos, aber wenig Logos. Das Ethos kann vernachlässigt werden.

Trotz allem gibt es Grundregeln im Online-Layout und bei Usability-Fragen. So weiß ein User, dass es sich bei einem Textelement, welches unterstrichen dargestellt wird, um einen Hyperlink handelt. Hebt man einzelne Wörter durch Unterstreichung hervor, obwohl es sich um keinen Hyperlink handelt, verwirrt man den Benutzer. Genauso empfindet ein User gewisse Erwartungen gegenüber Formularelementen: Ein Drop-Down-Menü führt zu einer Selektion beim Klick auf einen Menüpunkt, Radio-Buttons ermöglichen immer eine Einfachauswahl, Checkboxen immer eine Mehrfachauswahl. Buttons hingegen lösen immer eine Aktion aus.

Keine niedergeschriebene Regel, aber mittlerweile Ritus bei der Seitengestaltung ist eine Verlinkung des Logos mit der Homepage der Webpräsenz. Ein Klick auf das Logo führt somit immer zur Einstiegsseite.

An diesem Punkt sei nochmals wiederholt, was gutes Design ausmacht. Dies ist wichtig, denn Inhalte sollten das Design nicht nur optisch unterstreichen. Design kann nach sieben Kriterien bewertet werden: Identität, Innovation, Memorierbarkeit, Kommunikation, Usability, Kreativität und Realisierbarkeit. Als Hilfestellung über den Einsatz dieser verschiedenen Parameter kann eine Analyse bereits bestehender Fremd-Websites sein. Wie spielt diese Site mit Pathos, Ethos und Logos? Ist sie besonders kreativ? Innovativ? Oder besticht die Seite durch dramaturgisch inszenierte Inhalte?

Retrievr am Beispiel Antary.

Bei der Analyse stellt sich fast automatisch die Frage nach der Stimmung der Website. Was wird mit der Website assoziiert (Pathos)? Jeder Betrachter einer Website hat allerdings verschiedenste Assoziationen zu einem Thema, entsprechend seiner Vergangenheit, seinen Erfahrungen und dem, was er erlebt hat. Für eine neutrale, schnelle Informationssammlung zur Stimmung der Site (moodboard) bietet sich “retrievr” an. Von der zu analysierenden Website wird ein Screenshot erstellt. Dieser wird auf retrievr hochgeladen. Der Service analysiert das Bild anschließend und durchsucht flickr nach Bildern, die ein ähnliches Farbklima aufweisen. Die Bilder sind inhaltlich natürlich grundverschieden. Doch genau das ermöglicht ein neutrales und unpersönliches Mooding. Aus den ausgeführten Bilder lassen sich rückwirkend benutzte Farben extrahieren. Daraus entsteht schließlich ein Farbschema. Es zeigt die Verwendung der in der Site benutzten Farben.

Ein Farbkreis mit Bedeutung. (Quelle: www.lichtundfarbe.at)

Analog kann verfahren werden, um ein erstes Schema für die eigene Präsenz zu erstellen. Dazu sucht man ein Foto, das die Botschaft der Webpräsenz am Besten ausdrückt – ein Bild sagt mehr als tausend Worte. Per Photoshop lässt sich daraus direkt eine Farbpalette extrahieren. (Tutorial: Exktraktion einer Farbpalette)

Beim Farbschema selbst ergeben sich generell folgende Fragen: Wie viele Fragen werden benötigt? Welche Grundstimmung möchte ich? Welche Kontraste möchte ich? Welche Harmonien möchte ich? Welche Bedeutung, also Assoziation oder Symbolik haben die Farben, die verwendet werden? Farbe entsteht also im Auge des Betrachters – und das nicht nur aufgrund der Eigenschaften der Netzhaut.

Triadisches Farbschema.

Natürlich stellt sich die Frage, inwiefern welches Farbschema für eine Präsenz verwendet werden sollte. Meistens exisiert bereits ein Logo, sei es ein Firmenlogo oder sonst eine visuelle Bildmarke. Dies kann verwendet werden, um die Farben für die Site abzuleiten. Man sollte sich auf drei bis maximal 8 Farben beschränken und diese in einem Farbschema vereinen. Diese Farben sollten sich auf der Seite logisch wiederholen, um dem Auge Ruhe und dem Nutzer Führung zu geben.

Oft verwendet werden sogenannte triadische Farbschemata. Dabei handelt es sich um Farbschema, das aus drei Farben besteht: Einer Primärfarbe und der Komplementärfarbe benachbarten Farben im Farbkreis. Es handelt sich dann um einen teilkomplementären Farbkontrast, was für Spannung und Lebendigkeit sorgt. Der Vollständigkeit halber die geläufigsten Farbschemata:

• analoges Farbschema: Es enthält Farben, die im Farbkreis nebeneinander liegen. gelb-orange, orange-rot, grün-blau etc… (Beispiel: www.regines.net.au)
• komplementäres Farbschema: Websites, die ein komplementäres Farbschema anwenden, arbeiten mit einem starken Farbkontrast. (Beispiel: www.ufl.edu)
• teilkomplementäres Farbschmema: Bestehen aus den beiden benachbarten Farben des Komplementärkontrastes. Hier hat es eine frische Farbwirkung. (Beispiel: www.ingenics.de)
• achromatisches Farbschema: Wenn das Farbklima auf schwarz-weiß reduziert ist oder Abstufungen in grau verwendet werden, spricht man von einem achromatischen Farbschema. Dieses hat eine edle Anmutung, wirkt klar, sehr sachlich und kühl. (Beispiel: www.subtraction.com)
• Pastelltöne: Werden oft bei Kosmetika, Schönheit verwendet. (Beispiel: www.hipp.de)
• gesättigte Farben: Reine und gesättigte Farbtöne als Hintergrundfarbe wirken sehr dominant. Sie sollten nur für einen Bereich der Website angewendet werden, da es das Auge anstrengt. (Beispiel: www.summer.tnvacation.com)

Serifen sind hier rot markiert. (Quelle: www.webdesign-referenz.de)

Informationen werde häufig in Textform übermittelt. Der Typografie kommt damit eine entscheidende Funktion zu. Sie entscheidet darüber, wie leicht Inhalte an den Benutzer transportiert werden können. Generell unterscheiden sich die Anforderungen im Printbereich und in Screen-Medien. Das Problem an der typografischen Gestaltung allerdings beginnt bereits bei technischen Grundlagen. Will man die Site für mehrere Plattformen benutzbar machen, beispielsweise für Windows-Systeme und Mac, stehen lediglich wenige Schriften zur Verfügung. Nur neun Schriftarten werden von Windows und Mac gleichermaßen unterstützt. Alles was darüber hinaus geht, muss per Bild eingebunden werden. Eine Alternative hierzu ist die Gestaltung mit Flash, denn Flash bietet Importierungsmöglichkeiten für Schriftarten.

Für Web-Publikationen empfehlen sich generell nur serifenlose Schriftarten. Dies fördert die Lesbarkeit und vermittelt eine klare, zeitgemäße Stimmung. Je nach Gestaltungswunsch bietet sich der Flattersatz an, in wenigen Fällen auch der Blocksatz. Von einer Zentrierung des Textes sollte abgesehen werden, da er dem Auge wenig Führung bietet.

Beachtet werden muss die Tatsache, das der Browser in der Regel keine Silbentrennung durchführen kann. Der Text muss so gesetzt sein, das er nicht “auseinanderfällt” und keine Löcher zwischen einzelnen Wörtern entstehen. Dabei hilft zusätzlich eine Anpassung der Zeilenlänge. Diese sollte zwecks erhöhter Usability auf dem Screen nicht zu lang sein. Das Auge tut sich ansonsten schwer, die nächste Zeile zu finden. Bei zu kurzen Zeilen werden inhaltliche Sinnzusammenhänge einzelner Sätze auseinander gerissen. Dies behindert den Lesefluss. Die optimale Zeilenlänge liegt etwa bei 60-70 Zeichen pro Zeile, abhängig von der typografischen Gestaltung. Eine gute Typografie zeichnet sich zudem durch eine Reduktion auf wenige verschiedene Schriftarten und Schriftschnitte aus. Zwei bis drei sind meist ausreichend und fördern Dramaturgie und Kontinuität.

Mehr Übersicht durch weniger Inhalt.

Neben der Farbe und Typografie wird ein Punkt oft unterschätzt. Auf vielen Websites befindet sich auf der einzelnen Page einfach zuviel Inhalt. Der User wird von der Informationsflut überwältigt. Auch hier ist weniger oft mehr, schließlich soll der Benutzer nicht durch Informationen erschlagen werden. Der sogenannte Weissraum wird umso wichtiger.

Mit genügend Weissraum besteht schließlich die Möglichkeit, Inhalte ansprechender anzuordnen. Inhaltliche Schwerpunkte können betont werden. Dies geschieht durch Kontraste beispielsweise beim Verhältnis zwischen Bildgröße und Textgröße. Das macht die Site interassant und leichter memorierbar. Denn:

“Inhalte werden schnell vergessen. Doch der emotionelle Eindruck guten Designs bleibt stabil.”
Wolfgang Beinert, 2000, beinert.net

Design is a good idea.

Nach längerer Pause ist es wieder soweit. Wie bereits in Teil 2 angekündigt, handelt dieser Teil der Reihe von Fragen und Gedanken zum Thema Navigation. Doch was ist bisher geschehen?

• aus der Idee einer Website wurde ein zielgruppenfokussiertes Konzept
• das Konzept besteht aus mindestens einer Kernbotschaft und berücksichtigt die Interessen der Zielgruppe(n)
• die Interessen der Zielgruppen werden gemäß Pathos, Ethos und Logos bedient

Dem Verantwortlichen einer Webpräsenz ist klar geworden, was er mit der Site kommunizieren will, wen er damit erreichen will und wie er dies am Besten anstellt. Ihm ist klar, welche Inhalte er benötigt und wie die Site gestaltet sein soll. Doch es fehlt die Verbindung zwischen beiden Elementen. Wie müssen die Informationen erreichbar sein, damit der User sie auch findet? Wie lässt sich eine gute Erreichbarkeit der Informationen mit der Gestaltung vereinbaren, oder gar verknüpfen?

Um dies zu verstehen, sind zunächst einige Grundgedanken zur Navigation nötig. Weit verbreitet ist der Vergleich der Navigation in elektronischen Medien mit dem Userverhalten beim Lesen eines Buches. Ein Buch ist eine Ansammlung zahlreicher einzelner Seiten.

Buch ohne Rücken - ein Papierchaos !? (Quelle: http://www.mathezentrale.de)

Die Seiten bieten alle mehr oder weniger interessanten Inhalt. Doch einige Seiten machen nur in Verbindung mit anderen Seiten Sinn. Um eine Information zu verstehen, ist es unter Umständen nötig, andere Informationen zu kennen. Würde man in einem Roman nur jede zwanzigste Seite lesen, wird man aufgrund mangelnder Informationen nur wenig verstehen. Damit man keine Seiten auslässt, aber auch damit keine Seiten verloren gehen, ist das Buch gebunden. Am Buchrücken sorgt eine Schicht Kleber dafür, dass die einzelnen Seiten nicht durcheinander geraten und jede Seite dort ist, wo sie auch hingehört.

So banal diese Erkenntnis erscheint, so einfach ist die Idee auf eine Webpräsenz zu übertragen. Denn der Kleber ist die wichtigste Hypertext-Information des Buches. Was beim Buch der Kleber schafft, geschieht online mittels der bekannten Hyperlinks. Mit ihrer Hilfe wird die Information in Kontext zu anderen Inhalten gesetzt. Das Informationsgerüst, auch Informationsarchitektur genannt, entsteht.

Jede Website ist nur so gut wie ihre Navigation. Vergleicht man wieder mit einem Buch: Ein Buch ohne Buchrücken ist kein Buch, sondern nur eine Ansammlung loser Zettel. Gleiches gilt für die Website, die ohne Navigation keine Website im eigentlichen Sinne wäre. Deshalb muss die Navigation sorgfältig konzipiert werden.

MindMap der Webpräsenz TU Ilmenau (Quelle: http://blogs.tu-ilmenau.de)

Um sich über die Aufteilung der einzelnen Navigationspunkte – und zu welchen Informationen sie Zugang verschaffen – klar zu werden, empfehlen sich sogenannte MindMaps. Sie helfen, die geplante Navigationsstrukur zu veranschaulichen und eventuell zu überdenken und zu restrukturieren. Letztendlich wird damit das bereits bestehende Konzept der Website, insbesondere eben der Navigation, verfeinert.

Informationsarchitektur in Excel. Einfach und effizient.

Ein kleiner Tipp für die Praxis: Sollen die einzelnen Seiten einer Webpräsenz übersichtlich dargestellt werden, hat sich Microsoft Excel als nützliches Werkzeug erwiesen. Mithilfe der Gruppieren-Funktion im Programm können die einzelnen Navigationspunkte wie in einer Baumstruktur auf und zu geklappt werden.

Die primäre Navigation bildet die oberste Strukturierung für eine Website. Oft wird sie ergänzt mit einer sekundären Navigation, um der Informationsfülle einer Seite gerecht zu werden. Eine Primärnavigation besitzt für eine Website die gleiche Bedeutung wie die Gliederung eines Buches in Kapitel. Sie teilt die Website in Hauptkategorien ein und sollte einen schnellen Überlick über den gesamten Inhalt der Website bieten. Sie sollte auf allen Seiten zur Verfügung stehen, damit der Besucher jederzeit zu einer anderen Hauptkategorie wechseln kann. Hier auf antary.de unterteilt in Home, Archiv, Miranda, Kontakt und Impressum. Die sekundäre Navigation entspricht der Strukturierung der einzelnen Kapitel innerhalb eines Buches. Sie ermöglicht dem Benutzer zwischen den verschiedenen Seiten innerhalb einer Hauptkategorie zu navigieren. Hier auf antary.de im rechten Bereich auf der Seite.

Egal ob primär oder sekundär, bei der Navigation sind unterschiedliche Navigationsformen möglich, von denen die bekanntesten im Folgenden erläutert werden. Jede davon hat ihre Vor- und Nachteile. Die Navigationsformen können sich zudem sinnvoll ergänzen.

Registerstruktur: Der Nutzer kann zwischen den einzelnen Seiten hin und her wechseln. Dabei kann es auch ein Unter-Register geben. Amazon hatte eine Registerstruktur auf der ehemaligen Version seiner Website. Die Registerstruktur empfiehlt sich vor allem bei einer Struktur mit vielen ähnlich relevanten Themen.

Die Baumstruktur (Quelle: www.otto.de)

Baumstruktur: Bietet eine gute Orientierung über Inhalte einer Website. Diese Struktur wird häufig bei Online-Shops verwendet, wie z.B. Otto Versand. Es können Knoten eingeklappt oder aufgeklappt sein. Der Baum verzweigt sich immer weiter, um auf Unterseiten zu gelangen, bis keine weiteren Seiten angeboten werden. Ein nach rechts gerichtetes Dreieck bedeutet, dass der Knoten aufklappbar ist. Das nach unten gerichtete Dreieck zeigt, dass der Knoten bereits aufgeklappt ist. Ein kleines Quadrat kennzeichnet das Blatt eines Baumes – hier geht es nicht mehr weiter. Bei der Navigation im Baum gibt es zwei Möglichkeiten: Entweder müssen aufgeklappte Knoten wieder eingeklappt werden, oder sie werden beim Auswählen einer anderen Kategorie automatisch wieder eingeklappt.

Liste: Vergleichbar mit einer Navigation in Baumstrukturform. Allerdings gibt es hier keine aufklappbaren Knoten.

Das Drop-Down-Menü (Quelle: www.ibm.com)

Drop-Down-Menü: Bei vielen Web-Präsenzen werden die Funktionen über Drop-Down-Menues angeboten. Diese haben den Vorteil, dass sie klassischen
Software-Anwendungen ähneln und daher sofort erkannt werden. Die Website von IBM bietet klassiche Drop-Down-Menues an. Der Nachteil von Drop-Down-Menues: Bestimmte Inhalte werden verdeckt, während man sich in der Navigation befindet.

Eine gute Navigation strukturiert Inhalte. Dies sollte sie sinnvoll tun. Zum einen visuell, zum anderen informell. Es ist wichtig, die Multidimensionalität der Inhalte zu erkennen. Ein Inhalt kann in verschiedenen Kontexten gesehen werden. Die Informationen sind über verschiedene Zugänge erreichbar. Dazu sollte die richtige Auswahl und Kombination der Navigationsstrukturen gewählt werden. Ferner wird die Usability der Site erhöht, bindet man eine Suchfunktion und Cross-Linking-Verfahren mit ein.

Manch einer mag sich die Frage stellen, wie man eine gute Navigation aufbaut. Da die Navigation die Inhalte der Website verbindet, sollte sie möglichst intuitiv sein. Kann der Besucher die Website nicht bedienen, wird er schnell wieder von der Seite flüchten… und sein Glück auf einer anderen Site versuchen. Deshalb sollten die Informationen sinnvoll in homogene Informationseinheiten gegliedert sein. In den oberen Leveln der Navigation sollte die Orientierung an den Erwartungen des Benutzer Priorität sein. Wo würde der User die Information suchen? In den tieferen Level der Navigation sollte die Struktur aus den Informationseinheiten heraus entstehen.

Sogenannte Breadcrumb-Pfade helfen Sites mit hoher Informationstiefe, die Navigation verständlicher und zugänglicher zu machen. Meist wird der Breadcrumb-Pfad unterhalb der Primärnavigation angeordnet. Er merkt sich, über welche Wege der User zur aktuellen Seite navigiert hat und ermöglicht eine Zurück-Navigation. So kann von einer früheren Stelle aus ein anderer Pfad eingeschlagen werden.

Vor allem bei großen, umfangreichen Seiten empfiehlt sich zudem eine Site Map. Man kann sie mit dem Inhaltsverzeichnis eines Buches vergleichen. Hierüber werden alle einzelnen Pages der Webpräsenz zugänglich gemacht. Handelt es sich um eine thematische Gliederung, spricht man von einer Site Map. Ist das Inhaltsverzeichnis alphabetisch gegliedert, spricht der Mediendesigner von einem Site Index.

Intuitive & kreative Navigtionsform. (Quelle: www.jonathanyuen.com)

Die oben genannten Ausführungen erhalten natürlich keinen Anspruch auf Vollständigkeit. Im Gegenteil: Die beschriebenen Ausführungen stellen lediglich einen Bruchteil dessen dar, was eine gute Navigation wirklich ausmacht. Desweiteren sind viele Mischformen und eigene, auch kreative Ansätze zur Navigation denkbar. Man sollte allerdings nie vergessen, was die Navigation einer Website bezweckt. Durch sie werden die Informationen miteinander verknüpft, die Seiten können “durchgeblättert” werden. Die Navigation muss deshalb ohne jede Erklärung für den Benutzer verwendbar sein. Ein Beispiel für eine alternative, kreative und ungewöhnliche Navigationsalternative möchte ich anhand der Site www.jonathanyuen.com/ zeigen.

Blickt man auf die untschiedlichen Arten der Navigation, so wir schnell klar, wie schwierig es eigentlich ist, eine passende und angemessene, funktionierende und benutzbare, aber auch optisch ansprechende und intuitive Navigation zu erstellen. Einzig die Navigation macht eine Website überhaupt erst benutzbar. Sie kann ihr aber auch eine eigene Note verleihen. Zwar gibt es einige Standarts und Gewohnheiten, jedoch sind auch freie Interpretationen in Sachen Navigation erlaubt. Die Navigation muss zur Seite passen. Und es ist wichtig, dass die Navigation selbsterklärend die Inhalte der Seite nutzbar macht.

Design is a good idea.

Im Teil 1 der Reihe haben wir erfahren, dass eine Website als Kommunikationsmittel direkt auf die Interessenten der Site ausgerichtet sein sollte. Nur so kann sie die Aufmerksamkeit der Leser im Dschungel des World Wide Web auf sich ziehen. Und erst dann kann der Leser zum Empfänger der Botschaft werden. Der Empfänger, sprich Webanwender, “hört” was die Website “zu sagen hat”.

Von der Idee zum Layout.

Dies funktioniert nur dann, wenn die Website gemäß Pathos, Ethos und Logos einen Mehrwert liefern kann. Die Voraussetzungen hierfür:

• die Zielgruppe(n) ist identifiziert
• die Kernbotschaft(en) der Website ist ausgearbeitet

Im nächsten Schritt entsteht das Layout. Mit Hilfe des Layouts werden die bereits erarbeiteten Gedanken  über Pathos, Ethos und Logos bildlich ausgearbeitet. Das Layout dient dazu, Ideen und Ansätze zu verfeinern.

Die Grafik rechts zeigt die Bestandteile des Layouts. Ein Layout besteht demnach aus einer Informationsebene, einer Ordnungsebene und einer gestalterischen Ebene. Jede dieser Ebenen erfüllt spezifische Aufgaben. Spielen alle Ebenen zusammen, ergibt sich ein ausgeglichenes, zielführendes und hoffentlich intuitives Design der Webpräsenz.

Die Informationsebene beinhaltet die sogenannte Informationsarchitektur. Was ist das? Wie bereits im Namen steckt, handelt es sich um architektonische Grundfragen. Ein Beispiel: Bevor ein Gebäude errichtet wird, macht sich ein Architekt Gedanken darüber, wo sich später wichtige Elemente wie Eingänge oder Fenster befinden sollen. Das gemütlichste Wohnzimmer wird nutzlos, wenn es keinen Zugang in das Innere des Zimmers gibt. Ähnlich wie beim Hausbau, ist es bei der Erstellung einer Webpräsenz wichtig, vor der eigentlichen Entwicklung einen Bauplan zu erstellen.

Informationsarchitektur einer Speisekarte. Übersichtlich? (Quelle: www.tokiosushi.de)

Wo sollen welche Informationen angesiedelt werden? Wie werden die zu kommunizierenden Inhalte sinnvoll gegliedert? Ziel ist es, eine Strukturierung der Inhalte zu erhalten und eine Sitemap auszuarbeiten. Dies erleichtert ein Erkennen multidimensionaler Inhalte, die bei der Webentwicklung besondere Beachtung benötigen, genauso wie das Beurteilen und Einschätzen möglicher Informationszugänge, die später verwendet werden sollen. Beispielsweise Suchfunktionen oder Cross-Linking-Möglichkeiten. Doch nicht nur für den Webdesigner selbst ist eine visuelle Strukturierung sinnvoll. Eine Ausarbeitung in Richtung Wireframe schafft desweiteren ein effektives Erläuterungs- und Überzeugungsmittel bei Gesprächen zwischen Gestalter und Auftraggeber.

Die Ordnungsebene umfasst bereits erste gestalterische Ansätze und legt die Richtung für das spätere Erscheinungsbild der Website fest. Würde man hier wieder den Vergleich zur Architektur anstellen, entspräche die Festlegung der Ordnungsebene der Grundsteinlegung eines Gebäudes. Ab jetzt wird das Baukonzept nach den Vorgaben umgesetzt und eventuelle Änderungen haben massiven Mehraufwand zur Folge. Die Ordnungsebene beschreibt Navigationsmöglichkeiten, Inhaltsbereiche sowie Weißräume. Das Grundklima einer Website wird festgelegt. Man spricht auch von einer Binnengliederung. Aus dem erstellten Grundkonzept des Informationsbauplanes wird eine ästhetische und funktionale Aufteilung der Gestaltungsfläche entwickelt. Die Site wird in Navigations- und Funktionsbereiche aufgeteilt. Ebenso werden Inhaltsbereiche, welche die späteren Informationen beinhalten sollen, zugewiesen. Oft unterschätzt wird hierbei die Notwendigkeit von Weißräumen, den leeren Bereichen einer Website. Hier kann effizient die Wirkung und die Gesamtstimmung der Site beeinflusst werden. Soll die Seite eine lockere Leichtigkeit besitzen und damit Emotionen ansprechen? Oder erscheint die Site massiv, konsistent und wirkt damit seriös? Oder aber statt seriös eher altmodisch? Die Ordnungsebene definiert die Aufteilung der Website zudem durch ein Rastersystem, welches für den Wiedererkennungswert der Site zuständig ist.

Auf der gestalterischen Ebene sollten die Emotionen der Empfänger der Webbotschaft bedient werden. Neben Designelementen sollte großer Wert auf die Abstimmung zwischen Semiotik der Website und dem persönlichen Verständnis des Empfängers gelegt werden. Dies ist für eine intakte Website elementar. Zum Einen muss der Benutzer die verwendeten Zeichen als solche Erkennen können (Syntax). Asiatische Webpräsenzen verwenden und verstehen andere Zeichensätze als Deutsche. Zum Anderen muss der Benutzer um die Bedeutung der verwendeten Zeichen wissen (Semantik). Die Farbe “weiß” wird im westlichen Kulturkreis in der Regel mit Begriffen der Freude assoziiert. Im China dagegen wird die Farbe als Symbol für Alter, Herbst, Westen und Hinterlist gedeutet. Zuletzt müssen die Elemente für den Benutzer und die Situation passend und relevant sein (Pragmatik).

Eines darf der Gestalter allerdings nie vergessen: Die beschriebenen Ebenen unterliegen alle sowohl technischen Rahmenbedingungen oder sogar technischen Beschränkungen als auch der Tragweite der dem Gesamtkonzept zu Grunde liegenden Idee.

Alle Ebenen können ohne einander nicht existieren. Eine ansprechende Gestaltung ist ohne relevante Informationen für die Zielgruppe nutzlos. Eine Site mit vielen Informationen aber ohne Design wird dem Benutzer nicht gefallen – er surft weiter. Mangelt es der Webpräsenz weder an Inhalt noch an ansprechender Optik, aber an einer sinnvollen und intuitiven Benutzerführung, fühlt der Benutzer sich im Stich gelassen und verlässt die Seite.

Der Gestalter muss die Ebenen gleichmäßig im Layout vereinen, was zugegebenermaßen in der Theorie viel leichter klingt, als es in der Praxis tatsächlich ist. Darum wird im nächsten Teil der Reihe praktisch die Ebene der Informationsarchitektur, im Speziellen die Navigation, erläutert.

Design is a good idea.

Um eine funktionierende Website optimal zu gestalten, ist ein Grundverständnis des Kommunikationsmodells nötig. Im einfachsten Fall findet Kommunikation demnach immer zwischen einen Sender und einem Empfänger statt. Der Sender, beispielsweise eine Website, übermittelt Botschaften an den Empfänger. Der Empfänger nimmt die Botschaften auf, verwertet sie und anwortet im besten Fall.

Nicht unüblich ist aber, das die Reaktion des Empfängers auf die erhaltene Botschaft ausbleibt und eine Kommunikation in beide Richtungen nicht statt findet. Das kann mehrere Gründe haben:

• der Empfänger hat nicht zugehört
• der Sender hat die Botschaft nicht laut genug übermittelt
• die Botschaft ist für den Empfänger unverständlich

Zudem gibt es im Gegensatz zum Modell in der Realität mehr als nur einen Sender.  Auch haben unterschiedliche Empfänger die verschiedensten Interessen.  Die Botschaft muss also eindeutig sein und dem Interesse des Empfängers angepasst sein, da der Empfänger aufgrund der Reizüberflutung im heutigen Informationszeitalter nur auf für ihn Relevantes reagiert. Die Botschaft muss aus dieser Vielzahl kommunizierter Botschaften herausstechen.

Ausschnitt der World Trend Map 2008. Hier werden die bedeutendsten Websites des WWW in einem Netzplan dargestellt. (Quelle: http://informationarchitects.jp)

Um in dieser breiten Masse der Kommunikation aufzufallen, helfen drei Überzeugunsmittel der Rhetorik, um die Website dem Empfänger schmackhaft zu machen:

Pathos. Eine Webpräsenz sollte emotional ansprechend sein. Dies wird vor allem durch die Stimmung der gestalterischen Aufbereitung beeinflusst. Wichtig ist, die Gefühle des Empfängers zu erreichen. So besteht die Chance, dessen unterbewusste Wahrnehmungsweise zu stimulieren.

• Form- und Farbwahl
• Bildhafte Elemente
• Symbolik
• Materialen
• Dynamische und auditive Ausdrucksmittel

Ethos. Vertrauenswürdigkeit und Beständigkeit sind Werte, die in der immer schnelllebiger werdenden Gesellschaft zunehmend wichtiger werden. So ist die generelle Aussage, der Grundtenor, für den die Website steht von entscheidender Bedeutung bei der Relavanzfilterung beim Empfänger. Den digitalen Medien wird nicht zuletzt aufgrund ihrer laufenden Weiterentwicklung häufig ein innovativer, aber auch unsteter Habitus unterstellt. Wird also auf die Beständigkeit oder Vertrauenswürdigkeit besonders Wert gelegt, erfordert dies in der Gestaltung besondere Aufmerksamkeit.

Logos. Ohne Inhalt bleibt die beste Gestaltung nutzlos. Denn Gegenstand und Sache bilden die Grundlage im rhetorischen Dreieck. Wie kann durch die Gestaltung Inhalt und Funktion vermittelt werden? Im Mittelpunkt steht hier die praktische Problemlösung:

• Lesbarkeit
• Verständlichkeit
• Verfügbarkeit
• Benutzerführung

Im Fokuss der Beobachtungen muss also der Empfänger der Botschaft stehen. Diesen gilt es vor Erstellen und Gestalten einer Website zu ermitteln. Nur dann kann Kommunikation auf den Empfänger ausgerichtet werden. Und erst dann kann Kommunikation effektiv werden.

Kreatives und innovatives Design kribbelt im Kopf, trifft ins Herz und erzählt eine spannende Geschichte.

Design is a good idea.