Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 13 Webdesign-Stile und -Trends
Pfeil 13.1 Die Webdesign-Stile
Pfeil 13.1.1 Frühere Webdesign-Stile
Pfeil 13.1.2 Skeuomorphismus
Pfeil 13.1.3 Flat-Design
Pfeil 13.1.4 Material-Design
Pfeil 13.1.5 Minimalismus
Pfeil 13.1.6 Typografie
Pfeil 13.1.7 Illustrationen
Pfeil 13.1.8 Der Vintage- oder auch Retro-Stil
Pfeil 13.1.9 Fazit
Pfeil 13.2 Webdesign-Trends
Pfeil 13.2.1 Scrollen
Pfeil 13.2.2 Versteckte Navigation
Pfeil 13.2.3 Grafische Effekte
 
Zum Seitenanfang

13.2    Webdesign-Trends Zur vorigen ÜberschriftZur nächsten Überschrift

Neben den »großen« Design-Stilen gab und gibt es jede Menge kleinerer Entwicklungen, die eher punktuell das Design betreffen und nicht gleich alle grafischen Elemente einer Webseite betreffen. Erinnern Sie sich noch an animierte Logo-GIFs? Oder an Flash-Intro-Seiten? In den Weiten des Webs wird man sicherlich noch entsprechende Exemplare finden, aber nur auf Webseiten, die seit 15 Jahren keinen Relaunch mehr erlebt haben. Im Folgenden habe ich einige aktuelle Webdesign-Trends zusammengetragen, die zurzeit gerne eingesetzt werden. Manche werden schon seit Jahren verwendet, andere sind recht neu. Einige werden noch Jahre bleiben, andere schon bald wieder durch neue Trends abgelöst werden.

 
Zum Seitenanfang

13.2.1    Scrollen Zur vorigen ÜberschriftZur nächsten Überschrift

Das Scrollen gehört zu Webseiten dazu – zumindest das vertikale. In letzter Zeit haben sich, auch dank entsprechender JavaScript-Plug-ins, einige Techniken etabliert, die das Scrollen verändern und zu einem »Erlebnis« machen möchten. Nicht alle Möglichkeiten dienen dabei aber immer der besseren Bedienbarkeit.

One-Pager | One-Pager, manchmal auch Single-Pager genannt, sind eine einzige Seite ohne weitere Unterseiten. Die Idee dahinter ist, dem Anwender kompakt auf einer Seite alle wichtigen Infos zur Verfügung zu stellen. »Lästiges« Navigieren von Seite zu Seite fällt damit weg.

Auch Webdesigner setzen gerne auf lange Portfolio-Seiten, wie heikopaiko.com, 8050verobeach.com und norwegianstructure.com.

Abbildung 13.23    Auch Webdesigner setzen gerne auf lange Portfolio-Seiten, wie heikopaiko.com, 8050verobeach.com und norwegianstructure.com.

»Lieber scrollen als klicken« könnte das Motto lauten. Wobei klar ist, dass es sich nicht für alle Seitentypen eignet. Nur Webseiten mit einem überschaubaren Inhaltsbedarf kommen für einen One-Pager infrage, sehr umfangreiche Projekte mit eigentlich vielen Unterseiten eher nicht. Das bedeutet jedoch nicht, dass ein One-Pager automatisch sehr wenige Informationen bereithält. Durch Slider, Tabs und Accordions (siehe Kapitel 14, »Animationen«) lassen sich auch viele Informationen geschickt »verstecken« und erst bei Bedarf einblenden. Eine umfangreiche Sammlung von mehreren Tausend One-Pagern bietet onepagelove.com.

Scrolleffekte und Parallax | Lange Seiten mögen angenehm sein, weil der Anwender nicht scrollen muss, sie werden aufgrund der Inhaltsmenge aber auch schnell langweilig. So fanden Entwickler ein neues Betätigungsfeld und schrieben jede Menge Animationsskripte, um das Scrollen zu einem »Erlebnis« zu machen. Inhalte werden nun eingefadet, gezoomt, gedreht, vergrößert, Hintergrundfarben geändert etc.

Einsatz von Effekten

