Anzeige
Anzeige
Ratgeber
Artikel merken

Webdesign-Trends: 10 Dinge, die uns 2013 erwarten

Die Webdesign-Trends 2013 unterliegen genauso einer Mode wie beispielsweise Bekleidung oder Frisuren. Doch einen Unterschied gibt es: Webdesign nutzt aktuelle Webtechnologien. Wir haben uns für euch mal umgesehen und wollen euch einen Ausblick auf mögliche Webdesign-Trends des nächsten Jahres geben.

Von Falk Hedemann
6 Min. Lesezeit
Anzeige
Anzeige

Webdesign-Trends 2013: Mobile first

Was im kommenden Jahr zum Trend wird, wäre 2011 in der Form vielleicht noch gar nicht möglich gewesen, denn das Webdesign orientiert sich an den Webtechnologien und auch daran, wie die User das Internet benutzen. Ein großes Thema ist dabei aktuell sicherlich „Mobile first“, also die Ausrichtung des Webdesigns an das geänderte Konsumverhalten, das immer mehr von mobilen Geräten bestimmt wird. War 2012 noch das Responsive Webdesign einer der großen Trends, so geht es 2013 noch einen Schritt weiter. Statt das Design automatisch an das verwendete Gerät anzupassen, dürften wir im nächsten Jahr vermehrt Webseiten sehen, die ihr gesamtes Erscheinungsbild auf den Zugriff von Smartphones aber vor allem von Tablets aus optimiert haben.

Webdesign-Trends 2013: Mit dem Redesign reagiert The Next Web auf die zunehmenden mobilen Zugriffe.

Anzeige
Anzeige

Ein Beispiel das Schule machen könnte ist dabei das Redesign von The Next Web. Wie CEO Zee M Kane gegenüber .net erklärt, habe man sich beim Redesign an den Lesern orientiert. Bereits 30 Prozent des Traffics stamme von mobilen Geräten – Tendenz steigend. Für das neue Design stand dann folgerichtig Mobile first auf dem Programm. Alles was zum Lesen auf mobilen Endgeräten als unnötig erschien wurde einfach ersatzlos gestrichen. Das Ergebnis ist ein Webdesign, das auf dem Desktop zunächst etwas befremdlich und fast zu stark reduziert wirkt, was aber auf dem Tablet seine ganze Stärke ausspielen kann.

Statt hinter einer aufwändigen Navigation versteckt, sollen die Inhalte mit einer möglichst einfachen Navigation erreichbar sein und eher einem Stream ähneln. HTML5 sorgt dabei für eine plattformübergreifend gleichbleibende Usability, bei der das Lesen klar im Vordergrund steht.

Anzeige
Anzeige

Webdesign-Trends 2013: Mehr Bilder, weniger Text

Auch das Redesign der Technewsseite ReadWriteWeb, die jetzt nur noch ReadWrite heißt, wäre ein Beispiel für den Trend Mobile First. Doch hier finden wir noch einen weiteren Trend, der für 2013 eine wichtige Rolle spielen könnte. Die Startseite von ReadWrite ist sehr stark von Bildern geprägt, ganz so, wie es Pinterest erfolgreich vorgemacht hat. Bevor man die klassische Ansicht mit einem Artikelbild, einer großen Überschrift und einem Teaser als Appetitmacher erreicht hat, muss man schon etwas runter scrollen.

Anzeige
Anzeige

Auch bei ReadWrite gab es ein richtungsweisendes Redesign.

Neben Pinterest ist auch die Universal Search von Google verantwortlich für das Umdenken bei den Webdesignern. Natürlich steht Webdesign immer auch im direkten Zusammenhang mit der Suchmaschinenoptimierung, denn was nützt eine wirklich schicke Website, wenn deren Inhalte nicht gefunden werden? Die Zeiten, in denen Suchmaschinen mit Bildern nichts anfangen konnten und Texte im Fokus stehen mussten, sind lange vorbei. Auch diese Entwicklung macht ein solches, bilddominantes Design möglich.

HTML5 macht viele Experimente möglich

Nun kann man HTML5 nicht gerade als neuen Trend bezeichnen, dennoch wird der kommende Webstandard auch 2013 einen wichtigen Einfluss auf das Webdesign nehmen. Allein die Tatsache, dass HTML5 plattformübergreifend, mobil wie auf dem Desktop, dazu in der Lage ist, gleiche Ergebnisse zu erzielen, macht die Webtechnologie für Webdesigner schon interessant.

Anzeige
Anzeige

