Web 2.0 Design Guide

Design Elemente des neuen "Web 2.0 Styles"

In diesem Artikel beschreibe ich verschiede verbreitete Grafikdesign-Elemente des modernen Webdesign-Stils (Web 2.0).

Außerdem möchte ich erklären warum sie funktionieren (d.h. Warum sie so verbreitet sind), sowie auch wie, wann und wo man jedes Element in seinen eigenen Layouts verwenden kann.

Die unten aufgeführte Liste ist eine Zusammenfassung der gemeinsamen Merkmale typischer Web 2.0 Websites.

Natürlich muss eine Website nicht alle diese Merkmale aufweisen um gut zu funktionieren und das verwenden dieser Elemente allein macht ein Design auch noch nicht "2.0" - oder gut!

• 1. Einfachheit
• 2. Zentriertes Layout
• 3. Weniger Spalten
• 4. Separate Kopfbereiche
• 5. Solide Bereiche der Bildschirm-Fläche
• 6. Einfache Navigation
• 7. Markante Logos
• 8. Größerer Text
• 9. Markante Texteinleitungen
• 10. Kräftige Farben
• 11. Reichhaltige Oberflächen
• 12. Verläufe
• 13. Reflektionen
• 14. Schnuckelige Icons
• 15. Stern-Buttons

Hinweis

Nicht alle dieser Design-Elemente sind in allen Fällen angebracht. Es gibt immer Ausnahmen und viele schlechte Beispiel in denen diese Elemente falsch, im Übermaß oder ohne jeglichen Sinn für die "Design-Symphonie" der Website als einheitliches Ganzes verwendet wurden.

Man kann nicht einfach all diese Elemente hernehmen, sie zusammenwerfen und eine Webseite daraus machen - genausowenig wie man durch einfaches Zusammenwerfen von Eiern, Zucker und Mehl einen guten Kuchen bekommt.

Das Gestalten einer gut funktionierenden Webseite erfordert ein hohes Maß an Feingefühl für die einzelnen Bereiche und Anforderungen. Ein gutes Design findet die Balance zwischen diesen (manchmal entgegengesetzten) Anforderungen.

Web 2.0 ?!

Ich verwende den Ausdruck "Web 2.0 Design" um den aktuell vorherrschenden Webdesign-Stil zu beschreiben.

Viele Leute verwenden den Ausdruck "Web 2.0" für Folgendes:

Das wirtschaftliche Wiederaufleben des Webs. Eine neue Sphäre technologischer Interaktivität zwischen Websites und der Dienstleistung oder ein neues soziales Phänomen, herbeigeführt durch eine neuen Art von Online Communities und sozialen Netzwerken.

Einige verwenden den Begriff "Web 2.0" um die neue Schule des grafischen Webdesigns zu bezeichnen. Ich möchte es in diesem Artikel bei dieser Bedeutung belassen.

Einleitung

Ich werde nun die Merkmale der aktuellen Welle exzellenten Website-Designs vorstellen, die wichtigsten Merkmale analysieren, erklären warum jedes davon hilfreich sein kann und zeigen, wie man sie in eigenen Websites verwenden kann.

Wenn ich "Web 2.0 Design" in einem Wort zusammenfassen sollte, wäre es "Einfachheit" - das ist also unser Ausgangspunkt!

Ich bin ein großer Anhänger der Einfachheit. Ich denke dies ist die Zukunft des Webdesigns.

Es gab unter Webdesignern mal eine große Diskussion darüber ob ein gutes Webdesign eines ist das Aufmerksamkeit erregt, oder eines das keine Aufmerksamkeit auf sich zieht. Dies ist eine hoch philosophische Frage, die nicht eindeutig geklärt werden konnte - aber über "Einfachheit" bin ich mir mit mir selbst einig - und vielleicht kann ich den ein oder anderen dafür begeistern.

Heutzutage wird durch einfache, markante, schicke Seiten-Layouts mit weniger Mitteln mehr vermittelt:

Sie ermöglichen es dem Designer das Ziel der Website exakt ins Visier zu nehmen, indem er das Auge des Besuchers mit weniger, ausgewählten visuellen Elementen führt. Sie verwenden weniger Worte, sagen jedoch mehr und enthalten bedacht verwendete bildhafte Symbolik um das erwünschte Feeling zu erzeugen. Sie verwehren sich der Idee, dass wir nicht ahnen können, was der Besucher von unserer Website erwartet.

"Verwende so wenig Features wie gerade nötig um das zu erreichen was erreicht werden soll"

Webdesign ist einfacher denn je - und das ist etwas Gutes.

Web 2.0 bedeutet: zielgerichtet, makellos und einfach.

Das heißt nicht unbedingt minimalistisch, wie ich später erklären werde.

Ich glaube wirklich an Einfachheit. Das heißt nicht, dass alle Websites auf das Kleinste reduziert sein sollten, aber es bedeutet, dass so wenig Features wie gerade nötig verwenden sollten, um das zu erreichen was erreicht werden soll.

