Die wichtigsten Web Design Trends 2013

1. Flat UI – Flaches Design

In den letzten Jahren waren die Design gekennzeichnet von ausgefallenen 3D-Effekten wie Schlagschatten, Verläufe, abgeflachte Kanten oder Prägungen. Dieser Trend dreht sich seit wenigen Monaten komplett hin zu einem flachen Design ohne jene Effekt.  Das Konzept des flachen Designs hat im letzten Jahr durch die Veröffentlichung von Microsoft Windows 8 und dessen Metro UI einen weiteren Schub bekommen.

Minimalistisches Design ist optimiert für eine Zukunft, die sich immer häufiger auch auf mobilen Endgeräten abspielen wird. Daher wird das flache Design auf Webseiten und in Apps immer häufiger anzutreffen sein. Die Buttons und Elemente sind stärker für Finger-Gesten, wie sie an Smartphones und Pads üblich sind, ausgelegt. Hier ein paar attraktive Beispiel für Flat Design aus dem Web.

Mobile User-Interface

Schrilles IPhone Interface

Schrilles IPhone Interface

Ein sehr schönes Flat Design für eine IPhone-App mit sehr grellen Farben.

Mehr Details

Free Flat UI-Kit

Free Flat UI - Kostenloser PSD & HTML Kit

Free Flat UI – Kostenloser PSD & HTML Kit

Designmodo bietet kostenlose Flat UI-Kit im PSD Format, der außerdem noch als HTML5 und CSS3 Version auf Github verfügbar ist.

zum UI-Kit

User-Interface im Metro-Style

Kostenloses User-Interface mit elegantem Design

Kostenloses User-Interface mit elegantem Design

Sehr schöner kostenloser UI-Kit auf Dribbble.com. Große Flächen im Flat Design wirken sehr elegant und clean und zudem noch übersichtlich.

zum UI-Kit

Free User-Interface in Blautönen

Flat User Interface im Metro Stil

Flat User Interface im Metro Stil

Ebenfalls ein attraktiver und edler UI-Kit in strahlenden Blau-Tönen. Dieses User-Interface erinnert sehr stark an die Metro UI von Microsoft.

zum UI-Kit

Dunkler Kostenloser UI-Kit

Modernes Dunkles User-Interface

Modernes Dunkles User-Interface

Ein dunkler UI-Kit mit den inzwischen typischen Farben bei dem eingesetzten Flat Webdesign.

zum UI-Kit

Kostenloses Tumblr Theme AppBlog

Kostenloses Tumblr Theme AppBlog

Kostenloses Tumblr Theme AppBlog

Das AppBlog Theme von Tumblr ist nicht nur kreativ gestaltet sondern auch technisch exzellent umgesetzt. Ich benutze das Tumblr Theme selbst und bin sehr zufrieden damit.

Tumblr-Theme

WordPress Portfolio Theme mit Kacheln

Helles WordPress Portfolio Template mit Sidebar

Helles WordPress Portfolio Template mit Sidebar

Liquidfolio ist ein modernes WordPress Theme. Ein sehr flexibles Theme mit Portfolio und Blog im flachen Design.

WordPress-Theme

2. Retro Farben für Icons

Neben der flachen UI setzt sich bei den Farben im Web ein neuer Trend durch. Wer sich bereits die UI’s im vorherigen Punkt genauer angesehen hat, dem wird aufgefallen sein, dass immer die gleichen Retro Farben erscheinen. Diese etwas gewöhnungsbedürftig wirkenden Farbkombinationen wirken im Zusammenspiel mit Icons, Buttons, Glyphen und Grafiken sehr frisch und modern. Auch hier wieder einige Bespiele für euch.

Flat Icons mit Retro Farben

Flat Icons mit Retro Farben

mehr Informationen

Modern Buttons mit abgerundeten Ecken

Modern Buttons mit abgerundeten Ecken

mehr Informationen

Flache Runde Icons mit Retro Farben

Flache Runde Icons mit Retro Farben

mehr Informationen

Coole Wissenschafts-Icons in Retro Farben

Coole Wissenschafts-Icons in Retro Farben

mehr Informationen

Flache Superhelden-Postkarten

Flache Superhelden-Postkarten

mehr Informationen

