10 extensions Chrome pour les designers

Les extensions Chrome sont nombreuses et permettent souvent de faciliter la tâche de certains utilisateurs en proposant des fonctionnalités utiles et rapides à utiliser. Dans cet article, nous vous proposons une sélection de dix extensions gratuites pour le navigateur web de Google, dédiées aux designers en tous genres !

1. Eye Dropper

Eye Dropper est une extension open source vous permettant d’identifier et choisir des couleurs directement depuis une page web. L’outil se présente sous la forme d’un sélecteur qui, au survol des éléments d’une page, vous donne la possibilité de copier sa couleur, tout en vous informant sur son code RGB (par exemple : 0, 147, 14) et son code HEX (par exemple : #00930e). Eye Dropper vous propose aussi un nuancier pour choisir rapidement des couleurs directement au sein d’une fenêtre pop-up.

Télécharger l’extension Eye Dropper

2. Page Ruler

Page Ruler permet aux designers de mesurer précisément n’importe quel élément présent sur une page web. À l’aide d’une règle, qui s’utilise un peu de la même manière qu’un outil de capture d’écran, vous pouvez rapidement, et avec précision, obtenir la taille en pixels d’une image, d’un bouton ou de n’importe quel espace d’une page. Très pratique, ce petit outil facilite la création de designs web précis et alignés.

Découvrir l’extension Page Ruler

3. Window Resizer

L’extension Window Resizer vous aide à rapidement redimensionner la fenêtre de votre navigateur web afin de l’adapter à différentes résolutions d’écran. Une fois installé, Window Resizer vous propose différents formats répondant aux standards de certains appareils, comme des modèles de smartphones, de tablettes, d’ordinateurs portables ou de bureau. L’outil permet ainsi de tester les designs reponsive en émulant un certain type d’écran, le tout en quelques clics.

Télécharger l’extension Window Resizer

4. CSSViewer

Très simple d’utilisation, l’extension CSSViewer permet de rapidement visualiser les propriétés CSS de n’importe quel élément d’une page web. En activant l’extension, des informations telles que les tailles, les couleurs, les polices, les positions apparaissent au survol d’un élément inspecté, comme une image, un bouton d’action, un texte, un titre, etc.

Découvrir l’extension CSSViewer

5. Sumopaint

Sumopaint est un outil de peinture et d’édition d’images complet, permettant de créer des visuels ou de retoucher des photos, à la manière de Photoshop. Une fois activée, l’extension ouvre une interface web dotée d’une multitude de fonctionnalités, telles que des supports de calques, des pinceaux professionnels, des options d’ombrage, de couleurs, des filtres, de sélections, et bien d’autres encore.

Télécharger l’extension Sumopaint

6. Your Graphic Designer

Dans la lignée de Sumopaint, Your Graphic Designer est une extension s’inspirant d’Illustrator, le logiciel de dessin vectoriel d’Adobe. Ici, l’extension, qui vous mène à une interface web de création à son ouverture, est un petit éditeur de graphiques vectoriels HTML5, pour créer des dessins, des vecteurs et des peintures. L’outil est utilisable en ligne comme hors ligne, avec un large éventail d’outils vectoriels.

Découvrir l’extension Your Graphic Designer

7. Hover Zoom+

En survolant n’importe quelle image miniature ou lien d’image sur une page web, il est possible, grâce à l’extension Hover Zoom+, d’obtenir la version agrandie du visuel sans avoir à cliquer dessus. À l’aide de ce petit outil, il est possible de rechercher rapidement des références visuelles, examiner les détails d’une image et accélérer le processus de sélection sans interrompre un flux de travail.

Télécharger l’extension Hover Zoom+

8. Texmage

Texmage donne la possibilité à ses utilisateurs de créer des superpositions de texte sur des images directement depuis leur navigateur. Cette extension permet ainsi de ne pas avoir à télécharger une image, puis de l’ouvrir dans un logiciel d’édition uniquement pour ajouter du texte. Pour un travail sur des annonces publicitaires, des affiches ou des posts pour les réseaux sociaux, c’est une solution simple pour tester différents placements de textes, polices ou messages sans quitter le navigateur.

Découvrir l’extension Texmage

9. PerfectPixel

Cette extension permet aux designers de superposer une image semi-transparente par-dessus leur travail en cours sur le navigateur. PerfectPixel aide ainsi à effectuer une vérification pixel par pixel entre un design prévu et le site web ou l’interface en cours de développement. L’outil est utile pour assurer la fidélité entre design original et produit final, et les web designers et UI designers peuvent s’en servir pour s’assurer que chaque élément est bien positionné, en respectant les marques, les tailles de polices et les espacements comme prévu.

Télécharger l’extension PerfectPixel

10. Daltonize

Daltonize est une extension qui ajuste les couleurs des sites web pour les rendre plus accessibles aux utilisateurs daltoniens. Elle modifie les contrastes de couleurs, permettant de différencier certaines d’entre elles qui peuvent être confondues. Cet outil est particulièrement utile pour les designers soucieux de l’accessibilité de leurs travaux, car elle les aide à visualiser leurs créations à travers le filtre de Daltonize et à comprendre ce que certains utilisateurs peuvent percevoir. Ainsi, ils peuvent ajuster leurs palettes de couleurs pour améliorer la clarté des designs.

Découvrir l’extension Daltonize