⛷️ 🍕 🙍🏽 Die hellsten Webdesign-Trends im Jahr 2016 🦄 🖖🏿 🛥️

Die Welt des Webdesigns ist hell und vielfältig. Hier kommt es nicht jedes Jahr zu großen Veränderungen. Dies wird durch das schnelle technologische Wachstum bestätigt, das in den letzten Jahren gezeigt hat, dass sich wichtige Trends im Webdesign in naher Zukunft auf die Verbesserung bestehender Entwicklungen konzentrieren werden.

Flaches Design wird strukturierter, „Kinoerlebnisse“ werden häufiger und die Verwendung von JavaScript-Bibliotheken wird mehr Experimente ermöglichen. Wir sind zuversichtlich, dass die wachsende Beliebtheit von WebGL und virtueller Realität es uns ermöglichen wird, bekannte Websites in etwas Neues mit interessanten interaktiven Funktionen umzuwandeln.

In diesem Artikel werden wir uns die 11 größten erwarteten Webdesign-Trends in diesem Jahr ansehen. Also mach es dir bequem und fang an zu lesen!

1. WebGL (Web Graphics Library)

Zu den neuesten Errungenschaften gehört die bemerkenswerte Technologie WebGL (Web Graphics Library). Sie benutzt viele erstaunliche Seiten, die kürzlich erschienen sind.

Mit WebGL können Sie auf einfache Weise interaktive 3D- und 2D-Grafiken in hardwarebeschleunigten Browsern ohne Plugins rendern.

1.1 WebGL Interactive 3D-Anwendung

Experience Curiosity (NASA)

WebGL war eines der zentralen Themen der SIGGRAPH- Konferenz 2015 . Sie können die Präsentation auf 3D-Grafiken und WebGL auf diesem YouTube-Kanal ansehen .

In dem anderthalbstündigen Video erfahren Sie mehr über die Webanwendung „ Experience Curiosity “ der NASA , deren Erstellung den dritten Jahrestag der Landung des Rovers „Curiosity“ auf dem Mars kennzeichnete. Mit der Anwendung können Benutzer den dreidimensionalen NASA-Rover auf der Marsoberfläche „rollen“ und den Manipulatorarm „steuern“.

Zum Erstellen dieser Ressource wurden Blend4Web (ein Framework zum Erstellen browserbasierter 3D-Anwendungen) und Blender (ein Paket für dreidimensionale Modellierung und Animation) verwendet.

Beloola-Website verwendet three.js (JavaScript-Bibliothek)

Beloola ist das erste soziale Netzwerk, das in Form einer dreidimensionalen Welt entwickelt wurde. Es ähnelt Linden Lab in Second Life, erfordert jedoch keine spezielle Software außer dem Browser selbst.

1.2 3D "Video" WEBGL

Angry Wife (Disp. Madeo)

Eine andere Art von 3D in WebGL ist die Angry Wife- Spielewerbung . Auf den ersten Blick sieht es aus wie ein normales Video, ist es aber überhaupt nicht. Tatsächlich verwendet die in die Webseite integrierte 3D-Szene die JavaScript-Bibliothek von three.js .

SBS TVs "The Boat" -Projekt (Australien) Das

australische SSB TV hat die Geschichte des vietnamesischen Schriftstellers Nam Le "The Boat" überarbeitet und mithilfe von WebGL in eine interaktive Videogeschichte verwandelt . Die Anwendung besteht aus mehreren Teilen mit hervorragender Animation und manuell gemalten Illustrationen. Wie im vorherigen Beispiel wird auch hier Three.js verwendet .

Weil Erinnerung

in der AnwendungDenn Erinnerung die Idee, eine Art Zeitmaschine zu schaffen, aber nur in Bezug auf Musik. Eine große Anzahl von Soundeffekten hängt eng mit dem Geschehen auf dem Bildschirm zusammen und hängt von den Aktionen des Benutzers ab. Das Projekt wird mit PIXI in Form einer kompilierten Reihe von Clips erstellt, die von verschiedenen interaktiven Elementen aktiviert werden.

1.3 Datenvisualisierung mit WebGL

Histografie (Matan Stauber) Die

Histografie zeigt historische Ereignisse aus Wikipedia auf einer interaktiven Zeitachse (Anmerkung des Übersetzers. Zum Ausführen ist ein Chrome-Browser erforderlich) . Es scheint wahrscheinlich nicht sehr interessant zu sein, aber probieren Sie es selbst aus und Sie werden überrascht sein, wie eine so große Datenmenge in ein einfaches und reaktionsschnelles Tool umgewandelt werden kann.

"Das Museum der Welt" (entwickelt vom British Museum und Google)

Eine ähnliche Idee wurde für die Sammlung des British Museum auf etwas andere Weise umgesetzt. Das Projekt „ Das Museum der Welt “ ist das Ergebnis einer Partnerschaft zwischen dem British Museum und dem Google Institute of Culture. Historische Objekte aus der Sammlung des Museums werden auf einer mit WebGL in 3D erstellten „Zeitleiste“ gezeigt.

Mit der X-Achse können Sie sich zeitlich entlang der Z- oder Y-Achse und der Kontinente vorwärts und rückwärts bewegen. Über das Menü können Sie Tags für Objekte auswählen, die nach Schlüsselthemen (Handel, Konflikt usw.) gruppiert sind.

1.4 2D-Animation basierend auf WebGL

Nouvelles-Ecritures von FranceTV

Das Projekt „ Nouvelles Ecritures “ (ca. Übersetzer. „Modern Scrolls“) des französischen Fernsehsenders FranceTV ist eine Website mit einer sehr interessanten Implementierung der WebGL 2D-Animation in einem Browser. Das Gefühl, dass Sie eine reich bebilderte Schriftrolle lesen, die reibungslos vertikal rollt. Das Projekt wurde mit der JavaScript-Bibliothek Pixi.js implementiert .

Aus technischer Sicht handelt es sich um eine kontinuierliche zweidimensionale Animation, die im Pseudo-3D-Raum ausgeführt wird. Es sieht sehr beeindruckend aus!

2. VR (Virtual Reality)

Virtual Reality (VR) ist eine verwandte Technologie, die die Welt der Gadgets im Jahr 2016 erschüttern kann. Vielleicht wird sehr bald alles viel interessanter.

Haben Sie von Google Cardboard gehört ? Mit einem Android-Handy und einem Stück Pappe können Sie zu Hause ein Gefühl für die virtuelle Realität bekommen. Google hat der provisorischen Brille eine spezielle Android-Anwendung hinzugefügt - Cardboard Camera , mit der Sie virtuelle Fotos anzeigen können. Diese App war laut The Guardian im Januar 2016 eine der besten.

Wenn Sie jedoch eine bessere „virtuelle Realität“ wünschen, können Sie die Rift VR- Suite vorbestellenvon Oculus (ungefähr $ 600). Es gibt eine Kreuzung zwischen Google Cardboard und Oculus - es ist Samsungs
VR GEAR (100 US-Dollar).
Macht es einen Unterschied zum Webdesign? Noch nicht, aber werfen Sie einen Blick auf WebVR (die JavaScript-API, die den Zugriff auf VR-Geräte ermöglicht) und einige Projekte, die diese Technologie verwenden. Arbeitsbeispiele finden Sie auf der Mozilla VR- Website . Die Entwickler selbst sagen Folgendes: „Wir möchten ein offenes, leistungsstarkes Virtual-Reality-System für Websites erstellen.“

2.1 VR-Video

Catch the Dragon von Peugeot Die

Peugeot 208-Aktion ist ein großartiges Beispiel dafür, wie VR-Geräte mit Videos interagieren. Beim Start wird vorgeschlagen, die gewünschte Anzeigeoption auszuwählen: VR (für Google Cardboard) oder 360-Panorama-Video. Beide Versionen sind vollständig interaktiv. Wenn Sie ein Gerät mit einem Gyroskop verwenden, müssen Sie Ihren Kopf aktiv drehen, um „den Drachen zu fangen“.