Mehrere Icon-Sets und sogar Postkarten in den so typischen Farben. Vor allem in der Kombination mit dem flachen Design entfalten die Farben ihre Wirkung.

Update

Inzwischen hat sich dieser Trend bereits weiterentwickeln in das sogenannte Long Shadow Design. Hierbei werden die Icons mit einem langen Schatten versehen, um mehr Eleganz und Tiefe zu erreichen.

3. Full Screen Layouts mit Navigation am linken Rand

Ein weiterer Web Design Trend für dieses Jahr – und ganz sicher auch für 2014 – sind Full-Screen Layouts, die den gesamten Bildschirm in voller Breite nutzen. Über viele Jahre wurden Webseiten künstlich in ein 960 Pixel breites Grid-System gequetscht und verloren immer mehr an Wirkungskraft auf den ständig größer werdenden Monitoren.

Mit responsive Web Design, ein Trend aus dem letzten Jahr, wird hier jetzt konsequent weiter fortgesetzt.  Webseite passen sich dabei adaptiv oder responsive an die Breite des Endgerät an. Neu in 2013 sind dabei auch die immer flexibler werdenden Navigationen und Inhalte die sich im Funktionsumfang dem Endgerät anpassen.

In diesem Jahr wagen sich manche Webseiten bereits über die üblichen 1024 Pixel hinaus und wachsen auf die vollständige Bildschirmbreite. Im Zuge dieser Entwicklung zum mobilen Endgerät zeigt sich auch eine ganz deutliche Änderung bei der Haupt-Navigation. Diese findet sich häufiger auf der linken Seite und ist somit optimal für Tablet-Nutzer platziert. Der mittlere Bereich einer Webseite wieder dadurch wieder voll für den Content verwendet. Hier findet ihr einige herausragende Beispiele dieses Trends.

Smashing Magazin – Full-Width Webdesign

Mehrfache Sidebars und Tablet-Optimierte Navigation

Mehrfache Sidebars und Tablet-Optimierte Navigation

Die Webseite des Smashing Magazine ist seiner Zeit weit voraus und hat aus meiner Sicht das modernste und schönste Layout überhaupt. Die Navigationen wurden an den linken Rand geschoben und sind sehr unauffällig aber optimal zu bedienen. Am rechten Rand befindet sich wie üblicherweise eine weitere Sidebar mit Werbung und Informationen. Der Content in der Mitte passt sich flexibel der Bildschirmbreite an und steht absolut im Fokus.

zur Website

Naldz Graphics – Web Magazin mit Kacheln

Web-Magazin mit schickem Webdesign

Web-Magazin mit schickem Webdesign

Ein weiteres Magazin aus dem Bereich Web Design ist die Seite von Naldz Graphics. Das neue Design der Website existiert erst seit dem Relaunch am 5. März diesen Jahres. Mit einer Kombination aus Blog, Magazin und minimalem Design ist die ganze Website schön und übersichtlich. Sobald es ein WordPress Theme mit dieser Struktur und ähnlichem Layout zu kaufen gibt wird auch dieser Blog darauf umgestellt.

zur Website

Metronic – HTML5 Template im Metro-Stil

HTML5 Admin Template mit Metro Stil

HTML5 Admin Template mit Metro Stil

Das Metronic HTML5 Template bei Themeforest ist zwar nur ein Admin-Theme, aber mit großem Abstand der Bestseller bei den Website Templates. Hier wurden alle Web Design Trends für 2013 geschickt vereint. Full-Screen responsive Layout mit flachem Design und einer Navigation am linken Rand erschaffen ein modernes, zukunftsfähiges und flexibles Theme.

Demo und Download

Google geht mit den eigenen Netzwerken Youtube und Google+ in die selbe Richtung. Hier wurden die Navigationen auch nach links gezogen um dem Inhalt die komplette mittlere Spalte zur Verfügung zu stellen. Jedoch ist der Inhalt nach rechts noch etwas „eingesperrt“ und es geht wertvoller Platz verloren, der wesentlich besser genutzt werden könnte. Ich bin mir sicher das wir im Laufe diesen Jahres hier noch eine Veränderung sehen werden.

4. Supersized und One-Page Seiten