Nachdem die Browser immer besser mit HTML5 umgehen können, werden wir in 2013 immer mehr Webdesign-Experiment sehen, die die Grenzen neu ausloten und traditionell statische Seiten sehr viel interaktiver machen. HTML5 wird weitergehend in Browser und Content Management Systeme implementiert werden, so dass die Grenzen immer weiter verschoben werden. Es gibt dann auf solchen experimentellen Seiten überall was zu entdecken und Informationen werden im wahrsten Sinne des Wortes erfahrbar.

Statische Elemente wird es natürlich auch weiterhin geben, aber warum interessante Informationen nicht auch durch interessante Animationen präsentieren? Einfache Hover-Effekte werden durch erlebbare Interaktivität abgelöst, bzw. sinnvoll ergänzt. Statt eines simplen Tooltips zeigt sich dann ein komplettes Fenster, wenn man einen bestimmten Triggerpunkt mit dem Mauszeiger berührt.

Parallax Scrolling als Teil der HTML5/CSS3-Evolution

Eine dieser interessanten Formen Informationen darzustellen nennt sich Parallax Scrolling. Dabei handelt es sich um einen visuellen Effekt der durch zwei übereinander liegenden Ebenen erzeugt wird, die sich unterschiedlich schnell bewegen. Schon jetzt wird dieses Stilelement gerne eingesetzt und das wird sich im nächsten Jahr sicher noch steigern.

Anzeige
Anzeige

Hier ein schönes Beispiel vom Sportartikelhersteller Nike:

Weitere Beispiele für den Webdesign-Trend Parallax Scrolling hatten wir euch schon hier gezeigt.

Anzeige
Anzeige

Single Page Webdesign

Eng verbunden mit dem Parallax Scrolling ist ein weiteres Stilelement, das 2013 zum Webdesign-Trend werden könnte: Single Page Webdesign. Gerade Websites, die mit einer überschaubaren Anzahl an Elementen und Inhalten auskommen, lassen sich sehr gut auf nur einer Einzelseite ohne Unterseiten gestalten. Neben der normalen vertikalen Scrollrichtung kann hier zusätzlich auch auf eine horizontale Scrollrichtung gesetzt werden, die ein Weiterblättern simuliert.

Auch das Single Page Webdesign ist natürlich keine neue Erfindung, aber die Weiterentwicklung der Webtechnologien ermöglicht heute eine einfachere Umsetzung. Zudem gibt es durchaus auch einen Trend zur Minimierung der unmittelbar angezeigten Inhalte. Wer durch das Prinzip „Weniger ist mehr“ eine gesteigerte Aufmerksamkeit erzielen möchte, bekommt mit dem Single Page Webdesign eine interessante Möglichket geboten.

Wie das aussehen könnte, zeigen wir euch in diesem Artikel.

Anzeige
Anzeige
Single Page Webdesign muss nicht überfrachtet sein und bietet reichlich Platz für moderne Effekte.

1 von 45

Webdesign mit Typographie

Typographie war schon immer ein wichtiges Thema für das Webdesign. Mittlerweile gibt so zahlreiche Schriften, dass die Auswahl nicht mehr nur aus funktionellen Gesichtspunkten erfolgen kann. Nimmt man dazu noch weitere der hier aufgezeigten Trends, beispielsweise den Trend zu mehr Bildern und weniger Text, so ist es nur logisch, dass sich der Text in Zukunft mehr behaupten muss, als früher.

Warum also den Text nicht gleich als optisches Stilmittel einsetzen? Im Beispiel von Just Dot dominiert die Typographie gegenüber den spärlich eingesetzten Bildelementen.

Typographie als vordergründiges Stilmittel…

Weitere Webdesign-Trends für 2013: Responsive Webdesign und große Hintergrundbilder

Responsive Webdesign

Anzeige
Anzeige

Eigentlich war Responsive Webdesign ja schon einer der Trends in diesem Jahr, aber auch in 2013 werden Webdesigner kaum noch drum herum kommen, ihr Design kompatibel für zahlreiche Displaygrößen zu machen. Sehr wahrscheinlich werden auch die Werbemittel im nächsten Jahr vermehrt auf Responsive Webdesign setzen, um auch mobil eine bessere Figur zu machen.

Einen zusätzlichen Schub wird es durch die W3C-Implementation des neuen picture-Elements geben, durch die „Responsive Images“ möglich werden.

Bildschirmfüllende Hintergrundbilder

Anzeige
Anzeige