Auf Wikipedia findet man einen interessanten Artikel über ein Prinzip das sich Ockhams Rasiermesser nennt. Eine Interpretation davon ist: Bei zwei beliebigen gegebenen Lösungen zu einem Problem ist die einfachere von beiden die bessere.

Hier folgen nun ein paar Beispiele. Bemerke wie überflüssige Elemente aus jedem entfernt wurden. Es könnte viel mehr auf jeder Seite sein ... aber würde das etwas verbessern?

Daraus resultiert, dass man auf den Inhalt schauen muss. Man interagiert mit genau den Features, die der Designer beabsichtigte und macht sich keine weiteren Gedanken darüber, dass es leicht ist  - man bekommt einfach das, was man gesucht hat.

Warum Einfachheit gut ist

Websites haben Ziele und jede Webseite hat einen Zweck. Die Aufmerksamkeit des Benutzers ist eine begrenzte Ressource. Es gehört zu den Aufgaben des Designers, dem Benutzer dabei zu helfen das zu finden was er sucht (oder auf das aufmerksam zu werden, auf das aufmerksam gemacht werden soll).

Objekte auf dem Bildschirm erwecken die Aufmerksamkeit des Auges. Je mehr Dinge es dort gibt, desto mehr unterschiedliche Sachen gibt es zu bemerken und desto unwahrscheinlicher ist es, dass der Benutzer das wirklich Wichtige erkennt.

Wir müssen also eine bestimmte Kommunikation ermöglichen und die Störungen in dessen Umfeld minimieren. Das heißt also, wir müssen eine Lösung finden, die ihren Zweck mit so wenigen Mitteln erfüllt wie gerade nötig sind. Das ist Ökonomie - oder Einfachheit.

Wann und wie man ein Design einfach macht

Wann?

Immer!

Wie?

Es gibt zwei wichtige Aspekte dabei mit Einfachheit erfolgreich zu sein:

1. Entferne überflüssige Komponenten, ohne an Effektivität einzubüßen.
2. Teste alternative Lösungen, die das gleiche Resultat einfacher erreichen.

"Es scheint als wäre Perfektion erreicht, nicht, wenn sich nichts mehr hinzufügen
lässt, sondern, wenn man nichts mehr wegnehmen kann."

Antoine de Saint-Exupéry,
Terre des hommes, 1939

Mache es Dir bei jeglicher Gestaltung zur Regel bewusst alle unnötigen visuellen Elemente zu entfernen.

Konzentriere Dich dabei besonders auf Bereiche des Layouts, die für den Zweck der Seite weniger relevant sind, da visuelle Aktivität in dies Bereichen die Aufmerksamkeit von dem wichtigen Inhalt und der Navigation ablenken wird.

Verwende visuelle Details - ob nun Linien, Wörter, Formen, Farben - um relevante Informationen zu kommunizieren, nicht einfach nur zur Dekoration.

Hier ist ein Beispiel eines Designs das an einem Mangel an Einfachheit leidet.

Die Yaxay Oberfläche verwendet eine Menge "Pixel" aber die große Mehrheit davon ist dekorativ - Teil des Seitenhintergrundes. Relativ wenige Pixel wurden verwendet um dem Benutzer dabei zu helfen Informationen zu verstehen oder mit der Website zu interagieren.

Man bemerke wie viel "Zeug" es gibt das man sich ansehen kann und wie wenige Pixel dazu verwenden werden die eigentliche Navigation, den eigentlichen Inhalt und die tatsächlichen interaktiven Features hervorzuheben.

Edward Tufte ist der Meister wenn es um die Gestaltung von Informationen geht. Er verwendet die Ausdrücke "data ink" ("Daten Tinte" - d.h. Details, welche die Übermittlung von Informationen ermöglichen) und "non-data ink" ("Keine-Daten Tinte" - d.h. Details, die einfach nur Details sind) um dieses Phänomen zu beschreiben.

Tufte misst speziell die Effektivität von Informations-Design (Statistiken, Diagramme, Präsentationen usw.) unter Verwendung des Verhältnis zwischen Data-Ink und Non-Data-Ink. Je höher die Proportion von Data-Ink desto wahrscheinlicher ist es, dass ein Design effektiv ist.

Wenn man das Yaxay-Detail (siehe oben) zum Beispiel nimmt, findet man vieles von dem was ich "Geschäftigkeit" nenne, d.h. viele Ecken, Helligkeitsänderungen, Farbwechsel, Formen, Linien ... jede Menge Zeugs zum Anschauen. Aber in diesem Bildausschnitt sind die einzigen nützlichen Elemente:

1. Das Logo der Website und
2. die Aufschrift auf dem Navigations-Button (nämlich "art gallery")