Effekte können einer Seite zweifellos das »gewisse Etwas« verleihen. Zu viele Effekte lenken aber von den Inhalten ab und verursachen vermehrt Datenvolumen. Behalten Sie das immer im Hinterkopf, und setzen Sie Effekte daher mit Bedacht ein.

Ein beliebtes jQuery-Plug-in ist ScrollMagic, das viele Funktionen anbietet und einfach einsetzbar ist (janpaepke.github.io/ScrollMagic). Das Spannende an diesen Animationen ist, dass sie erst dann einsetzen, wenn der User bis zu den entsprechenden Inhalten gescrollt ist. So erscheinen die Inhalte nach und nach gekonnt effektvoll.

Wer Parallax mag, wird an den Illustrationen von nytimes.com/projects/2013/tomato-can-blues seine Freude haben.

Abbildung 13.24    Wer Parallax mag, wird an den Illustrationen von nytimes.com/projects/2013/tomato-can-blues seine Freude haben.

Eine sehr beliebte Technik, die aber aufgrund des verbreiteten Einsatzes auch viele nicht mehr sehen können, ist das sogenannte Parallax. Hier bewegen sich zwei oder mehrere Objekte beim Scrollen unterschiedlich schnell, sodass der Eindruck von Dreidimensionalität entsteht.

Scrollen und Storytelling | Eine Weiterführung des effektvollen Scrollens ist das Geschichtenerzählen durch und beim Scrollen. Hier fliegen nicht nur einzelne Elemente durch die Gegend oder werden irgendwie spannend animiert eingeblendet. Dem Content-Trend Storytelling folgend, werden richtige kleine (und manchmal sogar große) Geschichten beim Scrollen erzählt. Ein schönes Beispiel für diesen Trend ist die Seite 360langstrasse.srf.ch).

Interaktiv die Langstrasse in Zürich entdecken – ein echtes Storytelling-Scroll-Erlebnis auf 360langstrasse.srf.ch

Abbildung 13.25    Interaktiv die Langstrasse in Zürich entdecken – ein echtes Storytelling-Scroll-Erlebnis auf 360langstrasse.srf.ch

Weitere Inspirationen

Weitere spannende Scroll- und Storytelling-Webseiten:

Zum Nachlesen

Ein Tutorial zur Erstellung einer fixen Navigation finden Sie in Kapitel 12, »Navigations- und Interaktionsdesign«. Der Workshop heißt »Eine fixe Navigation mit HTML und CSS« und ist in Abschnitt 12.1.7, »Feste Navigation«, zu finden.

Fixe Navigation | Auf fixe Navigationen bin ich bereits in Kapitel 12, »Navigations- und Interaktionsdesign«, eingegangen. Normalerweise scrollt der Header und damit die gesamte Navigation mit und verschwindet so recht schnell aus dem Sichtfeld des Users. Das passiert jedoch nicht, wenn die Navigation fix am oberen Rand stehen bleibt – eine Methode, die mithilfe der CSS-Zuweisung position: fixed recht einfach umgesetzt werden kann und in letzter Zeit wieder in Mode gekommen ist. Der Vorteil liegt auf der Hand, der Anwender kann jederzeit ohne lästiges Scrollen über das Menü navigieren. Ob es dafür allerdings wirklich ständig präsent sein muss, ist die Frage. Der Anwender ist es gewohnt, wieder nach oben zu scrollen, es bedeutet also nicht wirklich eine Einschränkung der User Experience, wenn die Navigation NICHT fix ist – es sei denn, der Anwender muss sehr lange scrollen, um wieder nach oben zur Navigation zu kommen. Kennt er keine Abkürzungen (Tastatur-, Maus- oder Touchpad-Zeichen), ist das bei sehr langen Seiten eher mühsam. Bei One-Pagern mag eine fixe Navigation ein hilfreiches Element sein. Bei vielen anderen, eher kurzen Seiten ist sie es jedoch nicht wirklich.

Bei einem One-Pager wie launchco.com ist eine fixe Navigation hilfreich. Allerdings ist die Trennung zwischen Navigation 1 und Inhalt 2 nicht immer eindeutig (siehe unterer Screenshot).

Abbildung 13.26    Bei einem One-Pager wie launchco.com ist eine fixe Navigation hilfreich. Allerdings ist die Trennung zwischen Navigation 1 und Inhalt 2 nicht immer eindeutig (siehe unterer Screenshot).

Fixed Responsive Navigation

Eine schöne Komplettlösung bietet github.com/adtile/fixed-nav. Dabei handelt es sich um eine responsive fixe Navigation, die ein smoothes Scrollen zu den einzelnen Menüpunkten des One-Pagers erlaubt.

Wenn eine fixe Navigation eingesetzt wird, dann sollte sich diese klar vom Inhalt abheben, auch beim und nach dem Scrollen. Sie sollte nicht stören bzw. den Leser irritieren, weil der Übergang zwischen Navigation und Inhalt nicht sofort ersichtlich ist. Da eine fixe Navigation natürlich auch immer Platz für die eigentlichen Inhalte wegnimmt, sollte diese so klein wie möglich gehalten werden. Bei geringen Auflösungen sollte unter Umständen dann eher komplett darauf verzichtet werden. Es muss aber im Einzelfall getestet werden, wie weit die Navigation die Bedienung erleichtert oder einfach nur Platz wegnimmt.

Mehrere Trends vereint neue-abteilung.com: ein großes Header-Bild, darunter die Navigation, die erst beim Scrollen oben fix wird (siehe unterer Screen).

Abbildung 13.27    Mehrere Trends vereint neue-abteilung.com: ein großes Header-Bild, darunter die Navigation, die erst beim Scrollen oben fix wird (siehe unterer Screen).

Meistens steht die Navigation unterhalb des Logos, sodass der Kopfbereich der Seite relativ viel Platz einnimmt – zumindest zu viel Platz, um diesen komplett fix zu setzen. Als Lösung hat sich die Technik etabliert, dass mithilfe von JavaScript die Navigation erst dann fix wird, wenn sie beim Scrollen den oberen Browserrand erreicht. Es gibt auch immer wieder Webseiten, die die Navigation gleich komplett unterhalb eines größeren Teaser-Bereichs setzen und dann beim Scrollen oben fixieren.

Horizontales Scrollen | In Kapitel 8, »Layout und Raster«, drehte sich vieles um Seitenlängen und die Vermeidung eines horizontalen Scrollbalkens, da dies so etwas wie ein Beleg für unsaubere Arbeit ist. In Zeiten responsiver Webdesigns gibt es keinen Grund mehr für einen horizontalen Scrollbalken. Regeln haben aber ihre Ausnahmen. Und die sind da, wo horizontales Scrollen nicht auf schlechter Umsetzung beruht, sondern als Stilmittel eingesetzt wird. Da, wo eine innovativere Art der Benutzerführung und Inhaltspräsentation gewünscht wird.

Das will eigentlich keiner sehen – horizontale Scrollbalken …

Abbildung 13.28    Das will eigentlich keiner sehen – horizontale Scrollbalken …

Das Portfolio von outpost.la ist ein typischer Anwendungsfall für eine horizontale Anordnung.

Abbildung 13.29    Das Portfolio von outpost.la ist ein typischer Anwendungsfall für eine horizontale Anordnung.

Für die meisten klassischen Unternehmens-Websites oder auch Shops ist eine horizontale Präsentation sicherlich ungeeignet, aber z. B. bei Portfolios wird diese Methode gerne eingesetzt. Referenzen bzw. Projektbilder werden neben- statt untereinander präsentiert. Fotografen nutzen dies gerne, um Bilder in einer Art Slideshow nebeneinander zu präsentieren, es entsteht ein richtiges »Fotoband«. Seit vielen Jahren schon wird diese Art eines horizontalen Layouts gerne gezielt eingesetzt.

Horizontales Scrollen ist eher eine Nischenumsetzung für Webseiten, die bewusst einen anderen Weg gehen wollen und auf eine individuelle, innovative Umsetzung setzen. Die Zielgruppe sollte allerdings ausreichend »Spieltrieb« haben, diese Art des Scrollens zu entdecken, und vor allem sollte solch eine Webseite besonders gut auf ihre Benutzerfreundlichkeit getestet werden. Dazu gehören z. B. die Darstellung auf verschiedenen Endgeräten und das Navigationskonzept.

Inspiration zu horizontalem Scrollen

Über 200 Beispiele von Webseiten, die auf horizontales Scrollen setzen: webdesign-showcases.com/category/technical/horizontal

