Fantastische Auswahl an 50+ Webdesign Trends 2016 – Was wird auf uns zukommen?

Da gibt nur es ein Problem, und das ist die Vielfalt an Informationen zu diesem Thema im Netz. Aber dafür kriegt ihr die volle Ladung und könnt nach Interessen und Präferenzen die spannendsten Inhalte beim Stöbern in unserem Artikel heraussuchen. Klickt einfach auf den Punkt in unserer Aufzählung, de euch am meisten anspricht. Es gab viele gute Momente im Jahr 2015, dazu gab es aber auch eine Menge an tollen Trends. Manche von ihnen haben den Höhepunkt der Popularität erreicht, andere werden erst im Jahr 2016 so richtig aufblühen. Mit anderen Worten, seid nicht überrascht, eure alten guten Freunden in unserer Liste zu sehen. Und damit wünschen wir euch viel Spaß beim Lesen!

• Layout
• Bildliche Darstellungen
• Animation
• Scrollen
• Usability
• Ladevorgang
• Designer-Toolkit 
• Codierung
• Ein futuristisches 2016

Layout

Geteilter Bildschirm

Dieser Layouttyp war sehr dominant im Jahr 2015. Hier geht es um geteiltes Layout: 2 verschiedene Bilder mit 2 unterschiedlichen Intentionen bzw. Zielen und CTA.

Mutige Verwendung von Farben

Web-Apps und Websites haben tendenziell zur "websicheren" Farbenauswahl tendiert. Aber im Jahr 2016 erwarten wir eine Menge von kräftigen und leuchtenden Farben zu sehen.

Typografie

Typografie sorgt dafür, geschriebene Worte attraktiver aussehen zu lassen. Das kommende Jahr wird uns die abenteuerlustige Verwendung von künstlerischen und kreativen Schriftarten auf der Websites bringen.

Raster mit Blocks

Raster mit Blocks sind besonders gut für E-Commerce-Websites, weil sie sehr effektiv bei der Anzeige von Produkten sind und die Seiten ordentlich anmuten lassen. Außerdem könnt ihr mit der Größe der Blöcke herumspielen, um die Bedeutung von Informationen zu betonen (je größer - umso wichtiger). Wir freuen uns also auf verspielte Web-Layouts im Jahr 2016, die von starrem klassischen Raster-Design abweichen!

Flexbox wird Rastersysteme neu definieren

Flexbox wird nun von allen modernen Browsern unterstützt. Es macht CSS sauberer, Websites werden schneller und es gibt weniger Layout-Hacks. Außerdem passt sich Flexbox automatisch an jedes Browser-Fenster an.

Karten-Layouts

Von Pinterest eingeführt sind die Karten (die sehr nah an Rasterdarstellung sind) überall im Netz zu sehen, weil sie Informationen auf einer kleinen Fläche darstellen, die leicht zu scannen ist. Jede Karte präsentiert dabei ein einheitliches Konzept.

Keine Kopfzeile/Fußzeile

Die Website sieht ungewöhnlich ohne Menü und Tabs aus  (um genauer zu sein, wenn sie ausgeblendet sind). Daraus ergibt sich eine wunderbare saubere Wirkung. Die Benutzer werden dabei nur auf die wichtigsten Dinge gelenkt.

Der Aufstieg von Material Design

Material Design ist eine Design-Sprache, die von Google entwickelt wurde. Es wurde am 25. Juni 2014 bekannt gegeben. Viele Anwendungen haben diese neue Design-Sprache zu Nutze gemacht und gewiss werden wir noch mehr davon im Jahr 2016 sehen. Stellt euch dabei lustige Bilder, Ausdrücke, versteckte Funktionen, smart personalisierte Daten etc. vor!

Flat Design wird niemals alt

Flache Webseiten sehen immer noch frisch und aktuell aus. Dieser Stil wird kontinuierlich weiterentwickelt und momentan befindet es sich in seiner besten Form. Benutzer werden nie einen wichtigen Teil des Inhalts verpassen, der mit einer flachen Website angezeigt wird.

Halbflaches Design