Der ganze Rest der "Geschäftigkeit", die Formen im Hintergrund, die diagonalen Linien auf dem Bedien-Panel, das Raster, die Verläufe ... all dies sind ablenkende Störungen, es ist alles "non-data-ink", denn es nützt nicht der eigentlichen Kommunikation.

Ich habe nichts gegen Reichhaltigkeit, Komplexität und Schönheit im Webdesign

Einfachheit heißt:

Verwende so viele Pixel wie nötig, in jeder nötigen Art und Weise, um die Kommunikation zu fördern die erfolgen soll.

Oft werden natürlich keine harten Fakten, sondern leichte Informationen kommuniziert.

Harte Fakten:

... das sind Fakten wie News, Börsennotierungen, Zugabfahrtszeiten oder der Betrag auf jemandes Bankkonto ...

Leichte Information:

... dies umfasst den qualitativen Aspekt der Kommunikation. Zum Beispiel der erste Eindruck von der Qualität einer Firma, das Empfinden davon wie erreichbar ein Dienstleistungs-Anbieter ist oder das Gefühl davon ob ein Produkt für jemanden das genau richtige ist. Dies kann genauso wichtig sein!

Ob es bei der Kommunikation nun um harte Fakten oder leichte Kost geht, es kostet Pixel, also sollten sie bewusst und sorgfältig verwendet werden.

Schauen wir uns das Beispiel unten an:

Alex Dukal's Website ist reichhaltig, interessant und ansprechend. Sie macht von einer Reihe visueller Techniken Gebrauch um die Aufmerksamkeit anzuziehen, das Interesse zu wecken und jemandem ein gutes Gefühl bezüglich der Qualität von Alex's Arbeit zu geben.

Aber es ist auch einfach, denn es gebraucht seine Pixel/Tinte/Geschäftigkeit mit Feingefühl. Es ist nicht überladen - es ist ökonomisch und reichhaltig.

Was auch immer ausgesagt wird, man sollte gut überlegen wo die Pixel/Tinte verwendet wird. Sie sollten zuallererst verwendet werden um zu kommunizieren. Dann überlegt man ob man mit weniger genauso effektiv kommunizieren kann. Wenn ja, dann wird es gemacht.

Im Grunde genommen ist die große Mehrzahl der Websites heutzutage mittig im Browserfenster positioniert (zentriert). Nur noch wenige verwenden die gesamte Fensterbreite (ohne feste Breite) oder sind bei fester Breite links ausgerichtet - wie es vor ein paar Jahren noch üblicher war.

Warum ein zentriertes Layout gut ist

Dieser neue "2.0"-Stil ist einfach, markant und schick. Seiten die ordentlich und zentriert daher kommen wirken einfacher, markanter und schicker.

Und da wir mit unseren Pixeln (und Content) ökonomischer umgehen, sind wir nicht gezwungen so viel Information wie irgendwie möglich auf die erste Seite zu stopfen.

Wir verwenden weniger um mehr auszusagen, so dass wir ein bisschen leichter mit der Menge des verwendeten Platzes haben und unseren Content mit viel von diesen wunderbaren weissen Flächen umgeben können.

Wann und wie zentriertes Layout verwendet werden sollte

Ich würde sagen, positioniere eine Website mittig es sei denn es gibt einen guten Grund es nicht zu tun.

Man könnte mit dem Platz kreativer umgehen oder so viel Information wie möglich auf einem Bildschirm unterbringen wollen (wie z.B. bei einer Web-Anwendung).

Vor einigen Jahren noch waren 3-Spalten Websites die Norm und 4-Spalten waren nicht unüblich. Heute sind 2 üblicher und 3 Spalten sind das Durchschnitts-Maximum.

Warum die Verwendung von weniger Spalten gut ist

Weniger ist mehr. Weniger Spalten wirken einfacher, markanter und schicker. Wir vermitteln weniger Informationen etwas klarer.

Es gibt auch diesen Nebeneffekt von zentrierten Layouts. Weil wir nicht den gesamten Bildschirm ausfüllen und nicht so viel einmal auf einem Bildschirm unterbringen müssen, benötigen wir ganz einfach auch nicht so viele Spalten mit Informationen.

37Signals waren immer in vorderster Front wenn es darum ging den Status Quo in Frage zu stellen und mit einfachen Lösungen aufzuwarten.

In diesem Layout verwenden sie 2 Spalten - eine großartige Fallstudie in Sachen Einfachheit. Es lässt die Botschaft sprechen und fügt nichts hinzu, dass sich dem in den Weg stellen könnte.

Apple ist ein anderer Vorreiter in Sachen eleganter Einfachheit.

Diese Art Layout funktioniert einfach richtig gut. Jedesmal wenn ich Apple einfaches Design erlebe werde ich mehr davon überzeugt, dass sein Zen-Ansatz der heilige Gral des Designs ist.

Dieses typische Apple Layout zeigt, dass sich jemand ehrlich gefragt hat, "Wie vielen Boxen/Spalten/Linie benötigen wir wirklich?". Dann haben Sie einfach schonungslos alle überflüssigen Elemente herausgeschnitten und das Ergebnis ist unbestreitbar die reinste und effektivste Kommunikation.