3. Partikelsysteme

Deutser-Partikelsysteme

in dreidimensionalen Grafiken wurden seit den 80er Jahren verwendet, um einige natürliche Phänomene wie Nebel, Rauch, Feuer, Wasser, Gras und Wolken zu emulieren. Mit dem Aufkommen von WebGL ist es nun für Browser verfügbar.

Ein interessantes Beispiel für die Verwendung von Partikeln ist die Deutser-Webseite . Beobachten Sie, wie die Elemente auseinander fliegen und in Form von Figuren und Symbolen zurückkehren und auf Mausbewegungen reagieren. Das Ergebnis ist wirklich faszinierend.

4. Panoramablick

Regenwald von Regnskogfondet

Regenwald ist nicht nur ein Panoramabild. Mit jedem Schritt tauchen Sie mit einer vollständigen 360-Grad-Ansicht immer weiter in den Dschungel ein.

Hier hochwertige dreidimensionale Szenerie, Vollbildpanoramen. Viel interessanter erscheint jedoch die Integration von Navigationselementen in die Struktur der „Welt“.

5. Vollbildvideo mit interaktiven Szenen und Elementen

Milkas Christmas Express (Christmas Express) verwendet eine Reihe von Video-Episoden, die durch interaktive Szenen getrennt sind.

Website Weihnachten Express betreibt auch eine Vollbild - Video Idee, aber wie ich es verstehe, gibt es nichts mit WebGL zu tun.

Sie werden die Schritte zum Erstellen eines Weihnachtsbriefs durchlaufen. 10 Minuten für das Schreiben einer Nachricht und ein Tag für die Zustellung. Alles sieht sehr real aus, die Details sind perfekt und selbst die Animation des Stifts folgt genau den Buchstabenmustern. Weihnachtsstimmung ist gegeben!

6. Animationsgeschichten

Die Verbreitung von Ideen durch animierte Nacherzählung ist nicht neu. Dennoch gibt es einen Trend, der sich im Laufe der Zeit ständig weiterentwickelt. Interessanterweise beziehen sich die Transformationen nicht nur auf die visuellen oder technischen Aspekte.

Eine gute Animationsgeschichte zu erstellen, reicht nicht aus, um ein Design zu entwickeln und einen Darsteller zu finden. Es erfordert Mut, Unternehmensstereotype und Einschränkungen von Copyright-Inhabern zu überwinden. Das Ergebnis wird ungewöhnlich aussehen, aber Websites, die diese Technik verwenden, werden in der Welt der Unternehmenswebseiten deutlich hervorstechen.

Jahresbericht von Danish Crown (Europas größter Schweinefleischproduzent)

JahresberichtIm vergangenen Jahr waren dies nicht die langweiligen Diagramme und Tabellen des europäischen Lebensmittelherstellers Danish Crown, an die jeder gewöhnt ist. Die Berichtsseite spricht ihre Investoren in einer einfachen und kühnen visuellen Sprache an, die aktiv abstrakten Humor und lustige Illustrationen verwendet. Der Stil des Textes ist auch in einfachen und lebendigen Ausdrücken gestaltet.

Und hier ist, was die Vertreter des Unternehmens sagen: "Es sieht nicht abstrus aus. Drückt nicht die Ansicht einer Person aus, vermittelt nicht die Aufgabe, ist nicht mit Begriffen übersät. Dies hat nichts mit den durchschnittlichen Grundwerten zu tun - Respekt und Initiative. Aus diesem Grund machen wir das. Wir zeigen Respekt und Initiative. “

Die einfachste Entscheidung der Welt

Diese Art von Geschichte ist auf den Webseiten von NGO-Organisationen häufiger anzutreffen. Also die Website des Climate Reality Project “Die einfachste Entscheidung der Welt “ist ein interaktiver Comic zum Klimawandel. Der Besucher beantwortet einfache Fragen und abhängig von seinen Antworten wird ein Film gezeigt oder es wird vorgeschlagen, eine Petition zu unterschreiben.

Dieses Beispiel zeigt perfekt, wie gut flaches Design mit Texturen kombiniert wird.

7. Lineare Navigation

Vor einigen Jahren haben Designer und Entwickler alles getan, um eine lineare Navigation zu vermeiden. Das Hauptaugenmerk lag auf der Bequemlichkeit des Menüs und der Einfachheit, durch die Seiten der Ressource zu blättern.

Jetzt ist es unmöglich sich vorzustellen, dass das Scrollen auf der Site einmal als etwas erfolgloses angesehen wurde (ja, das war es). Obwohl Sie von einigen Entwicklern, Kunden oder Designern immer noch etwas über das mythische „Über der Falte“ hören können (Hinweisübersetzer. „Über der Falte“ ist der Teil der Seite, der für den Benutzer ohne Scrollen sichtbar ist) .

In diesem Artikel werden die besten Visitenkarten-Websites des Jahres nicht hervorgehoben. Versuchen wir einfach, einige neue und interessante Möglichkeiten zu finden, mit denen Designer eine lineare Navigation auf Websites erstellen können.

Portfolio-Video von der Julien Belmonte

Filmmaker-WebsiteJulien Belmonte enthält alle seine Filme, und die Navigation auf ihnen erfolgt auf sehr erfolgreiche Weise. Filme bewegen sich horizontal von links nach rechts und werden nacheinander hervorgehoben. In diesem Fall wird eine sich bewegende rote Linie verwendet, die einer temporären Markierung ähnelt.

Es gibt fast keine andere Navigation. Es sei denn, im Abschnitt "Über", in dem der Text wie der Abspann eines Films aussieht.

Francesco Bertelli Online-CSV

Francesco Bertelli hat einen innovativen Ansatz für ihre Online-CSV entwickelt. Der verwendete interaktive Kalender sieht ästhetisch ansprechend aus und ist ein wirksames Instrument, um das eigene berufliche Wachstum zu demonstrieren.

Über die Benutzeroberfläche können Sie schnell und einfach navigieren und die bereits erkundeten Daten hilfreich streichen. Wenn Sie das gewünschte Element auswählen, wird der Bildschirm mit Informationen für den gesamten Browser geöffnet. Dieser Ansatz lenkt die Aufmerksamkeit des Site-Besuchers nur auf das Thema, das er benötigt.

8. Seitennavigation

Diese Art der Navigation wird seit langem verwendet. Im vorhergehenden Artikel " Trends 2013 " site Bagiga war ein Beispiel für eine solche Art von Navigation: "Bildschirm-after-Bildschirm" oder " für LEO previous / next ".
Wenn wir gewöhnliche Bücher lesen, blättern wir Seite für Seite und einige Designer versuchen, diese Gewohnheit zu nutzen.

Hersteller von Meister

Hersteller Schmuck Imperiali Geneve verwendet einen ähnlichen Ansatz, sowie Francesco Bertelli, wenn die Aufmerksamkeit des Benutzers auf jedem Bildschirm fokussiert wird, die ihre eigene Geschichte erzählt. Die Seite ist linear, aber ohne freies Scrollen. Sie wechseln ohne Zwischenhändler von Bildschirm zu Bildschirm.

Es verwendet die Foliennavigation mit Oberflächenelementen für den Anfang und das Ende jedes Bildschirms. All dies ähnelt eher Übergängen zwischen Filmszenen als dem Scrollen durch eine Visitenkarten-Site.

Van Gogh Museum in Amsterdam Eine

ähnliche Art der Navigation wird auf dem Gelände des Van Gogh Museums in Amsterdam verwendet. Die Seitenzahl und ihre Anzahl, Pfeile in Kombination mit Folienübergängen zwischen Bildschirmen - ein vollständiges Gefühl, dass Sie ein traditionelles Buch lesen.

Designer bemühen sich, unseren üblichen Lösungen, die traditionelle Informationsquellen verwenden, näher zu kommen. Was ist Webdesign in der Zukunft? Der Rahmen um die Seite ist also ein alter Trick, der dennoch häufig verwendet wird.