Diese Technik hat sich schon seit Jahren etabliert, aber an Popularität gewann sie erst seit den letzten Jahren. Sie hilft den Nutzern, die Inhalte besser zu verstehen und Webseiten werden dabei schneller geladen. Flachen Design-Trend kann man überall sehen, sogar auf Websites der kultigsten Marken in der Welt. Flache Designs sind außerdem leicht zu erstellen und zu verwalten.

Entfernung von überflüßigen Designelementen zugunsten der Einfachheit

Es gibt ein Konzept im Webdesign, dass ein Design-Projekt erst dann abgeschlossen ist, wenn alle überflußige Elemente beseitigt sind. Im Jahr 2016 wird diese Idee ganz oft zum Tragen kommen, denn es geht immer wieder um maximale Vereinfachung von Layouts.

Weniger Seiten

Man sagt nicht umsonst, dass weniger mehr ist.  Einseitiges oder vereinfachtes mehrseitiges Design wird viel mehr Nutzer auf eure Website locken. Schwere überladene Websites machen keinem Spaß. Besonders heute im Zeitalter des Internets, das man auf mobilen Geräten zur Verfügung hat, sind einseitige Designs besonders aktuell und bequem.

Zentriertes Site-Layout mit fester Breite

Ihr werdet nicht glauben, aber es kommt wieder in Mode, obwohl es in der letzten Zeit gar nicht gefragt wurde und man vor allem Vollbreite-Designs bervorzugt hat.

Altmodischer Stil: Inspiration aus den 80er

Riesige Computer und klotzige Handys ist die Hauptquelle der Inspiration des Vintage-Trends im Netz. Verpixelte Icons und Texte, galaktische Hintergründe und interaktive Bewegung von Sternen und Planeten werden oft im Jahr 2016 zu sehen sein.

Individuell angefertigte Homepages

Benutzerdefinierte Homepages sind im Grunde so was wie Landing Pages. Ihr Hauptziel ist es, die Aufmerksamkeit der Kunden zu gewinnen und sie zu einer konkreten und gezielten Aktion zu veranlassen. Sie unterscheiden sich von etlichen Websites und sind effizienter darin, die ersten Besucher zu begrüßen und ihren eine interessante Geschichte anzubieten.

Verwendung von verschiedenen geometrischen Formen

Lange rechteckige Seitenlayouts waren seit einigen Jahren die erste Wahl für Webdesigner. Allerdings gibt es so viele andere Formen der Geometrie, die für die Gestaltung von Websites im Jahr 2016 verwendet werden können. Neben der Tatsache, dass sie das Navigieren auf der Seite erleichtern, ziehen sie unweigerlich die Blicke auf sich.

Ghost Buttons

Die Verwendung von aufdringlichen und schrillen Tasten ist vorbei. Nun rocken die Ghost Buttons (auch transparent oder hohl genannt). Sie umfassen nur die Umrisse einer Taste, die in ihrer Mitte eins bis zwei Worte in einfachen Typografie enthält. Ghost Buttons betonen auf eine intelligente Weise die Inhalte, die das Publikum unbedingt sehen sollte.

Die Betonung auf Originalität

Das größte Problem mit dem aktuellen Design-Trend ist, dass es ihm generell sehr schwierig fällt, originell zu sein. Dies ist ein Nebeneffekt der Masseneinführung. Wir vermuten allerdings, dass Originalität sich in Form von individuell gezeichneten Elementen kombiniert mit sorgfältig produzierten Animationen demnächst ausdrücken kann. HTML5/JS/CSS3 Bibliotheken für Animationen werden dabei behilflich sein.

Bildliche Darstellungen

Vollbild-Layout

Große Bilder fesseln und lenken die Aufmerksamkeit sofort auf den Inhalt. Ohne jegliche Ablenkung, alles ist sauber und ordentlich. Wollt ihr euch von der Konkurrenz abheben? Verwendet die großflächigen Bilder in eurem Layout.

Vollbild-Hintergrundvideo

Vollbild-Hintergrundvideo ist eine steigende Tendenz im Webdesign. Das ergreift sofort die Aufmerksamkeit der Besucher. Hintergrundvideo erhöht auch den Wert der Website. Außerdem bringt es das Publikum dazu, die CTA Buttons zu aktivieren.

Die Grenzen zwischen Phantasie und Realität verwischen sich

Hier geht es um spieltypische Elemente, die im Design eingesetzt werden. Dieser Trend beinhaltet die Erstellung von Bildern, die echt aussehen, aber man erkennt trotzdem, dass sie nicht real sind. Die Ergebnisse, die dabei entstehen, sind ziemlich atemberaubend. Diese Art der Anpassung ist sehr persönlich und ungemein kreativ. Nutzer scheinen es wohl zu mögen.

Natürlich aussehende Stockfotografie

Im Jahr 2016 werden wir noch mehr erstaunliche Fotos auf Webseiten zu sehen bekommen und zwar auch solche, die Seitenbesitzer selber erstellen ohne auf die Online-Datenbanken für Stockfotos zu zugreifen. Aufrichtige Fotos sprechen Menschen auf einer völlig anderen emotionalen Ebene an. Also je natürlicher und realitätsnäher, desto besser.

Individuell erstellte Illustrationen und Ikonografie

Die Verwendung von .jpg und .png-Dateien mit all nicht zu hoher Auflösung auf Retina-Displays führt oftmals dazu, dass sie nicht richtig angezeigt werden und deutlich an ihre Qualität verlieren. Deswegen stellen skaliebare Vektor-Grafiken (SVG) eine fantastische Lösung dieses Problems dar. Denn im Endergebnis bekommen wir mehr von bunten individuell erstellten Bildern und Illustrationen, trendigen Icon Fonts und SVG-Icons zu sehen, die auf beliebigen Bildschirmen immer knackig und scharf bleiben.

Animation

Animiertes Geschichtenerzählen

Im Jahr 2016 wird der Fokus auf das animierte Geschichtenerzählen gelegt, weil es viel effektiver und attraktiver eine Idee oder ein Projekt darstellen kann. Es ist cool, wenn ihr die Seite runterscrollt und auf einmal die animierte Geschichte über das Unternehmen zu sehen bekommt.

Dynamische Hintergründe

Ein dynamischer Hintergrund kann auf verschiedenen Arten dargestellt werden: durch ein leistungsfähiges Image, einen 3D-Hintergrund oder sogar ein Video. Das Hinzufügen eines Videos als Hintergrund ist perfekt, wenn man sofortige Aufmerksamkeit auf etwas bestimmtes lenken möchte, weil das menschliche Auge  immer auf Bewegung unmittelbar reagiert. Das Jahr 2016 wird definitiv reichlich davon anbieten, um ganz viele Geschichten hinter den bewegten Bildern für uns aufzudecken.

Mehr vom statischen Inhalt/Weniger Bewegung

Wie wir schon im vorigen Beispiel gesprochen haben, ist die Bewegung auf Webseiten ein wirksames Mittel, um das möglichst große Publikum anzusprechen. Allerdings kann zu viel Bewegung auch ablenkend sein. Man soll also nicht des Guten zu viel tun. Aus dieser Sicht werden einfache Folien den Schiebereglern bevorzugt. Vollbild-Folien werden mittels eines Klicks, Scrollen oder zeitlichen Effekts umgeschaltet. Erwartet also ganz viele Websites mit diesem Konzept in den kommenden Monaten zu sehen.

Cinemagramme

Sie sind nicht neu (mehr darüber könnt ihr in unserem Artikel über Cinemagramme lesen), aber sie sind immer noch aktiv und erfolgreich: das bestätigen "Live-Bilder" auf den neuesten iPhones, robuste Browser-Unterstützung für HTML5 Canvas etc.

Microinteraktionen

Scrollen

Langes Scrollen

Langes Scrollen ist in der Tat sehr unterhaltsam. Es ist als ob so ein Layout eine Geschichte für die Besucher erzählt, ohne das sie überhaupt auf etwas klicken müssen. Apple und NASA Seiten sind ein perfektes Beispiel von so einem innovativen Scrollen. Außerdem ist diese Funktion sehr beliebt auf mobilen Geräten. Also wenn ihr mehr Traffic auf euren Seiten habenn möchtet, müsst ihr unbedingt diese Funktion in euer Web-Projekt integrieren, denn es geht ja bekanntlich um Spaß und Komfort eurer Besucher.

Parallax Scrolling

Parallax-Scrolling-Effekte sind wirklich cool.  Dabei ist es nichts anderes als eine Illusion von 3D-Effekt und Tiefe, die wegen Bewegung von unterschiedlichen Geschwindigkeiten der Hintergrund- und Vordergrundbilder entsteht. Bei richtiger Ausführung verleiht es der Seite ein absolut einmaliges Gefühl und wirkt sehr dynamisch.

Scrolljacking

Obwohl Scrolljacking ziemlich gemischte Reaktionen erhalten hat, hat es sich allmählich durchgesetzt. In der Tat  gibt es HTML5-Vorlagen wie Flappster für Produktdemos, die Scrolljacking enthalten. Beim Scrolljacking reagiert der Inhalt der Website auf die Scrollbewegung des Nutzers und dadurch bewegen oder ändern sich bestimmte Website-Elemente. Also wenn ihr diese Vorlagen verwendet, stellt bitte sicher, dass ihr jedes Element gründlich getestet habt, bevor ihr Scrolljacking in eurem Projekt implementiert.

Reduzierung von Seitenhöhe

Dies ist eher eine Hoffnung als eine Vorhersage. Manchmal führt ein endloses Scrollen zu einer lausigen Benutzererfahrung und das geht zu weit. Man soll damit auf jeden Fall nicht übertreiben, damit alles schön schnell auf eurer Webseite erreicht werden kann.

Usability

Datengesteuerte Designentscheidungen

Web-Design ist ein profitables Geschäft, nicht war? Aber wie viele von euch nutzt verschiedene Daten wie Click-Through-Raten, Conversion, Kanäle, Messdaten, in kurzen, Analytik? Wenn ihr Freiberufler seid, könnt ihr entweder selbst den Zugriff zu verschiedenen Intelligence-Tools schaffen oder euch an ein Unternehmen wenden, wie z.B. Apropose, die diese Daten Designern zugänglich machen.

Responsives Design

Responsives Design sieht immer weniger wie ein Trend aus und ist dank der verstärkten Nutzung des mobilen Internets zu einer unabdingaben Voraussetzung geworden. Das adaptive Design stellt eine relativ einfache und kostengünstige Möglichkeit dar, um eine voll funktionsfähige und mobile-optimierte Website erstellen zu können.

Die Verbreitung von UI-Mustern

Modernes Web ist voll von ähnlichnen Websites, was nicht unbedingt eine schlechte Sache sein soll. Es gibt keinen wirklichen Grund, das Rad neu zu erfinden. Denn UI-Muster bieten den Benutzern eine reibungslose Erfahrung. Und obwohl es hier ab und zu Kritik hagelt, besteht keinen Zweifel daran, dass sie auch im Jahre 2016 weiter benutzt werden.

Formulare und Inhalte in Vollbild-Darstellung

Dieser Trend kam mit verbreiteter Nutzung von ansprechendem Website-Design. Dies geschah aus mehreren Gründen: es stellt mehr Platz auf Touch-Screens zur Verfügung und ermutigt Anwender dazu, das Formular auszufüllen. Ein gutes Beispiel hierfür ist dieses Kontaktformular von Eighty Ostens.

Passive aggressive Popups

Die Intention von Popups wird wahrscheinlich nie aus der Mode kommen: denn es darum geht, den Besucher der Webseite unbedingt auf etwas hinzuweisen und oder ihn zu einer Aktion zu bewegen. Allerdings ähneln sie sich mehr einem bösen Clown, der aus der Kiste heraushüpft und kommen vielen Nutzern ziemlich nervig vor, besonders wenn man gerade auf einem mobilen Gerät surft und die ganze Seite oder Teile des Inhalts bedeckt werden. Das veranlasst doch mehr zum Verlassen der Seite, aber wie dem auch sei, der Trend bleibt!