Wie man seine Spalten auswählt

Ich würde definitiv empfehlen nicht mehr als 3 Spalten zu verwenden, aus dem einfachen Grund, dass man von nichts mehr verwenden sollte als nötig.

Natürlich gibt es immer Ausnahmen. Hier sind ein paar Beispiel in denen mehr als 3 Spalten effektiv genutzt werden.

Derek Powazek's Blog Website verwendet 4 Spalten für den Hauptbereich seines Blogs aber 4 Spalten weiter unten.

Der untere Bereich ist eine Art "Freie Auswahl", wo die Fülle an Spalten das "Nimm was Dir gefällt"-Gefühl unterstützt.
 

Amazon (UK)  bedient sich zweier Spalten auf den Seiten und die Produkte werden in der Mitte in 3 weiteren Spalten arrangiert.

Es funktioniert, da der Zweck einer jeden Spalte durch das Design  klar wird. Die linke Spalte ist definitiv die Navigation; die rechte Spalte ist "anderes Zeug". Die Produkte in der Mitte sind klar mit weißem Zwischenraum separiert, so dass sie nicht überwältigen. 

Popurls.com  enthält eine Menge "freie Auswahl" Informationen, indem er die Hot Links von anderen Websites wie digg und del.icio.us aufreiht, aber behält bei den Haupt-Textblock dennoch 3 Spalten bei.

Weiter unten werden Thumbnails beliebter Bilder der Photo-Plattform Flickr gezeigt (und es gibt weiter unten auch Youtube Videos). Diese sind in mehrere Spalten gekachelt, was in Ordnung ist, denn es ist ein lehne dich zurück,  überfliege und wähle Dein Erlebnis Moment ...

 

 

Und hier eine Website, die es genau falsch macht

Hier ist All Things Web2.0 mit 4 Spalten: 2 Seitenspalten und 2 mittlere Spalten.

Der Nachteil dieser Website ist, dass man nicht weiß wo man zuerst hinschauen soll. Alles ist irgendwie von geringer-Priorität (teilweise auch durch den gräulichen Hintergrund).

Wie wir gesehen haben unterteilt auch Amazon die Seite in diesem Ausmaß, aber das Design hilft dabei zu erkennen wofür jeder Teil Bildschirm-Fläche zuständig ist, so dass es nicht verwirrend ist.

 

 

Damit ist gemeint den oberen Bereich des Layouts (Das Haupt-Branding / Logo / Navigations-Bereich) deutlich vom Rest (der Hauptinhalt) abzutrennen.

Selbstverständlich gibt es nichts Neues an dieser Herangehensweise. Es ist eine gute Idee, die schon immer verwendet wurde. Aber mehr denn je wird es jetzt verwendet und die Separation ist oft etwas deutlicher.

Man sehe wie klar der Obere-Bereich in diesen 6 Beispielen ist, sogar bei verkleinerter Darstellung:

Warum klar separierte Kopfbereiche gut sind

Der Kopfbereich sagt "Hier ist das obere Ende der Seite". Klingt einleuchtend, aber es fühlt sich gut an zu wissen wo die Seite beginnt.

Auf diese Weise beginnt das Seiten-Erlebnis auch mit einem starken, markanten Statement. Ganz im "2.0"-Geist. Wir lieben diese stark, einfach, markant Einstellung.

Zwei dieser Kopfbereiche enthalten nur das Branding (FrrezingHit.com & ElanNashville.com ("Health is vital")), die restlichen 4 haben sowohl Branding als auch Navigation. Cross Connector ist ein Beispiel für einen Kopfbereich der nur eine Navigation hat.

Ich bevorzuge die Navigation weit oben und klar zu positionieren (wie dibusoft.com), aber in meinen Augen ist die Schwäche von Cross Connection, dass das Logo erst relativ unprominent nach der Navigation kommt.

Wann und wie man Kopfbereiche einsetzen sollte

Auf jeder Website sollten sowohl das Haupt-Branding, als auch die Navigation deutlich, markant und klar sein.

In diesem Sinne ist es eine gute Idee einen klaren definierten Raum am oberen Ende der Seite zu schaffen der das Logo und die Navigation markant platziert.

Am besten platziert man das Logo ganz oben auf der Seite. Ich würde immer empfehlen die Haupt-Navigation direkt dahinter zu platzieren.

Es ist definitiv eine gute Sache den Kopfbereich der Seite als Bereich hervorzuheben, der die Haupt-Seitenelemente getrennt vom eigentlichen Seiteninhalt markiert.

Der Kopfbereich sollte sich visuell vom Rest des Seiteninhalts unterscheiden. Die deutlichste Möglichkeit dazu ist einen markanten, soliden Block mit unterschiedlicher Farbe oder Helligkeit zu verwenden - aber es gibt Alternativen.