Der vierte große Trend zeigt sich bei Kampagnen Websites für einzelne Produkte, Locations, Selbstständige und kleine Unternehmen. Die Startseite besteht aus einem supersized fullscreen Hintergrundbild und Headline, dass die Kernbotschaft der Seite emotional transportiert. Es kann sowohl in einer One-Page Seite verwendet werden aber auch der Einsatz in Webseiten mit Unterseiten ist geeignet.

Der große Vorteil bei dieser Technologie besteht in dem eingebauten responsive Effekt. Die Kombination von hochwertigen Bildern und moderner jQuery Technologie, die das Bild genau auf die Größe des Bildschirms anpasst, erzeugt attraktive Webseiten mit solider Usability. Hier einige Beispiele für euch.

Escape Flight – Innovatives One-Page Webdesign

Moderne One-Page Website zur Flugsuche

Moderne One-Page Website zur Flugsuche

Bei der Website von Escape Flight werden hochwertige Bilder und eine emotionale Headline gezielt genutzt um Besucher zur Buchung eines Flugs zu bewegen. Der Inhalt der Seite beschränkt sich auf eine Seite, die sich weiter nach unten scrollen lässt. Die Bild-Teaser mit Preis öffnen ein Buchungsformular in einer Lightbox. Ein hochinteressanter und komplett innovativer Ansatz in einer Branche mit herkömmlichen Buchungsportalen.

zur Website

84 Paris – Storytelling und Sauberes Webdesign

Webdesign Trend Full-Screen Slider

Webdesign Trend Full-Screen Slider

Die unabhängige Agentur 84 Paris verwendet einen supersized Slider mit emotionaler Headline für die Startseite. Die Navigation ist interessanterweise unterhalb des Sliders platziert. Die einzelnen Unterseiten befinden sich nicht mit auf der Startseite und werden dynamisch nachgeladen. Die Webseite ist neben dem modernen Design auch technisch eine Meisterleistung. Supersized Slider, dynamisch nachladender Inhalt und der fixierte Header sind nur einige von vielen Highlights. Absolutes MUST SEE!

zur Website

Eden Made – One-Page Webdesign für ein IPhone-Produkt

Kampagnen Website mit Full-Screen Bildern

Kampagnen Website mit Full-Screen Bildern

Diese deutsche Website besticht durch die hochwertigen Bilder des beworbenen Produkts. Das Produkt wird in mehreren Bilder untereinander dargestellt und kann direkt bestellt werden. Manchmal ist weniger eben doch mehr.

zur Website

Jardan – Modernes Webdesign mit viel Whitespace

Full-Screen Hintergrund mit einfacher Navigation

Full-Screen Hintergrund mit einfacher Navigation

Die Website des australischen Möbelherstellers mit Design Ansprüchen verwenden ebenfalls eine supersized Startseite. Die Kompetenz des Unternehmens wird dank ausgezeichneter Bilder und einer kurzen Headline emotional in Szene gesetzt. Neben dem Hauptbild befinden sich ein weiterer Design-Slider und mehrere Produktbilder auf der Startseite. Die weiteren Information wurde auf Unterseiten ausgelagert.

zur Website

Fazit

Die Trends hin zu nflexiblen Webseite, die auf allen Endgeräten nicht nur angezeigt werden, sondern auch im Funktionsumfang und Usability angepasst sind, setzt sich fort. Minimalistisches, flaches Design lassen Navigation und Steuerungselemente in den Hintergrund treten und beschränken diese auf ihre Funktionalität. Im Mittelpunkt stehen edle Bilder und der Inhalt einer Webseite. Bleibt zu hoffen, dass sich dieser Trend weiter durchsetzen wird und noch mehr attraktive Webseiten produziert.

Interessante Links dazu:

