La trousse à outil du Webdesigner

Avant de concevoir sa création le designer va réfléchir aux typographies, aux couleurs, aux textures, icônes, photos… Les ressources sont nombreuses et de nombreux outils existent pour bien s’organiser, c’est un gain de temps considérable dans les journées bien chargées du webdesigner. Voyons voir ce que nous pouvons mettre dans sa trousse à outils.

S’inspirer

Avant de se lancer, il y a toute une recherche créative qui se fait en amont afin de réaliser ce qu’on appelle une “planche tendance”. On peut ainsi la décrire comme un carnet d’idée ou un guide. Elle définit l’univers, la voie que le designer envisage de suivre pour sa création. En accord avec le brief client, elle permet au designer de rester en adéquation avec ses attentes.

Bien entendu, il existe les grands classiques comme : Pinterest, Behance, Drupal qui sont les plus répandus. Le most ? Installer une extension comme Panda (pour Chrome) qui change votre page d’accueil avec de nouveaux design tous les jours.

Mais les ressources sont infinies à vous de sélectionner vos préférés. Je vous propose de retrouver la sélection de François Chaillot.

Les typographies

Une autre étape fondamentale dans la recherche du webdesigner est la trouvaille d’une typographie qui est un élément fondamental à l’identité du site ou du projet web. Il faut faire attention cependant à utiliser des polices libres de droit. On vous a donc concocté une petite liste des indispensables.

  • Google Fonts : est la ressource la plus utilisée. Celle-ci offre une large palette de police spécialement pour le web. Les polices sont sous licences libres et peuvent donc être utilisées pour tous vos projets.
  • Dafont : Le site propose lui aussi de très nombreuses polices sous plusieurs licences. Elles ne sont donc pas toutes gratuites, mais Dafont est une excellente ressource.
  • Font Squirrel : encore une ressource bien connue et utile pour trouver une police gratuite. Toutes les polices sur Font Squirrel sont, en effet, gratuites et libres pour un usage commercial.
  • Whatfont : quant à lui permet d’identifier les polices utilisées sur une page web. Il se présente sous la forme d’une extension Chrome, c’est en quelque sorte le shazam des typographies !

Choisir sa palette de couleurs

Le choix des couleurs est tout aussi important lors de la réalisation d’un projet. Il est essentiel de choisir des couleurs qui se complètent et s’accordent. Pour cela, nous vous avons sélectionné plusieurs outils pour créer votre palette.

  • Adobe Color CC : cet outil, proposé par Adobe, permet de créer ses propres palettes ou d’en utiliser une parmi celles proposées. Il est possible de la choisir selon différents critères : couleurs complémentaires, nuances, semblable, etc.
  • Colors Generator : les palettes sont toutes déjà préconçues. On y trouve un large choix qui vous permettra sans hésitation de trouver la palette qu’il vous faut.

Il existe aussi des logiciels vous permettant d’identifier les couleurs utilisées sur une image ou une page web.

  • Colorpick est une extension de google qui vous permet de trouver rapidement une couleur et d’en copier son code hexadécimale.

Trouver les bonnes textures

Le choix des textures a aussi son importance. C’est ce qui permettra de décliner l’univers du projet. Il est, bien sûr, possible de créer sois même ses propres textures à partir du design créé, mais il existe aussi plusieurs ressources libres de droits adaptés au web.

  • Pattern library : mets à disposition des textures selon tous les goûts et en prime, l’interface du site est super agréable, il suffit de défiler les images pour trouver votre coup de cœur.
  • Subtle Patterns : propose des choses beaucoup plus sobres mais tout aussi complètes. 
    Il existe aussi Freebies Gallery et Pixeden si vous n’avez toujours pas trouver votre bonheur.

Photos libres de droit

Il est possible que vous ayez besoin de ressources photos pour tel ou tel projet. Les budgets peuvent vite grimper dès qu’il s’agit de photo alors pour cela nous vous proposons de retrouver la liste des 20 meilleurs banques d’images gratuites et libres de droits sur le site Tombreton.

Des icônes libres de droits

Autres points très importants pour l’identité visuelle d’une page : les icônes. Cela peut s’avérer fastidieux et long pour concevoir ses propres icônes, voilà une liste libre de droit qui pourra vous faire gagner des heures utiles :

  • Flaticon : une des plus grosses ressources d’icônes vectorielle gratuite.
  • Flaticons : des icônes utilisables gratuitement et classées par thème.
  • Thenounproject : des centaines d’icônes gratuites
  • Iconmonster : un moteur de recherche d’icônes gratuites et libre de droits.

Cet article vous a plu ?

Retrouvez notre article sur la trousse à outil du Community Manager !

Like what you read? Give Blandine Pelat a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.