Hier folgen zwei Beispiel in denen der Kopfbereich mit einer soliden Line hervorgehoben wird, anstatt mit Hilfe einer soliden Farbe.
 

Und in diesen Beispielen befindet sich der Kopfbereich einfach markant außerhalb des Bereiches für den Seiteninhalt.

Dem Prinzip der klar differenzierten Kopfbereiche folgend, stellt man fest, dass eine Menge Websites verschiedene Bereiche der Bildschirm-Fläche markant und klar definieren.

Diese Bildschirm-Flächen stellen sich wie folgt dar:

• Navigation
• Hintergrund / Banner
• Haupt- Inhaltsbereich
• Anderes Zeug
• Bekanntmachungen / Cross-Links

Es ist möglich eine Webpage so zu gestalten, dass diese Bereiche sich sofort von ihren Nachbarn unterscheiden.

Die deutlichste Art dies zu tun ist die Verwendung von Farbe.

Aber weiße Flächen können genauso effektiv sein.

Das Risiko mit starken Farben ist, dass es das Auge anlockt und so die Aufmerksamkeit von anderen Elementen abzieht.

Ich denke das die Platzierung von klarem Inhalt auf weißen Flächen ein behaglicheres Erlebnis erzeugen und dem Betrachter helfen sich entspannter zu fühlen und ungezwungen zu browsen.

Die permanente Navigation - die globale Website-Navigation, die auf jeder Seite als fester Teil des Templates auftaucht - muss klar als Navigation identifizierbar sein und sollte einfach zu interpretieren, anzusteuern und auszuwählen sein.

• 2.0 Designs machen die globale Navigation groß, markant, klar und augenfällig.
• Inline Hyperlinks (Links im Text) sind typischerweise klar vom Text abgehoben.

Warum eine einfache Navigation besser ist

Benutzer müssen in der Lage sein die Navigation auszumachen, die Ihnen verschiedene wichtige Daten gibt:

• Wo sie sind (im Bezug zu anderen Dingen)
• Wo sie von hier aus gehen können
• Und welche Möglichkeiten sie sonst haben

Den Prinzipien der Einfachheit und allgemeinen Reduzierung von Störungen folgend, sind die besten Methoden die Navigation zu verdeutlichen:

• Permanente Navigations-Links getrennt vom Inhalt platzieren
• Die Navigation durch Farbe, Helligkeit und Form differenzieren
• Navigationspunkte groß und markant darstellen
• Klaren Text verwenden um den Zweck eines jeden Links unmissverständlich klar zu machen

Wie man die Navigation einfach hält

Man sollte einfach folgendes im Hinterkopf behalten: Die Navigation sollte von anderem Inhalt klar unterscheidbar sein.

Des Weiteren folgt man einfach den oben genannten Richtlinien hinsichtlich Position, Farbe und Deutlichkeit.

Auch Inline Links sollten sich ausreichend vom Text um sie herum abheben.

Beispielhaft sind diese Schnipsel. In jedem Fall ist man nicht im Zweifel darüber wo sich ein Link befindet. (Ich persönlich bevorzuge die Verwendung von blauem Text (nicht unterstrichen) der beim überfahren mit der Maus auf rot, unterstrichen wechselt...)

Eine klare, markante, starke Marke - die Gesinnung, Tonlage und den ersten Eindruck vermittelt - wird durch ein markantes Logo unterstützt.

Hier folgen nun ein paar (Originalgröße). Man bemerke das die Logos dazu tendieren recht groß zu sein - in Übereinstimmung mit den allgemeinen 2.0 Prinzipien.

Warum?

Starke, markante Logos sagen "Dies sind wir." in einer Art und Weise der wir Glauben schenken können.

Wann und Wie?

Es ist schwer zu sagen wie man ein gutes Logo erstellt - aber in Kurzform ...

Ein Logo sollte:

• in seinem Hauptzusammenhang visuell funktionieren, sowie in jedem anderen in dem es verwendet werden könnte (Flyer oder T-Shirts?)
• wiedererkennbar und unverwechselbar sein
• auf den ersten Blick die Persönlichkeit und Qualitäten der Marke wiederspiegeln

Eine Menge "2.0"-Websites verwenden im Vergleich zu "1.0"-Stil-Websites großen Text.

Wenn man die gleiche Menge der Fläche mit weniger "Zeug" füllt, hat man eben mehr Platz.

Wenn man sich mehr Platz verschafft hat, hat man die Wahl wichtigere Elemente größer zu machen als unwichtige (wenn es noch welche gibt).

Wenn man Dinge größer macht sorgt man dafür, dass sie besser erkannt werden können. Dieser Effekt wird im Print Design seit jeher verwendet - in Überschriften, Briefköpfen und auf Titelseiten.

Großer Text steht nicht nur hervor, er ist auch mehr Menschen zugänglich. Das betrifft nicht nur Menschen mit optischen Einschränkungen, sondern auch Leute, die auf einen LCD Monitor unter Sonneneinstrahlung schauen, ein wenig weiter vom Bildschirm entfernt sitzen und Leute die die Seiten nur überfliegen. Wenn man darüber nachdenkt, können dies eine ganze Menge Leute sein!

Wann und wie man großen Text einsetzt

Durch größeren Text haben mehr Menschen die Möglichkeit eine Seite zu nutzen, und das ist eine gute Sache.

Größe ist natürlich relativ. Man kann nicht eine normale, gut besuchte Seite nehmen und den GANZEN Text größer machen um die Benützbarkeit zu verbessern. Das könnte schiefgehen und die ganze Sache verschlimmern.

Um großen Text einsetzen zu können muss durch Vereinfachung und das Entfernen überflüssiger Elemente Platz geschaffen werden.

Außerdem braucht man einen Grund einen bestimmten Text größer darzustellen als anderen. Und der Text sollte bedeutungsvoll und nützlich sein. Es macht keinen Sinn ein wenig großen Text einzufügen, weil es ja ach-so-schönes 2.0 ist!

Wenn man eine Menge Information auf einer Seite unterbringen muss und es alle relativ gleich wichtig ist, kann man es eventuell alles klein lassen.

Den Prinzip des größen Textes folgend, werden viele Seiten mit einer überzeugenden Beschreibung in Form einer Überschrift eingeleitet.

Diese heben normalerweise das Alleinstellungsmerkmal der Website oder ein prägnantes Verkaufsargument hervor.

Sie sind meist nicht normaler Text sondern grafischer Natur. Der Grund dafür ist, dass Designer den visuellen Einfluss der Website genauer bestimmen  wollen - gerade zu Beginn des Browsing-Erlebnisses.

Wann und wie markante Texteinleitungen zu verwenden sind

Man sollte es nur verwenden, wenn man auch etwas Wichtiges zu sagen hat.

Wenn man eine einfache Botschaft hat, die gleich zu Beginn gesehen werden soll, sollte man sich an die Arbeit machen und daraus eine markante Überschrift machen. Man macht es ganz klar, wenn man es mit einem relativ schlichten Hintergrund versieht.

Intensive, kräftige Farben ziehen das Auge an. Man sollte sie verwenden im die Seite in übersichtliche Bereiche aufzuteilen und um wichtige Elemente hervorzuheben.

Bei der Verwendung eines simplen, vereinfachten Designs, kann man wenig intensive Farbe verwenden um Bereiche auf einer Fläche zu differenzieren und im die Aufmerksamkeit des Besuchers zu Elementen zu lenken, die er bemerken soll.

Die Treo Mobile Website greift auf drei Bereiche mit kräftigen Farben zurück um die drei Hauptbereiche der Website zu bewerben.

Die Hintergrundfarbe verdeutlicht, dass es sich nicht um normalen Inhalt handelt und große, markante Titel helfen den Inhalt zu erfassen und abzuwägen ob es von Interesse ist.

Colorschemer unterteilt die Seite mit Leisten von intensiver, strahlender und heiterer Farbe auf einem eher neutralen Hintergrund.

Apple's Design bediente sich schon immer einer sehr gut ausgeglichenen Kombination von Helligkeit (hell/dunkel), reichhaltigen Effekten und Farbe um das Auge zu lenken.

Aus meiner Sicht ist es vielleicht die am perfektesten gestaltete Website, die es gibt.

In diesem Bild werden die intensiven dunklen Bereiche und kräftige Farbe sparsam eingesetzt um wichtigen Inhalt hervorzuheben.

Außerdem ist Farbe ein wichtiges Medium für die Vermittlung der Werte einer Marke

In diesem Beispiel ist die Farbe nicht sehr intensiv, aber sie ist kräftig - teilweise auch wegen der Menge in der das Grün verwendet wird.

Das Design greift auf Grün zurück um die Werte "Qualität" und "Gesundheit" zu vermitteln.

Anmerkung: Das Design der Seite entspricht nicht dem Bild.

Über diese Website wird Outdoor-Bekleidung exklusiv für Frauen verkauft und die sanften Farben bekräftigen die gewünschte Persönlichkeit der Marke. 

Intensive Farben sollten auf oder um wichtigen Inhalte bedacht eingesetzt werden

Ein nettes, effektives Seiten-Design wird durch die Verwendung von großen Flächen mit intensiver Farbe außerhalb des Hauptbereiches beeinträchtigt.

Das Resultat ist, dass die Aufmerksamkeit vom eigentlichen Inhalt weggezogen wird. 

Die Aurum Newtech Website riskiert den gleichen Effekt, aber die Farbe ist gerade schwach genug den Inhalt nicht aus den Augen zu verlieren.

Außerdem helfen die großen, markanten mit ausreichend Platz versehenen Inhaltselemente die Aufmerksamkeit vom "lockenden" Hintergrund abzuziehen.

