La réalisation de webdesigns chez Walk The Line

Bienvenue dans ce nouvel article par Walk The Line !
Comment définiriez-vous un bon site web ? Par ses performances ? Son positionnement dans les moteurs de recherches ? Sa complétude ? Son design ?

Une chose est sûr, cette définition est propre à chacun.
Cependant, chez Walk The Line, nous nous accordons à dire qu’un bon site web allie à la fois optimisations techniques et interface utilisateur bien conçue.

Si nous avons déjà parlé des performances d’un site web et de comment les optimiser, aujourd’hui, nous nous pencherons sur le design de ceux-ci.

Plus particulièrement, nous allons voir comment, chez Walk the Line, nous réalisons des webdesigns.

Voici donc les différents points abordés :

• Introduction
• 1/ Recueillir les besoins du client
• 2/ Réaliser une veille graphique et professionnelle
• 3/ Réaliser des zonings
• 4/ Réaliser des webdesigns
  • Et comment fait-on si on n’est pas inspiré(e) ?​
• Conclusion

Introduction

Pour créer un site web qui répond parfaitement aux besoins d’un client, il y a plusieurs points à ne pas négliger. Apporter un soin aux performances, au responsive web design, choisir la solution adaptée…

Ces points sont capitaux, mais qu’en est-il du design ?
La forme doit être au service du fond, et non l’inverse. Cependant, un site web même bien optimisé peut ne pas convaincre vos utilisateurs si son interface ne leur plaît pas.

C’est pourquoi il est tout aussi important de veiller à ce que le front-end soit attractif, mais pas seulement. En effet, même avec un design attirant, vous risquez de perdre vos utilisateurs si la navigation est trop complexe, peu intuitive, etc.

Mais alors, comment concilier tout cela me direz vous ?
Avec un webdesign répondant à la fois aux attentes et besoins du client, cohérent avec sa marque, sa charte graphique et au parcours utilisateur bien conçu.

D’accord, et comment fait-on cela ?
Minute papillon ! Comme je réalise les webdesigns chez Walk The Line, je vais vous expliquer comment je procède.

Lorsque je réalise un webdesign, je ne prends pas mes feutres en barbouillant dans tous les sens ! De toute façon, j’ai essayé, les feutres sur l’écran, ça ne fonctionne pas.

Il faut garder à l’esprit qu’une méthodologie est nécessaire à chaque étape de la création d’un site web. Les webdesigns n’y échappent pas.

• Tout d’abord, de qui parle-t-on ? Qui est mon client ? De quoi a-t-il besoin ? Il va de soi qu’un site web pour un boucher n’aura pas le même rendu qu’un site internet pour une assistante maternelle. Même dans le cas de deux sites web pour deux bouchers, ils peuvent différer si les deux n’ont pas les mêmes besoins. La première étape consiste donc à cerner l’identité de notre client, ses attentes et ses besoins.
• Ensuite, je réalise une veille graphique et professionnelle. La première me permet de glaner des idées, de l’inspiration, du point de vue purement graphique. Des couleurs tendances, des formes originales, etc. La seconde me permet de comprendre et d’assimiler les codes du métier de notre client.
• La prochaine étape consiste à matérialiser toutes ces idées qui fourmillent. Nous allons les poser dans des maquettes “fil de fer” ou “zonings”. En nuance de gris et sans détails, elles sont incontournables pour s’assurer que le parcours utilisateur est bien conçu.
• La dernière étape, c’est la réalisation des webdesigns. On reprend nos zonings et on y apporte couleurs, photos, textes, et même de l’animation pour les petits fous aventureux.

Alors, on regarde ça plus en détail ?

Prêt à réaliser de super webdesigns ?

1/ Recueillir les attentes et besoins du client

Je sais que cela peut être tentant de se lancer dans des gribouillis à la moindre idée. Cependant, conservez-les pour vous. Toute idée est bonne à étudier mais toute idée ne conviendra pas à votre client !

C’est pour cela qu’avant de réaliser le moindre tracé, je prends le temps de comprendre les éléments en ma possession.
Qui est mon client ? En quoi consiste son métier ? Comment s’adresse-t-il à sa clientèle ? Est-ce qu’il a besoin de fonctionnalités spécifiques sur son site web ? etc.
Spoiler alert, vous ne serez pas plus avancé en sachant que votre client a mangé des chocapics au petit-déjeuner.
Il faut se poser les bonnes questions.

Prendre le temps de réfléchir à cela est indispensable. Autrement, c’est le risque de poursuivre nos webdesigns sur une piste bancale, qui ne conviendront pas au client.

