Design d'application web (1/3) : le brief créatif

Afin de proposer une solution cohérente et réalisable, nous analysons d’abord l’environnement de développement du client ainsi que les écrans qui sont utilisés sur son projet.

Ici, on s’intéresse aux frameworks back et front utilisés sur le projet : Tailwind CSS, Bootstrap, inuit,… autant de librairies CSS qui doivent être prises en compte dans la faisabilité et l’estimation du temps de développement.

On étudie aussi de quel type de projet il s’agit : custom ou wordpress. Il est important de connaitre la technologie utilisée ou à utiliser pour proposer un design réalisable. On sait par exemple que WordPress conditionne certaines choses en matière de design comme l’absence native de méga-menu entre autres. Il faut ainsi s’attendre à connaitre des développements plus longs en fonction des choix réalisés.

Les contraintes techniques ont été notées. On passe ensuite à l’analyse de la charte graphique.

On questionne d’abord le client sur l’existence d’une charte graphique. S’il y en a une, ou au moins un logo et quelques supports existants (maquette produit, plaquette commerciale…), on passe à l’analyse de celle-ci.

On note toutes les caractéristiques de la charte : logo, couleurs, typographies, icônes, style récurrent (arrondis, motif…).
On demande également des exemples d’utilisation de cette charte sur différents supports web et print (campagne publicitaire, flyers, document de communication interne…).
On se renseigne sur sa date de création et les évolutions qu’elle a pu connaître.

C’est également à ce moment qu’on vérifie que la charte graphique respecte les critères d’accessibilité du web.
En particulier si des éléments ne correspondent pas à un projet web : des couleurs en CMJN au lieu du RVB ou bien 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.
On questionne le client sur la limite des modifications de la charte graphique qu’il peut nous imposer.

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.

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.

Pour les applications mobiles :

• Mobbin Design
• UIMOVEMENT

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 :