Hier geht es zu den aktuellen Webdesign Trends 2014.
Es sind bereits ein paar Monate ins Land gegangen und die Web Design Trends in diesem Jahr kristallisieren sich immer deutlicher heraus. Es zeigt sich bei den Trends für dieses Jahr ganz klar eine immer stärkere Ausrichtung auf die mobilen Endgeräte und die damit verbundene Technologie des responsive Webdesign. Diese zwei Punkte sind für mich die Antreiber der wichtigen Trends für 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
Ein sehr schönes Flat Design für eine IPhone-App mit sehr grellen Farben.
Free Flat UI-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.
User-Interface im Metro-Style
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.
Free User-Interface in Blautönen
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.
Dunkler Kostenloser UI-Kit
Modernes Dunkles User-Interface
Ein dunkler UI-Kit mit den inzwischen typischen Farben bei dem eingesetzten Flat Webdesign.
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.
WordPress Portfolio Theme mit Kacheln
Helles WordPress Portfolio Template mit Sidebar
Liquidfolio ist ein modernes WordPress Theme. Ein sehr flexibles Theme mit Portfolio und Blog im flachen Design.
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
Modern Buttons mit abgerundeten Ecken
Flache Runde Icons mit Retro Farben
Coole Wissenschafts-Icons in Retro Farben
Flache Superhelden-Postkarten
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
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.
Naldz Graphics – Web Magazin mit Kacheln
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.
Metronic – HTML5 Template im 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.
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
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.
84 Paris – Storytelling und Sauberes Webdesign
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!
Eden Made – One-Page Webdesign für ein IPhone-Produkt
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.
Jardan – Modernes Webdesign mit viel Whitespace
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.
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.
9 Kommentare. Hinterlasse eine Antwort
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.
[…] Webtrends 2013 […]
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.
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.