Cahier des charges, site web du client (dans le cas d’une refonte de site internet), backlog et autres user stories sont appréciés à cette étape.
Cela peut paraître un peu rébarbatif au premier abord, mais croyez-moi, vous ne le regretterez pas.

2/ Réaliser une veille graphique et professionnelle

Maintenant que l’identité et les attentes du client sont cernées, on peut commencer à plancher sur l’esthétique de tout cela. Je réalise toujours une double veille.
Mais avant-tout, c’est quoi, une veille ?

La veille, qu’il s’agisse d’une veille graphique ou d’une veille technique, consiste en un rassemblement d’informations, de nouveautés, de tendances, etc. Le but ? Rester à jour des actualités et des nouveautés, quelles qu’elles soient. A plus haut niveau encore, le must, c’est même de les anticiper.

Et comment on procède ? Tout ou presque est un bon outil pour réaliser une veille efficace.
Cela dépend du type de veille que vous souhaitez effectuer. Les journaux en ligne, des articles de blogs compilés dans un agrégateur de flux RSS, des comptes Instagram, des pages Facebook, ou tout simplement un tour sur Google.

Pour ma veille graphique, j’utilise notamment Instagram, Behance, Dribble et Feedly. Ces quatre outils sont mes incontournables, mais il m’arrive d’en utiliser d’autres.
En fait, je m’intéresse aux contenus rattachés de près ou de loin à l’UI/UX design.

Vous vous demandez ce que signifient ces quatre lettres ? Petite explication.
UX, c’est pour user experience, ou expérience utilisateur. C’est le frontend, le visuel restitué à l’utilisateur, l’expérience vécue en naviguant sur le site ou l’application.
UI signifie user interface, ou interface utilisateur. Là, on s’attarde sur les outils utilisés pour créer l’UX. Les boutons, les couleurs, les formes, etc.
L’un ne va pas sans l’autre !

Dain Miller, développeur web, l’a comparé au monde équestre, et je trouve cela bien résumé :

“L’UI est la selle, les étriers et les rênes. UX, c’est le sentiment de pouvoir monter à cheval”
– Dain Miller

Sur Instagram, je suis abonnée à plusieurs comptes, hashtags, etc. Cela me permet de glaner des idées, me tenir informée des tendances graphiques mais aussi d’apprendre comment réaliser tout cela avec un logiciel de conception d’interfaces web.
En effet, il est possible de créer des webdesigns très poussés, si tant est que l’on sait comment s’y prendre. Pour cela, Instagram est très utile. Il regorge de tutoriels de quelques secondes qui vous feront dire “Waouh, faut que j’essaye ça !”.

Behance et Dribble sont des portfolios en ligne. Des milliers d’artistes, graphistes, webdesigners, illustrateurs et plus encore y présentent leurs travaux. On peut y enregistrer les travaux dans des planches d’ambiances ou moodboards. J’en crée généralement une par projet pour y trouver de l’inspiration, notamment en termes d’interface utilisateur.
J’enregistre également tous les travaux coups de cœur dans une autre moodboard. J’ai également des planches d’ambiances dédiées à des thématiques spécifiques : autour du flat design, du néomorphisme, des couleurs pastels, etc. C’est toujours bon de venir y chercher des idées !

Feedly est un agrégateur de flux RSS. Si un article de blog, un projet behance ou autre passe entre les mailles du filet, Feedly le rattrape. Il conserve tout cela bien au chaud pour que je le lise plus tard.
Qui plus est, j’y retrouve les derniers articles de blog consacrés aux nouveautés Google, WordPress, accessibilité web, référencement naturel, etc. Le web évolue vite, mieux vaut suivre le rythme. Feedly est donc mon premier outil en terme de veille technique.

La veille graphique et technique n’est jamais vraiment achevée. On trouve toujours une idée de plus.
Je n’hésite pas non plus à aller voir le site web des concurrents. Comment s’y prennent-ils ? Y a-t-il des points communs entre les différents sites ? Et si oui, pourquoi ? Google peut s’avérer être une véritable mine d’or.

L’ultime astuce, pour ne pas perdre ses idées, c’est la création de moodboards. Grâce à un outil tel que Canva, je peux facilement mettre en page des photos, des pictogrammes, des polices, des couleurs, des formes et tout ce qui m’inspire. Et un coup d’œil, je retrouve ainsi tous les éléments qui définissent ma direction graphique. En cas de doute, je peux m’y référer.

3/ Réaliser des zonings

Maintenant que je sais qui est mon client, ce qu’il veut et comment je vais le lui apporter, encore faut-il le mettre en forme.
Mais reposez ces feutres, ils nous serviront plus tard. Pour le moment, c’est au crayon de papier que cela se joue. Enfin, ça, c’est si vous êtes adepte du vintage.