Weniger infrastrukturell als vielmehr eine Geschmacksfrage sind die bildschirmfüllenden Hintergrundbilder, die immer öfter zum Einsatz kommen. Vielleicht sogar etwas von den Headern der Facebook-Chronik inspiriert, sorgen sie auf Startseiten für Wow-Effekte, ohne dabei gleich alles zu zeigen. Für Webdesigner ist das eine interessante Entwicklung, denn steht das Bild erstmal, ist auch schon der größte Teil des Designs abgeschlossen. Das Hintergrundbild rückt also quasi in den Vordergrund. Das erleichtert beispielsweise auch regelmäßige Neugestaltungen einer Startseite.

Retina-Grafiken

Hochauflösende Displays, wie sie beispielsweise Apple als Option für die MacBook Pro-Serie anbietet, werden sich in 2013 weiter verbreiten. Damit gerade grafiklastigen Websites auch auf diesen Geräten noch schick aussehen, werden sich die Webdesigner mit hochauflösenden Grafiken auseinandersetzen müssen.

Artikel-Design

Als Autor einer Newsseite macht man sich natürlich auch Gedanken über das Design der Artikelseiten. Spätestens mit dem Erfolg der populären Infografiken rückt hier der Fokus mehr in Richtung Individualisierung und Veranschaulichung durch grafische Elemente. In 2013 werden wir daher hoffentlich immer öfter designte Artikelseiten sehen, deren Optik auf das Thema des Artikels eingeht und es informierend begleitet. Das geht sicher nicht mit jedem Artikel, gerade bei sehr aktuellen Themen nicht, aber bei Hintergrundberichten, Recherchearbeiten und Übersichten sollte die Zeit für eine spezielle Artikelseite ausreichend sein.

Ob wir mit diesen Trends richtig liegen, werden wir dann im Laufe des nächsten Jahres erfahren. Grundsätzlich kann man aber schon sagen, dass sich auch beim Webdesign immer wieder mal Dinge wiederholen oder auch langlebiger sind, als unser Kalenderjahr. Von unserer Vorhersage für die Webdesign-Trends 2012 jedenfalls haben sich zwei ganz klar ins nächste Jahr gerettet…

Seht ihr noch weiter Webdesign-Trends für 2013?

Ebenfalls interessant:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
32 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Sascha Fuchs

Bei dem Thema habe ich jetzt mal etwas erwartet was wirklich neu ist, aber das was gezeigt wurde ich schon seit fast zwei Jahren präsent. International gesehen versteht sich natürlich, weil man in Deutschland selbst gerne zwei bis drei Jahre hinterher hängt.

Responsive Design war bis vor einem Jahr aus der Sicht vieler deutscher Agenturen und Dienstleister ein Buzzword, ein Hype der wieder schnell verschwinden wird. Mittlerweile ist man in der Agenturszene am hektischen rudern, nur durchdacht ist das ganze auch nicht. Da fummeln ehemalige Printdesigner Screendesigns für responsive Layouts zurecht, wo man dann oft genug das kalte Grausen bekommt.
Von Mobile First wird da wahrscheinlich erst in zwei oder drei Jahren in Deutschland wichtig werden – wenn man international schon an anderen Möglichkeiten arbeitet.

Antworten
Benny Lava

Parallax Scrolling: Beim ersten Mal ist es vielleicht noch „wow“, ab dem zweiten Mal nur noch „gähn“.
Die anderen Punkte werden nicht wieder verschwinden, da sie ein Schritt weiter zur perfekten Webseite sind.

Antworten
Georgios Katsiakoudis

Mehr Verwendung von Iconfonts.

Antworten
boykottke

Nach wie vor sehe ich das Problem, dass sich einige „Trends“ einfachdiametral ggenüberstehen: Mehr Bilder, größere Bilder, Retina-Graifiken auf der einen Seite (ohne Probleme machbar mit einem schicken Breitbandausbau), responsive webdesign und mobile first-strategie auf der anderen Seite. Es wird aus meiner Sicht einfach noch ein paar Jahre dauern, bis ausreichend Bandbreite im mobilen Bereich bezahlbar und flächendeckend bereit stehen und – viel wichtiger – verbreitet sind. Mit großen Websiten für mobile Endgeräte hilft man derzeit eher, die Datenpakete des Nutzer schnellstmöglich zu erschöpfen. Natürlich ist mir dabei klar, dass Minibilder hochskaliert auf einem Retina-Displays in einem iPad nicht wirklich schick sind, aber ich muss auch damit leben, dass die meisten Geräte mit hochauflösenden Displays gerade im mobilen Bereich zu finden sind und ich mich manchmal entscheiden muss: Seite mit weniger guten Bildern anzeigen oder Seite gar nicht anzeigen. Ich habe mich bisher für ersteres entschieden und bleibe vorerst auch der Trennung von Desktop- und mobiler Version treu… Aber ich bin gespannt…