Die sparsame Verwendung im Auge behalten

Wenn man sich kräftiger Farben bedient im das Auge zu fesseln, funktioniert dies nur wenn es eine Menge Fläche gibt, die nicht kräftig eingefärbt ist.

Wenn alles die Aufmerksamkeit des Auges anzieht, wird die Aufmerksamkeit zerstreut und die Website wirkt verwirrend und chaotisch.

Die meisten 2.0-Style Websites verwenden sparsam subtile 3D Effekte um die qualitative Wirkung des Designs aufzuwerten-

Wir alle wissen, dass diese kleinen Noten einfach nett wirken, aber wir wissen vielleicht nicht warum.

Realistische Oberflächeneffekte wie Schlagschatten, Verläufe und Reflektionen unterstützen eine "echtere", solide und veredelte Wirkung einer Benutzeroberfläche.

Es könnte auch sein, dass sie uns an bestimmte fühlbare oder ästhetische Eigenschaften von echten Gegenständen, wie z.B. Wassertropfen, glänzende Plastik-Knöpfe oder Marmorböden, erinnern.

 

Wann und wie man reichhaltige Oberflächen einsetzt

Die goldene Regel lautet hier es bedacht einzusetzen und es nicht zu übertreiben.

Diese Effekte sollten nicht auf alles angewendet werden.

Wie jede dieser Techniken, kann eine reichhaltige Oberfläche einem Design Wertigkeit vermitteln, wenn es mit Feingefühl und angemessen eingesetzt wird.

Wenn Navigation/Icon/Logo oder Layout grundlegend verpfuscht sind, kann man sich damit nicht aus der Misere polieren. Man sollte zuerst das Fundament in Ordnung bringen.

Es kann wichtig sein dabei eine einheitliche Lichtquelle aufrechtzuerhalten. Auch wenn dies durch die Illusion eine von hinten beleuchteten Diffusion in Buttons usw. sehr komplex werden kann, man bemerkt irgendwie ob sich das allgemeine Design konsistent anfühlt.

3D Effekte können auch den Anschein erwecken ein Element stünde aus der Seite heraus - allerdings nur wenn der Rest der Seite relative flach ist.

Man sollte vermeiden zu versuchen das gesamte Design 3-dimensional erscheinen zu lassen, denn:

• Es mach mehr Arbeit
• Es steigert die Gesamtgröße der Seiten-Bestandteile 
• Und es ist unnötig. 3D Effekte benötigen einiges an unterschiedlichen "Pixeln", und diese sollten bewusst eingesetzt werden um die Aufmerksamkeit des Besuchers zu Schlüsselelementen zu lenken oder um den "leichte"-informations-Aspekt zu betonen.

Web 2.0 Designs haben mehr Verläufe als der Amazonas.

Warum Verläufe so nützlich sind

Verläufe lockern Bereich auf, die sonst flach in Farbe oder Schattierung wären.

Sie können den Anschein einer unflachen Oberfläche erwecken, so wie es in Alex Dukal's Portfolio beispielhaft gemacht wird.

Verläufe können verwendet werden um eine Farbe in einen helleren oder dunkleren Ton zu überblenden, was wiederum Stimmung erzeugen kann.

Auf Seitenhintergründen können Sie auch den Anschein einer Entfernung erwecken.

Eine gebräuchliche Verlaufskombination ist Blau-zu-Weiß, was den Effekt einer luftigen Perspektive hervorruft und den Eindruck erweckt das der Hintergrund in den Horizont übergeht. 

Sie werden gewöhnlich am oberen Ende eines Seitenhintergrundes eigesetzt und helfen die Grenzen des betrachtbaren Bereiches anzudeuten.

Sie sind auch ein wesentlicher Bestandteil von Schlagschatten, Glanzlicht- und Schein-Effekten die man auf gläsernen oder plastikartigen Buttons vorfindet.

Gradienten funktionieren normalerweise am Besten wenn man sie Flächen mit flachen Farben oder Helligkeiten beistellt.

On the Curve2 Homepage - die Gradienten sind effektiver, das an ebene Weiß- oder Grau-Flächen angrenzen.

Man kann allgemein feststellen, dass Verläufe die Grundfarbe aufwerten (unter Verwendung von Überlagerungs-Effekten wie "Weiches Licht" oder "Überlagern" in Photoshop), was fast unmerklich unterschiedliche Färbungen ergibt.

In diesem Beispiel ist die mit einem Glanzlicht versehene Grünfarbe wärmer als die dunklere Grundfarbe. Der Gesamteffekt ist sowohl weicher als auch reichhaltiger.

Der Anschein von Reflektionen ist einer der verbreitetsten Anwendungen von Verläufen.

Diese tauchen meist in zwei Arten auf:

• Glanzlichter die durch reflektiertes Licht auf blanken Oberflächen erzeugt werden
• Dieser glänzende Tisch Effekt!

Spiegelnde Glanzlichter

