Webdesign-Trends 2014

Die Webdesign-Trends 2014

Unaufhaltsam werden wir im Web mit neuen Technologien und Designs überrascht und gerade wenn man denkt es zeichnet sich ein Trend ab, ist es eigentlich schon wieder Schnee von gestern. Was sich im Jahr 2014 weiterentwickelt und was im Bereich Webdesign Bestand haben wird, haben wir hier für Sie in aller Kürze zusammengestellt.

 

Responsive-Webdesign

Die Benutzung von Smartphones und Tablets hat sich längst über das Warten an der Bushaltestelle hinaus auf unseren gesamten Alltag ausgebreitet. Ein Großteil der mobilen Zugriffe aufs Web findet sogar in den eigenen vier Wänden statt. Es wäre also naiv zu denken man könnte vorhersagen, wo und auf welchem Endgerät der User den gewünschten Web-Content abruft. Vom 3,5“ Smartphone bis hin zum 30“ Computermonitor sollte alles optimal dargestellt werden können. Darüber hinaus, muss auch die Web-Nutzung auf noch größeren TV-Geräten berücksichtigt werden. Somit ist eine individuell angepasste Website für verschiedene Auflösungen und Endgeräte längst kein „Feature“ mehr – es ist schlichtweg notwendig geworden. Mehr Infos zu Opens external link in new windowResponsive Webdesign.

Beispiel für ein Responsive-Webdesign von Opens external link in new windowtwelve south

 

Off-Canvas

Diese Methode bietet die Möglichkeit, Elemente außerhalb des Sichtbereichs – also Off-Canvas – anzuordnen. Dies kennt man z.B. aus der mobilen Facebook-App. Hier verdrängt oder verdeckt der Navigationsbereich bei Bedarf den Hauptinhalt, was zur positiven Folge hat, dass dem Inhalt der gesamte Anzeigenbereich des mobilen Gerätes zur Verfügung steht und im Gegenzug die Navigation entsprechend benutzerfreundlich und großzügig ausfallen kann. Doch auch für den klassischen Webauftritt wäre dieser Ansatz denkbar. Wichtige Elemente könnten so Off-Canvas platziert werden, um somit durch das Einfahren mehr Aufmerksamkeit auf sich zu ziehen.

Beispiel eines Off-Canvas-Element:

Webdesign-Trends 2014 - Off Canvas

Abb.1: Off-Canvas Beispiel Facebook

 

Split-Screen-Design

Beim Splitscreen Design wird das Sichtfeld der Website z.B. in zwei Hälften geteilt. Vorzugsweise vertikal. Dies bietet die Möglichkeit, die beiden Hälften unabhängig voneinander zu scrollen und zu navigieren. Mit dieser Aufteilung lassen sich ausgefallene Effekte und somit neue Benutzererlebnisse erzeugen. Oft wird dieser Stil auch nur als Einstieg einer Website verwendet um den User direkt entscheiden zu lassen, in welchem Bereich er sich weiter bewegen möchte.

Ein Split-Screen-Beispiel von Opens external link in new windowCoffee Surfing illy:

Split-Screen-Coffee Surfing

 Abb.2: Split-Screen Beispiel

 

Ein Splitscreenshot-Beispiel von Opens external link in new windowPeugeot

 

Single-Pages

Anders als bei der klassischen Website-Struktur wird bei Single-Page-Designs der gesamte für den Besucher relevante Inhalt, auf nur einer Seite untergebracht. Gerade in Situationen in denen eine gewöhnliche Website-Struktur zu sehr kurzen Unterseiten führen würde, bietet sich ein Single-Page-Design an. Zusätzlich sind sie eine ideale Basis für Storytelling. Oft tauchen Single-Pager (auch One-Pager genannt) in Verbindung mit Parallax-Scrolling auf, was sie zu einem aufregenden Benutzererlebnis machen können.

Beispiel einer Single-Page von Opens external link in new windowstickin

 

Parallax-Scrolling

Obwohl Parallax-Scrolling mittlerweile relativ bekannt ist, bietet es großes Potential in der Anwendung von Websites und Applikationen. Mit der Fähigkeit beliebige Elemente unabhängig voneinander zu scrollen, und ineinander übergehen zu lassen, sind die Grenzen des Parallax-Scrollings noch lange nicht ausgereizt. Auch in diesem Jahr werden wir mit Sicherheit kreative Umsetzungen auf dieser Basis sehen.

Beispiel zu Parallax-Scrolling von Opens external link in new windowLiving Word

 

Fazit

Auch wenn sich viele Entwicklungen seit geraumer Zeit schon im Gestaltungsalltag der Webdesigner und Webentwickler etabliert haben, scheinen die Möglichkeiten endlos. Es kommt auf die Kreativität und das Konzept des Einzelnen an, wie neue aufregende Benutzererlebnisse durch die Kombination bereits bekannter Methoden und Technologien erzeugt werden.

 

Wir sind sehr gespannt, was die Designwelt in der Zukunft für uns bereithält.

Mehr erfahren 

Erfahren Sie mehr in unserem zweiten Opens external link in new windowBlogbeitrag zum Thema Webdesign-Trends 2014.

 

Quellen

Abb.1: www.media.smashingmagazine.com , letzter Zugriff 14.05.2014
 

 

 

Wenn Sie Fragen zu diesem Thema haben, sind wir gerne für Sie da.


Tel. : +49 781 919369-0 oder info@avenit.de

  • Share
  • LinksPermalink⁄⁄Trackback-Link
BloggerTimo Horl

Nach der Ausbildung zum Mediengestalter sowie über 6 Jahren Erfahrung im Grafik-Agenturgeschäft und als Freelancer ist Timo seit Januar 2014 fester Bestandteil unseres kreativen Medienbereichs. Mit dem Kopf voller Ideen stürzt sich unser Pixelheld täglich auf neue Herausforderungen.

2 Beiträge von Timo Horl
paperclip
Kommentare2
Rohnalt
vom 02. Juni 2014 um 10:37 Uhr
Der Link führt bei mir ins Leere...

Hallo zusammen, euer Link zu den Quellen führt bei mir leider zu einer 403 Forbidden-Seite :(

avenit AG
vom 02. Juni 2014 um 10:57 Uhr
Seite nicht mehr online

Hallo Rohnalt, leider ist die Seite, von der wir die Abbildung entnommen haben, nicht mehr online, deshalb haben wir den Link nun rausgenommen. Viele Grüße, Sandra.

Ich will auch einenKommentar schreiben
  • ( wird nicht veröffentlicht )

Blog

Archiv