Endless Scrolling | Eigentlich ist eine Seite ja irgendwann zu Ende, beim »unendlichen Scrollen« (im Englischen Endless Scrolling oder Infinite Scrolling genannt) aber werden, sobald man das eigentliche Seitenende erreicht hat, weitere Inhalte nachgeladen. Mit dem Ergebnis, dass es sehr lange dauern kann, bis ein Seitenende erreicht wird (je nach Umfang der Inhalte). Diese Methode mag für jegliche Art von Galerieseiten, bei denen vor allem Bilder präsentiert werden, hilfreich sein, weil man eben nur scrollen und nicht auf irgendeine Art von »Nächste Seite«-Link klicken muss. Für so ziemlich jede andere Art von Inhalten aber ist diese Navigationsmethode uninteressant, da kontraproduktiv. Denn am Ende sitzt man vor einer ewig langen Seite. Stellen Sie sich vor, Sie möchten sich ein bestimmtes Bild merken, als Lesezeichen markieren oder es später einmal wiederfinden. Das würde wieder ewig langes Scrollen bedeuten …

 
Zum Seitenanfang

13.2.2    Versteckte Navigation Zur vorigen ÜberschriftZur nächsten Überschrift

Das nicht ganz unumstrittene sogenannte Hamburger Icon (siehe auch Kapitel 12, »Navigations- und Interaktionsdesign«) wird in mobilen Website-Versionen gerne eingesetzt, um Platz zu sparen und nicht sofort das komplette Menü bei kleineren Auflösungen anzeigen zu müssen. Inzwischen wird das Icon aber auch immer häufiger bei Desktop-Versionen eingesetzt. Also bei Bildschirmgrößen, die eigentlich auch Platz für alle Menüpunkte hätten.

Hier wird dann der Gesamteindruck der Seite nicht »gestört durch lästige viele Menüpunkte«, sondern die Gestaltung an sich, die großformatigen Bilder, die großen Headlines usw., können in Ruhe wirken.

Da wäre eigentlich schon genug Platz, um alle Menüpunkte anzuzeigen. hoochcreative.com.au versteckt diese aber lieber hinter dem Hamburger Icon.

Abbildung 13.30    Da wäre eigentlich schon genug Platz, um alle Menüpunkte anzuzeigen. hoochcreative.com.au versteckt diese aber lieber hinter dem Hamburger Icon.

Wie am Beispiel von hoochcreative.com.au zu sehen ist, bedeutet das aber einen Klick mehr für den User. Einen Klick, um überhaupt erst einmal festzustellen, welche Menüpunkte im Angebot sind. Etwas mühselig, wie ich finde. Es mag durchaus Seiten geben, wo zuerst die Gesamtgestaltung im Vordergrund stehen mag, aber die User Experience tritt hier in den meisten Fällen einen Schritt zurück.

 
Zum Seitenanfang

13.2.3    Grafische Effekte Zur vorigen ÜberschriftZur nächsten Überschrift

Große Bilder oder Videos | Große Bilder oder Videos für das Webdesign einzusetzen ist ein Gestaltungsmittel, das es schon länger gibt. Seit die Monitorauflösungen höher geworden sind, ist der umgebende Block (siehe Kapitel 8, »Layout und Raster«) links und rechts neben dem eigentlichen Inhalt eine weitere Option als Gestaltungsmittel. Großflächige Fotos werden dabei gerne in den Hintergrund einer Webseite gesetzt. Mit Bildern lassen sich schnell und viele Informationen vermitteln, und der erste Eindruck lässt sich gut beeinflussen.

Großflächige Bilder als Portfolio-Präsentation wie bei wrightfeldhusen.com

Abbildung 13.31    Großflächige Bilder als Portfolio-Präsentation wie bei wrightfeldhusen.com

Auch dies ist ein Trend, Bilder nicht über den vollen Hintergrund, aber doch zumindest großflächig im Header einzusetzen, so wie bei wemakepdx.com.

Abbildung 13.32    Auch dies ist ein Trend, Bilder nicht über den vollen Hintergrund, aber doch zumindest großflächig im Header einzusetzen, so wie bei wemakepdx.com.

