Les 10 tips d’une Webdesigner Junior

Auteur(s) de l'article

Cela fait bientôt 5 mois que je suis à l'agence et j'en ai appris des choses ! Oui, il est temps que la graphiste en moi vous partage ses aventures de Webdesigner. Du papier aux écrans, l'évolution est en marche. Voici 10 astuces quasi indispensables auxquelles il faut prêter attention pour que la transition ne soit pas trop douloureuse :

1. Enregistrer tes fichiers Web dans les bons formats

Sans rigoler, j'ai fait cette erreur durant une semaine et je me suis arraché les cheveux en essayant de comprendre pourquoi le rendu des images était de "mauvaise" qualité. Il ne faut également pas les enregistrer en 300 dpi… C'est logique, non ? Pas pour moi, il faut croire… Au début !

2. Manier les tailles de typos

Dans la communication print, on travaille généralement avec des tailles typographiques très variées. Pour ma part, j'ai souvent été confrontée à des tailles très petites (en dessous de 10 points). Dans le Web, "don't even think about it!". Que c'est dur au début de prévoir des tailles de texte au-delà des 15 points. Mon petit cœur souffrait et mes yeux avaient du mal à s'habituer. Et puis on parle de lisibilité, d'accessibilité ou de typographie responsive. Là, tout ça prend du sens.

3. Maîtriser les langages HTML et CSS

Les langages HTML et CSS deviendront ta langue maternelle. Oui, parce que tu veux mieux communiquer avec tes collègues Frontend et Backend (ou plutôt les comprendre). Il faut absolument maîtriser ces notions-là. Je commence enfin à me sentir moins seule lors des conversations à midi !
Gif "is this real life"

4. Utiliser les langages HTML et CSS

Comme tu t'es donné de la peine à apprendre ces langages, utilise-les ! C'est primordial pour que tes maquettes soient cohérentes et réalisables. C'est aussi comme ça tu vas mieux collaborer avec les développeurs. Le "clic-droit › inspecter" dans le navigateur sera ta nouvelle arme de conception massive : le code c'est la vie! (Ok, je déconne un peu, mais mes super collègues développeurs me lisent ^^).
Gif d'un chat rigolo qui se retourne sur le dos

5. S'intéresser aux autres métiers qui entourent la création d'un site Web

Avant mon arrivée à l'agence, il n'y avait que les Webdesigners et les concepteurs qui donnaient vie à un site ! Pourtant, il y a une chaîne complète avant et après moi : Digital Strategist, Software Designer, Full Stack Developer, Project Manager, Video Maker, Social Media Strategist, Frontend Developer, Responsable Finance, Responsable RH & Office Manager, Frontend Developer, Directeur Artistique… IL Y EN A DU MONDE !

6. Penser mobile avant desktop, WTF?!

Et oui on commence par designer la version mobile avant la version desktop. En passant par cette première étape, nous nous concentrons ainsi sur l'essentiel des informations à donner aux gens. Nous nous attardons aussi sur des tailles d'écrans qui représentent en moyenne la moitié des consultations de sites. 

7. Penser "Responsive"

"Respon" quoi? C'est bien joli de designer une page Web, mais encore faut-il que le design épouse parfaitement l'écran de ton smartphone ou de ta tablette. Croyais-tu franchement que tout s'adapterait comme par magie ? Et non! Tout est repensé afin que nos petits (ou gros) doigts puissent naviguer en toute tranquillité sur les sites ou applications. Et que l'expérience utilisateur soit la plus fluide et optimale possible.
Maquette mobile animée

8. Faire des tests utilisateurs

Oui, nous testons nos projets sur des âmes innocentes afin d'être sûrs que vous, simples mortels, puissiez comprendre le fonctionnement d'un site internet ou d'une application.
Gif humoristique d'un chien qui fait un test utilisateur

9. Do you speak English ?

Oui. Tout, mais absolument TOUT est en anglais (99 percent it seems!). Sachant que je parle la langue de Shakespeare telle une vache espagnole, je vous laisse imaginer la suite…

10. S'informer et se former

Le dernier et le plus important : tu t'informeras et te formeras. Car oui, le Web est une source de savoir et d'inspiration infinie. Voir ce que nos voisins font peut nous donner de bonnes (et parfois moins bonnes) idées.
Gif qui représente un cerveau qui se repose