Realistisch anmutende Wassertropen-, Glasperlen- und glänzende-Plastik-Button-Effekte usw. waren in den letzten  Jahren sehr beliebt.

Ich weiß nicht wo dieser Trend seinen Anfang nahm, aber Apple's Website muss eine der einflussreichsten gewesen sein, als sie mit Ihrem Aqua Interface look & feel voranging.

Hier ein paar Beispiele:

Die klassischen Apple.com glänzenden Plastik-Reiter, sind heute immernoch in Verwendung.

Diese besitzen ein - durch eine über den Buttons befindlichen Lichtquelle verursachtes - Glanzlicht in Kombination mit einem diffusen inneren Schein der den Plastik-Effekt hervorruft.

Diese Reiter - aus einem meiner jüngsten Designs, haben eine polierte (durch das kräftige weiße Glanzlicht) Kohlefaser Erscheinung. Der Kohlefaser-Effekt rührt von dem warmen diagonalen Streifenmuster auf dem Scheineffekt des Icons her. 

Noch mehr schön glänzende Plastik. Durch die an den Konturen der Form abfallenden Reflektionen wird der Anschein von abgerundeten Kanten erweckt. 

Ein ähnlicher Effekt auf einer quadratischen Form, lässt es wie eine Plakette aussehen.

Der nicht horizontale Winkel erschafft eine dynamische Wirkung.

Dieser glänzende Button von cafepress.com hat eine abgerundete Reflektion die eine Lichtquelle mit einer rundlichen Oberfläche andeutet.

Dieser Button von  web hosts Mediatemple weist eine diffusere Reflektion auf, die auf eine matte Glasoberfläche deuten lässt.

Dieser glänzende Tisch Effekt

Wieder einmal von Apple auf den Weg gebracht (ich bin mir sicher). Dies ist ein wirklich netter Effekt, der mittlerweile so geläufig ist, dass er Gefahr läuft überstrapaziert zu werden, so dass es schon wieder anfängt langweilig zu wirken und die Gunst der Designer zu verlieren.

Man sollte aber auch bedenken, das Webdesigner diesen Dingen gegenüber etwas sensibler sind, so dass selbst wenn es uns nicht mehr vom Hocker reißt, das allgemeine Publikum es noch für eine ganze Zeit cool finden könnte.

Der Standard Apple Look. Ausgegraut und auf einen weißen Grund verlaufend.

Auf einem farbigen Hintergrund.

Zu beiden Seiten ausblendend.

Extremerer Winkel  und reichhaltiger, überlagernder Effekt, mit einer Reflektion der Objektfarbe.

Icons spielen in Web 2.0 Designs eine wichtige Rolle. Wir verwenden heute weniger, bessere Icons die mehr Bedeutung tragen.

Icons können hilfreich sein wenn sie leicht erkennbar sind und eine klare Aussage transportieren.

In den alten Zeiten wurden Icons oft überstrapaziert. Es schien als ob alle für jeden Navigationspunkt oder Reiter ein Icons haben wollten. Heute verwenden wir weitestgehend Fließtext und sind nicht so schnell bereit eine Seite mit Icons zu übersäen.

Wo Webdesigner Icons einsetzen, sind sie für Punkte vorbehalten, die einem höheren Zweck dienen.

Einfachere, großräumigere Design verlangen weniger Aufmerksamkeit ab und erlauben daher reichhaltigere Icons.

Einige Beispiele, die ein paar Eigenschaften demonstrieren:

Einfach und klar

Schnuckelige und schnörkelig

(müssen nicht notwendigerweise kleine grüne Hügel aufweisen)

Reichlich detailiert

Kreativ inspiriert von Mac OSX. Siehe Enhanced Labs für eine großartige Auswahl.

Dies sind die sternenförmigen Etiketten, die man auf Websites geklebt vorfindet - sie sollen auf etwas Wichtiges aufmerksam machen.

Sie funktionieren indem sie Preisaufkleber in Discount-Geschäften imitieren. Aus diesem Grund passen sie in das Start-Up-Image vieler 2.0 Websites, können jedoch aus dem gleichen Grund andere  Website billig erscheinen lassen.

Sie können richtig gut funktionieren, aber sollten natürlich nur eingesetzt werden um die Aufmerksamkeit auf etwas Wichtiges zu lenken.

Ich empfehle nur einen pro Seite zu verwendet (wenn überhaupt).

Ein anderer Stil der langsam überstrapaziert ist und wahrscheinlich im nächsten Jahr auslaufen wird.

---

Bei diesem Artikel handelt es sich um eine Übersetzung eines Artikels von Ben Hunt (Scratchmedia). Der Originalartikel finden Sie unter www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm. Die Website www.webdesignfromscratch.com bietet allerhand interessante Informationen zu Thema Webdesign in englischer Sprache an. Der Originalartikel wie auch diese Übersetzung unterstehen der Creative Commons License.

This work is licensed under a Creative Commons License.