Boîte à outils pour designers

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çuSite webDescription

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.
Coup de cœur !

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 !
Coup de cœur !

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.
Coup de cœur !

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çuSite webDescription

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.
Coup de cœur !

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.
Coup de cœur !

Mockups

Les mockups sont essentiels pour mettre en valeur et intégrer son projet au mieux dans son environnement.

AperçuSite webDescription

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…
Coup de cœur !

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 !
Coup de cœur !

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çuSite webDescription

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.
Coup de cœur !

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 !
Coup de cœur !

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 !
Pour connaître directement la police utilisée sur un site, je vous recommande davantage FontFaceNinja.

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çuSite webDescription

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 !
Coup de cœur !

WebGradients

De beaux dégradés pour vos projets web, pleins de couleurs et une navigation très agréable.
Coup de cœur !

Interfaces

Rien de mieux qu’une dose quotidienne de belles interfaces utilisateurs pour trouver l’inspiration.

AperçuSite webDescription

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 !
Coup de cœur !

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.
Coup de cœur !

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çuSite webDescription

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.
Coup de cœur !

Divers

Et ici, on met le reste, tout ce qui est inclassable mais pas pour autant inutile !

AperçuSite webDescription

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