Au début d’un projet, avant toute création graphique, il est nécessaire de réaliser un atelier de brief graphique. De cet atelier découle un document du même nom, qui servira de référence pour la conception des maquettes.
Afin de proposer une solution cohérente avec le projet, la première partie de cet atelier concerne l’environnement de développement du client.
Ici, on s’intéresse aux frameworks back et front utilisés sur le projet.
On étudie le type de projet : custom ou WordPress. Il est important de connaitre la technologie utilisée pour proposer une charte graphique adaptée. Nous savons par exemple que WordPress conditionne certaines choses en matière de design, comme l’absence native de méga-menus entre autres. En fonction des choix réalisés, les développements peuvent être plus ou moins longs suivant les spécificités graphiques choisies.
Concernant le développement front, nous privilégions Tailwind CSS lorsque nous développons un projet. Mais d’autres librairies CSS existent – comme Bootstrap ou Inuit – auxquelles nous devrons adapter nos choix de design lors d’une reprise en l’état ou d’un choix spécifique du client. L’estimation du temps de développement dépend donc également de ce choix.
Une fois la technologie connue, nous analysons les contraintes en matière d’écrans utilisés. Le site ou l’application peut avoir plusieurs types d’utilités :
- un site vitrine ou ecommerce doit être pleinement responsive pour permettre aux utilisateurs d’utiliser autant leur téléphone que leur pc pour naviguer
- une application métier doit pouvoir s’adapter sans contraintes aux écrans des utilisateurs (qui peuvent avoir des ratios ou des résolutions spécifiques)
- une application métier utilisée sur le terrain doit s’adapter aux mobiles ou tablettes des utilisateurs, ainsi qu’à la luminosité extérieure (éviter les dark themes par exemple)
Tous ces éléments concernant les appareils utilisés sont donc à collecter en amont, car ils conditionnent aussi bien les choix typographiques, les contrastes, que les logiques de mise en page.
Une fois les contraintes techniques déterminées, nous passons ensuite à l’analyse de la charte graphique. Le client peut avoir déjà une charte existante, via un site internet, une application, des documents imprimés (maquette produit, plaquette commerciale…) ou simplement un logo.
Dans ce cas, nous notons toutes les caractéristiques de la charte : logo, couleurs, typographies, icônes, style récurrent (arrondis, motif…).
Si possible, nous demandons également des exemples d’utilisation de cette charte sur différents supports web et print (campagne publicitaire, flyers, document de communication interne…).
L’historique de cette charte est également important : de quand date-t-elle ? A-t-elle subit une refonte et si oui, depuis combien de temps ?
Cela nous permet de déterminer la marge de manœuvre que nous avons : si la charte commence à dater, nous pourrions profiter de ce nouveau projet pour la moderniser.
Lorsque la charte existe déjà, nous vérifions également son éligibilité aux critères de développement et d’accessibilité du web.
Les éléments qui ne correspondent pas à un projet web peuvent être :
- des couleurs en CMJN au lieu du RVB,
- des teintes qui ne respecte pas les critères d’accessibilité du web,
- des typographies ne disposant pas de fichier adapté pour le web…
Si ce genre de chose existe, nous levons à ce moment là des alertes et proposons au client d’adapter la charte actuelle aux contraintes numériques.
Que ce soit pour moderniser ou adapter la charte au web, toute modification se fait en accord avec le client.
Afin de mieux connaître l’entreprise et proposer un design cohérent avec son image, on va dresser un tableau des valeurs que la marque doit ou ne doit pas véhiculer.
Pour faciliter cet exercice, on peut s’appuyer sur différentes questions :
- Qui serait pour vous un client modèle ?
- Quels sentiments souhaitez-vous ou ne souhaitez-vous pas lui inspirer ?
- Comment souhaitez-vous que votre client parle de votre marque ?
- Quelle est la mission de votre entreprise ?
Le but à cette étape est aussi de recueillir une liste de mots clefs qui vont permettre de préciser la pensée du client.
Par exemple comme valeur à transmettre nous pourrions relever : Start up, simple, avenant, lumineux… Et comme liste de valeurs à ne surtout pas transmettre nous pourrions avoir : Robuste, technique/technologique, puissant, impératif.
Comme pour la définition des valeurs, on va questionner le client sur les profils types de ses utilisateurs.
Ainsi, on va définir :
- Leur tranche d’âge
- Leur sexe
- Leur catégorie socio-professionnelle
- Leur niveau d’informatique
- Le temps passé sur l’application/site
- …
On va aussi chercher à connaître l’environnement où l’application sera utilisée :
- En intérieur ou extérieur
- L’utilisateur portera-t-il des gants…
- …
Une application utilisée essentiellement en extérieur devra être suffisamment lumineuse et contrastée pour que la quantité de lumière naturelle n’impacte pas l’utilisation.
Toutes ces questions permettront de définir un usage type qui sera à prendre en compte impérativement pour proposer une solution optimale aux utilisateurs de la solution de notre client.
Dans cette dernière partie, on va demander à chaque membre de l’équipe décisionnaire de sélectionner 1 à 3 écrans/sites qui lui plaisent et qui correspondent aux valeurs que la marque souhaite véhiculer.
On demande à nos clients de ne pas consulter les sites des concurrents.
La tentation est grande de vouloir copier le design d’autres entreprises sur le marché, mais le risque de se retrouver avec un design qui ne représente pas l’entreprise l’est d’autant plus.
On veut uniquement savoir ce que le client aime / souhaite comme style pour son propre site.
Voici une liste non exhaustive de sites que nous conseillons à nos clients pour effectuer leurs recherches :
- Dribbble
- Behance
- Awwwards
- Page collective
- MUZLI
- Google : rechercher par mots clé ( “UI”, “pattern”, nom du composant recherché…)
Pour les applications mobiles :
Vous connaissez maintenant les 5 étapes que nous utilisons chez Imagile pour réaliser un brief créatif complet et représentatif pour chacun de nos clients.
À suivre : La réalisation d’UX et de design graphique :
