In diesem Tutorial beschreibe ich verschiedene Design-Elemente, die das moderne Webdesign zurzeit dominieren. Ich versuche zu erklären, weshalb diese Elemente funktionieren, bzw. weshalb diese Art des designens nun ein fester Standard ist. Aber auch wie wann und wo du die spezifischen Elemente in deinem Design benutzen könntest. Aus dem Englischen übersetzt. Hier das Original.
Inhaltsverzeichnis der Web 2.0 Features
Die unten aufgeführte Liste enthält die meisten der auf Web 2.0 Seiten zu findenden Features.
Natürlich muss eine Seite nicht all diese Features enthalten, um zu funktionieren oder das Anzeigen dieser Features bedeutet noch lange nicht, dass eine Seite Web 2.0-tauglich ist - oder gut ist.
- Simple Struktur
- Zentrales Layout
- Weniger Spalten
- Markanter Header
- Sich klar abgrenzende Bereiche
- Simple Navigation
- Auffallende Logos
- Grösserer Text
- Fetter Lead-Text
- Ins Auge stechende Farben
- Liebevoll gestaltete Grafiken
- Farbverläufe
- Lichtreflexionen
- Süsse Icons
- Der Web 2.0 Stern
Disclaimer
Nicht alle genannten Design-Features sind in allen Fällen angebracht. Es gibt immer Websites, welche weniger beispielhaft sind , die diese Design-Technik falsch benutzen, zu oft oder ohne jegliches Harmoniegespür einsetzen.
Du kannst nicht einfach alle Design-Elemente irgendwie zusammenschustern und darauf hoffen, dass eine gute Webseite entsteht. Genauso wenig, wie du einfach ein paar Eier, ein bisschen Mehl und Zucker zusammen in einen Topf werfen kannst, um abzuwarten bis ein Kuchen daraus entsteht.
Um eine gute Webseite zu konzipieren brauchst du viel Gespür für das Zusammenwirken der beteiligten Elemente. Eine gute Lösung ergibt sich aus dem Zusammenspiel zwischen den oftmals gegensätzlichen Elementen.
Web 2.0?!
Ich verwende den Ausdruck , um die momentan vorherrschende Art im Webdesign zu beschreiben.
Viele Leute verwenden den Ausdruck Web 2.0 auch für:
Ein Wiederaufleben der Web-Economy
Ein neues Niveau der Wechselwirkung zwischen Technologien und Webseiten
Ein Gesellschaftsphänomen, abgeleitet von den Social Networks oder Social Communities (siehe unten “Web 2.0 Applikationen”
Für das Mitmach-Web
Viele Andere bezeichnen damit auch eine neue Webdesign-Schule. In meinem Artikel beziehe ich mich mit der Bezeichnung Web 2.0 auf eben jene Schule.
Bewegungen haben einen grossen Einfluss in ökonomischer, kultureller und politischer Hinsicht. Web 2.0 ist eine Bewegung, mit weitreichendem Einfluss und verändert gegenwärtig die Gesellschaft.
Web 2.0 Applikationen
Um einige der bekanntesten Web 2.0 Websites zu nennen:
YouTube
Tumblr
Flickr
last.fm
Twitter
del.icio.us
Facebook
Eine sehr grosse Liste (gegen 600 Anwendungen) findet man bei listible.com.
Einführung
Ich werde dich im folgenden mit den Elementen der neuen Design-Schule vertraut machen, dir erklären, weshalb diese Elemente gut sind und dir zeigen, wie du sie in eine eigene Webseite einbauen kannst.
Müsste ich Web 2.0 in einem Wort zusammenfassen, so würde ich simpel sagen. Beginnen wir gleich damit.
Ich bin ein grosser Fan dieser simplen Design Struktur. Ich glaube, dass dies ein grosser Schritt vorwärts im Webdesign ist.
Die heutigen simplen, markanten und eleganten Designs ermöglichen mehr mit weniger Aufwand:
Sie ermöglichen es den Augenmerk des Besuchers direkt dorthin zu führen, wo es gewünscht ist
Sie benutzen weniger Worte, sagen aber mehr aus und kreieren durch ausgewählte Bildelemente ein angenehmes Gefühl beim Besucher
Sie verwerfen die Idee, dass man den Besucher auf seiner Seite nicht lenken kann
1. Simple Struktur
Web Design ist simpler denn je und das ist auch gut so. 2.0 Designs sind zweckorientiert, sauber und simpel.
Use as few features as are necessary to achieve what you need to achieve.
Das bedeutet nicht, dass man notwendigerweise ein Minimalist zu sein hat, wie ich später erklären werde.
Ich glaube an den Nutzen einer einfachen Struktur. Das will nicht per se heissen, dass man Aufwand scheuen soll, aber trotzdem sollte man versuchen mit so wenig Design-Elementen wie möglich auszukommen, um sein Ziel zu erreichen.
Um in Web 2.0 zu denken, kann man Ockhams Rasiermesserprinzip verwenden; Gibt es zwei mögliche Lösungswege, dann geh’ den einfacheren weg.
Hier sind ein paar Beispiele. Beachte, dass unnötige Elemente auf jeder Seite weggelassen wurden. Auf jeder Seite könnte einiges mehr sein.aber würde dies die Seite besser machen?
Das Resultat ist, dass du gezwungenermassen auf den Inhalt achten musst. Du beachtest genau nur die beabsichtigten Elemente der Webseite; Du und der Web Designer erreichen ihr Ziel.
Weshalb eine simple Struktur von Vorteil ist
Webseiten haben ein Ziel und alle Webseiten haben einen Nutzen.
Die Aufmerksamkeit des Besuchers ist ein flüchtiges Gut.
Es ist die Aufgabe des Web Designers es dem Besucher zu erleichtern, das zu finden, was er sucht. (Bzw. ihn dazu zu bringen, das zu beachten, was von ihm beachtet werden soll)
Elemente auf dem Bildschirm ziehen das Auge des Betrachters an. Je mehr Elemente es auf dem Bildschirm hat, desto schwieriger wird es für den Besucher, das wirklich wichtige zu finden.
Also müssen wir mit dem Besucher eine gewisse “Kommunikation” herstellen und müssen daher auch die Unruhe auf der Seite reduzieren. Wir müssen also mit möglichst wenig sicherstellen, dass Form der Funktion folgt. Das ist ökonomisch oder eben simpel.
Wann und wie oft soll ich mein Design simpel halten?
Wann?
Immer
Wie?
Es gibt zwei grundsätzliche Gesichtspunkte, um erfolgreich simpel zu gestalten:
Entferne unnötige Komponente, ohne dabei die Effektivität zu vermindern.
Probiere alternative Lösungsansätze aus, die dasselbe erreichen, aber simpler sind.
Wann auch immer du designest, erachte es als deine Pflicht, alle unnötigen visuellen Elemente auszulassen
Konzentriere dich besonders auf Elemente in deinem Layout, die weniger wichtig für den Nutzen der Webseite sind. Denn visuelle Elemente in diesem Bereich ziehen die Aufmerksamkeit des Besuchers auf sich und lenken ihn vom Key-Content ab.
Benutze visuelle Elemente, wie Linien, Worte, Formen und Farben, um den Besucher auf den wichtigen Inhalt zu lenken und nicht bloss, um zu dekorieren.
Hier ist ein Beispiel eines Designs, das überladen ist. Yaxay’s Interface benutzt viele Pixel, aber die Mehrheit davon ist zu dekorativem Zweck im Hintergrund der Seite angebracht. Relativ wenig Platz bietet sich dem Besucher, um Informationen aufzunehmen oder mit der Seite zu interagieren.
Achte dich, wieviel verschiedene Elemente dein Auge auf sich ziehen und wieviel Platz für Navigation und Inhalt zugordnet ist.
Edward Tafte ist ein Guru, wenn es um das Designen von Informationen geht. Er benutzt die Ausdrücke Data ink (Details, die Informationen bereitstellen) und Non-Data ink (Details, die nur Details sind), um dieses Phänomen zu beschreiben.
Eine Art, wie Tafte die Effektivität des Informations Design (Grafiken, Tabellen, Präsentation etc.) misst, ist das Verhältnis von data ink zu non-data ink. Je mehr data ink benutzt wird, umso höher ist die Wahrscheinlichkeit, dass das Design effektiv ist.
Wenn wir nochmals das Beispiel von oben betrachten, dann hat es da viele Spielereien. Kanten, Farbtöne und Farbwechsel, Formen, Linien.eine Haufen graphischer Elemente einfach. Aber im Grunde genommen sind die einzigen brauchbaren Elemente:
Das Seitenlogo
und das Label auf dem Navigations-Button (Art Gallery)
All das Zeugs herum macht das Design unruhig. Die formen im Hintergrund, das Netzmuster, das Interface Panel, die Farbverläufe.alles non-data ink, denn es verbessert den Informationsfluss nicht.
Ich bin nicht gegen Reichhaltigkeit, Komplexität oder Schönheit im Web Design
Simpel heisst:
Verschwende nur genau so viele Pixel, wie notwendig sind, um mit dem Besucher zu kommunizieren. Verzichte also auf Schnickschnack im Hintergrund.
Du übermittelst dem Besucher in erster Linie Soft information und erst dann Hard Data.
Hard Data sind Fakten, wie News, Aktien-Indizies, Fahrpläne oder dein Kontostand.
Soft information deckt den Kommunikationsaspekt zwischen dem Besucher und der Webseite ab. Damit gemeint sind der Erste Eindruck von einer Firma. Ob der Besucher besucher sich wohl fühlt auf der Seite und ob er sich mit den angepriesenen Leistungen identifizieren kann. Diese Art von Information ist also genauso wichtig.
Was du dem Besucher mitteilst ist gleichermassen Hard Data, wie auch Soft Data und du übermittelst sie dem Besucher in Form von Pixeln. Setze die Pixel also bedacht ein.
Betrachte einmal folgende Seite:
Alex Dukals Webseite ist Reichhaltig und interessant. Er benutzt eine Reihe visueller Techniken, um deine Aufmerksamkeit auf sich zu ziehen und dich zu interessieren. Ausserdem hat man ein warmes Gefühl auf Alex Webseite und kriegt ein Gefühl von der Qualität seiner Arbeit.
Die Webseite ist simpel gehalten, weil die Pixels bedacht verwendet werden und die Muster im Hintergrund kaum stören, sondern eher für Atmosphäre sorgen.
Was auch immer du sagst, geh bedacht mit Pixels und Farben um. Benutze sie in erster Linie, um mit dem Besucher zu kommunizieren. Dann frage dich, ob du mit dem Besucher nicht genauso effektiv kommunizieren kannst, wenn du gewisse Dinge weglässt.
2. Zentriertes Layout
Im Allgemeinen werden heute die meisten Webseites im Browserfenster zentriert angezeigt. Nur noch wenige sind über das ganze Browserfenster verteilt oder Linksbündig ausgerichtet.
Warum ein zentriertes Layout gut ist
Seiten, die zentriert ausgerichtet sind, wirken simpel und ehrlich. Der Besucher mag das.
Ausserdem können wir sparsamer mit unseren Pixels umgehen. Wir müssen nicht mehr wie früher alles mit Pixels oder Bildern zukleistern. Denn wenn die Information zentriert ist, ist es nicht schlimm, wenn sich Links und Rechts vom Main-Content-Element einfach ein z.B. weisser Hintergrund befindet.Ausserdem sagen wir mit weniger mehr, sodass weiterer white-space entsteht.
Wann & wie man ein zentriertes Layout benutzt
Ich würde dir empfehlen deine Webseite immer zentriert auszurichten, ausser es gibt einen wirklich guten Grund, sie nicht zu zentrieren.
Dies kann zum Beispiel bei einer Web-Applikation der Fall sein.
3. Weniger Spalten
Vor einigen Jahren, waren 3 Spalten Layouts die Norm, und 4 Spalten Layouts waren nicht selten. Heute sind 2 Spalten allgemeiner, und 3 ist das Maximum.
Weshalb man wenige Spalten verwenden sollte
Weniger ist mehr. Wenige Spalten vermitteln eher ein Gefühl von ehrlichkeit . Weniger Informationen, aber klarer vermittelt.
Das ist aber auch ein Nebeneffekt der zentrierten Layouts. Weil wir nicht den vollständigen Bildschrim füllen und weil wir nicht so viel Informationen aufs Mal auf den Bildschirm pappen wollen, brauchen wir auch nicht so viele Spalten.
37Signals waren schon immer die ersten, die den Status Quo hinterfragt und nach einfacheren Antworten gesucht haben.
Hier benutzen sie 2 Spalten. Das ist ein gutes Beispiel für eine simple Struktur. Die Struktur lässt die Information sprechen und es ist nichts im Weg, das vom wichtigen ablenkt.
Apple ist der andere Führer in der eleganten Einfachheit.
Dieses Layout funktioniert wirklich gut. Jedesmal, wenn ich mir Apples Design so betrachte, werde ich mehr davon überzeugt, dass diese Zen-Annäherung so etwas wie der heilige Gral des Designs ist.
Dieses typische Apple Layout zeigt, dass sich jemand gefragt hat “wieviele Kästen/Spalten/Linien benötigen wir wirklich?” Dann haben sie mutig jeden unnötigen Mist entfern und das Resultat ist eine saubere und klare Kommunikation von Inhalten mit dem Besucher.
Wie du am Besten deine Spalten wählst
Kurz gesagt, ich würde dir davon abraten, mehr als drei Spalten zu benutzen. Einfach deshalb, weil du nicht mehr als wirklich notwendig benutzen solltest.
Es gibt aber immer Ausnahmen, wie hier einige Beispiele, wo mehr als 3 Spalten effektiv eingesetzt werden.
Derek Powazeks Blog verwendet 3 Spalten für den Hauptabschnitt seines Blogs, aber 4 für den Footer.
Der unterere Abschnitt ist eine Art Pic & Mix, in der der überfluss an den Spalten so etwas wie ein Selbstbedienungsbuffet symbolisiert.
Amazon (UK) hat zwei seitliche Spalten und die Produkte, die zentral in 3 zusätzlichen Spalten geordnet werden.
Es funktioniert, weil der Zweck jeder Spalte klar wird. Die linke Spalte ist definitiv die Navigation; die rechte Spalte ist „anderer Stuff“. Die Produkte in der Mitte werden klar durch white-space unterteilt und getrennt.
Popurls.com enthält einen Haufen Pic-n-Mix Information. Hot Topics von Digg oder del.icio.us werden aufgeführt, wobei das 3 Spalten-Layout strikt eingehalten wird.
Weiter unten hat es Thumbnails von beliebten Flick-Fotos oder Youtube-Videos. Hier hat es mehrere Spalten, aber das ist nicht weiter schlimm, denn das Auge überfliegt die Bilder bloss. Es existiert ein Unterschied zwischen Text und Bildern.
Und hier eine Seite, wo es schief läuft
Die Seite All Things Web 2.0 benutzt zwei Seitenspalten und zwei zentrierte Spalten.
Das stiftet bereits einmal Verwirrung. Man weiss nicht genau, wo man hinschauen soll. Desweiteren ist der grau in graue Hintergrund äusserst unklug gewählt. Anders als bei Amazon wird nicht klar, welcher Element bzw. welche Spalte für was zuständig ist.
4. Markanter Header
Das bedeutet, dass man den oberen Bereich der Webseite (das Logo und die Navigation) klar unterscheidbar vom Rest der Seite gestalten soll.
Selbstverständlich ist diese Einsicht nicht neu. Man hat Seiten schon immer so gestaltet. Nur achtet man nun noch mehr darauf, denn Header designmässig klar vom Content abzutrennen.
Schau dir einmal an, wie klar sich die Header der folgenden Webpage-Thumbnails vom Content abgrenzen.
Warum markante Header gut sind
Der obere Abschnitt sagt, dass hier der Header ist . Klingt offensichtlich, aber es fühlt gut an zu wissen, wo die Seite beginnt.
Der Webseitenbesuch beginnt mit einem klaren und deutlichen Statement im Header der Seite. Das ist der 2.0 Geist. Wir mögen starke, simple und herausstechende Aussagen.
2 Dieser Header enthalten nur das Logo (Protolize, Mediconmedia), 1 hat bloss eine Navigation (Crossconnector), und die verbleibenden 3 beides.
Die Schwäche von Crossconnector liegt meiner Ansicht nach darin, dass das Logo nach der Navigation kommt. Ich bevorzuge es, wenn das Logo schön sichtbar zuoberst ist, wie bei SimpleBits.
Wann und wie man einen eindeutigen Header benutzt
Auf jeder Webseite sollte das Logo und die Navigation offensichtlich, herausstechend und übersichtlich sein.
Es ist deshalb eine gute Idee im oberen Teil der Seite für das Logo und die Navigation Platz zu schaffen.
Setz dein Logo immer in den obersten Teil deiner Seite. Und gleich danach die Main-Navigation.
Wie bereits erwähnt, sollte sich der Header vom Rest der Seite unterscheiden. Eine Möglichkeit ist es, einen starken Farbkontrast zwischen Header und Contentbereich zu schaffen, aber es gibt auch andere Lösungsansätze.
Hier sind zwei Beispiele wo der Header mit einer Dicken Linie (dem Navigationsblock) vom Content getrennt wird, anstatt einfach eines Farbkontrasts.
Und hier ist das Logo einfach klar ausserhalb des Main-Content Bereichs platziert worden.
5. Sich klar abgrenzende Bereiche
Im anbetracht des klar abgegrenzten Head-Bereichs, wirst dass viele Webseiten in klar definierte Bereiche unterteilt sind:
Navigation
Hintergrund
Main-Content Bereich
Other Stuff
Hinweise / Crosslinks
Es ist möglich eine Webseite so zu designen, dass die verschiedenen Bereiche aufgrund derer Abgrenzung sofort sichtbar werden.
Am Einfachsten tut man dies, indem man starke Farben benutzt.
Weisser Raum kann aber genauso wirkungsvoll sein.
Die Gefahr von starken Farben ist, dass sie die Aufmerksamkeit des Auges auf sich zieht und der Besucher von anderen relevanten Inhalten abgelenkt wird.
Ich denke, dass es für den Leser am angenehmsten ist, wenn man sauber gepflegten Content auf white-space platziert. Es ist einfach ein angenehmeres Surf-Erlebnis.
6. Eine simple Navigation
Permanente Navigation - die Navigation, die auf jedem deiner Seiten bzw. deinem Template auftaucht, sollte einfach zu interpretiere, einfach zu orten und einfach aufzuwählen sein.
In 2.0 Designs sind die permanenten Navigationen gross, fett, sauber und offensichtlich
Inline Hyperlinks (Links innerhalb des Textes) unterscheiden sich typischerweise klar vom restlichen Text
Warum einfache Navigationen besser sind
Der Besucher muss die Navigation klar identifizieren können, denn sie teilt ihm wichtige Dinge mit:
Wo sich der Besucher gerade befindet
Welche anderen Unterseiten er besuchen kann
Und welche Möglichkeiten er hat, um Dienste zu nutzen bzw. um mit der Seite zu interagieren
Nach der Grundregel der Einfachheit dem Vermeiden von unnötigem, kann man die Navigation am Besten simpel halten, indem man:
Die permanente Navigation klar ausserhalb des Texts positionniert
Die Navigation räumlich vom Content mit Farben, Farbton und Formen abtrennen
Die Navigationselemente gross und herausstechend designen
Die Links in der Navigation mit eindeutigen Bezeichnungen kennzeichnen
Wie man seine Navigation simpel hält
Erinnere dich einfach an die Grundregel: Die Navigation soll klar unterscheidbar sind von allem, was nicht mit der Navigation zu tun hat.
Befolge einfach die obigen Anweisungen; Räumliche Trennung durch Farbe und Formen.
Inline Links, also Links im Text sollten sich auch klar vom restlichen Text abheben.
Schau dir einmal die folgenden Snippets an. Hier ist absolut klar, was ein Link ist und was nicht.
7. Auffallende Logos
Ein klares, fettes und starkes Logo - eine Aussage über Haltung, Tonlage und der erste Eindruck - wird durch ein fettes Logo unterstrichen.
Hier sind einige Logos (100% grösse). Web 2.0 Logos neigen dazu, ziemlich gross zu sein, in übereinstimmung mit den allgemeinen Web 2.0 Grundregeln.
Warum?
Starke, fette Firmenzeichen sagen, dass „dieses ist, wer wir sind.“ in einer Weise glaubwürdigen Art und Weise.
Wann und wie?
Es ist schwierig zu sagen, wie man ein gutes Logo kreiert. Vielleicht kurz…
Dein Logo sollte:
in seinem Hauptkontext und in anderen (wie Flyer oder T-Shirts?) eine gute Figur abgeben.
erkennbar und sich von anderen Logos abheben
Beschaffenheit und Qualitäten deiner Marke auf den ersten Blick klarstellen
8. Grösserer Text
Viele Web 2.0 Webseite haben einen grösseren Text, verglichen mit älteren Webseiten.
Wenn du den gleichen Platz mit weniger „Material“ füllst, hast du mehr Raum.
Wenn du mehr Platz hast, kannst du wichtigere Elemente grösser als die weniger wichtigen machen.
Grössere Elemente werden besser wahrgenommen. Dieser Effekt wird schon seit Generationen im Druckdesign auf überschriften, Titelblättern und Schlagzeilen verwendet.
Grösserer Text sticht nicht nur heraus, er macht den Inhalt auch für mehrere zugänglich. Es geht hier nicht nur um Menschen mit schlechten Augen, sondern auch um Besucher, denen die Sonne auf den Monitor scheint oder übermüdete Personen usw. Denk einmal drüber nach, das sind eine ganze Menge Leute!
Wann und wie man grösseren Text benutzt
Grosser Text macht die Seite für viele Leser zugänglich. So kann es nur eine gute Sache sein!
Selbstverständlich ist Grösse relativ. Du kannst nicht einfach eine normale Seite nehmen und den Text grösser machen. Das kommt nicht gut heraus!
Um grossen Text benutzen zu können, muss man ein Design von unnötigem entrümpeln.
Du solltest dir auch überlegen, weshalb du eine Textstelle grösser als die Andere machst. Und der Text muss sinnvoll und nützlich sein. Es macht keinen Sinn einfach einen grossen Text hinzupflanzen, nur weil es OH–so 2.0 ist!
Wenn du eine Menge, relativ gleichwertiger Informationen hast, dann kannst du die Schrift auch klein belassen.
9. Fetter Lead-Text
Führend an vom grossen Textthema, führen viele Aufstellungsorte mit starken Alltext Schlagzeile Beschreibungen.
Diese legen normalerweise USP des Aufstellungsortes, Aufzug Taktabstand oder Hauptanzeige dar.
Sie neigen dazu, graphische zu sein. Der Grund für dieses ist, dass Entwerfer eine Menge Steuerung über der Sichtauswirkung der Seite wünschen, besonders früh an in einer Grasenerfahrung.
Wann und wie man einen fetten Lead-Text verwendet
Nur verwenden, wenn du wirklich etwas Wichtiges zu sagen hast.
Wenn du eine einfache Anzeige hast, die du zuerst gesehen werden soll, dann mach aus ihr eine überschrift. Hebe sie deutlich vom Hintergrund ab.
10. Ins Auge stechende Farben
Helle, starke Farben stechen ins Auge. Benutze sie, um die Seite in klare Abschnitte zu unterteilen und um wichtige Elemente hervorzuheben.
Wenn du ein einfach aufgebautes Design hast, kannst du ein wenig intensive Farbe verwenden, um Bereiche, die von Interesse sind hervorzuheben und um die Aufmerksamkeit des Besuchers auf sie zu lenken.
Die Treo Mobile Website verwendet 3 Bereiche mit starken Farben, um diese deutlich zu kennzeichnen.
Die Hintergrundfarbe (weiss) ist passiv und macht klar, was der Hauptinhalt darstellt und was nicht. Die grossen fetten Titel erklären, was in jeder Kategorie ist und d kannst dich entscheiden, wohin du möchtest.
Colorschemer unterteilt die Seite mit Bändern der intensiven, hellen, freundlichen Farbe, Satz gegen einen Nullhintergrund.
Apples Design hat immer schon eine ausgeglichene Kombination zwischen Kontrasten, reichhaltigen Effekten und der Farbe verwendet, um das Auge zu erfreuen.
Meiner Meinung nach ist es eine der bestdesignten Webseiten, die es gibt.
In diesem Bild werden die intensiven dunklen Bereiche und starke Farben genau dort verwenden, wohin der Besucher schauen soll. Der wichtige Content wird hervorgehoben.
Farbe ist auch ein gutes Mittel, um die von einer Marke vermittelten Werte zu kommunizieren.
Hier ist die Farbe nicht hell, aber sie ist stark, hauptsächlich weil viel Grün verwendet wurde.
Dieses Design verwendet Grün, um die Werte „Qualität“ und „Gesundheit“ zu vermitteln.
Die Betreiber dieser Webseite verkaufen Outdoor-Kleider exklusiv für Frauen. Die gewählten Farbtöne sprechen die (gemäss Klischee) Persönlichkeit der Frau an.
Achte darauf, dass du um wichtige Elemente herum keine intensiven Farben verwendest.
Hier lenkt der Hintergrundfarbverlauf und die aufeinander gepappten Grafikelemente im Content-Bereich vom eigentlich wichtigen ab.
Die Aurum Newtech Webseite riskiert dasselbe. Nur ist die Hintergrundfarbe gerade genug blass, sodass man Content noch deutlich von Hintergrund unterscheiden kann.
Auch die grosse und dicke Content-Schrift lenkt die Aufmerksamkeit weg vom “attraktiven” Hintergrund.
Farbe sparsam verwenden
Wenn du starke Farben verwendest, um das Auge anzuziehen, dann funktioniert das nur, wenn du für genügend White-Space sorgst. Der Kontrast ist wichtig!
Wenn alles auf einer Seite in dein Auge springt, verliert das Auge den überblick und du nimmst die Seite als unruhig und chaotisch wahr. Du wirst sie schnell wieder verlassen!
11. Reich gestaltete Oberflächen
Die meisten Web 2.0 Seiten verwenden sorgfältig subtile 3D Effekte, um das qualitative Gefühl des Designs zu erhöhen.
Wir wissen alle, dass sich diese kleinen Buttons angenehm ansehen lassen, aber wissen meist nicht weshalb.
Realistische Interfaces, versehen mit Schatten, Farbverläufen und Reflexionen machen das Interface echter, stabiler und qualitativ hochwertiger.
Sie erinnern uns auch an bestimmte Tast- oder ästhetische Qualitäten der echten Gegenstände, wie Wassertröpfchen, glänzende Plastikfolien und Marmorfussböden.
Wann und wie man solche Oberflächen benutzt
Die goldene Regel ist, sie sorgsam zu verwenden und es nicht zu übertreibe.
Wie ich im Tutorial 3D Effekte erkläre, sollten diese Effekte nicht auf alles angewendet werden.
Wie alle Techniken kann eine reich gestaltete Oberfläche den visuellen Wert des Designs erhöhen, wenn sie sorgfältig und passend verwendet werden.
Wenn deine Navigation/Icons/Logos/Layout grundlegend scheisse sind, bringen dir ein Paar 3D-Effekte nicht viel. Bring zuerst die Basics in Ordnung!
Ferner solltest du beim Designen der Buttons darauf achten, dass die Lichtquelle konstant bleibt, da es ansonsten zu unschönen Verwirrungen kommt.
Es kann bei 3D-Elementen so wirken, als ob Buttons aus der Seite herausstehen. Das funktioniert aber nur, wenn der Rest der Seite relativ flach wirkt.
Vermeide es zu versuchen, dein gesamtes Design 3D-artig zu machen, weil:
Es ist mehr Arbeit
Es erhöht die Ladezeit der Seite
Es ist unnötig. 3D effekte sollte man nur dort verwenden, wo man die Aufmerksamkeit des Besuchers hinlenken will
12. Farbverläufe
Web 2.0
Designs spielen mit Farbverläufen.
Weshalb Farbverläufe so nützlich sind
Farbverläufe bereichern Felder, die ansonsten matt und langweilig aussehen würden.
Sie können die Illusion einer nicht-flachen Oberfläche erzeugen. Wie auf Alex Dukals Portfolio.
Farbverläufe können auch verwendet werden, um einen Farbton in den Andern übergehen zu lassen. Das ist gut, um eine gewisse Stimmung zu kreieren.
In den Seitenhintergründen können sie auch einen Distanzeffekt hervorrufen.
Ein weit verbreiter Farbverlauf ist der blau-nach-weiss verlauf, wobei der Vordergrund zu schweben scheint.
Sie sind an der Oberseite der Webseite im allgemeinen verwendet. Sie helfen, die Grenze des sichtbaren Bereichs zu bezeichnen.
Farbverläufe sind auch oft in 3D-Buttons wiederzufinden.
Merke, dass Farbverläufe normalerweise gut harmonieren, wenn sie mit ähnlichen Farbtönen kombiniert werden.
Auf der Curve 2 Webseite sind die Farbverläufe wirkungsvoller, weil jede neben einem blassen weissen oder grauen Abschnitt in Position gebracht wird.
Es ist üblich bei Farbverläufen zu finden, welche den Grundfarbton verändern (mit Mischeffekten in PS (Color Burn / Overlay), die subtil unterschiedliche Farben verursachen.
Hier ist die hervorgehobene grüne Farbe wärmer und freundlicher als die dunklere Farbe. Der gesamte Effekt macht die Seite weicher und reichhaltiger.
13. Lichtreflexionen
Die Illusion der Reflexion ist eine der allgemeinsten Farbverlauf-Anwendungen.
Diese kommen allgemein in 2 Arten vor:
Farbhighlight verursacht durch das Licht, das sich auf einer glänzenden Oberfläche reflektiert
Der Shiny-Table-Effekt
Glänzende Highlights
Realistische Effekte mit Wassertröpfchen, Glas, glänzendem Plastik sind seit den letzten paar Jahren sehr bekannt geworden.
Ich weiss nicht genau, wo dieser Trend seinen Anfang nahm. Es ist aber gut möglich, dass Apples Aqua OSX Interface etwas damit zu tun hat.
Sind hier einige Beispiele:
Die klassischen Apple.com glänzenden Plastiktabs. Immer noch in Verwendung heute. Diese benutzen eine Lichtquelle über den Tabs, kombiniert mit einem inneren, verbreiteten Glühen, das den Plastikeffekt verursacht.
Diese Tabs, von einer meiner neuen Designs, haben einen polierten (starkes weisses Highlight) Carbonfaser -Look. Der Carboneffekt kommt vor allem durch die grünglühenden Diagonalen Pixel im Button zustande.
Noch mehr Plastik! Schau mal wie die Reflexionen am Rand der Form herunterfallen, die die Illusion gerundeten Ränder verursachen.
ähnlicher Effekt auf eine quadratische Form sieht wie ein Aufkleber aus. Der nicht-horizontale Winkel wirkt dynamisch.
Dieser glänzende Button von cafepress.com verwendet eine abgerundete Reflexion, die eine helle Lichtquelle andeutet, die auf eine runde Oberfläche trifft.
Diese Taste von Net Host Mediatemples hat eher eine diffuse Reflexion und deutet damit auf mattes Glas hin.
Der glänzende Untergrund
Wieder hervorgegangen von Apple. Dieses ist wirklich ein netter Effekt, der jetzt so oft benutzt wird, dass er schon fast schon overused wirkt.
Bei Webdesignern ändert sich das vorherrschende “To-Be” schneller, als bei den normalen Usern. Viele mögen diesen Effekt zwar noch cool finden, obwohl er schon längst überholt ist.
Der Standard Apple Look. Greyed-out und langsam verblassend auf einem weissen Untergrund.
Auf einem farbigen Hintergrund
Zu jeder Seite ausgeblendet.
Extremerer Winkel und ein reicher überlagerter Effekt, der die Farbe des festen Gegenstandes reflektiert.
Hier eine Anleitung, wie man das Ganze macht.
14. Süsse Icons
Icons spielen eine wichtige Rolle im Web 2.0 Design. Heute verwenden wir wenigere, dafür aber bessere Icons, die mehr auffallen. Icons können nützlich sein, wenn sie leicht erkennbar sind und eine klare Bedeutung haben. In vielen anderen Fällen, ist ein einfacher Text wirkungsvoller.
Früher waren Webseiten oft vollgestopft mit Icons. Es schien, dass jeder unbedingt Icons für eine Navigation oder Tabs wollte. Jetzt benutzen wir weitgehend Textnavigationen und verunreinigen die Seite nicht mehr mit massenhaft Icons.
Dort wo Web 2.0 Designer Icons verwenden, befinden sich meistens High-Value-Spots. Einfachere, geräumigere Designs verlangen weniger Aufmerksamkeit und lassen Platz für Icons.
Einige Beispiele:
Simpel und sauber
Nett und schrullig
Du musst nicht notwendigerweise kleine Hügel verwenden!
Detailreich
Wohl inspiriert durch Mac OSX. Bei Enhanced Labs gibt es eine tolle Showcase.
15. Der Web 2.0 Badge
Das sind die Sternartigen Badges, die du bei vielen Webseiten vorfindest. Sie gieren nach deiner Aufmerksamkeit.
Sie funktionieren ähnlich wie die Neuheits-Aufkleber im Supermarkt. Die ersten Web 2.0 Webseiten wollten etwas Neues verkündigen, doch mittlerweile wirkt der Badge schon fast etwas abgelutscht, da jeder ihn auf seiner Webseite benutzt.
Die Badges sind eine wirklich gute Sache; doch sie sollten nur dann verwendet werden, wenn man auf etwas wirklich wichtiges aufmerksam machen will.
Ich würde dir empfehlen, ihn höchstens einmal pro Seite zu verwenden.
Wie auch immer ist dieser Badge wohl überbeansprucht und wird wohl schon bald wieder von vielen Webseiten verschwinden.
UND WAS NUN?