9. Gerahmte Seite

Studien haben gezeigt, dass dieser Trend immer beliebter wird, als wir zu Beginn dachten. Ähnliche Ideen im Webdesign haben sich schon lange entwickelt, aber sie wurden noch nie mit so viel Geschmack und Anmut umgesetzt.

Ginger Bread Branch von der PNC Financial Services Group, Inc.

Die Website ist dem ersten großen Glas gewidmet, das aus echten Lebkuchen hergestellt wird. Es ist auch als Leitfaden für den Wirtschaftsunterricht interessant. In dieser Ressource wird nicht nur der Frame im Browserfenster verwendet, sondern auch die Seitennavigation.

wloks

Website Wloks bietet grafische Asset - schicke und einzigartige Weise. Anstelle der üblichen elektronischen Schnittstelle für Fotos verwendet diese Website einen interessanten Stil gedruckter Kataloge und gefälschter Wandbilder., mit einem Rahmen und einem Menü von Elementen in den Ecken des Bildschirms.

Beer 34 Die Bierhersteller

von Beer 34 fanden ihre einzigartige Lösung zur Steuerung des Bildschirms in verschiedenen Auflösungen, wobei sie sich von Infografiken und der Geschichte inspirieren ließen. Gleichzeitig bleibt das Aussehen des alten Etiketts erhalten. Alles ist ganz einfach gemacht und dies ist das charmanteste Beispiel in diesem Set.

10. CSS-Konvertierung kennenlernen

Stand4humanrights

Stand4HumanRights lädt Sie ein, der Community beizutreten, indem Sie Ihr Foto einer sozialen Wand hinzufügen, die wie eine riesige, gekrümmte Oberfläche aussieht. Dann können Sie in sozialen Netzwerken posten. Die „soziale Wand“ kann gezogen werden und basiert auf der CSS-Transformation. Es sieht interessant aus, erfordert jedoch viel Rechenleistung und ist nicht so empfindlich wie erwartet.

Species In Pieces

Species In Pieces verwendet CSS-Animationen für seine interaktive Ausstellung, in der 30 gefährdete Arten aus der ganzen Welt erkundet werden können. Tiermodelle bestehen aus separaten Teilen, die sich beim Übergang von einem Objekt zum anderen summieren(Hinweis Übersetzer. Zum Arbeiten ist ein Chrome-Browser erforderlich .)

11. SVG-Animation

holohalo

Es scheint tatsächlich seltsam, dass es so wenige Seiten gibt, die die klassische SVG-Technologie (Scalable Vector Graphics) verwenden, um etwas Interessanteres als skalierbare Symbole für verschiedene Auflösungen anzuzeigen. Holo Halo ist eine Ausnahme von der Regel und kann als Inspirationsquelle für Designer dienen und zeigen, was mit SVG möglich ist.

Zusammenfassung

Ohne Zweifel ist der führende Trend im Bereich Webdesign im Jahr 2016 WebGL in all seinen Erscheinungsformen: interaktives Video, Spiele, Animation und Datenvisualisierung. Die virtuelle Realität wird voraussichtlich eine große Zukunft haben, hängt jedoch stark von der Verfügbarkeit von VR-Geräten ab.

Ein weiterer häufiger Trend ist die Betonung von Standardmedien. Dies gilt für handgemalte, gebeizte und gescannte Elemente wie The Boat Project. Die Tendenz, Webseiten zu erstellen, die gedruckten Büchern, Zeitschriften, Aufklebern, Postern und Comics ähneln, ist ebenfalls sichtbar. Dies wird durch seitenweise Navigation, die Verwendung von Frames und den Versuch erreicht, den Monitorbildschirm als "Seite" und nicht als bekanntes "Fenster" anzuzeigen.

Und wenn Sie es schaffen, diesen großen Artikel zu meistern, erhalten Sie einen kleinen Bonus - fahren Sie auf Delahaye 165 :

Website timeshift165

Die hellsten Webdesign-Trends im Jahr 2016