5 Webdesign Trends 2013
Kommentare

Immer wieder stellen wir Euch hier Webdesign-Schmankerl und -Trends vor. Heute haben wir die fünf wichtigsten Webdesign-Trends des Jahres 2013 für Euch zusammengefasst. Responsive Design, Flat Design und Parallax Scrolling sind in aller Munde aber was versteckt sich genau dahinter und wie sehen diese Trends aus, wenn sie gut umgesetzt sind? Viel Spaß mit unseren Webdesign Trends 2013:

Flat Design

Neue Webdesign-Trends entwickeln sich in der Regel mit der Entwicklung neuer Webtechnologien. Mobile First, Responsive Design oder Parallax Scrolling sind nur drei Beispiele, wie fortschreitende Technologien den Look von Websites beeinflussen. Klar, eindeutig und ohne Firlefanz.

So schön die bunten Websites auch aussehen, manchmal fällt es Usern schwer, sich in der Flut an Animationen zurechtzufinden: Hinter welchem zuckenden Bild verbirgt sich die Info, die ich suche? Flat Design verzichtet auf glänzende Texturen, Leder- oder Stitch-Effekte und präsentiert den Content klar, übersichtlich und „flach“, wie der Name schon sagt. Damit könnte Flat Design 2013 als Webdesign-Trend seinen zweiten Frühling erfahren. So setzt Microsoft im Gegensatz zu Apple bei Windows 8 auf Flat Design und konzentriert sich damit auf die Klarheit des User Interface. Auf Flat Design setzen schon seit jeher auch die einflussreichsten Websites im Internet: Google und Facebook.

Vor allem Besucher, die auf der Website schnell an die gewünschten Informationen kommen wollen, werden es zu danken wissen, wenn sie nicht erst mit Intros oder anderen Gimmicks ausgebremst werden. So werden auf Seiten im Flat Design zum Beispiel klickbare Elemente ganz klar von nicht anklickbaren Elementen unterschieden. Dass bei aller Funktionalität die Ästhetik nicht leiden muss, beweisen unsere Beispiele:

flat design

Bildquelle Screenshot: mashable.com

flat design

Bildquelle Screenshot: windows.microsoft.com

Infinite Scrolling

Ta panta rhei – alles bleibt im Fluss. Das wussten bereits die alten Griechen, lang bevor es das Internet, geschweige denn Webseiten gab. Dennoch könnte dieser Spruch nicht besser auf Infinite Scrolling passen, denn damit lassen sich Webseiten unendlich lang scrollen. Berühmte Beispiele für Infinite Scrolling sind etwa Facebook oder Pinterest. Kein Wunder, bieten diese Seiten enorm viele Bilder und Kommentare – auf eine Paginierung wird hier weitestgehend verzichtet und das kommt der User Expierence zugute, weil einfach alles auf einer unendlich langen Seite zu finden ist.

Ein weiteres Beispiel für ein gut umgesetztes Infinite Scrolling findet sich auf der Mikroblogging-Seite Tumblr. Hier können Fotos gebloggt oder re-bloggt werden, die anschließend im Dashboard erscheinen. Sobald sich ein User neu einloggt, erscheinen die neuesten Posts, indem sie automatisch im Infinity-Style heruntergescrollt werden. Diese Technik eignet sich zwar nicht für jede Art von Webseite, denn wenn es nicht genug Content gibt, gibt es auch nichts zu scrollen. Hier sind einige schöne Beispiele für Infinite Scrolling:

infinite scrolling

Quelle Screenshot: brandnewschool.com

infinite scrolling

Quelle Screenshot: cutestpaw.com

Responisve Design

Überall und jederzeit mobil online sein zu können, ist für viele Nutzer mittlerweile eine Selbstverständlichkeit. Einige Webseiten stellen deshalb passend zur Desktop-Version eine App bereit, um die Nutzer auch unterwegs begleiten zu können. Diese bieten allerdings oft nicht die gleichen Funktionen, wie die Desktop-Version und auch beim Design hat man als User oft den Eindruck, nur eine Sparvariante auf dem Smartphone serviert zu bekommen.

Deshalb wenden bereits viele Webseiten Responsive Design an und machen so – eine korrekte und effektive Umsetzung von Responsive Design vorausgesetzt – das Anbieten einer App überflüssig.