Großflächige Bilder werden aber nicht allein von Fotografen oder Designern als markante Portfolio-Präsentation eingesetzt, auch klassische Unternehmen nutzen dieses Stilmittel inzwischen gerne. Mit Bildern lässt sich eine enorme Wiedererkennung erreichen und die Persönlichkeit der Website unterstreichen. Bei sehr hohen Monitorauflösungen entfalten die Bilder dann ihre volle Wirkung. Anders sieht es bei kleineren Auflösungen oder gar Smartphones aus. Soll der Inhalt nicht völlig in den Hintergrund treten, dann sind vom großflächigen Bild nur noch kleine Ausschnitte sichtbar – wenn überhaupt. Das Webdesign sollte also nicht allein auf die Wirkung des großen Bildes aufbauen.

Bilder im Hintergrund können den Inhalt ergänzen, aber auch unnötig ablenken. arburg.com hat den Hintergrund daher etwas abgedunkelt.

Abbildung 13.33    Bilder im Hintergrund können den Inhalt ergänzen, aber auch unnötig ablenken. arburg.com hat den Hintergrund daher etwas abgedunkelt.

So schön und für den ersten Eindruck hilfreich große Bilder auch sein mögen, es besteht immer die Gefahr, dass sie vom eigentlichen Inhalt, also den Texten, zu sehr ablenken. Das Auge fixiert immer zuerst Bilder. Der Grat zwischen ästhetischem Ausdruck und Ablenkung ist sehr schmal.

Eine wesentlich dynamischere Möglichkeit ist der Einsatz eines Videos als Hintergrund. Durch das neue HTML5-Videoelement ist es sehr einfach geworden, Videos einzusetzen (siehe Kapitel 14, »Animationen«). Im Grunde wird die Wirkung, die Bilder verursachen, verstärkt. Die emotionale Aussage ist bei Bewegtbildern größer, genauso der Aufmerksamkeitseffekt. Gleichzeitig liegt die Konzentration stärker auf dem Video und weniger auf den anderen Inhalten, und die Datenmenge steigt auch an, ebenso die benötigte Rechenleistung. Da, wo Geschichten erzählt werden sollen, sind Videos eine tolle Gelegenheit. Bei Onlineshops, die sicherlich auch von tollen Geschichten profitieren würden, aber auch mobil schnell geladen sein sollen, sind Videos eher ungeeignet.

Große Bilder auf mobilen Geräten

Gerade bei mobilen Geräten stellt der Einsatz von großen Bildern und Videos eine Herausforderung dar. Einerseits sollen die Datenmengen möglichst klein gehalten werden, andererseits stellt sich die Frage, wo man bei sehr kleinen Auflösungen großflächige Hintergrundbilder überhaupt platzieren kann.

Das Agentur-Logo flackert im Wind bei cobblehilldigital.com und ist eher eine nette Verzierung.

Abbildung 13.34    Das Agentur-Logo flackert im Wind bei cobblehilldigital.com und ist eher eine nette Verzierung.

Card Design | Wie viele neuere Webdesign-Trends ist auch dieser von der mobilen Entwicklung geprägt. Hier sind die Cards wie Container für kleine einzelne Informationseinheiten. Ein Vergleich zum analogen Bereich wie beispielsweise Visitenkarten bietet sich hier an. Auf einer Visitenkarte sind (normalerweise) Logo, Name, Titel und Kontaktdaten untergebracht. Diese entsprechen sprichwörtlich dem Card-Design. Die Inhalte werden dadurch nicht mehr so sehr wie eine große Einheit gesehen, sondern die einzelnen Informationen/Informationseinheiten eher in sich geschlossen betrachtet und auch entsprechend gestaltet. Das kommt auch dem responsiven Design entgegen, das ja auch auf sehr kleinen, schmalen Displays funktionieren muss. Die einzelnen Elemente des Card-Designs lassen sich so kompakt darstellen.

Das Card-Design in der Portfolio- und Newsgestaltung bei howarkitekter.se

Abbildung 13.35    Das Card-Design in der Portfolio- und Newsgestaltung bei howarkitekter.se

Der Vorteil dieser Cards ist, auch auf größeren Displays, dass sie sich schnell scannen und individuell gestalten lassen. Wobei sie auch optisch recht häufig an »Karten« erinnern, indem sie mit Konturen, farbigen Hintergründen und Schlagschatten umgesetzt werden.

Zwei der bekanntesten Vertreter des Card-Designs und sicherlich auch so etwas wie die Vorreiter: pinterest.com und dribbble.com

Abbildung 13.36    Zwei der bekanntesten Vertreter des Card-Designs und sicherlich auch so etwas wie die Vorreiter: pinterest.com und dribbble.com

Preloader & Ladebalken | Ja, richtig gelesen, Preloader. Die sind nicht mit den Flash-Webseiten, auf denen sie aufgrund der Datenmengen auch gebraucht wurden, untergegangen, sondern haben sich nur versteckt und sind leise und unauffällig im Windschatten der unzähligen jQuery- und JavaScript-Effekte aus ihren Höhlen hervorgekrochen. Es handelt sich also nicht mehr um Flash-Preloader, sondern um JavaScript-Preloader, was die Sache nur bedingt besser macht.

Keiner weiß, wie viele Stunden wir schon vor dieser Grafik zugebracht haben – dem Preloader.

Abbildung 13.37    Keiner weiß, wie viele Stunden wir schon vor dieser Grafik zugebracht haben – dem Preloader.

Ein Preloader hat nur dann Sinn, wenn die Datenmengen so groß sind, dass man die Wartezeit des Anwenders verkürzen muss bzw. ihm deutlich machen möchte, wie lange das Warten und Laden noch dauern wird bzw. wie weit die Ladezeit bereits fortgeschritten ist. Und genau hier wird es kritisch. Zu einer guten Webseite gehört auch gute Performance, das heißt, die Webseite sollte möglichst schnell geladen werden. Bilder, Videos und Skripte treiben die Datenmengen aber schnell in die Höhe. Also verzichten Sie lieber auf den einen oder anderen Effekt, optimieren Sie Videos und Bilder (siehe Kapitel 11, »Bilder und Grafiken«), und überprüfen Sie deren Einsatz ebenso wie die Skripte genauestens auf Notwendigkeit. Denn immer besser als ein Preloader ist eine schnell geladene Seite.

Inzwischen gibt es nicht nur die klassischen Preloader, sondern auch immer mehr »grafisch« in Szene gesetzte. Ladebalken am oberen Browserrand gehören genauso dazu wie einfarbige Vollflächen, die den kompletten Bildschirm kurzzeitig ausfüllen und so einerseits zeigen, dass etwas passiert (also etwas geladen wird), und andererseits nach dem Laden den Bildschirm wie einen Vorhang wieder freigeben, wie bei nazisundgoldmund.net zu sehen.

Einfarbiger, vollflächiger »Ladebalken« bei nazisundgoldmund.net

Abbildung 13.38    Einfarbiger, vollflächiger »Ladebalken« bei nazisundgoldmund.net

Transparenz | Alle Objekte werden im Browser mit voller Deckkraft dargestellt. In einem Bildbearbeitungsprogramm wie Photoshop lässt sich dagegen schon seit Ewigkeiten die Deckkraft einzelner Ebenen anpassen (siehe Abbildung 13.39).

Anpassung der Ebenen-Deckkraft in Photoshop

Abbildung 13.39    Anpassung der Ebenen-Deckkraft in Photoshop

Mit CSS3 ist es nun auch möglich, HTML-Elemente transparent zu machen, ohne den Umweg über ein Bildbearbeitungsprogramm zu gehen, und einzelne Elemente als halbtransparente PNG-Bilder abzuspeichern (weitere Informationen zu diesem Bildformat in Abschnitt 11.10, »Bildformate«). Farbkästen, Bilder und Texte können so mehr oder weniger transparent angezeigt werden. Halbtransparente Flächen sind ein angenehmes Gestaltungselement im Webdesign, wie contextishalfthework.net in Abbildung 13.39 zeigt. Hier bleibt das im Hintergrund vollformatig eingesetzte Bild weiterhin erkennbar.

Die halbtransparente Fläche lässt das Hintergrundbild erkennen, die Lesbarkeit leidet aber natürlich bei contextishalfthework.net.

Abbildung 13.40    Die halbtransparente Fläche lässt das Hintergrundbild erkennen, die Lesbarkeit leidet aber natürlich bei contextishalfthework.net.