Si comme moi vous n’êtes pas capable de dessiner un rectangle qui ressemble à autre chose qu’une pomme de terre, optez pour Adobe XD.
J’exagère un peu mais une chose est sûre, l’étape des zonings requiert beaucoup de rectangles, alors mieux vaut savoir bien les dessiner.

Les zonings ou “maquettes fil de fer” sont créées dans le but de concrétiser cette UX dont nous parlions précédemment. En nuances de gris exclusivement, on vient disposer rectangles, cercles et lorem ipsum (faux texte) méthodiquement.

Ces rectangles et cercles viennent matérialiser des emplacements pour créer notre UI/UX au fur et à mesure. Même si c’est parfois difficile, on s’abstient à cette étape de déposer de la couleur ou des photos. A la rigueur, les titres définitifs de vos pages peuvent y figurer, mais rien de plus.

“La forme, c’est le fond qui remonte à la surface”, nous disait Victor Hugo. Autrement dit, la forme sert le fond, elle ne doit pas prendre le dessus sur lui.

C’est pourquoi ces zonings nous aident à matérialiser notre fond avant la forme.
Que veut l’utilisateur du site web de mon client ?
Si mon client est photographe, il y a fort à parier que l’utilisateur voudra voir ses photographies pour se faire une idée de son travail.

Alors on y va ! On trace des cercles qui seront de futures icônes, des rectangles pour les boutons et un autre pour représenter un slider en pleine page. On y ajoute juste la mention “slider pleine page”.
Je sais, j’ai dit “pas de texte”, mais je peux tout expliquer.

Attendez, je peux tout expliquer !

Chez Walk The Line, nous travaillons en méthode agile. Le client est donc présent à chaque étape de conception du site pour valider ou non les avancées. C’est un vrai gain de temps et d’énergie pour tout le monde. En rectifiant le tir au fur et à mesure, on évite les problèmes sur la ligne d’arrivée.
Un texte comme “slider pleine page” est donc là pour expliquer au client l’intention présente derrière ce rectangle, et c’est tout. Il n’a pas pour vocation d’être présent sur le site.

Avec Adobe XD, je crée autant de plans de travail que nécessaire, soit un par page de l’arborescence du site. Placer ces rectangles et autres formes géométriques permet à tout le monde d’avoir une idée du parcours utilisateur et de la future interface.
Si les zonings permettent d’éviter trop d’erreurs, ils ne les excluent pas entièrement.

Bonne nouvelle, aucune règle n’interdit d’effacer pour recommencer !
Ma maman me disait souvent que c’est pour ça qu’il y a des gommes au bout des crayons.

Et c’est aussi pour cela qu’il est utile, voire indispensable, de travailler en méthode agile.

4/ Réaliser des webdesigns

Le moment que nous attendions tous est arrivé ! Cette fois-ci, relâchez vos feutres, libérez vos pulsions graphiques, l’heure est venue de parler webdesign.

Les webdesigns viennent donner vie aux zonings réalisés précédemment.
Ces maquettes très réalistes doivent être le reflet (presque) parfait du site web du client.

Comment ça, “presque” ?
Lors de l’intégration des webdesigns, il se peut que l’on se heurte à un obstacle, un petit grain de sable dans les rouages. Le genre de grain de sable qui fait que l’image que l’on avait prévue de décaler de 10% sur la droite ne peut être décalée que de 5%. Ça arrive et ce n’est pas grave. C’est ça les conditions réelles !
Bien entendu, il y a un monde entre un problème de calage minime et une intégration aux antipodes du design initial. Le webdesign est la règle. Les exceptions, si on ne peut les exclure, doivent rester aussi rares que possible.

Mais avant d’envisager l’intégration, poursuivons nos webdesigns.
Je travaille à nouveau avec Adobe XD. J’utilise la charte graphique du client pour les couleurs et typographies à appliquer. Il faut rendre ces maquettes vivantes alors on y ajoute du vrai texte, de vraies photos, etc.

J’apprécie travailler avec Adobe XD car il est intuitif et possède des fonctionnalités bien pensées. Je peux enregistrer un élément récurrent, comme un bouton, une couleur, une mise en forme d’un titre, sous forme de composant.

Le composant principal se décline sous forme de composants secondaires, tous rattachés au composant principal.
Je peux leur définir une animation au survol, par exemple, pour simuler un passage du curseur par l’utilisateur. Mais ce que je préfère, c’est à quel point ils peuvent être dynamiques et me faire gagner du temps !

Si j’ai appliqué une couleur qui ne convient pas à notre client, il me suffit de changer uniquement celle du composant principal pour que les composants secondaires soient affectés. Et voilà comment passer du rouge au bleu en deux secondes !
A l’inverse, je peux modifier l’aspect d’un composant secondaire sans affecter le principal.

Je trouve beaucoup d’avantages à travailler avec Adobe XD. Je ne dirais pas qu’il s’agit du meilleur logiciel pour réaliser des webdesigns, ceci est trop subjectif.
Cependant, je peux vous dire que les composants, les couleurs enregistrées et les plugins peuvent être un vrai gain de temps, s’ils sont correctement employés.
On peut également travailler à plusieurs sur un même document simultanément ! Plutôt pratique si l’on souhaite travailler en équipe.

Page après page, le site se dessine. Grâce aux retours de nos clients, j’adapte les webdesigns pour qu’ils soient en adéquation avec leurs attentes.

Dans l’ordre des choses, je commence par créer les éléments communs de mes pages. Comprenez là le header et le footer. Une fois cela fait, je les enregistre en tant que composants.
Cela me permet de pouvoir les modifier tous en même temps si besoin. Egalement, seuls les composants peuvent être animés. C’est ainsi que l’on peut créer l’illusion d’un texte qui change de couleur au survol, par exemple.

Pour gagner en efficacité, je n’hésite pas à enregistrer les différents styles dont j’ai besoin. Les différents titres avec leur taille, leur typographie, leur niveau de graisse, leur couleur, etc.

Je construis au fur et à mesure le reste de la page. Cette fois-ci, interdiction de laisser traîner un “slider pleine page”. Il faut matérialiser ce slider. Son apparence sur le webdesign sera celle qu’il aura sur le site web.

Lorsque tous les éléments indispensables de l’interface utilisateur sont en place, je peux ajouter des finitions. Des petits plus qui ne sont pas indispensables en terme d’UI mais qui peuvent améliorer l’UX.
Cela peut être une ombre discrète pour créer du relief, des bordures arrondies ou des images décoratives sur le corps de la page.

Ces derniers éléments sont des détails. Ils ne sont pas indispensables mais peuvent ajouter un plus. Alors je dois m’assurer qu’ils ne viennent pas perturber la navigation de l’utilisateur.
Et pour me rendre compte de tout cela, je peux créer un prototype.

Grâce aux fonctionnalités de prototypage dans Adobe XD, je peux réaliser une maquette animée.
Cela me permet de créer des liens entre mes plans de travail comme entre de vraies pages web, lier mes boutons à d’autres pages, etc. Je peux ensuite prévisualiser le tout grandeur nature.
En naviguant sur les webdesigns comme sur une interface web, je visualise mieux les correctifs à apporter.

Et comment fait-on si on n’est pas inspiré(e) ?

Que ce soit en début de projet ou en pleine phase de webdesign, le manque d’inspiration peut parfois se faire sentir. Ce n’est toutefois pas une fatalité.

Si le manque d’inspiration est là dès le début du projet, alors une veille graphique et/ou technique plus approfondie vous aidera grandement. Ne vous contentez pas de regarder, piochez des idées et collez-les dans une moodboard. Croyez-moi, pouvoir s’y référer en cas de besoin, c’est très utile.

Si le syndrome de la page blanche se manifeste en plein webdesign, là encore, pas de quoi paniquer. Lorsque cela m’arrive, je retourne voir mes planches d’ambiance. Généralement, c’est ce qui marche pour moi. Je m’imprègne davantage de ma direction graphique, et c’est reparti.

Parfois cependant, cela ne suffit pas. Je passe de longues minutes à tourner et retourner mes moodboards sans que les idées ne me viennent. Dans ces cas-là, j’utilise ma playlist “coup de fouet”. Mais si, vous savez, celle que l’on a tous et qui contient des musiques qui rechargent les batteries.
Dans ces cas-là, Clutch, ZZ Top et autres Joe Cocker sont très doués pour réveiller mes idées.

Et là encore, si cela ne suffit pas, je prends cinq minutes et un café. Une mini pause, parfois, c’est tout ce dont le cerveau a besoin pour repartir !

Une bonne playlist, et ça repart !

Conclusion

En conclusion, je dirais que les webdesigns sont uniques et sur-mesure pour chaque client. Ils doivent répondre à ses attentes mais toujours être composés d’une interface utilisateur intuitive et logique.
Ils sont également l’occasion de démontrer toute votre créativité. Une veille régulière vous permettra de pousser plus loin votre imagination et de produire des webdesigns toujours plus innovants.

Alors à vos crayons et amusez-vous ! Un certain Albert Einstein a dit un jour “la créativité, c’est l’intelligence qui s’amuse”.

Dans la même catégorie