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 *

News

J&E - Atelier Do It ! - étapes:

Do It ! Les ateliers design du Centre Pompidou

Avis aux designers en herbe, le Centre Pompidou, via son Fab-Lab pour néophytes La Fabrique, propose une série d’ateliers de design, Do It ! Une fois par mois, un designer vous apprend à utiliser la découpe laser ou l’impression 3D pour créer des objets atypiques. Quelles possibilités sont permises par ces nouveaux outils de fabrication ? Comment un designer se les approprie ? Voici les questions qui ont motivé la création des ateliers Do It ! À la fois pédagogiques, ludiques et créatifs, ces workshops sont l’occasion parfaite pour appréhender le design contemporain. Ils font entrer l’utilisateur dans le processus…

JPO Campus Fonderie de L'image étapes:

Une Journée Portes Ouvertes spéciale anniversaire, le samedi 23 mars, pour les 30 ans du Campus Fonderie de l’Image

2019 est une année importante pour le Campus Fonderie de l’Image. L’école de design graphique et numérique de Bagnolet fête cette année sa 30ème année d’existence. Cette longévité s’appuie sur des valeurs et une histoire forte, que sont l’inclusivité, l’éco-responsabilité & l’accessibilité aux études supérieures et au monde professionnel. Elles font d’elle une école unique en son genre. Le 23 mars, elle organise ses journées portes ouvertes, l’occasion de réaffirmer son modèle et présenter ses nouveautés pédagogiques, parmi lesquelles une formation dédiée à l’illustration. Éthique et modernité au centre de l’enseignement Fin des années 80, le Campus Fonderie de l’Image nait…

L’architecte John Pawson invite à une nouvelle pause

Le festival Design Indaba, porté par la devise « a better world through creativity », s’est déroulé à Cape Town du 27 février au 1er mars dernier. L’équipe d’étapes: y était et vous propose une sélection de projets, témoignant de la profusion créative et de l’éclectisme de l’évènement. L’architecte John Pawson a conçu plusieurs espaces de contemplation, par exemple le monastère de Nový Dvinr en République Tchèque et l’église Saint-Moritz, en Bavière. Un nouveau lieu dédié à la contemplation À Design Indaba, l’anglais dévoile son projet le plus récent, également dédié à la méditation : la Wooden Chapel. C’est l’une des sept…

Art Paris Art Fair

Art Paris revient au Grand Palais du 4 au 7 avril

Depuis plus de 20 ans, Art Paris s’installe sous la verrière du Grand Palais pour 3 jours dédiés à l’art moderne et contemporain. Plus de 150 galeries seront présentes du 4 au 7 avril et vous donneront à voir l’essentiel de l’art, de 1950 à nos jours. La force d’Art Paris, et ce qui fait sa singularité par rapport aux autres foires d’art contemporain, est qu’elle se concentre en partie sur certains pans moins médiatisés de la création. Ainsi l’art émergent international y est fortement représenté. Des galeries provenant de 20 pays y tiendront un stand, dont beaucoup de territoires…

Flux

Les Sorties Graphiques de mars #2

Expos, vernissages, festivals ou conférences, chaque semaine étapes: note pour vous dans l’agenda les évènements de la scène graphique et artistique. Computer Grrrls, à la Gaité Lyrique L’exposition « Computer Grrrls » s’installe à la Gaité Lyrique du 14 mars au 14 juillet. Par un prisme cyber-féministe, elle replace la femme dans l’histoire de…

J&E - Atelier Do It ! - étapes:

Do It ! Les ateliers design du Centre Pompidou

Avis aux designers en herbe, le Centre Pompidou, via son Fab-Lab pour néophytes La Fabrique, propose une série d’ateliers de design, Do It ! Une fois par mois, un designer vous apprend à utiliser la découpe laser ou l’impression 3D pour créer des objets atypiques. Quelles possibilités sont permises par…

JPO Campus Fonderie de L'image étapes:

Une Journée Portes Ouvertes spéciale anniversaire, le samedi 23 mars, pour les 30 ans du Campus Fonderie de l’Image

2019 est une année importante pour le Campus Fonderie de l’Image. L’école de design graphique et numérique de Bagnolet fête cette année sa 30ème année d’existence. Cette longévité s’appuie sur des valeurs et une histoire forte, que sont l’inclusivité, l’éco-responsabilité & l’accessibilité aux études supérieures et au monde professionnel. Elles font…

Ressources

Testez vos qualités de designer avec Can’t Unsee

Avez-vous l’âme d’un bon designer ? Can’t Unsee, l’application créée par Alex Kotliarskyi, vous met au défi de choisir la meilleure interface sur les deux proposées. Si l’exercice est prenant, les résultats ne sont toutefois pas à prendre au pied de la lettre. Les questions se concentrent largement sur les…

Select Object : le détourage sur Photoshop facilité

Parler de détourage aux graphistes stagiaires en agence, vous comprendrez à leur tête qu’il s’agit d’un travail laborieux. Surtout quand la retouche est demandée à la dernière minute. La solution miracle se fait espérer depuis longtemps et jusqu’à aujourd’hui, les promesses de rendre la tache moins fastidieuse ne furent qu’à…

Des mockups aboutis et gratuits

Pour pouvoir offrir rapidement des mises en situation de son travail à un client, avoir recours à des mockups se fait de plus en plus. Le site The Mockup Club est une plateforme participative sur lequel on trouve ce type de ressources gratuitement et dont le design s’approche au plus…