Large Photographic Backgrounds sorgen für atemberaubende Effekte und transportieren Emotionen. Daher werden sie gern auf Seiten mit touristischen Inhalten eingesetzt. Nirgends sonst können so emotional Impressionen über künftige Urlausorte vermittelt werden, wie mit Fotografien über den kompletten Bildschirmhintergrund!

Die eingesetzten Bilder sollten jedoch optimiert sein und nicht gar zu viel Ladezeit kosten, andernfalls werden mit Layouts dieser Art schnell Gruppen wie mobile User ausgeschlossen. Der Einsatz großer Hintergründe ist immer ein Spagat zwischen optimierten und brillanten Bildern. Wird nicht unbedingt auf jeder Seite ein neues Bild geladen, können durch das Vorhalten der Bilder im Browser-Cache kürzere Ladezeiten erreicht werden. Nachteilig wirken sich bei der Gestaltung großer Hintergründe auch immer breitere Monitore und Auflösungen aus. Negative Beispiele gibt es hier genug im Web. Möchte man nicht, dass der Hintergrund „abgehackt“ oder „gekachelt“ aussieht, kann mit sanften Verläufen gearbeitet werden. Bewährt hat sich auch die Hervorhebung des Hintergrundfotos vor einem weiteren, meist dunklem Hintergrund (Beispiel Zugspitze). Sehr elegant ist die Umsetzung eines „mit wachsenden Fotos“ über den gesamten Hintergrund (Karlshochschule).

Weitere gelungene Beispiele für den Einsatz großer Fotohintergründe:

Handwerklicher und künstlerischer Bereich: Frech und witzig umgesetzt:catrabbit.com.au , Geschickt werden hier eigene Werke als großformatiger Hintergrund eingebunden: www.benthomsonphoto.com

Darstellung herausragender Persönlichkeiten: miessociety.org , oft auch eingesetzt als Vorstellung von Künstlern, sehr oft im musikalischem Bereich: www.matthiasgoerne.de , www.michaelkorstick.de

Vorstellung von Architekten, Innenarchitekten, traditionelles Handwerk: www.germancraft.com.au

bei nahezu jedem Sportausrüster sieht man derzeit große Fotohintergründe, Beispiel: www.adidas.com

 

Vor einigen Jahren wurden Hintergrundtexturen inflationär oft im Webdesign eingesetzt. Die Folge des übermäßigen Einsatzes: man hatte sich geradezu satt an den Texturen gesehen! Auch das Auftreten anderer Stilrichtungen (zum Beispiel dem minimalistischen Design), trugen zum reduzierten Einsatz der Hintergrundtexturen im Web bei. Tot ist diese Stilrichtung dennoch nicht! Eine Hintergrundtextur kann ein einfaches, aber durchaus sehr signifikantes Feature auf der Website sein. Hintergründe müssen nicht zwangsläufig weiß oder einfarbig sein. Auch ein Spiel mit Farbverläufen ist mit Hintergrundtexturen durchaus möglich. Dezente großflächige Hintergrundtexturen geben dem Layout meist eine individuelle und persönliche Note. Sie können gut mit Stilrichtungen wie Grunge Design, Retro-Stil oder typographischem Design kombiniert werden. Damit sind sehr vielfältige Kombinationen mit anderen Styles möglich, was bei anderen Richtungen eher zu Überladungen und Widersprüchen führen kann. Diese Gefahr ist selten mit einer Hintergrundtextur gegeben. Sie sollte dennoch dezent eingesetzt werden und nicht vom Inhalt ablenken. So verhindert zum Beispiel ein einfarbiger Inhaltsbereich, dass der Content durch den Hintergrund unleserlich wird. Sehr edel kann auch eine dezente Aufwertung einzelner Elemente (zum Beispiel Header oder Footer) aussehen.

Beispiele:

in Kombination mit Grunge Design: www.dnadarwin.org , www.fundolospaltos.com.pe
dezenter Verlauf (auslaufende Dünen) mit dem Hintergrund: www.reisefieber.de
bei Sportausstattern ebenso oft gesehen wie Large Photographic Backgrounds: www.puma.de

 

