Aktuelle Trends im Webdesign - Design
 
 

Large Photographic Backgrounds/große Hintergründe

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).
 
 
Spiel mit Emotionen: Externer Linkwww.zugspitze.de
 
 
Sehr innovative Darstellung der künftigen Berufsbilder an der Karlshochschule International University: Externer Linkwww.karlshochschule.de
 
Weitere gelungene Beispiele für den Einsatz großer Fotohintergründe:

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

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

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

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

Hintergrundtextur

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: Externer Linkwww.dnadarwin.org, Externer Linkwww.fundolospaltos.com.pe
dezenter Verlauf (auslaufende Dünen) mit dem Hintergrund: Externer Linkwww.reisefieber.de
bei Sportausstattern ebenso oft gesehen wie Large Photographic Backgrounds: Externer Linkwww.puma.de
 
in Kombination mit Grunge Design: [URL]www.dnadarwin.org[/URL], [URL]www.fundolospaltos.com.pe[/URL]
 
 

Schöne und funktionale Footer

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: Externer Linkwww.chicagotribune.com
Footer kann per Mausklick auf- und zuges­lidet werden Externer Linkwww.struckaxiom.com
Die komplette Sitemap im Footer, unterteilt nach einzelnen Kategorien: Externer Linkwww.whitehouse.gov
Bilder im Footer: Externer Linkwww.paramore.is
Navigation mit Submenüs im Footer: Externer Linkwww.apple.com
Sehr großer Footer-Bereich gefüllt mit Icons und Textlinks: Externer Linkwww.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:

Externer Linkwww.branded07.com, Externer Linkwww.northern-classics.de, Externer Linkwww.amuki.blogspot.com,
Externer Linkwww.markmcgall.com
 
 
  •  
  •  
  •  
  •  
 

Kunst im Kopfbereich: Auffällige Website Header, aufsehenerregende Logos

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: Externer Linkwww.redtiki.com.au
Externer Linkwww.logonest.com, Externer Linkvisualrepublic.net, Externer Linknorthtemple.com, Externer Linkww.g2geogeske.com
 
 
  •  
  •  
  •  
  •  
  •  
 
Beispiele für auffällige Website Header:

Restaurant: Externer Linkmariecatribs.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: Externer Linkwww.andyward.com
Fotos im Kopfbereich: Externer Linknordkapp.fi, Externer Linkwww.yyoga.ca, Externer Linkwww.klpersonaltrainer.co.uk
 
 
  •  
  •  
  •  
  •  
  •  
 

Grunge Design/Retro-Stil

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 Externer Linkwww.siena-online.net
Team GreenAdventures Externer Linkwww.teamgreenadventures.com
Adventure Trekking Externer Linkwww.adventuretrekking.com

Beispiele Retro-Stil:
Agentur (Flash): Externer Linkmediaboom.com
Musik-Szene: Scouting for Girls Externer Linkwww.scoutingforgirls.com
Online-Bäckerei (Flash): Externer Linkwww.dergugel.de
 
 
  •  
  •  
  •  
  •  
  •  
  •  
 

Zeichnungen/Illustrationen/Scribbles

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 (Externer Linkde.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: Externer Linkwww.stopthevom.com
Scribbles zur Projektvorstellung: Externer Linkrobbinwaldemar.com/work/
Web Conference-Days in Oslo 10/2011: Externer Linkwww.frontend2011.com
 
 
  •  
  •  
  •  
  •  
 

Ansprechende Icons

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

Richtig in Mode gekommen sind sie jedoch durch Sozial-Media-Anwendungen. Es gibt kaum noch eine Webseite, wo sie nicht zu finden sind: die Icons, die zum folgen auf Facebook und Twitter animieren sollen! Mal als Standard-Icon, gern auch als Illustration gestaltet.

Beispiel für die Verwendung von Icons in Kombination mit Thumbnail-Links:
Externer Linkwww.faz.net
 
 

Reduktion/Minimalismus

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

weitere Beispiele: Externer Linkwww.lundgrenlindqvist.se, Externer Linkwww.janreichle.com, Externer Linkminimaldesign.net, Externer Linkbauhaus-online.de, Externer Linkwww.shadycharacters.co.uk

Shops im minimalistischen Design, welches teilweise besonders hier zu lasten der Bedienbarkeit geht: Mexx: Externer Linkeshop.mexx.com, Whistles: Externer Linkwww.whistles.co.uk/fcp/categorylist/dept/shop...
 
 
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
 

One-Page/Single-Page-Layouts

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!
 
 
 
 

Big Layout

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
 
oder Introboxen. Oft treten diese Seiten als One-Page-Layouts mit aberwitzigen Seitenlängen auf. Scrollen ist seit dem Blog-Boom und durch Apples Touch Revolution trendy. Gern werden bisher bestehende Dogmen im Webdesign (Navigation immer links, vertikales Scrollen) mit gegensätzlichen Trends wie horizontalem Scrollen, mehrspaltigen oder floating Layouts durchbrochen.

Beispiel: Externer Linkwww.elysiumburns.com
 

Typographisches Design

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 Externer Linkde.wikipedia.org/wiki/Web_Open_Font_Format) oder Dienste wie den Webfont-Mietservice Typekit (Externer Linkwww.typekit.com, Externer Linkwww.fontblog.de/neu-web-fontfonts-bei-typekit...) oder der Google Font API (Externer Linkcode.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.
 
 
Spiel mit Typo: The Pittsburgh Foundation: Spring funding program (Programm zum Erhalt der bio­lo­gi­schen Vielfalt): Externer Linkwww.sproutfund.org/spring
 

Anke Hojenski
 

Besuchen Sie unsere Kunden im Internet

Copyright ©2003-2017 ISS-Oberlausitz Germany. All Rights Reserved.