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

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

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

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.

Font Flame

Font Flame propose un grand nombre de combinaisons de polices. La navigation est originale et le fonctionnement du site se rapproche à celui de l’application Tinder : on swipe pour déterminer si l’on aime ou pas !

Typo/graphic posters

Une très grande banque d’affiches typographiques. Si tu veux être le futur Philippe Apeloig, c’est par ici que ça se passe. Très beau à voir !

Velvetyne

Rien que le design du site vaut le détour. Velvetyne 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

One Page Love

Pour les amoureux des sites one page, One Page Love saura vous satisfaire. En plus des inspirations graphiques, le site dispose d’un blog intéressant d’un bon nombre de ressources.

UH OH MY

Un catalogue immense de screens d’applications mobiles en tout genre. Connues et pas connues. Il y a de quoi trouver des idées si l’on souhaite dessiner une belle interface mobile.

Pttrns

Là aussi on retrouve un grand nombre de screens d’applications mobiles répartis dans différentes catégories. Il y a vraiment de quoi faire !

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

Codrops

Codrops est vraiment une ressource intéressante autant pour les designers en manque d’inspiration que pour les développeurs souhaitant ajouter des éléments dynamiques à leur site. Le site propose une nombre important d’éléments : boutons, animations, navigations expérimentales et pleins d’autres choses…
Coup de cœur !

Magazine du Webdesign

Le site du Webdesign, en plus d’être français, propose beaucoup de ressources innovantes très régulièrement. Abonnez-vous à la newsletter pour rester informé., ça vaut le détour !

Webdesigner Depot

Un blog mis à jour quotidiennement propose un nombre important de ressources variées. Ça fait aussi parti des sites à bookmarker et à suivre dans sa veille quotidienne.

Freepik

Un indémodable. On est tous passé par Freepik à un moment dans sa vie de graphiste. Il faut faire le tri mais il y a quand même de quoi s’inspirer et télécharger des bases plutôt très intéressantes quand on fouille bien.

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…

Sketch App Sources

Près de 3000 ressources gratuites à télécharger pour les amoureux de Sketch. Il y a de quoi faire des merveilles maintenant. Je recommande !

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.

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