Antworten
Christian

Finde das Thema wesentlich interessanter als den xten Artikel über das Smartphone XYZ. Tipps und Anleitungen zu „Mobile first“ wären super!

Antworten
Michael

Ich glaube, dass es eher „Tablet-First“ heissen wird :-)
Tablet als die primäre Konsumier-Form, gefolgt von Mobile und dann Desktop.

Antworten
Jan

Parallax Scrolling? Mobile First? HTML 5? Ziemlich mutig diese Keywords von 2011 als Trends von 2013 anzupreisen.

Antworten
Fotograf Osnabrück

Als Fotograf gefällt mir diese Entwicklung, egal ob 2011 bereits begonnen und 2013 noch mehr verfeinert selbstverständlich sehr gut.
So war man damals mit Bildern im Ranking bei Google eher gepeinigt – Also, bitte weiter im Trend bleiben.

Merci beaucoup ;)

Antworten
mindest-anforderungen

Hinweis: „Mobile“ ist nicht LTE oder 3G oder EDGE/GSM sondern! Handy oder Pad also meist wohl WiFi in USA wie man an den meisten Apps und Sites schnell erkennt die schmalbandig oft praktisch unbenutzbar sind. „Mobile“ wird falscherweise als false-friend-Translation oft mit Mobilfunk gleichgesetzt obwohl in USA jeder überall an jeder Ecke WiFi kriegen kann. D.h. es geht bei „mobile“ nicht um Mobilfunk sondern um kleine Displays wie Handies und Pads z.B. auf der Wohnzimmercouch. Halt das, wofür man vor dem Ipad die Netbooks gekauft hat: Portable Surf-Stationen.

Was vergessen wurde ist „nonPC“ also SmarTVs und Pads und Phones. Meist halt per 100Mbit-DSL-Anschluss in technologiefreundlichen Ländern.

Man muss also die Eingabe auf Tastatur/Maus, TouchScreen aber auch Fernsteuerung optimieren.

An den meisten Blogs und Sites sieht man aber am Handy täglich, das „mobile“ dort noch lange nicht angekommen ist. Die Kleinen Players machen meist nur nach was die großen Players vorgeben.
Das schlimme ist ja, das die Handy-Browser sich schon ewig dumm stellen und Seiten nicht von sich aus Display-größen-Optimiert darstellen. Gleiches gilt für die Email-Programme der Handies. Das width-Attribut von Tables automatisiert auf die Phone-Breite zu setzen wäre als Pre-Filter oder CSS-User-Style im Phone-Browser ja keine Kunst.

Die meisten Endkunden können sich nicht alle 3 Monate einen komplette Überarbeitung der Site für hunderttausende Euros leisten und ständig aktualisierte und überprüfte Mindestanforderungen an WebDesigner gibt es auch nicht. Da ist klar das die Techniken sich nur langsam durchsetzen. Und fast immer auch nur wenn es SEO-mäßig relevant ist.

Wir kleinen Kunden die sich die Webseiten angucken müssen, sind oft genug egal. Klar nutzt man dann opera-Mini und die Amazon-App, Twitter-App, Blogs usw. und vielleicht noch ein paar andere Quellen (Home-News, Lieblings-Fußball-Verein,…) und der Rest des Webs und HTML-Gimmicks kriegt man garnicht mit. So wie damals vor 10 Jahren im AOL-Browser. Da sind viele gar nicht ins richtige Web gegangen sondern haben im Aol-System abgehangen.

Wenn ich Presse wäre, würde ich die TOp100-IVW-Sites mal abcheckern wie sie am Ipad oder auf Phones aussehen und wie gut nutzbar sie sind. Dann sollten einem die Augen aufgehen welche Optionen sich viele Sites entgehen lassen und Kunden einfach oft nur nerven. Klar geht man dann zur Konkurrenz.

Antworten
Harry

Mehr Bilder & weniger Text….

Ich bin schon dafür, dass man den Suchmaschinen noch genügend Text zum indizieren bereitstellen soll.

Antworten
Stephan Jäckel

Da Useability einfach nicht trendy klingt, möchte ich Useability 2.0 als Trend in den Ring werfen. Denn je mehr zukünftig auf Webseiten experimentiert werden wird, desto weniger werden sich diese in Funktion und Aufbau ähneln, auch wenn ihnen allen die Grenzen durch den Programmcode gemeinsam sind.

Durch diese Veränderungen aber wird es schwerer von der Bedienung einer Website auf die Bedienung anderer Websites zu schließen. Gelernte Funktionen finden sich nicht mehr, Nutzerinnen und Nutzer müssen sich anpassen und neu lernen. Das wird leider meist übersehen oder als problemlos beiseite geschoben. Und gerade weil dies so ist, wäre Useability 2.0 ein ganz wundervoller Trend, einer bei dem nicht Designer, Fotografen, Layouter, Programmierer, Conceptioner und Projektleiter im Mittelpunkt stehen, sondern die Nutzerinnen und Nutzer.

ja, ja, ich weiß dass alle immer sagen, dass die User in ihrer Arbeit an erster Stelle stehen und sie sich mit ihrer Arbeit als deren Anwälte verstehen. Aber zwischen Wort und Tat klaffen doch sehr viele Lücken. Leider!

Antworten
Tobias Breyer

Ich denke das für die meisten Profis hier keine neuen Entdeckungen dabei waren, aber es geht ja wohl auch eher um den Trend. Jetzt kommen langsam die Sachen im Mainstream an, welche die Avantgarde seit 2-3 Jahren schon Stück für Stück entdeckt und ausprobiert hat. Single Page Design und Parallax Scrolling sind jetzt schon auf immer mehr Webseiten zu sehen und in 4-5 Jahren hat das dann jede Homepage im Standard Preis mit drin.

Antworten
boykottke

@mindest-anforderungen: Mit dem Hinweis hast du zunächst mal recht. Wenn wir von mobile reden, reden wir zunächst von Bildschrimgrößen. Allerdings – und daher mein Einwand – ist das, denke ich, zu eindimensional gedacht, da ich die potentielle Datenverbindung des Users in mein Design mit einbeziehen muss, da ich sonst nicht sicherstellen kann, dass meine für eben diese Devices konzipierte Seite in angemessener Zeit und mit angemessener Datenmenge ausgleifert wird. Überall-Wlan ist zumindest hier noch lange kein Standard. ;)

Antworten
Fgggggggd

Als programmierer setze ich das un, was mir ein guter webdesigner erzaehlt, deshalb erhebe ich gar nicht den anspruch, fuer den nutzer zu programmieren… Unter programmieren sei zudem php 5,x oder java, ruby, .net verstanden…

Antworten
JenZ

@alle die für kleine Display optimieren: einfach 2-3 Jahre warten, dann ist auf dem popeligsten Smartphone eine Standardauflösung von min. 1024 Pixeln in der Breite vorhanden, wo dann wieder 99% aller jetzigen Websites laufen! Und zwar ohne diesen Response-Quatsch. Denn dank fast rahmenloser und großer Displays und der Retina-Auflösung kommen wir ganz schnell wieder auf den Auflösungs-Stand eines Monitores – keiner will doch diese ipsigen Bildschirmchen. Und dank LTE und Co. ist auch die Übertragungsleistung für die oben beworbenen „trendigen“ Bildinhalte vorhanden. Ich werde jedenfalls keinen Finger krumm machen um etwas für ein (altes) „Handy“ (sprich niedrig aufgelöstes Smartphone) zu optimieren …

Antworten
Robert Mittl

Eine sehr gute Zusammenfassung für die Trends, die sich abzeichnen. Ein gelungener Artikel, der die Trends der letzten 2 Jahre weiter bestätigt.

Antworten
Matthias Klenk

Und was ist mit Comic Sans? Kommt das nicht endlich zurück?

Antworten
MarkusP

Wovon ich mir dieses Jahr noch mehr erhoffe ist Motiondesign. Ich denke, dass das Motiondesign besonders bei anspruchsvollen und hochklassigen Seiten ein enormes Potential hat, weil sich dadurch klasse Renderfilme darstellen lassen. Als Eyecatcher gerade auf Landingpages bietet das natürlich einen tollen Aufhänger um Kunden direkt auf die Seite zu binden. Als schönes Beispiel hab ich im Netz Videos gefunden die das alles sehr schön und plastisch darstellen: http://falconwhite.de/motion_design/growing-chaos/
Dem gegenüber steht natürlich der etwas höhere Aufwand. Wahrscheinlich scheun sich viele Seitenbetreiber noch davor, diesen Mehraufwand einzugehen. Aber gerade in Zeiten von HTML5 und Parallax Scrolling, in denen die Websseiten sich weg von statischen Seiten und hin zu flexiblen und ansprechenden Animationen bewegen ist es umso wichtiger dem Kunden etwas neues und innovatives zu bieten, um sich von der Masse abzuheben.

Antworten
ayesha

Große Beispiele hier …

Darüber hinaus reagiert Layouts, flache Design und Typografie sind die wenigen besten Trends Ich erinnere mich, dass während 2013 entstanden.

Ayesha
http://www.creativewebdesign.ae/web-design

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige