Dans mon article sur "Les 8 étapes de la création d'un site ou d'une application web", j'expliquais que dans certains cas le design ne peut pas forcément être pris en charge par un expert, et doit être délégué au développeur directement.

Même si les métiers de designers et de développeurs sont très différents, il existe aujourd'hui de nombreuses ressources qui permettent de proposer facilement un design simple mais élégant.

Pour ma part j'adore le design, et régulièrement mes missions de développement incluent cette facette, j'ai donc rassemblé au fil des années des plateformes me permettant d'offrir des rendus de qualité grâces à des éléments graphiques libres de droit ou exploitable commercialement.

J'ai donc décidé de vous présenter aujourd'hui la liste des ressources graphiques gratuites que j'utilise majoritairement pour la conception des applications et sites web :

Flat UI Colors

Palettes de couleurs

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/

Flaticon

Icônes

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

Photos

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 !

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

Pexels

Photos et vidéos

Vous ne trouvez pas votre bonheur sur Unsplash ? Alors allez faire un tour sur Pexels, et la plateforme dispose même de magnifiques vidéos libres de droit !

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

UnDraw

Illustrations (svg)

UnDraw est LA gallerie d'images SVG par excellence avec plus de 500 illustrations uniques, respectant la même patte graphique et magnifiquement designées.

Attention néanmoins, cette plateforme est parfois sur-utilisée et si le design de votre projet utilise trop d'illustration de cette banque, il pourra vite ressembler à beaucoup d'autres sites ou applications.

Disponible ici : https://undraw.co/illustrations

Illustrations (svg)

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.

Disponible ici : https://www.manypixels.co/gallery

Get Waves

Générateur de formes (svg)

Parfois la limite entre un design trop simpliste et un design simple mais élégant tient à très peu de choses, et l'une des astuces plutôt à la mode revient à ajouter une transition graphique entre les différentes sections de vos pages, en ajoutant quelques vagues en SVG.

Get Waves est un générateur de vagues qui vous permet d'avoir des rendus très différents en fonctions des paramètres renseignés. En plus d'être pratique, l'outil est joli, facile à prendre en main et très bien fini.

Disponible ici : https://getwaves.io/

Blobmaker

Générateur de formes (svg)

Tout comme pour les vagues, les "blobs" peuvent être une bonne alternative pour ajouter des formes un peu moins classiques que des ronds, des carrés ou des triangles faisables en CSS.

Avec la propriété clip-path il vous est par exemple possible de donner une forme particulière à des photos de profil et un blob généré avec Blobmaker !

Disponible ici : https://www.blobmaker.app/

Google Fonts

Polices d'écriture

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 !

Disponible ici : https://fonts.google.com/

J'espère que cet article vous aura été utile, et bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage de d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Kelly Sikkema sur Unsplash