Related Articles

  • Hallo Tobias, ich denke Flat Design ist der Grund, weshalb man sich Beiträge wie diesen gerne in Ruhe und kmpl. durchliest. Der Content ist informativ und es gibt keinen Schnickschnack, der einem beim Lesen ablenkt oder gar stört. Habe erst mal deinen Feed abonniert und freue mich auf weitere Artikel. Beste Grüße aus Osnabrück, Carsten.

    • Hallo Carsten.

      Das sehe ich ganz genauso. Das Design rückt wieder in den Hintergrund, und der Content wird wieder zum Mittelpunkt. Wobei mir diese einfache Optik auch sehr gut gefällt.

  • Pingback: Webtrends 2013 | Know-how: bumateam()

  • Sorry, aber das Smashing Magazine ist ja wohl das beste Beispiel, wie man es auf grossen Bildschirmen NICHT macht. Habe muehe, auf meinem 24-Zoeller die Seite zu lesen. Die Schrift ist zu gross, durch die extreme laenge der Zeilen verrutsche ich oefters und der Muell um den Content links und rechts lenkt mich nur ab. Optisch auf den ersten Blick vielleicht superschoen, aber nutzbar ist das nicht mehr.

    Ich befuerchte auch langsam, das beim Webdesign immer mehr das passiert, was auf den Laufstegen der Modedesigner passiert ist: Die Designer machen nur noch nach dem Motto „Hauptsache ausgefallen und neu, nutzen muss es ja eh keiner“.

    • Hallo Maik,

      Interessante Meinung von dir.

      Gerade bei Smashingmagzin steht weniger das Design im Vordergrund sondern einzig und alleine eine geniale UI/UX. Magazine haben häufig sehr hohe Anteile an Besuchern von Tablets und Smartphones.

      Das erklärt den Trend zu einer Navigation auf der linken Seite die perfekt für Touch-Gesten ausgelegt ist. Außerdem nutzt die Navigation den linken Rand, der üblicherweise ungenutzt bleibt. Bisherige Layouts waren steif und nutzten entweder nur 1020px oder 1220px und das war eben besondern unschön auf großen 24″ oder 27″ Monitoren.

      Auf der rechten Seite ist wie bei jedem Magazin oder Blog eine Sidebar. Dort sind natürlich auch Werbebanner anzutreffen, denn schließlich muss sich ein Magazin auch finanzieren. Aus meiner Sicht sind die Banner sehr geschickt ganz weit an den rechten Rand gelegt und nicht störend im Text.

      Der Content ist am Wichtigsten und wurde in der Mitte platziert und genießt die größte Aufmerksamkeit. Mit 16px ist die Schrift nicht besonders groß sondern Standard für Magazine. Auf großen 27″ oder mobilen Endgeräten werden kleinere Schriftgrößen absolut unleserlich und auf meinen beiden 24″ finde ich es sehr angenehm zu lesen.

      Mich würde interessieren welche Magazine aus deiner Sicht gut gestaltet sind?

  • Ich mag dieses Windows Phone 8 Flat Design. Das ist echt nen paar Design Awards Wert.
    Aber ich mag auch ein wenig Inhalt. Nun beist sich der Monitor ins Kabel. Ich kann viele schöne Webdesigns sehen die aber leider durch leere Inhalte glänzen. Sehr schade – denn das zwingt mich leider bei der ungestylten Konkurrenz weiterzulesen.

  • Eva

    Hi Carsten,

    danke für den Artikel, er hat mich zum Nachdenken angeregt:

    Flat Design und besserer Content: ob das so wirklich korrespondiert? Natürlich kann ein nüchternes Design Text mehr Geltung verleihen, aber meist erreichen die Texte auf einer schicken Seite nicht die Qualität des Designs. Das ist schade. Super finde ich den One-Pager, ideal für lange Texte – da kann man scrollen, scrollen, scrollen. Leider gibt´s selten Seiten, die sich trauen, lange Texte zu publizieren – angeblich haben Internetuser keine Ausdauer im Lesen. Stimmt das?

    Viele Grüße
    Eva

  • Vielen dank für den klasse Artikel, also bei den meisten die Suchmaschinenoptimierung betreiben. Wissen langsam auch das Content der King ist. Aber vielleicht ändert sich das auch mit dem nächsten google update wieder… Lg. Marc

  • Ich finde die Seite vom Smashing Magazin jetzt auch nicht so toll, aber es geht wohl um das Beispiel. Monitore sind von 4:3 auf 16:9 gewandelt – Design hat das in vieler Hinsicht noch nicht so gut adaptiert. Wenn das Seitenverhältnis eher dem natürlichen Sichtfeld entspricht, sehe ich keine Grund die Breite nicht immer zu nutzen. Sehr interessant (und auch irgendwie mutig) finde ich ja in dieser Hinsicht das neue Myspace-Design. Aber die haben wohl auch nichts zu verlieren. 😉

    Sandro.