Die CSS-Eigenschaft opacity wird von allen modernen Browsern interpretiert. Die Werte gehen von 0 = unsichtbar bis 1 = vollständig sichtbar. Achtung: Zwischenwerte werden nicht wie im Deutschen mit Komma geschrieben, sondern mit einem Punkt, also z. B. 0.7 und nicht 0,7.

#container {
opacity:0.5;
}

Listing 13.1    Reduzierung der Deckkraft

Möchte man auf Nummer sicher gehen, dass die Transparenz auch in älteren Browserversionen dargestellt wird, sollte man folgenden Code verwenden:

#container {
-webkit-opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50); /* IE8 und früher */
opacity:0.5;
}

Listing 13.2    Reduzierung der Deckkraft browserübergreifend

Ein Nachteil ist, dass mit opacity die Eigenschaft an die Kindelemente weitervererbt wird. Eventuelle Texte, die im Container liegen, werden dadurch auch durchsichtig. Bei den Kindelementen opacity auf 100 % zu stellen wäre auch keine Lösung, da der »Eltern«-Wert davon unbeeinflusst bliebe. Man könnte eventuelle Kindelemente höchstens außerhalb des Elternelements platzieren und dann mit absoluter Positionierung wieder auf die transparente Fläche bringen … mühselig!

RGBA und durchsichtiger Hintergrund | Die Transparenz eines Elements lässt sich auch mit dem sogenannten Alpha-Kanal einstellen, der einigen vielleicht aus der Bildbearbeitung bekannt ist. Dazu wird die rgb-Definition um den Alpha-Wert erweitert:

#container {
background-colorrgba(255,0,0,0.3);
}

Listing 13.3    Deckkraft über den Alpha-Kanal verändern

Der letzte Wert gibt die Deckkraft wieder von 0 (unsichtbar) bis 1 (vollständig sichtbar) an. Der Vorteil im obigen Beispiel ist jetzt, dass nur die Hintergrundfarbe transparent wird, aber nicht die Inhalte des Containers.

Als Fallback für Browser, die rgba nicht verstehen, kann die Definition folgendermaßen aussehen:

#container {
background-colorrgba(255,0,0); /* Fallback */
background-colorrgba(255,0,0,0.3);
}

Listing 13.4    Deckkraft-Einstellung mit Fallback

Transparente Elemente werden auf Websites gerne für Suchfelder eingesetzt. Auch marmosetmusic.com verwendet den transparenten Effekt, wobei hier das Suchfeld gleichzeitig auch als Headline eingesetzt wird.

Headline und Suchfeld in einem, dazu noch passend transparent: marmosetmusic.com

Abbildung 13.41    Headline und Suchfeld in einem, dazu noch passend transparent: marmosetmusic.com

Insgesamt wirkt eine transparente Fläche nicht so dominant, als wenn sie mit voller Deckkraft erscheinen würde. Mit Transparenz kann das Element aber unter Umständen besser in seine »Umgebung« eingegliedert werden, weil es sich nicht so »hartkantig« absetzt.

Rahmen | Rahmen begrenzen etwas und können Halt geben. Der Trend zum Rahmen im Webdesign betrifft vor allem zwei Aspekte. Zum einen wird die gesamte Webseite eingerahmt. Manchmal dezent, manchmal in kräftigen Farben, fast immer aber als dicker Rahmen. Dies kann der Webseite Halt geben und die Begrenzung zum Browserrand deutlicher herausstellen. In Zeiten sehr hoher Monitorauflösungen ist das ein durchaus interessantes Gestaltungselement, das durch Farbe und Dicke des Rahmens die Gesamtwahrnehmung der Gestaltung beeinflussen kann.

Rahmen sind trendy – eine dicke Umrandung wie bei chilli.be (oben) oder als Buttonrahmen wie bei hyperakt.com (unten).

Abbildung 13.42    Rahmen sind trendy – eine dicke Umrandung wie bei chilli.be (oben) oder als Buttonrahmen wie bei hyperakt.com (unten).

Mit der Vereinfachung des Designs durch Flat- und minimalistische Stile sind aus markant dreidimensional gestalteten Buttons dezente Linkflächen geworden. Im Flat-Design werden diese gerne einfarbig gestaltet. Alternativ wird immer häufiger die Umrandung des Linktextes eingesetzt. Diese reine Umrandung ohne flächige Hintergrundfarbe nimmt sich noch weiter zurück und erscheint als dezenter Button. Um aber nicht völlig unterzugehen, was ein Button ja eigentlich nicht sollte, ist der (Innen)abstand zwischen Text und Rahmen entsprechend großzügig gehalten.

Weitere Inspirationen

Weitere Webseiten mit einer Umrandung listet folgender Artikel auf: bittbox.com/inspiration/32-inspiring-websites-with-borders.

Header-Bild und Text auf Bild | Wie weiter oben dargestellt, sind große Bilder als Hintergrund sehr angesagt (siehe Abschnitt 13.2.3). Aber auch großflächige Header-Bilder werden gerne und häufig eingesetzt. Die Möglichkeit, mit Bildern den Betrachter emotional anzusprechen und eine hohe Aufmerksamkeit zu erreichen, ist verlockend. Bei Webseiten, die beispielsweise konkrete Produkte präsentieren können, ist die Motivwahl einfach. Bei eher abstrakten Leistungen wird es schwieriger. Manche behelfen sich noch mit Teamfotos oder Bildern ihrer Räumlichkeiten (siehe Abschnitt 11.4, »Motive & Bildstimmung «). Und wenn da keine geeigneten vorhanden sind? Dann werden gerne Landschaften, Schreibtische, iPhones oder Ähnliches eingesetzt. Das mag zwar beliebig sein, sieht aber häufig gut aus …

Hier kann sich der Gestalter austoben: großes Header-Bild samt Typografie, circle.com und aino.com.

Abbildung 13.43    Hier kann sich der Gestalter austoben: großes Header-Bild samt Typografie, circle.com und aino.com.

Und da ein großes Header-Bild viel Platz einnimmt, wird der erste Text der Webseite direkt darauf platziert. Überschrift, Subline, dazu ein, zwei Buttons. Gekonnt gestaltet, ergibt sich so ein Header, der wie ein kleines Magazincover aussehen kann.

Drei Icons | Ein großes Header-Bild samt Überschrift und Call-to-Action-Buttons, und dann? Dann kommen drei Icons mit einem kurzen erklärenden Text. Zumindest bei sehr vielen Webseiten. Gerade bei Agenturen und (Web)designern fehlen für oft eher abstrakte Leistungen konkrete Motive. Damit Gestaltung nicht so leer aussieht, wird hier gerne auf Icons zurückgegriffen. Diese dienen als Eyecatcher, denn ansonsten wäre nach einem sehr aufmerksamkeitsstarken Header-Bild nur noch eine Textwüste übrig. Was an sich nichts machen würde, würde man diesen Text typografisch ansprechend gestalten. Einfacher ist es aber, ein paar Icons zu nehmen, die oft das Problem haben, beliebig oder nicht eindeutig zu sein. Andererseits geht es »nur« um einen kleinen optischen Aufhänger. Ob man dafür – wie so viele – drei kleine Icons braucht, muss jeder für sich entscheiden.

Der Klassiker bei diamant-software.de: Viele (kleine) Icons zeigen das Leistungsspektrum auf.

Abbildung 13.44    Der Klassiker bei diamant-software.de: Viele (kleine) Icons zeigen das Leistungsspektrum auf.

Und sonst noch … | Kreise, Linien, Illustrationen, Ribbons, Badgets, Schatten, diagonale Elemente, weichgezeichnete Bilder, dezente Farben, kräftige Farben – das ist alles schon einmal da gewesen und wird bestimmt auch irgendwann als (neuer) Trend wiederkommen. Selten geht es darum, einem Trend nur hinterherzulaufen. Aber solche Trends können natürlich nützliche Gestaltungselemente liefern, die Sie in Ihre eigenen Webdesigns einbauen können. Um zu wissen, was noch Trend und nicht schon wieder veraltet ist, müssen Sie die Augen offen halten und vor allem regelmäßig die vielen Webdesign-Galerien (oder zumindest ein paar davon) verfolgen. Eine Übersicht guter Webdesign-Galerien erhalten Sie in Kapitel 16, » Tipps, Tricks und Tools«.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern