Au fil des années, j'ai eu l'occasion de travailler sur des dizaines de projets pour des clients allant de la TPE locale jusqu'aux entreprises du CAC 40. Pour la majorité de ces projets, faire les allers et retours entre différents prestataires peut s'avérer très chronophage et source de nombreuses erreurs. Il est certains que de pouvoir proposer un design simple mais élégant en plus de la gestion technique du projet m'a permis d'avoir un avantage sur le marché en tant qu'indépendant.

J'ai décidé de vous présenter aujourd'hui la liste des outils que j'utilise majoritairement pour la conception graphique des applications et sites web utilisables gratuitement (parfois avec quelques restrictions).

Les outils

L'indémodable duo papier-crayon

Même si ça sonne comme une blague, la première étape lors de la conception d'une interface est le maquettage sur papier, surtout si vous n'êtes pas designer de métier. Ici, aucune compétence en dessin n'est requise, il s'agit de dessiner des carrés (et à la limite quelques ronds) pour placer les éléments important de vos écrans et ainsi réfléchir à l'organisation et à la logique de votre application.

Mais pourquoi ne pas le faire sur un logiciel de mockup directement ? Parce que le logiciel, quel qu'il soit, va vous pousser (parfois inconsciemment) à bien aligner vos éléments, à ajuster les tailles, à les centrer correctement, bref il va vous faire perdre un peu de temps sur des détails. Or ce qui est important dans la première phase de maquettage c'est que vous ne devez pas passez plus de deux à trois minutes sur vos ébauches.

La raison ? Plus vous passez de temps sur une création, plus vous y attachez une importance sentimentale et lorsque la bonne décision est de tout refaire (pour améliorer l'expérience utilisateur), plus vous essaierez de vous persuader que cette version est suffisamment bonne afin de la conserver intacte.

J'ai menti, un crayon de papier, une gomme et une feuille coûtent mine de rien quelques euros ! Désolé !

Dribbble

Dribbble est un réseau social pour designers et créatifs sur lequel des milliers de professionnels postent leurs meilleures réalisations allant du simple logo jusqu'à des concepts d'interfaces avant-gardistes et magnifiquement animés.

J'utilise Dribbble pour créer un moodboard (un tableau d'inspiration) des formes, couleurs, typos et ambiances qui peuvent correspondre au projet afin de commencer à créer une charte graphique suffisamment complète pour donner vie à la maquette précédemment dessinée.

Le but de naviguer sur Dribbble n'est pas de simplement copier-coller le design d'un artiste, mais simplement de trouver de l'inspiration et ainsi arriver à peut-être sortir de sa zone de confort pour ne pas s'enfermer dans un style et pouvoir s'adapter à tous les différents secteurs d'activité des clients.

Disponible ici : https://dribbble.com

Flat UI Colors

Si je devais trouver une seule réponse à la question récurrente "Comment fais-tu pour designer des applications tout en étant daltonien ?", ce serait purement et simplement: "Flat UI Colors".

Vous n'avez pas l'oeil d'un peintre en ce qui concerne le choix des couleurs pour vos projets ? Flat UI Colors vous propose 14 palettes différentes rassemblant 280 couleurs sélectionnées à la main et s'accordant à merveilles les unes avec les autres.

La cerise sur le gâteau ? Cliquez sur une couleur et le code hexadécimal (ou autre) correspondant sera directement copié dans votre presse-papier pour être réutilisé ailleurs !

Disponible ici : https://flatuicolors.com/

Adobe XD

C'est l'un des derniers outils que j'ai ajouté à mon processus de création et qui est venu remplacer Photoshop dans le design d'interface, XD étant beaucoup moins lourd à faire tourner que ce dernier (et moins cher).

L'outil est très épuré et après quelques rapides tutoriels il se prend très vite en main : il m'aura fallut moins d'une heure avant de maîtriser toutes les fonctionnalités dont j'avais besoin.

La gestion des plans de travail est parfaite et l'exportation se fait en un clin d'oeil, ce qui facilite l'intégration avec l'outil suivant.

Je recommande vivement !

Disponible ici : https://www.adobe.com/ch_fr/products/xd.html

Invision

Voici LA plateforme qui rend mes clients heureux, leur met des étoiles dans les yeux et nous fait gagner du temps à tous les deux. (ce poème est sponsorisé par le dictionnaire des synonyme Larousse) (c'est faux)

Invision est une plateforme qui permet de réaliser des prototypes visuels interactifs en un tour de main pour simuler une application déjà existante sans avoir à attendre la fin de la phase de développement.

Vous importez tous les écrans que vous avez réalisé (avec Adobe XD par exemple), et vous allez pouvoir indiquer autant de zone de clic que vous désirez pour y faire des transitions avec d'autres pages de l'application.

Avec les applications iOS et Android, vous pouvez directement afficher et interagir avec le prototype depuis votre smartphone, votre tablette ou l'ordinateur d'un client !

Si un client vous demande de réaliser une application rapidement car il en a besoin de la présenter pour lancer sa prospection au plus vite, proposez-lui une première version sous la forme d'un prototype interactif, vous gagnerez du temps, de la sérénité et lui aussi.

Disponible ici : https://www.invisionapp.com/

Les ressources

Freepik

Freepik est une bibliothèque géante d'images, vectorielles ou non, disponibles gratuitement même pour une utilisation commerciale à condition de citer l'auteur et la plateforme. J'y vais régulièrement chercher des arrière-plans, des objets, des motifs, des personnages ou des mockups.

La plateforme n'est pas représentative d'un style en particulier, je m'en sers donc aussi parfois pour compléter mon moodboard avec quelques illustrations. C'est pour la même raison que je ne la recommande pas spécialement pour trouver les ressources définitives d'une application ou d'un site car il est parfois difficile de trouver plusieurs ressources réalisées avec la même patte graphique.

Disponible ici : https://www.freepik.com

Flaticon

C'est LA plus grande bibliothèque d'icônes gratuites disponible sur le net. Elle totalise (en comptant la version premium) plus 2,5M d'icônes regroupées en plusieurs centaines de catégories.

Contrairement à Freepik, il est très facile de trouver tout un ensemble d'icônes ayant le même style graphique et la plupart du temps chaque icône est déclinée en plusieurs coloris.

En bonus : Créer un compte permet d'avoir gratuitement accès à l'outil de personnalisation des icônes ainsi qu'à la création de "papier-peints" répétables à l'infini !

Disponi

Disponible ici : https://flaticon.com

Unsplash

Unsplash est une des bibliothèques d'images les plus appréciées par les créateurs sur internet car elle contient plus d'un million de photos magnifiques et de très bonne qualité.

Mais la différence avec la plupart des autres plateformes reste le fait que vous pouvez utiliser les images dans un but commercial sans avoir à créditer l'auteur ou la plateforme ! Et même si je vous encourage à créditer au maximum les auteurs, cela facilite la tâche pour certains projet pour lesquels il est difficile de créditer l'auteur sans porter préjudice au design !

La galerie de la plateforme ManyPixels n'est pas la plus fournie, mais j'aime beaucoup l'ambiance très sereine qu'apportent les illustrations. Qu'elles soient utilisées en premier-plan ou en arrière-plan les images s'intègrent parfaitement à conditions d'avoir un design assez clair et neutre.

En bonus : le site intègre un éditeur de couleur pour changer la nuance de toutes les illustrations en temps réel.

Google Fonts

Avoir une bonne police d'écriture est comme avoir bien fait son ménage, les gens ne le remarque pas, mais au contraire si on le néglige, tout le monde ne remarquera que ça.

Google Fonts est parfait pour choisir une police esthétique, libre de droit et surtout compatible pour le web ! Et aucun risque de tomber sur un caractère manquant par surprise, les polices sont très complètes.

En bonus : La plupart sont disponibles dans de multiples graisses et l´intégration dans le code final se fait en une ligne !


J'espère que ces ressources vous aideront à améliorer votre processus créatif ou à oser expérimenter et entrainer votre sens du design ! Si vous avez des questions où des remarques, n'hésitez pas à les envoyer par email à nicolas@brondin.com ou sur les réseaux sociaux.

À bientôt sur le blog !