La toolbox est une liste d’outils en ligne variés accessibles gratuitement pour les webdesigners.
La liste est mise à jour au fil de mes trouvailles et de ce que je considère intéréssant pour le plus grand nombre !
Si vous souhaitez soumettre un site qui n’est pas présenté ici, dites-le moi !
Pour faciliter la navigation, les différents liens sont classés par catégorie :
Photographie Vidéo Mockups Typographie Couleurs Interfaces Ressources Divers
Photographie
Une sélection de banques d’images à connaître pour agrémenter ses projets avec des visuels de qualité.
Aperçu | Site web | Description |
---|---|---|
Findshot |
Si vous trainez souvent sur Instagram, ça devrait vous plaire. Ça rappelle un peu Unsplash aussi dans le style des images… |
|
Picjumbo |
Beaucoup de photos libres dans des catégories assez claires : animaux, architecture, nature, food, business etc… |
|
Finda.photo |
Moins connu, Finda.photo propose tout de même un très grand nombre de belles images et la possibilité de faire des recherches par couleurs ! À tester. |
|
FoodiesFeed |
Si si, ça existe ! Une banque d’image dédiée à la nourriture. Très utile pour de nombreux projets en rapport avec la restauration ou l’alimentation en général. À ne pas consulter quand on a faim ! |
|
StockSnap |
Le site est très clair et les images variées. Ce n’est pas le meilleur en terme de qualité mais il faut le garder dans ses favoris. |
|
LibreStock |
LibreStock propose moins de photos mais va chercher dans différentes banques d’images pour proposer un maximum de résultats. À ne pas négliger ! |
|
Diverse UI |
Diverse UI vous permettra de télécharger des images de profils au format carré (1:1) réalistes en un clin d’œil ! Possibilité de trier par taille et par sexe. |
|
Pixabay |
Les résultats sont des fois un peu moins pertinents mais Pixabay dispose de plus d’un million de photos. Impossible de passer à côté ! |
|
Unsplash |
Banque d’image très connue, beaucoup de contenu de qualité, un moteur de recherche performant et efficace. C’est vraiment un passage obligatoire lorsqu’on cherche de belles images gratuites. |
|
Everypixel |
Everypixel est LE site à retenir dans cette sélection. Depuis que je l’ai découvert récemment, je ne peux plus m’en passer. Le nombre d’images est impressionnant puisqu’en fait le site propose des résultats venant de plusieurs dizaines de banques d’images gratuites (ou payantes, on peut filtrer la recherche très simplement). Un gain de temps énorme ! |
|
Pexels |
Pexels fait partie de mes coups de cœur : les images sont de bonne qualité, variés et très nombreuses. Je passe souvent par ce site pour trouver des idées de visuels pour mes projets. |
Vidéo
Il existe aussi des banques de vidéos gratuites et libres de droits proposant des contenus variés et de qualité sans débourser le moindre centime.
Aperçu | Site web | Description |
---|---|---|
Mazwai |
Mazwai ne propose malheureusement pas de système de recherche mais une grande grille de vidéos. En consultant régulièrement le site, il n’est pas rare de tomber sur quelques pépites… |
|
Videezy |
Beaucoup de vidéos, recherche très facile, contenu Full HD et 4K ! |
|
Mitch Martinez |
Plus de 1000 vidéos classées dans différentes catégories variées. On peut vraiment trouver de belles vidéos en cherchant bien et même de la 4K… |
|
Coverr |
Coverr propose un grand nombre de vidéos d’arrière-plan pour donner une touche de dynamisme à votre site web. Vraiment très bon et très utile ! Possibilité de prévisualiser la vidéo dans le header du site pour se faire une idée du rendu final. |
|
Pexels Videos |
Comme la banque de photos, Pexels Videos propose un grand nombre de vidéos de qualité gratuites pour tous les projets ! La plupart du contenu est en Full HD. |
Mockups
Les mockups sont essentiels pour mettre en valeur et intégrer son projet au mieux dans son environnement.
Aperçu | Site web | Description |
---|---|---|
Mockup Photos |
Encore pleins d’iPhone, d’iPad, d’ordinateurs… à garder de côté quand on cherche du choix. |
|
Shotsnapp |
Excellent outil en ligne pour faire des mockups de navigateurs, d’iPhone ou d’iPad directement en ligne. Pas mal d’options de personnalisation. Assez unique en son genre, filez faire un tour ! |
|
Dunnnk |
Pleins de mockups dans pleins de positions différentes : iPhone, Apple Watch, iMac… il y a de quoi montrer son interface sous tous les angles ! |
|
MockuPhone |
De l’iPhone 5 à l’iPhone X. C’est propre sans fioriture. Il y a des iPads aussi ! |
|
MockupWorld |
Mon préféré quand je cherche des mockups : téléphones, ordinateurs, boîtes, vêtements, tableaux, murs et plus encore… |
|
Perfect Pixels |
Encore des produits de la Pomme dans lesquels vous viendrez coller vos screens. Elle est pas belle la vie ? |
|
SmartMockups |
Créez des mockups en quelques clics, gratuitement. C’est pas moi qui le dit. Et franchement c’est épatant, en quelques secondes on a un mockup de qualité sans avoir ouvert Photoshop ! |
|
Pixeden |
Des mockups très variés : magazines, cartes de visite, sachet, affiches etc. |
Typographie
La typographie et les polices d’écriture (fonts) sont des éléments essentiels, que ce soit pour une création print ou digital, selon le message que l’on souhaite faire passer.
Aperçu | Site web | Description |
---|---|---|
Get the Font |
Le site paye pas de mine comme ça mais il vous permet de trouver un énorme nombre de polices à télécharger gratuitement ! Peut-être utile pour des projets perso ou étudiant et utiliser des polices pas toujours accessibles, ce site fait des miracles. Encore merci Estelle ! |
|
DaFont |
Même si le site ne propose pas toujours des polices de qualité, le catalogue de DaFont est plutôt immense et propose toutes sortes de polices, des plus classiques aux plus exotiques… |
|
Font Squirrel |
Le catalogue de FontSquirrel est aussi très garni, le site propose aussi différents outils en ligne liés à la typographie. Très sympa ! |
|
Canva Font Combinations |
Cet outil est juste génial ! Il vous propose des combinaisons de polices en vous montrant des exemples présents sur de magnifiques sites web ! Je l’utilise très souvent. Je recommande particulièrement. |
|
Google Fonts |
Google Fonts est aujourd’hui la référence en terme de webfonts. Le catalogue ne cesse de grandir et l’implémentation des polices sur son site web est devenu est jeu d’enfant ! |
|
Typement |
Permet de tester différentes polices sur un mot donné. Simple, basique. |
|
Typewolf |
Un gros catalogue d’inspirations typographiques mis à jour très régulièrement ! À consulter sans modération. |
|
Wordmark.it |
Similaire à Typement, Wordmark.it propose de tester simultanément plusieurs polices sur un mot donné. Ça peut aider en cas de panne d’inspiration… |
|
WhatTheFont |
Permet d’identifier la police (ou une police proche) d’une image en l’uploadant en quelques secondes. Impressionnant quand ça fonctionne ! |
|
Fonts In Use |
Un site assez connu dans le monde des typographes : il permet de voir de (belles) créations avec différentes polices ! Un must have pour l’inspiration. |
|
The Anatomy of a Thousand Typefaces |
La librairie Google Fonts avec un système de recherche et de filtrage très poussé et intuitif : par contraste, graisse, hauteur d’x etc… bref, découvert en cours de typo cette année, ça vaut le détour ! |
|
Velvetyne |
Rien que le design du site vaut le détour. Velvetyne, une fonderie parisienne, est perturbant dans sa présentation mais son contenu n’est pas moins intéressant et de qualité ! Un must have pour les amoureux de la typo ! |
|
Type anything |
Très simple mais tellement efficace. Type anything vous permettra en quelques clics de déterminer les bonnes polices, tailles et marges pour le contenu textuel de votre site. Certains trouveront ça inutile, moi je l’adore. |
|
Font Pair |
J’adore les sites qui donnent des bonnes combinaisons de polices. Que ce soit pour un projet web ou print, ça permet vraiment de donner des idées. |
|
Abstract Fonts |
Pleins de polices en tout genres. Triées de différentes manières, vous devriez trouver votre bonheur ! |
|
Use & Modify |
Pleins de belles polices pas forcément connues. Je devrais consulter ce site plus souvent. En plus on peut les tester en direct. Que demander de plus ? |
|
The League of Moveable Type |
De nombreuses polices bien mises en valeurs avec des visuels très sympas, ça donne envie de tout télécharger ! |
Couleurs
Tout comme la typographie, un bon projet doit aussi présenter une belle palette de couleurs. Il existe différents outils à connaître lorsqu’on est en panne d’inspiration.
Aperçu | Site web | Description |
---|---|---|
Colourcode |
Là aussi, on va créer des palettes mais pas de la même manière, c’est vraiment astucieux et je vous laisse découvrir par vous même si vous ne connaissez pas. |
|
Adobe Color |
Vous le connaissez sûrement mais l’outil d’Adobe reste quand même très performant pour créer une palette de couleurs riche et cohérente. |
|
BrandColors |
Les codes couleurs des grandes marques, rien que ça ! |
|
ColorHexa |
Base de données immense et hyper bien présentée de couleurs. Si vous connaissez plus complet, dites-le moi ! |
|
LOL Colors |
Encore des palettes de couleurs si jamais vous n’avez pas d’idées. |
|
Coolors |
Des palettes de couleurs, bien organisées, beaucoup de choix. Bref, aussi utile que les autres ! |
|
Guideline Colour |
Les codes couleurs des grandes marques, encore ! Utile pour créer des boutons de réseaux sociaux aux couleurs de Facebook et Twitter par exemple… |
|
Color Hunt |
Le top pour trouver des palettes de couleurs tendances lorsqu’on a pas d’idée. C’est bien présenté, ça fait le boulot. Bref, foncez ! |
|
WebGradients |
De beaux dégradés pour vos projets web, pleins de couleurs et une navigation très agréable. |
Interfaces
Rien de mieux qu’une dose quotidienne de belles interfaces utilisateurs pour trouver l’inspiration.
Aperçu | Site web | Description |
---|---|---|
Collect UI |
Une grosse mine d’or d’inspiration en tout genre, vraiment de très belles choses à regarder lorsqu’on est en pleine panne créative ! |
|
HTML5 Up |
Une liste de templates HTML gratuits que j’apprécie tout particulièrement. La liste grandit petit à petit et c’est toujours sympa de voir les nouveautés du développeur. |
|
Call to idea |
Call to idea permet de trouver l’inspiration pour des “morceaux” de son site, certains modules : formulaires, login page, 404, empty page et pleins d’autres. J’adore vraiment le concept et les éléments présentés sont vraiment très bons ! |
|
Lapa Ninja |
Vraiment une excellente source d’inspiration en webdesign : des sites de qualités, modernes présentés dans une interface claire et catégorisée. J’y vais pratiquement tout le temps dès que j’ai besoin d’idées. |
|
Sketchsheets |
Un site web pratique qui permet d’imprimer des mockups d’iPhone, d’iPad, de Galaxy Note ou encore d’Apple Watch pour pouvoir dessiner à la main ses idées. |
|
Facebook Design |
La branche Design de Facebook propose quelques ressources pour la création d’interface. C’est vraiment qualitatif et en plus c’est gratuit. Merci Facebook ! |
|
UI Space |
Des milliers de freebies pour vous aider dans l’élaboration de vos interfaces : style guide, iPhone X, concepts Sketch… Tout est là ! |
Ressources
Ces sites sont de véritables mines d’or, c’est pour cela qu’ils sont dans une catégorie à part. Ils proposent un grand nombre de ressources (les freebies !) différentes gratuites : mockups, icônes, vecteurs, patterns, animations…
Aperçu | Site web | Description |
---|---|---|
FreebiesBug |
Pleins de freebies à télécharger : fonts, app design, icônes, mockups… |
|
unDraw |
Pleins de petite illustrations en SVG pour des designs modernes et élégants ! Possibilité de choisir une couleur principale qui modifient en ligne toutes les illus, vraiment top. |
|
SVB Backgrounds |
Très facile à utiliser, il permet de générer des fonds SVG variés pour vos maquettes et sites web en haute résolution. |
|
Vector.me |
Pleins de ressources vectorielles pour éviter la feuille blanche ou plutôt le plan de travail vide sous Illustrator. |
|
Vexels |
Encore d’autres ressources vectorielles à télécharger gratuitement et sans limite ! C’est beau et c’est gratuit. |
|
Vecteezy |
Des ressources vectorielles. Toujours. On trouve de tout : icônes, dessins, logos, formes… |
|
Creative Market |
Un market immense de ressources : polices, templates, photos, ressources. Attention : tout n’est pas gratuit mais en fouillant bien, on peut trouver beaucoup de choses sans débourser un centime ! |
|
PSD Repo |
Les amoureux de Photoshop ne sont pas en manque avec PSD Repo. Des ressources en masse à télécharger sur un site élégant et sobre. |
|
Pixel Buddha |
On trouve de tout sur Pixel Buddha, c’est vraiment la caverne d’Ali Baba, il faut que vous alliez voir ça. Je le connais depuis peu et je pense que je consulterai régulièrement ce site désormais. |
|
GraphicBurger |
Des ressources graphiques magnifiques, du pixel perfect dans tous les coins, bref, c’est Graphic Burger. |
Divers
Et ici, on met le reste, tout ce qui est inclassable mais pas pour autant inutile !
Aperçu | Site web | Description |
---|---|---|
GoodUI |
GoodUI c’est une très grande liste de bonnes pratiques à adopter en UX lorsqu’on réalise une interface web ! Vraiment très intéressant. |
|
Affichons-Nous ! |
Un collectif crée par des étudiants rencontrés à l’ECV Digital (Piotr Holyst et Prade Perrot), Affichons-nous met à la portée de tous des affiches culturelles et engagées issues de l’espace public. Graphiquement très intéressantes, elles sont une grande source d’inspiration pour des travaux print notamment. Chacun peut participer au projet en envoyant ses propres photos sur le site. |
|
Muzli |
Muzli est une extension de navigateur développée par InVision qui vous permet de vous donner des dizaines de ressources d’inspiration à chaque nouvel onglet. |
|
Hack Design Toolkit |
Hack Design Toolkit est une liste de logiciels utiles pour tous les designers : interfaces, 3D, web, print, photo etc. |
Un lien mort ? Un contenu devenu entièrement payant ? Une miniature qui ne s’affiche plus ? dites-le moi !
Miniatures générées par BitPixels