Ein Footer ist der Fußbereich am Ende der Webseite. Früher beschränkte sich die Möglichkeit auf die Anzeige von Kontakt, Impressum, Back to Top Links oder Copyright-Angaben. In letzter Zeit wurden Die Footer jedoch von Designern als Mittel zur Gestaltung der Website entdeckt. Das ist auch enorm praktisch, kann man in Footern ja auch oft genutzte oder zusätzliche Informationen unterbringen. Das können Sprachauswahl, Schriftgrößen-Navigation, Sozial-Media-Links, Blog-Empfehlungen, Newsletter- oder Kontakt-Formulare, neueste Facebook-Kommentare, Flickr-Fotos oder Tweets sein. Gern wird der Bereich auch für eine weitere Sitemap (meist reduzierte Subnavigation) genutzt, teilweise ist sogar die komplette Sitemap darin untergebracht. Eine Sitemap im Footer kann einiges im Bereich der Nutzerzugänglichkeit (Usability) leisten und wird daher oft eingesetzt. Weiterhin finden Event-Kalender, Geotagging, Google Maps, Schnellfinder,Teaser mit neuen Produktvorstellungen, Ausschnitte aus dem Portfolio und sogar TagClouds ihren Bereich im Footer. Es gibt unzählige Varianten des Footers wie Tab-Menüs, unterschiedliche Footer je nach Rubrikwechsel oder ein gleicher Footer konstant auf allen Seiten- die Einsatzmöglichkeiten sind nahezu unbegrenzt. Besonders praktisch ist es, wenn der Footer per Mausklick auf- und zugeslidet werden kann.

Beispiele: funktionale Footer:

Navigation: www.chicagotribune.com
Footer kann per Mausklick auf- und zuges­lidet werden www.struckaxiom.com
Die komplette Sitemap im Footer, unterteilt nach einzelnen Kategorien: www.whitehouse.gov
Bilder im Footer: www.paramore.is
Navigation mit Submenüs im Footer: www.apple.com
Sehr großer Footer-Bereich gefüllt mit Icons und Textlinks: www.spiegel.de

 

Ein immer beliebter Trend sind derzeit auch originell designte Fußbereiche. Kunstvolle Footer runden eine Website ab und überraschen. Denn wer erwartet schon noch solch ein Highlight, wenn er an das Ende der Seite gescrollt ist?

Beispiele Footer-Design:

www.branded07.com , www.northern-classics.de , www.amuki.blogspot.com ,
www.markmcgall.com

 

Google, Facebook, XING!, Flickr & Co machen es vor: die Identifikation erfolgt über ein aussagekräftiges Logo im Kopfbereich der Webseite. Mit großen Bildern und großen Logos setzen Sie Highlights, heben sich ab und bleiben somit länger in Erinnerung. Große Header sieht man oft in Blogs (die diesen Trend ins Leben gerufen haben) oder auf Seiten von Szene-Restaurants.

Beispiele für große Logos im Kopfbereich:

Spiel mit der Polynesischen Kultur: www.redtiki.com.au
www.logonest.com , visualrepublic.net , northtemple.com , ww.g2geogeske.com

 

Beispiele für auffällige Website Header:

Restaurant: mariecatribs.com großformatiger Bilder-Slider mit Navigation (Dots) sowie einem Show/Hide Element, welches den großen Header minimiert. Besonders das Show/Hide Element ist gut gelöst.
Projektvorstellung im Kopfbereich: www.andyward.com
Fotos im Kopfbereich: nordkapp.fi , www.yyoga.ca , www.klpersonaltrainer.co.uk

 

Das Gegenteil von modern und dem Web 2.0-Trend mit seinen runden Ecken und Schaltflächen, Farbverläufen und Badges. Trends und Stile aus vergangenen Zeiten lockern moderne Webseiten auf und werden neu interpretiert. Dieser Style ist eindeutig aus der Werbung der 50er Jahre inspiriert.

Beispiele Grunge Design: Reiseportale / Reisebüros:
Stadt Siena www.siena-online.net
Team GreenAdventures www.teamgreenadventures.com
Adventure Trekking www.adventuretrekking.com

Beispiele Retro-Stil:
Agentur (Flash): mediaboom.com
Musik-Szene: Scouting for Girls www.scoutingforgirls.com
Online-Bäckerei (Flash): www.dergugel.de

 

Zeichnungen und Illustrationen auf der gesamten Seite oder im Header ist seit circa einem Jahr ein oft beobachteter Trend. Sie bieten Abwechslung zu den oft im Header verwendeten Standard-Fotos aus Bilddatenbanken und sind wesentlich persönlicher. Ein weiterer Einsatz sind beispielsweise kleine illustrierte Gestaltungsmerkmale wie Icons für Social-Network-Dienste oder Rubrikbilder auf der Website. Ein weiterer Trend sind „Kritzeleien“ Scribble (de.wikipedia.org/wiki/Scribble ), die zur Auflockerung eingesetzt werden können.

Illustrationen auf der gesamten Seite: Event-Seite 2010 SuperSommerFerienTicket ZVON
Illustrationen auf der gesamten Seite und für Icons für Social-Network-Dienste: www.stopthevom.com
Scribbles zur Projektvorstellung: robbinwaldemar.com/work/
Web Conference-Days in Oslo 10/2011: www.frontend2011.com

 

Icons werden bereits seit Jahren verwendet um Navigationen ansprechender zu gestalten, da ansprechende und attraktive Icons von den Besuchern meist gegenüber Textlinks bevorzugt

Hier hätte man Minimalismus kaum erwartet: Deutschlands berümtester Blogger Sascha Lobo saschalobo.com

weitere Beispiele: www.lundgrenlindqvist.se , www.janreichle.com , minimaldesign.net , bauhaus-online.de , www.shadycharacters.co.uk

Shops im minimalistischen Design, welches teilweise besonders hier zu lasten der Bedienbarkeit geht: Mexx: eshop.mexx.com , Whistles: www.whistles.co.uk

 

Single-Page-Layouts vermitteln die Konzentration auf das Wesentliche. Meist eingesetzt für Eventseiten, Reisen/Expeditionen, oft auch zur Darstellung einiger weniger aber aussagekräftiger Referenzen im Designbereich. Neue Möglichkeiten durch Frameworks wie jQuery (z.B. Bilder-Slider, Akkordeon-Effekte) machen einen Einsatz von Single-Page-Seiten überhaupt erst möglich. Daher wurden Sie auch zuerst bei Freelancern im Webdesign gesehen. Dort werden sie noch immer vermehrt eingesetzt. Webdesignern ist klar: Es ist ja meist der erste Eindruck, der wirklich zählt! Einen zweiten Eindruck gibt es hier aber auch nicht. Aber Vorsicht: Single-Page-Layouts eignen sich nur, wenn die Informationen, die man an den Besucher bringen will, auch wirklich überschaubar sind! Ältere Informationen müssen auf solchen Seiten konsequent verschwinden! Nichts für Daten-Messies!

Was vor Jahren noch undenkbar war, ist heute hipp. Merkmale dieses Trends sind auffallend große Elemente auf der Seite, meist große Schrift, aber auch großflächige Formulare, Bilder

Das Spiel mit Typo wird auch im Web immer aktueller. Möglich wird das unter anderem auch durch neue Techniken (z.B. das Web Open Font Format, kurz: WOFF de.wikipedia.org/wiki/Web_Open_Font_Format ) oder Dienste wie den Webfont-Mietservice Typekit (www.typekit.com , www.fontblog.de ) oder der Google Font API (code.google.com/intl/de-DE/apis/webfonts/ ) und die Unterstützung unterschiedlicher neuerer Browser. Eingebunden werden die Miet-Schriften per JavaScript-Code.

Das macht es nun relativ einfach möglich verschiedene Schriften oder die Hausschrift in die Website einzubinden. Früher wurden spezielle Typo meist nur in Überschriften verwendet, die dann hauptsächlich als Images abgespeichert wurden. Der Content wurde jedoch meist in den wenigen vorhandenen Systemschriften abgebildet. Nun sind Gestaltungsmöglichkeiten jenseits der beschränkten Auswahl an Systemschriften möglich. Die Auswahl passender Schriftarten und das Spiel unterschiedlicher Größe rundet mit weiteren Details ein stimmiges Webdesign ab. Der Einsatz von Typo kann auch ein nicht zu unterschätzender Usability-Vorteil sein. Eine durchgängige Typografie hilft bei der Orientierung auf der Website, die Hierarchie der Inhalte kann mit unterschiedlichen Schriften und Formatierungen betont werden. Die Seite kann schneller überflogen werden, einzelne Elemente wie Headlines, Text und Links heben sich dezent vom Hintergrund ab. Dieser Trend wird auch gern als „Hingucker“ beim Minimalistischem Design verwendet.

Anke Hojenski