Live-Produktvorschau

Ein weiterer wichtiger Trend, den wir bemerkt haben, ist das Hinzufügen von Produktvorschau auf Homepages oder Landing Pages. Sie ermöglichen es, Produkte in Aktion zu sehen und geben den Einblick in die Funktionsweise des Artikels. Werft einen Blick auf das folgende Beispiel von Slack Site! 

Automatisierte Aufgaben

Maschinen machen keine Fehler, so dass ihr mit Zuversicht die alten Aufgaben erledigen und mehr Zeit für neue Aufgaben haben könnt.  Mit folgenden Ressourcen könnt ihr eure Vorgänge automatisieren lassen.

Verstärkter Fokus auf UX Design

Ladevorgang

Animationen hochladen

Das Hochladen von Animationen machte ein seltsames Comeback. Wir dachten, dass es damit ab Mitte 2000er Schluß gemacht wurde. Doch überraschend ist das Laden von Animationen oder Symbolen wieder zurück. Ihr Ziel ist einfach, - den Besucher zu unterhalten, während die Seite geladen wird.

Lazy Loading

Diese Funktion ist besonders hilfreich für Websites, die sehr visuell sind, wie Facebook, Instagram oder Pinterest. In einer Gesellschaft, in der wir mit Informationen ständig abgespeist werden, hilft verzögertes Laden das Betrachten der Inhalte zu vereinfachen dadurch, dass sie stückweise nach und nach dargestellt werden.

Designer-Toolkit

Sketch App für UI-Design

Sketch App ist eine speziell für die Web-Designer erstellte Anwendung (nur für Mac). Es ist die Arbeitsumgebung, mit der ihr die Vektorelemente in jeder Schnittstelle einbetten könnt und sie besitzt viele ähnliche Photoshop-Funktionen wie Texteffekte und Ebenenstile. Wenn Sketch App weiterhin die beste UI Erfahrung bietet, wird ihre Popularität  auch im Jahr 2016 steigern.

Kollaborationstools für Designer

Dieser sich neu abzeichnende Trend bietet die Möglichkeit, Live-Design-Dokumente innerhalb von Chat-Anwendungen zu teilen. Bemerkenswert ist dieses Beispiel darunter, in dem Anmerkungen und Kommentare ein Dokument komplett überdecken. Dies schenkt Designern eine saubere Möglichkeit, ihre Arbeit mit allen Teammitgliedern teilen zu können.

Paketmanager

Digitale Paket-Manager haben so schnell an Popularität gewonnen, dass sie für Entwickler von modernen Websites nahezu obligatorisch geworden sind. Lösungen wie Bower und NPM können eine Menge Zeit sparen. Sie erfordern einige Kenntnisse der Terminal-Befehle, aber sobald ihr euch an den Prozess gewöhnt habt, werdet ihr nie wieder darauf verzichten wollen. Also wenn es eine Sache gibt, die jeder Frontend (oder Backend) Entwickler wissen sollte, dann ist es ein Paketmanager.

Codierung

Touch-unterstützte Website Funktionen

Smartphone-Browser haben immer Touch-Funktionen für alle Websites unterstützt. Und es werden immer mehr Plugins und benutzerdefinierte Funktionen auf Webseiten implementiert. Wenn man sich so umguckt, findet man einige wirklich beeindruckende Features im Netz, die ausschließlich auf Touch-Ereignissen basieren.

Zunahme an Web-Komponenten

Web Komponenten sind dazu da, um komplexe Probleme für Entwickler zu lösen. Die WebComponents Website (http://webcomponents.org/) bietet großartige Ressourcen und Materialien und stellt den Entwicklern eine hochwertige Starthilfe zur Verfügung.

CSS Formen

CSS Formen ermöglichen es, einem Designer die Form des Layouts zu transformieren. Das Ergebnis sieht wirklich cool aus, aber bisher wurde es nicht von allen Browsern unterstützt.

Kostenlose Sass / SCSS Mixins

Einfache Mixins sind wie Code-Schnipsel oder Grundfunktionen, um wiederholbaren Code in CSS zu generieren. Während ihr euren eigenen Code schreibt, gibt es viele Entwickler, die kostenlose Online-Mixins sogar kostenlos ins Netz stellen. Einige Mixins kommen in Bibliotheken wie Bourbon während andere einzelne Produkte sind. Ihr könnt z.B. eine Suche in GitHub für Sass / SCSS Mixins veranlassen, um zu sehen, was ihr da so findet.

Serverseitige Anwendung

Hier geht es um ein Computerprogramm, das auf einem Server ausgeführt wird, während die Ein- und Ausgabe vom/an den Benutzer über dezentrale Computer erfolgt. Darunter ist Node.js sehr bekannt geworden. Es ermöglicht Entwicklern, Webseiten mit einer einzigen Sprache für sowohl Frontend als auch Backend-Code zu erstellen. Ob ihr Node zu lernen plant oder nicht, besteht kein Zweifel daran, dass es zu einem wichtigen Trend im Jahr 2016 weiterwachsen wird.

Natürliche gegen JS Mobile Apps

Wenn man mobile Apps entwickelt, braucht man Java für Android und Objective-C/Swift für iOS. Allerdings nicht jeder möchte eine neue Sprache lernen, um eine mobile App zu bauen. Zum Glück gibt es alternative Bibliotheken wie NativeScript oder React Native, um natürliche Anwendungen zu kreieren. Via JavaScript wird die Erstellung von Apps noch einfacher. PhoneGap ist eine weitere Option, basierend auf HTML / CSS / JS-Code. Auf diese Weise ist JS eine gute Lösung für Programmierer, die mobile Anwendungen bauen können, ohne eine neue Sprache lernen zu müssen.

Designer und Codierung

Die Diskussion darüber, ob Designer unbedingt Codierung lernen müssen, steht immer noch im Raum. Was hält eigentlich ihr davon? Unsere Meinung dazu besteht darin, dass jeder das tun sollte, was es möchte, ganz klar.

Online-Lernressourcen

Kostenlose Online-Tools und Webapps

Wisst ihr noch, wie viele Aufgaben wir früher ausschließlich auf dem Desktop unserer Computer erledigt haben? Heutzutage ist alles komplett anders. Unter vielfältigen Anwendungen, die zum Teil gratis angeboten werden, kann man mittlerweile alles finden: von URL-Codierung/Decodierung bis zu einem völlig kostenlosen Markdown-Editor.

Mobile apps design

Da mobile Apps und Social Media so dominant geworden sind, kommt der größte Teil von Internet-Traffic von Mobiltelefonen. Die Erstellung von Inhalten in mobilen Anwendungen ist aus diesem Grund ziemlich relevant. Beim Surfen am Telefon wird nur 14% der Zeit in Browsern verbracht, während der Rest (86%) - in mobilen Apps.

Ein futuristisches 2016

Wir denken, dass heutzutage alles zur Verbesserung von UX mit Wearables, erweiterter und virtueller Realität führt. Miniaturisierte Chips und Computer können in so genannten Wearables direkt am Körper getragen oder in die Kleidung integriert werden. Wer weiß, wie euer Monitor/TV-Gerät in der nahen Zukunft ausschaut...

Tragbare Geräte

Wave ist das Beispiel für Geräte, die bald uns alle erwarten. Früher oder später geht es los mit der Entwicklung von solchen Monsters.

Erweiterte Realität

Geräte und Lösungen für die Wahrnehmung von erweiterter Realität werden immer fortgeschrittener und verbraucherfreundlicher.

HoloLens von Microsoft

Zukünftiges Produkt von Facebook

Künstliche Intelligenz

Künstliche Intelligenz wird sichtbar das Web auf unseren Kommunikationsplattformen durchdringen. Designer werden sie mit menschlichen Eigenschaften ausstatten. Die Website wird sich automatisch an den jeweiligen Benutzer oder Betrachter einstellen. Und das ist nur der Anfang! So viele spannende Sachen kommen auf uns noch zu!

Und wie steht ihr zu diesen Trends? Gibt es ein Trend darunter, das eure Herzen höher schlagen lässt?

Quellen: