Webdesign Trends und Ideen 2019

Inhalt

  • Infinite Scroling
  • Flat Design 2.0
  • Duotone Effekt
  • Karten Layout
  • Animierter Hintergrund

Welche Designs dieses Jahr wichtig sind und wo ihr euch Inspirationen holen könnt, erfahrt ihr in diesem Beitrag.

Als Designer oder Webentwickler ist man immer auf der Suche nach neuen Ideen und guten Quellen zur Inspiration. Meine Top 5 an aktuellen Design Trends (mit Beispielen) für dieses Jahr stelle Ich euch heute vor.


Hier geht es in erster Linie um den Bereich Webdesign und Webentwicklung und was dort aktuell wichtig und relevant ist. Jeder der in diesen Bereich tätig ist, wird bestätigen können, wie wichtig es ist immer neue Designs auszuprobieren und zu kombinieren, um eine große Variation zu bieten und nicht ständig das Gleiche zu produzieren.

Für die Auswahl der Trends und Designs habe ich folgende Faktoren berücksichtigt:

1.Wie verbreitet ist diese Art von Design?

2.Wie benutzerfreundlich ist dieses Webdesign?

3.Wie gut lässt es sich umsetzen und einsetzen?

In Zeiten, wo die Optimierung für mobile Endgeräte einen sehr hohen Stellenwert hat und vor allem Responsive Designs sehr wichtig geworden sind, sollten Designs und Layouts in erster Linie Nutzerfreundlichkeit bieten und auf vielen verschiedenen Geräten einsetzbar seien.

1. Infinite Scrolling

Der erste Trend ist in der letzten Zeit immer bekannter geworden. Jedoch kennt man diese Art von Design schon länger und vor allem im Bereich E-Commerce und bei Katalog-Seiten ist dieses Konzept relativ weit verbreitet. Die Rede ist vom sogenannten Infinite Scrolling, was soviel bedeutet wie das Konzept einer Webseite, bei der der Nutzer endlos nach unten scrollen kann und ständig weitere Produkte oder Bilder angezeigt bekommt. In Sachen Benutzerfreundlichkeit kann dieses Konzept in jedem Falle überzeugen, da es die Katalog-Funktion von Webseiten auf eine simplere und gut zu benutzende Form umwandelt. Als Alternative zu gewöhnlichen Shop-Seiten mit Katalogfunktion ist dieser Design Trend, meiner Meinung nach, ein Konzept, das sich sehr gut einsetzen lässt und sich positiv auf das Nutzererlebnis auswirken wird. Zwei sehr bekannte Apps/Webseiten haben dieses Konzept erfolgreich umgesetzt und sind heute für fast jeden ein Begriff. Die Rede ist von Instagram und Pinterest. Es gibt aber auch einige bekanntere Shops die auf diesen Trend gesetzt haben. Zum Beispiel der Shoppingclub Zalando Lounge ist eine weitere große Webseite die Infinite Scrolling umsetzt.

Da dieses Webdesign außerdem simpel und leicht umzusetzen ist, bekommt es in meinem Ranking insgesamt 5 von 5 Sternen. Außerdem denke ich, dass es in der Zukunft einen immer größer werdenden Verbreitungsgrad erreichen wird, weshalb es sich lohnt einen Blick auf diese Idee zu werfen und darüber nachzudenken ob es nicht Sinn machen würde dieses Konzept selbst in seine Webseite zu integrieren.

2. Flat Design 2.0

Als zweiten Punkt meiner Liste habe ich ein Design gewählt, das eine Abwandlung von dem Konzept Flat Design darstellt. Aus diesem Grund wird es auch Flat Design 2.0 genannt, da es im Prinzip eine Variation vom ursprünglichen Flat Design ist. Bei dieser Idee wird zum normalen Flat Design eine Dreidimensionalität hinzugefügt. Man könnte auch Flat Design 3D dazu sagen, was zugegebenermaßen, wie ein Widerspruch in sich klingt. Dieses Konzept kann als Grafikdesign angesehen werden und kann, zum Beispiel, für einzelne Webseiten Elemente genutzt werden. Es bietet sich außerdem an seine gesamte Webseite nach diesem Flat Design 2.0 zu gestalten, um einen durchgängigen Stil zu wahren. Jedoch ist diese Design Idee nicht nur auf das Gebiet der Webentwicklung bzw. des Webdesigns beschränkt. Hiermit lassen sich alle Arten von Designs umsetzen. Von Wallpapers bis Logos.

Wegen dem modernen Erscheinungsbild und der vermeintlichen Einfachheit des Designs, konnte es in der letzten Zeit stark an Bekanntheit gewinnen. Flat Design steht für Minimalismus und die zweite Version erweitert es um Schatteneffekte und Gradienten, was zu dem angesprochenen 3D-Effekt führt. Bei den folgenden Bildern sieht man das ursprüngliche Flat Design und im Vergleich dazu die neure Variante.

Alle Produkte aus dem Bereich Flat Design findest du hier.

Als Bewertung im Vergleich zu den anderen Designs habe ich 3 von 5 Sternen vergeben, da Flat Design 2.0 trotz seiner ansteigenden Bekanntheit und seiner Modernität immer noch als speziell anzusehen ist und nicht für viele Arten von Webseiten geeignet ist.

3. Duotone-Effekt

Nun kommen wir zum sogenannten Duotone-Effekt. Dieses Design-Element kennt man z.B. von der Plattform Spotify und es hat gerade im Webdesign Bereich stark an Bekanntheit gewonnen. Hierbei wird ein Bild in ein Graustufenbild umgewandelt und daraufhin mit einer zweiten Farbe (neben Schwarz) gefärbt. Möchte man dieses Verfahren selbst anwenden, dann sollte man die Tiefen und Höhen des Bildes mit zwei ähnlichen Farben oder Verläufen separat färben. Dadurch erzeugt ihr den eben beschriebenen Effekt. Mit Photoshop oder Gimp ist dieses Vorgehen in wenigen Schritten umgesetzt. Wichtig ist hierbei, dass ihr ein wenig mit den Kontrasten und der Beleuchtung herumspielt, um den nötigen Feinschliff bei der Färbung durchzuführen.

Für große Hintergrundbilder auf Webseiten lässt sich dieser Effekt sehr gut einsetzen. Aber auch Banner oder Buttons können durch den Duotone-Effekt hervorgehoben werden.

Gerade wenn ihr ein bestimmtes Farbschema auf eurer Webseite verfolgt, eignet sich dieser Effekt für einzelne Elemente der Webseite sehr gut. Hiermit werden selbst langweilig wirkende Grafiken zum Hingucker und werden den Besuchern der Webseite sofort auffallen.

Bei der Bewertung dieses Designs habe ich mich für 4 von 5 Sternen entschieden. Die Umsetzung ist simpel, erfordert jedoch ein wenig Feinarbeit. Der Verbreitungsgrad ist weder enorm noch niedrig.

Hier findet ihr alle Produkte zum Thema Duotone-Effekt aus Mediasuche.de

Als Trend gilt dieses Design in jedem Falle und ich denke dieses Jahr werden wir viele Grafiken im Duotone-Effekt sehen.

Mit diesem Tool könnt ihr den Effekt selbst ausprobieren und auf einzelne Bilder anwenden.

4. Karten Layout

Das nächste Layout bzw. Schema steht für Übersichtlichkeit und Flexibilität. Es lässt sich für fast alle Zwecke einsetzen und sorgt dafür, dass deine Webseite klar strukturiert und aufgeräumt erscheint. Hierbei wird der gesamte Inhalt einer Seite in einzelne „Karten“ unterteilt, auf denen nur wenige Informationen zu sehen sind und die mehr als Banner anzusehen sind. Die Karten können unterschiedliche Größen, Farben und Anordnungen besitzen und z.B. durch Interaktive Felder wie Buttons ergänzt werden.

Einsetzbar ist dieses Layout für viele Arten von Seiten und zudem ist es für Responsive Designs sehr gut geeignet. Ein gutes Beispiel sind Übersichtsseiten für Kategorien. Für jede Kategorie gibt es eine Karte mit dem Namen der Kategorie, ein Bild und einem Button (in welcher Form auch immer). Eine sehr bekannte Webseite, die dieses Design anwendet, ist Dribbble.com. Hier wurde das Schema für die Darstellung und Auflistung der „Shots“ bzw. Grafiken gemacht, die auf der Seite hochgeladen wurden. Für jede Grafik gibt es eine Karte mit einer Unterschrift. Die Karten sind anklickbar und öffnen ein separates Fenster, indem die Grafik als vergrößertes Bild angezeigt wird.

Quelle : editor.wix.com
Quelle : Pexels.com

Eine weitere populäre Webseite, die ein Karten-Design verwendet ist Pinterest. Pinterest verbindet somit das Karten-Schema mit einer Infinite Scrolling-Funktion, was meiner Meinung nach, sehr gut umgesetzt wurde.

In meinem Ranking erhält das Cards-Design 5 von 5 Sternen. Die größten positiven Faktoren sind die Benutzerfreundlichkeit und Flexibilität.

5. Animierter Hintergrund (Videos als Hintergrund)

Diese Design-Entscheidung ist in erster Linie für Startseiten geeignet und kann gewöhnliche statische Background-Grafiken ersetzten und so für Vielfalt und Dynamik auf der Webseite sorgen. Wer sich für ein Video als Hintergrund entscheidet, der kann die Verweildauer seiner Nutzer erhöhen und das Interesse der Besucher wecken. Die Videos können zum Beispiel einen kurzen Einblick in den Inhalt/das Thema der Webseite oder die Dienstleistungen/Produkte liefern, die auf der Webseite angeboten werden. Der größte Kritikpunkt an Video Hintergründen ist, dass diese für mobile Ansichten eher ungeeignet sind und kaum verwendet werden.

Hier zwei Webseiten, die dieses Konzept umgesetzt haben:

Bei der Bewertung stehen somit die starke positive Auswirkung auf das Nutzererlebnis und die Tatsache, dass ein solches Design für mobile Endgeräte schlecht umsetzbar ist, gegenüber. Der Verbreitungsgrad und die Bekanntheit solcher Designs hat besonders im letzten Jahr zugenommen, wodurch ich schließlich auf eine Bewertung von 3 von 5 Sternen komme.

, , , , , , markiert

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Dies ist ein Demo-Shop für Testzwecke — Bestellungen werden nicht ausgeführt. Ausblenden