Dunckelfeld

Artikel schließen

16

Web-Design Trends 2018

Trend-Wissen ist Trumph! Es ist die erste Visitenkarte die man hinterlegt, bevor man das haptische Gegenstück dem Design-Kollegen in die Hand drückt. Damit du für das nächste Messegespräch vorbereitet bist, hier eine Zusammenstellung der Designtrends 2018.

1.) Isometrisches Design im Web

Das isometrische Design ist gekennzeichnet durch die Problematik eine dreidimensionale Form (z. B. ein Würfel) in eine zweidimensionale Umgebung zu projizieren. Die Achsstellung des Objektes befindet sich dabei zur Horizontale in einem Winkel von 30° Grad. Das isometrische Design ist im Web-Kontext besonders geeignet für technische Illustrationen und hohe Komplexitätsniveaus, die anschaulich präsentiert werden müssen. Es ist für 2018 zu erwarten, dass neben dem isometrischen Design auch Google’s Material Design und andere geometrische Formen, beispielsweise Polygonstrukturen weiterhin zum webtechnischen Einmaleins gehören.

2.) Microinteractions

Die kleinste Violine spielt die wichtigste Rolle im Orchester. Performante Weblösungen aus dem Development rücken Microinteractions in das Scheinwerferlicht. Microinteractions, also Design-Elemente, die für einen einzigen Anwendungsfall einer Seite konzipiert wurden (z. B. Klick auf ein Navigationselement), ermöglichen neue Verbindungen zwischen User und Website. Um es mit der amerikanischen Designikone Charles Eames zu halten „Die Details sind nicht die Details. Sie machen das Produkt.“ Die Interaktion zwischen Website und User, die gegenseitige Reaktion auf eine Aktion, machen die Seite lebendig.

3.) Split Screens

Der geneigte Cineast weiß, dass Split Screens aus dem amerikanischen Filmklassiker „Life of an American Fireman“ von George S. Fleming und Edwin S. Porter aus dem Jahr 1903 stammten. Im digitalen 21. Jahrhundert vermögen es Split Screens zwei Design-Elemente prominent zu platzieren und sie gegeneinander zu kontrastieren. Die Elemente balancieren eine inhaltliche Pluralität der Website, sowie eine gestalterische Ästhetik und überlassen dem User die Steuerung seiner Aufmerksamkeit.

4.) WebGL

Das Web zum „anfassen“ – durch WebGL wird es möglich. Die Software ermöglicht die Darstellung von 3D-Grafiken im Webbrowser. Durch die fortschreitende technische Entwicklung ist dies keine Zukunftsmusik mehr, sondern bereits Realität. Designtechnische Umsetzungen ermöglichen neue Möglichkeiten in der Schaffung neuer Usererlebnisse und der Kommunikation zwischen Website und Anwender.

5.) Typographie Fokus im Web-Design

Die diesjährigen technischen Neuerungen im Bereich Typographie lassen eine Konzentration des Web-Designs im Jahr 2018 auf das Schriftbild beinahe als selbstverständlich erscheinen. Durch die neue OpenType Version 1.8 werden sich Fonts ihrer Umgebung im World Wide Web anpassen können. Die OpenType Version 1.8 wird als Impulsgeber des Web-Design und des Development neue gestalterische Möglichkeiten bieten – unser differenziertes Statement zu „Variablen Fonts“ findet ihr hier.

6.) Außergewöhnliche Grids

Raster, sogenannte „Grids“, sind im Web-Design essentiell. Der „Goldene Schnitt“ beschrieben durch den griechischen Buchstabe „Phi“ – das Verhältnis 1:1,6180 – ist dafür prädestiniert Hierarchien zu implementieren und den Blick zu lenken. Textlastige Seiten können durch die Rasteranwendung des „Goldenen Schnitts“ Freiräume gegeben werden und die Seite entzerren.

7.) Whitespace

Weiß ist weiß ist weiß, oder? Natürlich muss der Whitespace nicht „weiß“ sein. Der Einsatz von Whitespace muss nur klug sein. Die pointierte Nutzung der visuellen Wüste zwischen den Elementen einer Website, kann allerhand bringen. Die Reduktion führt zu einer verstärkten Wahrnehmung der Bereiche einer Seite, die wirklich zählen. Optische Werte wie „Klarheit“ und „Eleganz“ können über die gesteigerte Usability vermittelt werden.

8.) Gradients

Der Einsatz von farblichen Verläufen gehört wieder zum guten Ton im Web-Design. Verläufe, oder im Designersprech „Gradients“ ermöglichen Websites eine räumliche Tiefe zu suggerieren. Als Ersatz oder in Kombination mit Hero-Images werden User-Interface-Elemente aufgepeppt und die vielfältigen Einsatzmöglichkeiten schrauben an der Attraktivitätsskala für die Integration von Gradients im Web-Design.

9.) Progressive Web Apps

PWAs sind in aller Munde – nicht nur weil sie als offener Standard Nachteile der nativen Apps umgehen, sondern auch dadurch, dass sich das Design den neuen Möglichkeiten stellen muss. PWAs werden gleichberechtigt auf dem Desktop hinterlegt werden, daher muss sich das Icon-Design an den gestalterischen Standard von nativen Apps anlehnen müssen. Neben dem visuellen Standard einer nativen App, wird darüber hinaus nicht „Mobile First“, sondern „Offline First“ gedacht. Die Nutzung der App im Offline-Modus und die Abwägungen, wie die User Experience in den Funklöchern dieser Welt aussehen kann, ist eine Frage, welche das Design beantworten muss. Es müssen ebenfalls designtechnische Lösungen gefunden werden, wie die Interaktion zwischen User und PWA funktionieren kann. Ansätze hierfür wären die Implementierung von Touch Feedbacks und Page Transitions, die den User einen Austausch über seine Handlungen mit der App erlauben.

10.) Geometrische Fonts

Der feine kaligraphische Federschwung im Web-Design wird erweitert durch Schriftarten mit einem geometrischen Äußeren. Rechtecke, Quadrate und Kreise werden ein integraler Bestandteil von Schriftarten. Die Kombination aus Einfachheit und Modernität, gepaart mit der hohen Kontrastintensität sind die Bauteile für eine vermittelbare User Experience.

11.) Fotos und Videos

Perfektes Lächeln, maßgeschneiderte Anzüge, die Frisur sitzt und ein Lächeln so hell und breit wie ein Atompilz. Sie denken an Stock Fotografie? Dann haben Sie die kognitive Konditionierung und die einhergehende Abneigung bereits durchlaufen! Nein, Fotos und Videos sind – wenn sie lebensnah, authentisch und positiv emotional wirken können – weiterhin ein wichtiger Bestandteil im Web-Design der zur Unterstützung von Storytelling-Konzepten unabdingbar scheint.

  • Credit: Joris Delacroix/ Split Screen
  • Credit: Apple/ Whitespace
  • Credit: Leo Zakour "Fluid Switch" / Microinteraction
  • Credit: realfuturefair.com / Gradient
  • Credit: DRAP.agency / Geometrical Fonts