Image de présentation pour l'article expliquant ce qu'est le material design de Google

Qu’est-ce que le Material Design de Google ?

Comme vous le savez, Google est partout autour de nous et a une notoriété hors du commun grâce à son moteur de recherche, le système Android de nos téléphones ou encore l’incontournable YouTube. Afin d’unifier graphiquement l’expérience utilisateur de toutes ses plateformes et applications, l’entreprise a carrément développé un langage visuel appelé le « Material Design ».

 

Une métaphore du papier et de l’encre

Ils l’ont nommé « materiel » car il s’inspire du monde physique et de ses textures en étudiant le reflet de la lumière et les projections des ombres. C’est donc une métaphore du papier et de l’encre qui rappellent les racines de nos modes de vies pour les traduire sur des outils digitaux (ordinateurs, mobile,…). Cela a pour but de générer de l’affordance. Pour rappel, il s’agit de  la capacité d’un objet ou d’un système à évoquer son utilisation, sa fonction. En d’autres termes, cela permet d’offrir à l’utilisateur les moyens de se servir d’un objet et si possible sans mode d’emploi. On retrouve cette notion tous les jours : par exemple, on appelle « bureau » l’écran de notre ordinateur où l’on range des dossiers, une boite à outils regroupant nos logiciels ou encore la corbeille. Au travers cette interface, on retrouve la notion de bureau de la vie réel sur lequel on range nos différents fichiers, où on a tous nos stylos à disposition et la poubelle qui est proche de la chaise.

 

Par le biais de cette notion d’affordance, Google voulait, grâce à ce langage visuel, rendre tous ses outils accessibles et identifiables de tous. Au final, il s’agit d’un ensemble de règle de design qui composent ce langage afin de le rendre intuitif, adapté à tous les supports, interactif et homogène. L’une des bases de toutes ces règles est l’environnement 3D. Effectivement, puisqu’il s’agit d’une métaphore au papier et à l’encre, n’oublions pas que ces éléments ne peuvent être traversés et seul l’élément touché par l’internaute va réagir. On se retrouve donc avec trois coordonnées : X, Y et Z. L’axe Z concerne le niveau d’élévation d’un objet, ce qui va avoir un impact sur la dimension de son ombre et de sa disposition. En travaillant autour de ces trois axes, un élément peut être mis en avant suite à une action de l’utilisateur pour lui exprimer que son action est bien effectuée. Par exemple, lorsque vous voulez supprimer plusieurs de vos mails sur votre application gmail, vous appuyez longuement sur un des mails, une bulle s’affiche pour afficher ceux sélectionnés ou non pour enfin les supprimer grâce au pictogramme de corbeille situé en haut. Ce type d’animation vous aide dans votre navigation et répond à votre besoin de suppression de mails. Grâce au design qui évolue, vous savez qu’une action a bien été faite ou non.

Image présentant le principe d'élévation du Material Design de Google

Google a développé une réelle tendance graphique issue d’études et de recherches diverses afin de plaire à tous ses utilisateurs et le rendre accessible le plus possible. Ils ont poussé la démarche jusqu’au bout en sélectionnant des couleurs précises pour ce langage visuelle, des formes, typographies ou encore des règles de composition particulières. Toutes ces sources sont disponibles sur le site dédié au Material Design et expliquées de manière très simple.

Présentation d'une collaboration entre une entreprise et un designer graphique

Les designers au service des entreprises

Les designers peuvent représenter une grande valeur ajoutée pour tous types d’entreprises. Ils peuvent vous venir en aide sur votre identité visuelle, établir un ton graphique pour vos publicités ou encore créer vos interfaces utilisateurs et pleins d’autres choses !  Ils vous suivent ainsi sur les différentes étapes de votre croissance à la fois en ligne mais également en offline. Je vous propose donc de voyager au travers différentes disciplines qui se réunissent toutes dans le design graphique.

 

Avant tout chose, revenons rapidement sur la définition du design graphique. Il s’agit de conceptions qui ont pour but d’illustrer et de communiquer vos valeurs, vos idées ou, tout simplement, un message sur différents affichages (publicité, carte de visite, produit,…etc.).

 

Le design au cœur des interfaces utilisateurs :

 

Comme j’ai pu l’évoquer dans l’article présentant le métier UX/UI Designer, les interfaces utilisateurs permettent de créer une interaction entre vos clients et son dispositif (ordinateur, portable, tablette). L’interface doit donc être étudiée et conçue pour eux afin de faciliter leurs recherches et de les rendre agréables. Un beau design allié à des fonctionnalités pertinentes permettra à vos internautes de conserver une image positive de votre présence digitale et de la marque en général.

 

Pour ce type de design, il faut penser à toutes les possibilités d’utilisations. Si votre internaute est pressé, s’il navigue sur votre site par le biais d’un portable ou même s’il veut une information en particularité, il faut adapter le design pour tous ses besoins et situations. C’est notamment pour cela qu’il travaille en étroite collaboration avec l’UX Designer. Ce dernier va effectuer de nombreuses recherches sur les cibles finales, créer des maquettes pour lui le guider dans sa navigation ou encore analyser son comportement, …etc. L’UI Designer traduira toutes ces analyses en un seul et même design pour donner vie, grâce à de nombreux autres acteurs, à votre présence digitale !

 

Présentation d'une interface utilisateur conçue sur Sketch pour le client Malfroid

 

L’identité visuelle, reflet de votre marque :

 

D’une certaine manière, l’identité visuelle est directement liée avec le design d’interfaces utilisateurs. Elle va permettre de refléter, au travers des couleurs et des formes, les valeurs, le message et tout ce qui entoure une marque. Réelle identité graphique, elle permet notamment de se faire reconnaître grâce à une simple typographie (Coca-Cola par exemple) ou distinguer vos services/produits par le biais de choix graphiques. Pour ce type de design, nous retrouvons donc les éléments visuels d’une marque tels que son logo, ses couleurs, sa typographie ou tout simplement : sa personnalité.

 

Tout ce travail va être retranscrit sur vos différents supports : sur votre site, votre magasin, vos publicités ou même votre signature de mails. Il peut donc avoir un réel impact sur le développement de votre marque et sur tout son parcours. Bien entendu, ce sont des éléments qui peuvent être actualisés pour suivre les tendances actuelles ou pour traduire un changement de positionnement, un nouveau message ou même une nouvelle manière de communiquer.

 

Présentation de la charte graphique du portfolio de CHEVALIER Valentin, UX Designer freelance

Le design lié au marketing :

 

Quoi de plus impactant qu’une publicité agréable à regarder, pertinente avec un message et qui surtout, reste dans la mémoire de chacun ? Une partie de cette réussite passe par les talents des designers spécialisés dans le marketing et la publicité. Le message que veut transmettre une marque pour une pub se doit d’être retranscrit, de manière réfléchie, par des images ou même des couleurs qui vont venir maquiller le slogan pour le mettre en valeur voire le compléter. Il peuvent ainsi vous venir en aide pour vos publicités digitales (Facebook Ads, SEA), vos infographies, vos flyers, vos publicités offline et pour pleins d’autres supports !

Présentation graphique d'une publicité pour la fête des lumières de Lyon

Le packaging aux couleurs de vos valeurs :

 

Le packaging peut représenter une forte valeur marketing ! Cette typologie de design va permettre de concevoir le décor d’un emballage destiné à contenir tout type de produits. Afin qu’il soit encore plus impactant, il faut qu’il raconte une histoire : celle de la marque ou du produit en lui-même. Prenons l’exemple des packaging des produits de Monoprix, ces derniers sont toujours sur le ton de l’humour et donnent le sourire aux clients, ils restent donc en tête !

Cette discipline reste tout de même très complexe, elle demande des connaissances à la fois sur l’aspect design mais également sur les processus d’impressions. À cela s’ajoute tout le travail de collaboration avec la marque, les fabricant ou encore l’équipe marketing.

Exemple de packaging créés par Monoprix

Un environnement mémorable :

 

Cette typologie de design est très impactant, elle a pour objectif d’améliorer l’expérience qu’entretient une personne avec un endroit. Cela passe notamment par une décoration pointue et minutieuse afin de rendre le lieu mémorable et facile de compréhension. Combien de fois demandons nous les toilettes après une bière en terrasse ? C’est tout simplement au travers de chiffres,  tableaux ou mise en scène que la personne va pouvoir se guider dans l’espace qui lui est dédié. Cette discipline peut être comparée à la première citée ci-dessus : au final, l’objectif est de générer des émotions et de faciliter l’expérience que la personne va vivre avec un site (réel ou internet). Nous pouvons donc le retrouver dans des expositions, des magasins, des branding de stade ou même tout simplement dans les signalisations de transports en commun.

Présentation de design d'environnement au traver le Public Theater de New York

 

 

Comme vous pouvez le constater, le design est finalement partout autour de nous. Sur absolument chaque objet que nous utilisons, chaque endroit que nous visitons ou encore chaque site sur lesquels nous naviguons, il y a du design. Il est donc essentiel de prendre conscience de son importance et de l’impact qu’il peut avoir auprès des gens et comme on entend souvent : une image vaut mille mots non ?

Livre de mockups réunissant tous les éléments issues de l'analyse de l'UX Designer pour faciliter le travail de l'UI Designer

Comprendre le métier d’UX/UI Designer

Le design dans sa globalité est partout, que ça soit sur le logo de l’épicerie située en bas de chez vous, les publicités dans le métro ou encore sur votre site de vêtements sur lequel vous aimez bien vous rendre. L’omniprésence du design fait de lui un élément naturel de notre environnement, on a même tendance à l’oublier et ne plus y faire attention. Et pourtant, derrière chaque identité graphique se cache des designers qui ont façonné, pixels par pixels, une histoire visuelle pour la marque !

 

Une expérience utilisateur sur mesure :

 

Ces designers ne conçoivent pas tout ceci au feeling. Bien entendu, il y a de nombreuses étapes avant la réalisation d’une interface. Je vous propose de vous les expliquer par le biais d’un exemple simple : un diner avec les beaux-parents ! Oui cela peut paraître absurde au premier abord, mais croyez-moi, il y a bel et bien un lien.

Imaginez-vous, nous sommes samedi et la fameuse rencontre se passe demain midi chez vous. Tout paniqué, vous posez des questions à votre compagne, vous essayez de lui sous tirer des informations qui pourront faire de vous le gendre idéal !

Nous sommes ici dans la phase de recherche, les designers vont tenter de tout savoir sur la cible d’un projet : ses habitudes, ses centres d’intérêts et pleins d’autres aspects pour leur préparer une interface sur-mesure afin qu’il vive une expérience remarquable. Imaginez la tête de votre beau-père si vous lui servez de la viande rouge alors qu’il est végétarien ? Et bien c’est pareil pour les UX designer (ou designer d’expérience utilisateurs), ils ne vont pas créer le même design pour un projet dédié aux retraités qu’un projet dédié pour les étudiants. Chaque pixel que va ajouter l’UX designer doit avoir une signification et un impact dans le projet.

 

Il faudra, en plus de les séduire, leur mijoter un plat exceptionnel pour que vous touchiez l’espoir qu’ils vous acceptent encore plus. Une cuisine évidemment adaptée à leurs goûts mais surtout bien présentée ! Il serait mal vu de servir le dessert avant l’entrée, qu’en pensez-vous ?

C’est également ce que fait l’UX designer, il va étudier la hiérarchie des informations à mettre en avant, concevoir une arborescence adaptée pour que tous types d’internautes puissent s’y retrouver et se sentir à l’aise. Ce processus va permettre à l’utilisateur d’y voir clair et de trouver ce qu’il recherche en moins de 3 clics. C’est notamment ce qui explique votre capacité à trouver un article facilement et rapidement parmi les millions de choses proposées par Amazon.

 

Des designs à l’image de vos clients :

 

Ne nous écartons pas trop et revenons à notre fameuse rencontre. Vous avez enfin trouvé le plat, les sujets que vous pourriez abordés mais il reste tout de même à dresser la table. Vous n’êtes pas trop à l’aise avec la mise en place, vous passez donc la main à votre conjointe. Vous l’aurez informé de toutes vos réflexions, du repas que vous allez préparer pour qu’elle retranscris le tout en une belle et chaleureuse table !

Le rôle de votre conjointe est celui de l’UI Designer (ou designer d’interface utilisateurs). Ce dernier va traduire vos recherches et analyses en des couleurs, formes ou même disposition afin qu’elle soit le plus adaptée à votre cible. Il va tout simplement créer une interface d’un site, d’une application mobile exclusivement pour un projet qui comporte ses besoins et contraintes.

 

Les métiers d’UX et UI designers sont donc intimement liés. Ils collaborent ensembles pour trouver des réponses à des besoins. Ils ne sont bien évidemment pas les seuls dans la chaîne de conception, ils travaillent avec les développeurs qui, à leur tour, vont retranscrire l’interface créée au travers de lignes de code pour donner lieu à un site/application fonctionnel et agréable à utiliser.

 

Si toute la phase de recherche est suffisamment poussée et que l’interface est bien designée, l’internaute se sentira en confiance et sera plus enclin à revenir sur votre plateforme digitale.

Des tests auprès d’utilisateurs types auront été fait au préalable afin de recueillir leurs retours. Peut-être qu’ils verraient plus cette option ici que là ou qu’ils l’appelleraient autrement pour se sentir plus concerné. L’UX/UI Designer est donc une personne qui allie ses connaissances en psychologie humaine, son savoir-faire en terme de conception graphique et sa manière de collaborer avec de nombreux acteurs qui gravitent autour d’un projet : le client final, les développeurs, les intégrateurs ou encore le chef de projet.

Il s’agit d’un métier encore peu reconnu car nous avons tendance à croire que les designers sont des artistes avec la belle vie : sans contraintes, qui travaillent quand ils le souhaitent et qui sont solitaires. Bien au contraire, une bonne interface pourra voir le jour seulement s’il y a des contraintes d’utilisations, seulement s’il y a une productivité de travail ou encore s’il y a une collaboration entre tous les acteurs cités précédemment.