Die Vorteile liegen klar auf der Hand: Zum einen passt sich die Seite an die Größe des Displays des mobilen Endgeräts, den sogenannten Viewport, an. Design, Look und Charakter der Seite bleiben weitestgehend erhalten. So muss sich der Besucher, der die Desktop-Variante kennt, auf der geschrumpften Variante nicht erst komplett neu orientieren. Denn durch die adaptive Anpassung der Bildschirmdarstellung werden die Elemente auf der Website lediglich anders angeordnet. Aus einem dreispaltigen Layout auf dem Desktop wird auf dem Smartphone nur noch eine Spalte.

Doch Responsive Design hört hier noch nicht auf. Im Beispiel der Seite www.bostonglobe.com (an zweiter Stelle unten) führt die Erkennung des kleineren Viewports des mobilen Endgeräts nicht nur zu einer Layout-Änderung von drei auf eine Spalte, es werden darüber hinaus auch Anpassungen im Hauptmenü vorgenommen: Die Hauptkategorien werden unter dem Begriff „SECTIONS“ zusammengefasst und das auf Touch-Devices unnötige Rich Drop Down Menu der Desktop-Version verschwindet.

Möglich machen das unter anderem sogenannte Media Queries, ein CSS3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften, wie zum Beispiel die Größe des Gerätes oder dessen Bildschirmauflösung, erlaubt.

Wie Responsive Design in der Praxis aussehen kann, und welche Internetseiten besonders schöne Ergebnisse vorweisen, seht ihr hier:

responsive design

Quelle Screenshot: Earth Hour

responsive design

Quelle Screenshot: Food Sense

Parallax Scrolling

Was sich bereits letztes Jahr abgezeichnet hat, wird uns 2013 noch öfters über den Weg laufen. Die Rede ist von Parallax Scrolling, jene Technik, bei der sich verschiedene Ebenen in unterschiedlichen Geschwindigkeiten bewegen, wenn man über die Webseite scrollt. Der dabei entstehende 3D-Effekt verleiht der Seite Tiefe und lädt den Besucher der Seite zum Verweilen ein.

Wie unterschiedlich Parallax Scrolling umgesetzt werden kann, zeigen unsere fünf Beispiele:

Spokes Pedi Cabs, bietet in Oak Cliff Texas einen Fahrrad-Rikscha-Dienst an. Wer auf die Homepage des Unternehmens geht, kann dank Scroll Patterns eine Fahrradrikscha durch eine Comic-Stadt navigieren.

Je schneller man scrollt, desto schneller zieht die Landschaft am Gefährt vorbei. Wer genau hinsieht, erkennt kleine Details, wie z.B. Vögel, die umher fliegen. Die bunte Navigationsleiste bewegt sich mit und bleibt immer am oberen Rand, sodass man darüber schnell zur gewünschten Information kommt.

parallax scrolling

Quelle Screenshot: jessandruss.us

parallax scrolling

Quelle Screenshot: siebennull.com

Fixed Position Navigation

Klicken ist Out; Scrollen ist In. Stimmt das wirklich? Tatsächlich nutzen immer mehr Webseiten die Scroll-Naviagation in den verschiedensten Formen. Ob als Parallax Scrolling, jene Technik, bei der sich verschiedene Ebenen in unterschiedlichen Geschwindigkeiten bewegen, wenn man über die Webseite scrollt, oder als Infinite Scrolling, bei der der Besucher einen scheinbar unendlich langen Feed scrollen kann.

Was so schick aussieht und sich gut anfühlt, muss aber auch übersichtlich und zweckmäßig bleiben. Denn was nützt die schönste Seite, wenn sich der User ins Abseits gescrollt hat und die Orientierung verloren hat?

Abhilfe schafft hier die Fixed Position Navigation, die an einer bestimmten Position auf der Seite fixiert ist, und den Besucher überall hin begleitet. Im Notfall findet man über die fixierten Menüpunkte immer wieder zurück zu den gesuchten Unterpunkten.

Anbei haben wir schöne Beispiele für Fixed-Position Navigation zusammengetragen:

responsive

Quelle Screenshot: fandangomediagroup.com

webdesign trend 2013

Quelle Screenshot: inspirationdormant.com

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -