Le webdesign, des tendances émergentes à la conception graphique

Tous les lundis, nous vous proposons notre revue web sur le graphisme numérique. Aujourd’hui, nous allons aborder différentes thématiques, qui inspirent le webdesign à l’heure actuelle, telles que l’UX et l’UI, le WebGL et le material design. Nous découvrirons également quelques modèles de redesign concept

Nous allons commencer par définir ces différents termes et nous terminerons sur des exemples concrets de sites web intégrant ces techniques dans leur schéma de conception. Tous les secteurs d’activités sont touchés par ces tendances émergentes qui commencent désormais à s’installer comme des incontournables du webdesign en 2016. Les différentes techniques et les nouvelles technologies permettent plus de liberté aux développeurs et graphistes web qui peuvent s’affranchir de nombreuses contraintes jusqu’alors insolvables.

UX et UI

User Experience et User Interface, deux notions apparues dans les années 2000. Mais qui n’a jamais entendu parler de ces deux notions ? Tout d’abord, il faut les différencier : l’UI correspond au produit fini, c’est le lien fait entre l’homme et la machine. L’UX, pour sa part, représente le processus complet du parcours utilisateur. Il n’apporte pas une solution visuelle. Il apporte un concept dans l’écosystème digital qui va permettre à l’utilisateur d’arriver le plus vite possible à sa recherche. Il va trouver des solutions de navigation, d’univers digital et d’espace. L’UI se base sur des normes techniques tandis que l’UX créé le parcours utilisateur.

Le WebGL

Le WebGL est la technologie qui permet de créer des objets dynamiques et des éléments graphiques en 3D. Gourmand en ressources, le WebGL est implémenté dans la plupart des navigateurs modernes (Firefox, Chrome, Safari, Opéra et IE). Cette spécification d’interface de programmation permet d’utiliser le standard Open GL ES au sein d’une page web, d’un ePUB ou d’une application HTML5. Open GL ES définit les API multiplate-forme qui permettent la génération d’images 3D dans le conception d’application. Cette spécification possède également un large support au sein des architectures embarquées et mobiles.

Le material design

Succédant au skeuomorphism, au Flat design et détrônant le design Holo, nous assistons au règne du material design. Ce design d’interface utilisateur repense l’utilisation du papier et de l’encre dans le matériau digital. C’est Google qui a mis au point ce design. En jouant avec des effets de profondeur grâce aux ombres et aux éclairages, le material design met l’accent sur des points de validation mentale et visuelle pour l’utilisateur. C’est tout un système qui exploite la hiérarchie, le sens, les couleurs, l’espace, les relations… Dans le but, toujours, de favoriser l’expérience utilisateur.

C’est beau, c’est mouvementé, on peut intervenir ou se laisser guider mais toujours apprécier. Le travail de ces professionnels est d’autant plus respectable qu’il est ingénieux. Les prouesses les plus remarquables se retrouvent sur le site d’Étapes: pour confectionner un aperçu de ce qui se fait de mieux en termes de webdesign aujourd’hui. Tour d’horizon sur notre sélection.

Le site de la 50e édition d’iFly qui nous propose 50 raisons époustouflantes de voyager.

Le studio néerlandais Bolden qui offre ses services en conception de site géniaux. À l’image du leur.

Le redesign concept du site National Geographic qui reprend les tendances UI et UX.

Une bonne illustration de l’emploi du WebGL pour Oxtral, représentant d’artistes à travers le monde. (PS : votre carte graphique doit être capable de supporter le WebGL)

Le site ludique de Fritiden, qui propose un test très interactif.

Le studio Rotate fait parler sa créativité sur son interface web.

Le coup de cœur de cette sélection nous vient de Printed By Somerset, un site aux tendances rétro qui applique tout simplement son savoir-faire en termes de webdesign.

Le section CREATIVE data-data par Arte est à l’image de son site global : créatif.

L’Université de technologie et de design Harbour Space forme ses étudiants à la façon de son site.

Les vins d’Alsace se mettent à l’heure du webdesign avec ce site particulièrement bien conçu.

Landing Page concept par Minh Pham.

Une bel exemple de material design par Mike Creative Mints pour le reboot de Behance sur mobile.

Découvrez l’Islande autrement avec ce concept de site web original et créatif. Une idée qui nous vient d’Anton Skvortsov

Étapes: a pour habitude mettre en avant les œuvres graphiques les plus créatives. Le numérique apporte cette nouvelle touche de design dans les applications et les associations entre webdesigner et développeurs sont souvent étonnantes. La conception est entièrement revisitée et plus accessible. De nombreuses formations et écoles ouvrent leurs portes pour enseigner ces techniques, comme nous avons pu le voir avec Harbour Space ou en France avec l’ECV Digital qui compte dans ses rangs un mastère entièrement dédié à l’User Experience.

De nombreuses tendances émergent chaque année, l’appropriation qui en est faite est généralement astucieuse : davantage de couleurs, de photos plus grandes, d’interaction, moins de scroll, des landing pages dynamiques ou encore des parti-pris typographiques forts. Nous retrouvons, dans la création web, des process identiques à l’œuvre manuscrite.

Par Erwan Le Roch

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Agenda

Du 23 au 26 septembre → Formula Bula – Paris et Île-de-France

Du 23 au 26 septembre 2021, la 9ème édition du festival de bande dessinée Formula Bula prend ses quartiers à la médiathèque Françoise Sagan, dans le 10e arrondissement de Paris. Il propose de découvrir la scène francophone et internationale de la BD à travers des expositions, des rencontres et la découverte d’éditeurs…

17 & 18 septembre → Pictoplasma, Character Representation – En ligne

Convaincu par le succès de la première édition en ligne du festival en 2020, Pictoplasma réitère l’expérience cette année en invitant plus de 40 designers, artistes, illustrateurs et créateurs de personnages en tout genre. Au programme, des conférences, des visites de studios et d’ateliers, des projections, pour un aperçu des…

Feed

Comment utiliser la fonction flexbox en CSS ?

Étapes: continue sa collaboration avec tuto.com en vous offrant un troisième tutoriel. Après un premier épisode dédié à Sketch, un second sur la fonction création de texte en 3D du logiciel SketchUp Pro, apprenez aujourd’hui à développer correctement une interface numérique grâce au module de création de boîtes flexibles CSS, aussi appelé flexbox. La plupart des…

Les Puces de l’Illu #9 lancent leur appel à candidatures

Illustrateurs, illustratrices, éditeurs, éditrices, graveurs, graveuses, sérigraphes : l’appel à candidatures pour les 9e Puces de l’Illu est ouvert !  Festival de l’illustration contemporaine, les Puces de l’illu reviennent les 4 et 5 décembre 2021 pour leur 9ème édition. Organisées par le Campus Fonderie de l’Image, l’école du design graphique et numérique située à Bagnolet,…

Ressources

Comment utiliser la fonction flexbox en CSS ?

Étapes: continue sa collaboration avec tuto.com en vous offrant un troisième tutoriel. Après un premier épisode dédié à Sketch, un second sur la fonction création de texte en 3D du logiciel SketchUp Pro, apprenez aujourd’hui à développer correctement une interface numérique grâce au module de création de boîtes flexibles CSS, aussi appelé flexbox. La plupart des…

Comment réaliser un texte en 3D sur SketchUp Pro ?

Après un premier épisode dédié à Sketch, tuto.com et étapes: vous offre un nouveau tutoriel. Celui-ci porte sur la fonction création de texte en 3D du logiciel SketchUp Pro. SketchUp Pro est un logiciel de CAO (Conception Assistée par Ordinateur), destiné à créer, visualiser et modifier assez aisément ses idées…

Prenez en main Sketch en 1 heure grâce à tuto.com

Dans le cadre de son partenariat avec le site tuto.com, étapes: vous offre plusieurs tutoriels normalement diffusés de façon payante. Aujourd’hui, ils portent sur l’application Sketch, outil permettant la création d’interfaces utilisateurs et le travail sur l’expérience utilisateur (UX). Ce tutoriel s’adresse à tous ceux intéressés par le design d’interfaces,…