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

b.v-h doc étapes

10 > 21/09 – Le studio b.v-h expose à DOC!

Dans la poursuite de leur précédente exposition lors de « Une Saison Graphique » au Havre, le studio graphique et typographique formé par André Baldinger et Toan Vu-Huu investit DOC. Le duo, responsable de la création des affiches des expositions et de l’identité visuelle du lieu, y montre 17 affiches ainsi qu’une série de pictogrammes liés à d’autres projets du studio. Sorties de leur contexte, ces affiches dévoilent alors leur caractère expérimental, principalement guidées par des jeux typographiques en phase avec leur sujet. Grands faiseurs de systèmes graphiques, b.v-h expose également deux vidéos ou les identités, logos et pictogrammes réalisés depuis 11…

Neo Makers

19 > 22/09 – Neo Makers, une exposition mêlant artisanat, design et numérique

Dans le cadre de la Nantes Digital Week, LEVEL INNOVATIVE WORKPLACE accueille PRISME EDITIONS pour 4 jours d’exposition du 19 au 22 Septembre 2019. Neo Makers propose de découvrir le travail des artisans et designers nantais et dévoile comment ces derniers, mixent dans leurs ouvrages, savoir-faire, tradition et innovation. C’est également l’occasion de penser les manières de s’approprier les nouvelles technologies et les solutions d’avenir comme les bio-matériaux, le recyclage ou encore l’impression 3D. Date : Du 19 au 22 septembre 2019 – De 10h à 19h Lieu : Level Innovative Workplace – 3 Place Albert Camus, 44000 NANTES Lien…

Porto Design Biennale

19/09 > 8/12 – Porto Design Biennale 2019

Depuis quelques années, Porto se fait remarquer comme un haut lieu du design. Afin d’encourager et promouvoir les pratiques qui y sont liées, la première édition de Porto Design Biennale s’installe dans divers lieux de la ville avec un riche programme d’expositions, de conférences, de workshops et tables rondes. Le thème « Post Millennium Tension » guide ce parcours. Il nous invite à réfléchir sur notre les transformations de notre nouveau millénaire et à observer la place du design dans un monde en perpétuel changement. Un sujet vaste qui soulève autant de questions que de solutions. Lieu : Divers – Porto et…

11 > 16/09 – Tout se transforme

L’innovation est au cœur de la rentrée du Bel Ordinaire. L’exposition TOUT SE TRANSFORME, qui débute dès le 11 septembre, mêle graphisme et technologie, sous la houlette du réputé studio Chevalvert.  Ce parcours, proposé par accès)s( cultures électroniques et monté en collaboration avec Le Signe, centre national du design graphique, s’apparente à une usine, dans laquelle les matières premières, les machines et les gestes de chacun permettent la transformation des éléments. Dans un dédale d’architecture lumineuse, formes et objets se changent en une partition musicale. Le visiteur interagit avec son environnement, à l’aide de son corps, parfois de sa voix, pour devenir le chef d’orchestre de cette expérience visuelle interactive. Au total, le studio Chevalvert met à disposition 4 installations qui explorent les connexions innombrables, entre musique et image.…

Flux

Supermondane met des paroles en formes

Musique et graphisme font souvent la paire. Quand les deux disciplines cherchent à entrer en dialogue, elles donnent aux designers de nombreux possibles en terme d’expérimentation. Pour une exposition baptisée « I know it’s Over », Supermondane s’est emparé du sujet en délivrant une série de 71 affiches. Sur chacune d’entre elles,…

Pâquerette Brice Larrieu chorépgraphie

« Pâquerette », le bal des sentiments humains

« Pâquerette » la dernière réalisation de Brice Larrieu alias Skorpion, fait partie de ces objets visuels hybrides, qui dévoilent leurs multiples facettes après plusieurs lectures. Au delà d’une vidéo de danse, il faut voir dans ce film la volonté de l’artiste de mettre l’accent sur les sentiments, au milieu…

Ressources

Halvar Typemates étapes

Halvar, une police bien trempée

La fonderie allemande TypeMates a sorti il y a peu une nouvelle fonte linéale, Halvar. Développée dans une version classique et une version stencil de 81 styles chacun allant du black au hairline, elle est structurée en 3 sous-catégories représentant 3 chasses différentes (large, moyenne et étroite). Elle offre ainsi…