👩🏾‍🔬 🛀🏽 ⚱️ Les tendances de conception de sites Web les plus brillantes en 2016 🐊 😺 ⬜️

Le monde de la conception Web est brillant et diversifié. De grands changements ne se produisent pas ici chaque année. Ceci est également confirmé par la croissance rapide de la technologie, qui au cours des dernières années a montré que les tendances importantes dans la conception Web du futur proche se concentreront sur l'amélioration des développements existants.

Le design plat deviendra plus texturé, les expériences cinématographiques seront plus courantes et l'utilisation de bibliothèques JavaScript permettra plus d'expérimentation. Nous sommes convaincus que la popularité croissante de WebGL et de la réalité virtuelle nous permettra de transformer des sites Web que nous connaissons en quelque chose de nouveau avec des fonctionnalités interactives intéressantes.

Dans cet article, nous examinerons les 11 plus grandes tendances attendues en matière de conception Web cette année. Alors installez-vous confortablement et commencez à lire!

1. WebGL (Bibliothèque graphique Web)

Parmi les dernières réalisations figure la technologie notable WebGL (Web Graphics Library). Elle utilise de nombreux sites incroyables qui sont apparus récemment.

D'une manière simple, WebGL est un moyen de rendre des graphiques 3D et 2D interactifs dans des navigateurs à accélération matérielle sans aucun plugin.

1.1 Application 3D interactive WebGL

Experience Curiosity (NASA)

WebGL était l'un des sujets centraux de la conférence SIGGRAPH 2015 . Vous pouvez regarder la présentation sur les graphiques 3D et WebGL sur cette chaîne YouTube.

À partir de la vidéo d'une heure et demie, vous découvrirez l'application Web " Experience Curiosity " de la NASA , dont la création a marqué le troisième anniversaire de l'atterrissage du rover "Curiosity" sur Mars. L'application permet aux utilisateurs de «faire rouler» le rover en trois dimensions de la NASA sur la surface de Mars et de «contrôler» le bras manipulateur.

Pour créer cette ressource, Blend4Web (un cadre de création d'applications 3D basées sur un navigateur) et Blender (un package pour la modélisation et l'animation en trois dimensions) ont été utilisés.

Le site Web de Beloola utilise three.js (bibliothèque JavaScript)

Beloola est le premier réseau social conçu sous la forme d'un monde en trois dimensions. Il ressemble à Linden Lab dans Second Life, mais ne nécessite aucun logiciel spécial autre que le navigateur lui-même.

1.2 WEBGL «Vidéo» 3D

Angry Wife (Disp. Madeo)

Un autre type de 3D dans WebGL est la promotion du jeu Angry Wife . À première vue, cela ressemble à une vidéo ordinaire, mais ce n'est pas du tout le cas. En fait, la scène 3D intégrée à la page Web utilise la bibliothèque JavaScript three.js .

Projet "The Boat" de SBS TV (Australie)

Australian SSB TV a retravaillé l'histoire de l'écrivain vietnamien Nam Le "The Boat" et l'a transformée en une histoire vidéo interactive en utilisant WebGL. L'application se compose de plusieurs parties avec une excellente animation et des illustrations peintes à la main. Three.js est également utilisé ici , comme dans l'exemple précédent.

Parce que la récupération

dans l'applicationParce que Recollection l'idée de créer une sorte de machine à remonter le temps, mais uniquement par rapport à la musique. Un grand nombre d'effets sonores sont étroitement liés à ce qui se passe à l'écran et dépendent des actions de l'utilisateur. Le projet est réalisé à l'aide de PIXI sous la forme d'une série de clips compilés qui sont activés par divers éléments interactifs.

1.3 Visualisation des données avec WebGL

Histographie (Matan Stauber) L'

histographie montre les événements historiques de Wikipedia sur une chronologie interactive (note du traducteur. Un navigateur Chrome est requis pour fonctionner) . Cela ne semble probablement pas très intéressant, mais essayez-le vous-même et vous pourriez être surpris de voir comment une telle masse de données peut être transformée en un outil simple et réactif.

«The Museum of The World» (développé par le British Museum et Google)

Une idée similaire a été mise en œuvre d'une manière légèrement différente pour la collection du British Museum. Le projet « The Museum of The World » est le résultat d'un partenariat entre le British Museum et le Google Institute of Culture. Les objets historiques de la collection du musée sont présentés sur une «chronologie» réalisée en 3D à l'aide de WebGL.

Vous pouvez avancer et reculer dans le temps le long des axes Z ou Y et des continents à l'aide de l'axe X. À l'aide du menu, vous pouvez sélectionner des balises pour les objets qui sont regroupés par thèmes clés (commerce, conflit, etc.).

1.4 Animation 2D basée sur WebGL

Nouvelles-Ecritures de FranceTV

Le projet « Nouvelles Ecritures » (environ Traducteur. «Parchemins modernes») de la chaîne de télévision française FranceTV est un site avec une implémentation très intéressante de l'animation WebGL 2D dans un navigateur. L'impression que vous lisez un parchemin richement illustré qui défile en douceur verticalement. Le projet a été mis en œuvre avec l'aide de JavaScript de Pixi.js .

D'un point de vue technique, c'est une animation bidimensionnelle continue qui s'exécute dans un espace pseudo 3D. Ça a l'air très impressionnant!

2. VR (réalité virtuelle)

La réalité virtuelle (VR) est une technologie connexe qui peut secouer le monde des gadgets en 2016. Peut-être que très bientôt tout deviendra beaucoup plus intéressant.

Avez-vous entendu parler de Google Cardboard ? Avec un téléphone Android et un morceau de carton, vous pouvez vous faire une idée de la réalité virtuelle à la maison. Google a ajouté aux lunettes de fortune une application Android spéciale - Cardboard Camera , qui vous permet de visualiser des photos virtuelles. Cette application était l'une des meilleures selon The Guardian en janvier 2016.

Cependant, si vous voulez une meilleure «réalité virtuelle», vous pouvez précommander la suite Rift VRd'Oculus (environ 600 $). Il y a un croisement entre Google Cardboard et Oculus - c'est le
VR GEAR de Samsung (100 $).
Cela fait-il une différence dans la conception Web? Pas encore, mais jetez un œil à WebVR (l'API JavaScript qui donne accès aux appareils VR) et à certains projets qui utilisent cette technologie. Des exemples de travail peuvent être trouvés sur le site Web de Mozilla VR . Voici ce que disent les développeurs eux-mêmes: «Nous voulons créer un système de réalité virtuelle ouvert et hautes performances pour les sites.»

2.1 Vidéo VR

Catch the Dragon («Catch the Dragon») par Peugeot La

promo Peugeot 208 est un excellent exemple de l'interaction des dispositifs de réalité virtuelle et de la vidéo. Au démarrage, il est proposé de sélectionner l'option de visualisation souhaitée: VR (pour Google Cardboard) ou vidéo panoramique 360. Les deux versions sont entièrement interactives. Si vous utilisez un appareil avec un gyroscope, vous devrez tourner activement la tête pour «attraper le dragon».

3. Systèmes de particules

Les

systèmes de particules de Deutser dans les graphiques en trois dimensions ont commencé à être utilisés depuis les années 80 pour émuler certains phénomènes naturels, tels que le brouillard, la fumée, le feu, l'eau, l'herbe et les nuages. Maintenant, avec l'avènement de WebGL, il est devenu disponible pour les navigateurs.

Un exemple intéressant d'utilisation des particules est la page Web de Deutser . Regardez comment les éléments se séparent et reviennent sous forme de chiffres et de symboles, répondant aux mouvements de la souris. Le résultat est vraiment fascinant.

4. Vues panoramiques

Rainforest (Rainforest) par Regnskogfondet

Rainforest n'est pas seulement une image panoramique. À chaque étape, vous êtes de plus en plus immergé dans la jungle avec une vue à 360 degrés.

Ici, des décors en trois dimensions de haute qualité, des panoramas plein écran. Cependant, l'intégration des éléments de navigation dans la structure du «monde» semble beaucoup plus intéressante.

5. Vidéo plein écran avec des scènes et des éléments interactifs

Le Christmas Express de Milka (Christmas Express) utilise un ensemble d'épisodes vidéo séparés par des scènes interactives.

Le site Web de Christmas Express exploite également l'idée de la vidéo en plein écran, mais si je comprends bien, il n'y a rien à voir avec WebGL.

Vous passerez par les étapes de création d'une lettre de Noël. 10 minutes pour rédiger un message et un jour pour la livraison. Tout semble très réel, les détails sont parfaits et même l'animation du stylo suit exactement les motifs des lettres. L'ambiance de Noël est de mise!

6. Histoires d'animation

Diffuser des idées à travers des récits animés n'est pas nouveau. Mais il y a toujours une tendance qui évolue constamment avec le temps. Fait intéressant, les transformations ne sont pas uniquement liées aux aspects visuels ou techniques.

Pour créer une bonne histoire animée, il ne suffit pas de développer un design et de trouver un artiste. Il faut du courage pour surmonter les stéréotypes d'entreprise et les limites des titulaires de droits d'auteur. Le résultat sera inhabituel, mais les sites utilisant cette technique se démarqueront clairement dans le monde des pages Web d'entreprise.

Rapport annuel de Danish Crown (le plus grand producteur de porc d'Europe)

Rapport annuelau cours de l'année écoulée, du fabricant alimentaire européen Danish Crown, ce ne sont pas les graphiques et les tableaux ennuyeux auxquels tout le monde est habitué. La page du rapport séduit ses investisseurs dans un langage visuel simple et audacieux, qui utilise activement l'humour abstrait et des illustrations amusantes. Le style du texte est également conçu dans des expressions simples et vives.

Et voici ce que disent les représentants de l’entreprise: «Cela ne semble pas abstrus. N'exprime pas le point de vue de quelqu'un, ne transmet pas la tâche, n'est pas parsemé de termes. Cela n'a rien à voir avec les valeurs fondamentales moyennes - le respect et l'initiative. Pour cette raison, nous le faisons. Nous faisons preuve de respect et d'initiative. »

La décision la plus simple du monde

Ce genre d'histoire est plus courant sur les pages Web des organisations non gouvernementales. Donc, le site du Climate Reality Project “World's Easiest Decision »est une bande dessinée interactive sur le changement climatique. Le visiteur répond à des questions simples et, selon ses réponses, un film est projeté ou il est proposé de signer une pétition.

Cet exemple montre parfaitement à quel point le design plat est combiné avec les textures.

7. Navigation linéaire

Il y a quelques années, les concepteurs et développeurs ont tout fait pour éviter la navigation linéaire. L'accent principal était mis sur la commodité du menu et la simplicité de se déplacer dans les pages de la ressource.

Maintenant, il est impossible d'imaginer que le défilement sur le site était autrefois considéré comme quelque chose d'échec (oui, il l'était). Bien que vous puissiez toujours entendre parler du mythique «au-dessus du pli» de certains développeurs, clients ou designers (notez le traducteur. «Au-dessus du pli» est la partie de la page qui est visible pour l'utilisateur sans défilement) .

Dans cet article, nous ne mettons pas en avant les meilleurs sites de cartes de visite de l'année. Essayons simplement de trouver des moyens nouveaux et intéressants que les concepteurs utilisent pour créer une navigation linéaire sur les sites.

Portfolio vidéo du site de Julien Belmonte

FilmmakerJulien Belmonte contient tous ses films, et ils sont parcourus de manière très réussie. Les films se déplacent horizontalement de gauche à droite et sont mis en évidence l'un après l'autre. Dans ce cas, une ligne rouge mobile ressemblant à un marqueur temporaire est utilisée.

Il n'y a presque pas d'autre navigation. À moins que, dans la section «À propos», où le texte ressemble au générique final de n'importe quel film.

Francesco Bertelli CSV en ligne

Francesco Bertelli a mis au point une approche innovante pour son CSV en ligne. Le calendrier interactif utilisé est esthétique et constitue un outil efficace pour démontrer sa propre croissance professionnelle.

L'interface vous permet de naviguer rapidement et facilement, en traversant utilement les dates que vous avez déjà explorées. Lorsque vous sélectionnez l'élément souhaité, l'écran contenant les informations s'ouvre sur l'ensemble du navigateur. Cette approche concentre l'attention du visiteur du site uniquement sur le sujet dont il a besoin.

8. Navigation dans les pages

Ce type de navigation est utilisé depuis longtemps. Dans l'article précédent « Tendances de 2013 », le site Web de Bagiga était un exemple de ces types de navigation: «écran après écran» ou « précédent / suivant ».
En lisant des livres ordinaires, nous tournons page par page et certains concepteurs essaient d'utiliser cette habitude.

Fabricant des chefs - d'œuvre

fabricant bijoux Imperiali Geneve utilise une approche similaire, ainsi que Francesco Bertelli, lorsque l'attention de l'utilisateur se concentre sur chaque écran, qui raconte sa propre histoire. Le site est linéaire, mais sans défilement gratuit. Vous passez d'un écran à l'autre sans aucun intermédiaire.

Il utilise la navigation par diapositives, avec des éléments d'interface pour le début et la fin de chaque écran. Tout cela ressemble plus à des transitions entre des scènes de film qu'à faire défiler un site de cartes de visite.

Musée Van Gogh d'Amsterdam Un

type de navigation similaire est utilisé sur le site Internet du Musée Van Gogh d'Amsterdam. Le numéro de page et leur numéro, des flèches en combinaison avec des transitions de diapositives entre les écrans - un sentiment complet que vous lisez un livre traditionnel.

Les concepteurs s'efforcent de se rapprocher de nos solutions habituelles qui utilisent des sources d'informations traditionnelles. Alors, quelle est la conception Web à l'avenir? Le cadre autour de la page est donc une vieille astuce, qui est néanmoins souvent utilisée.

9. Page encadrée

Des études ont montré que cette tendance devient plus populaire que nous ne le pensions au début. Des idées similaires dans la conception de sites Web se développent depuis longtemps, mais elles n'ont jamais été exécutées avec autant de goût et de grâce.

Ginger Bread Branch par The PNC Financial Services Group, Inc.

Le site est dédié au premier pot pleine grandeur fabriqué à partir de vrais cookies de pain d'épice. Il est également intéressant comme guide pour l'apprentissage de l'économie. Sur cette ressource, non seulement le cadre à l'intérieur de la fenêtre du navigateur est utilisé, mais aussi la navigation dans les pages.

wloks

site Wloks offre chics Asset graphique et de façon unique. Au lieu de l'interface électronique habituelle des photos d'archives, ce site utilise un style intéressant de catalogues imprimés et de fausses peintures murales., avec un cadre et un menu d'éléments placés dans les coins de l'écran.

Beer 34 Les

producteurs de bière de Beer 34 ont trouvé leur solution unique pour contrôler l'écran dans différentes résolutions, en s'inspirant de l'infographie et de l'histoire. Dans le même temps, l'aspect de l'ancienne étiquette est préservé. Tout se fait tout simplement et c'est l'exemple le plus charmant de cet ensemble.

10. Se familiariser avec la conversion CSS

Stand4humanrights

Stand4HumanRights vous invite à rejoindre la communauté en ajoutant votre photo à un mur social qui ressemble à une immense surface courbe. Ensuite, vous pouvez poster sur les réseaux sociaux. Le «mur social» peut être déplacé et il est basé sur la transformation CSS. Il semble intéressant, cependant, il nécessite une grande puissance de calcul et n'est pas aussi sensible qu'on pourrait s'y attendre.

Species In Pieces

Species In Pieces utilise des animations CSS pour son exposition interactive, qui propose 30 espèces en voie de disparition du monde entier à explorer. Les modèles animaux sont constitués de pièces distinctes qui s'additionnent lors du passage d'un objet à un autre(Remarque traducteur. Pour travailler nécessite un navigateur Chrome) .

11. Animation SVG

holohalo

Il semble en fait étrange qu'il y ait si peu de pages utilisant la technologie SVG (Scalable Vector Graphics) classique pour afficher quelque chose de plus intéressant que des icônes évolutives pour différentes résolutions. Holo Halo est une exception à la règle et peut servir de source d'inspiration pour les concepteurs, montrant ce qui peut être fait avec SVG.

Résumé

Sans aucun doute, la principale tendance de la conception Web en 2016 est WebGL dans toutes ses manifestations: vidéo interactive, jeux, animation et visualisation de données. La réalité virtuelle devrait avoir un grand avenir, mais cela dépend beaucoup de la disponibilité des appareils VR.

Une autre tendance courante est l'accent mis sur les médias standard. Cela s'applique au dessin à la main, aux éléments tachés et numérisés comme le projet The Boat. La tendance à créer des pages Web qui ressemblent à des livres imprimés, des magazines, des autocollants, des affiches et des bandes dessinées est également visible. Ceci est réalisé grâce à la navigation page par page, l'utilisation de cadres et tente de voir l'écran du moniteur comme une «page» plutôt qu'une «fenêtre» familière.

Et si vous parvenez à maîtriser ce gros article, vous obtiendrez un petit bonus - ride sur Delahaye 165 :

Site Web timeshift165

Les tendances de conception de sites Web les plus brillantes en 2016