7 incontournables extensions Chrome pour les concepteurs Web

Added 2019-03-07

En tant que concepteur Web, quel logiciel devez-vous absolument installer sur votre ordinateur? Il y a de fortes chances que ce soit Photoshop et Illustrator. Et bien que ce soit l'essentiel de votre flux de travail de conception, il existe des outils plus petits dont vous ne savez probablement pas ce dont vous avez besoin.

La meilleure chose à faire est que vous n’avez même pas besoin de les télécharger: il vous suffit d’installer ces extensions Chrome et vous n’allez plus. De l'identification des polices sur les pages à la mesure des distances entre les éléments Web, ces extensions de conception Web vous faciliteront la vie.

1. Dropbox pour Gmail

Dropbox a commencé comme un service d'hébergement de fichiers, mais il a vite découvert que son principal public était les concepteurs, qui utilisaient ce service pour partager leur travail avec des collègues. Les fichiers de conception étant souvent trop volumineux pour les pièces jointes, il est plus facile d’envoyer un lien Dropbox au fichier.

Dropbox pour Gmail rend le processus encore plus pratique. Lorsque vous créez un lien vers votre fichier à l’aide du bouton Dropbox situé au bas de la nouvelle fenêtre de courrier électronique, le destinataire reçoit un aperçu de ce que vous envoyez. Les liens vers les fichiers images chargeront les images directement dans l'e-mail, tandis que les liens vers d'autres types de fichiers généreront un aperçu pratique.

Installer:   Dropbox pour Gmail

2. FontFace Ninja

Avec des milliers de polices disponibles, vos possibilités de typographie sont infinies. Surtout si vous pouvez identifier une belle police que vous voyez quelque part et l’emprunter pour votre propre projet.

Lorsque vous lancez FontFace Ninja, il vous montrera les informations sur la police vers laquelle vous le dirigez - et pas seulement la police de caractère, mais également le poids, la taille, la hauteur, la largeur et la couleur. Pour marquer cette police dans vos favoris, vous aurez besoin d’un compte auprès du service soeur. FontFace Dojo .

Installer:   FontFace Ninja

3. Pipette ColorPick

Quel que soit votre sens de la couleur, il est difficile de recréer une nuance que vous avez vue en ligne si vous ne connaissez pas ses valeurs RVB ou HTML. Heureusement, vous n'avez pas à deviner si vous avez ColorPick Eyedropper.

Les 5 meilleures applications de sélection de couleurs pour Mac Besoin de trouver la couleur parfaite sur votre Mac? Essayez ces applications de sélection de couleurs macOS pour identifier, enregistrer, formater et copier des couleurs facilement. Read Article

L'extension lit les couleurs du texte, des images et à peu près tout ce que vous pourriez voir sur une page Web (même les publicités). Une fois que vous avez capturé une couleur, elle affiche les valeurs HTML, RVB et HSL correspondantes.

Installer:   Pipette ColorPick

4. Dimensions

Cette extension open-source est une découverte pour les concepteurs Web, en particulier si vous faites des concerts ponctuels pour des petites entreprises. Lorsqu'un client vous redirige un site Web sans fichiers ni documentation antérieurs et vous demande de concevoir «une page comme celle-ci, mais avec du texte et des images différents», déterminer la mise en page est une tâche pénible.

Dimensions vous permet de mesurer facilement la hauteur et la largeur de tout élément de la page, ainsi que les marges entre eux. Cela permet de recréer facilement des pages existantes et de vérifier vos propres conceptions après leur mise en production.

Installer:   Dimensions

5. Inspecteur visuel

Visual Inspector est un puissant outil de collaboration et de rétroaction pour les équipes de conception. Il combine les fonctionnalités des trois extensions précédentes et en ajoute encore plus.

dans le Inspecter  onglet, vous pouvez choisir n’importe quel élément de la page pour obtenir des informations complètes à son sujet, des dimensions au nom de fichier. le Couleurs  et Typographie  les sous-onglets vous permettent de voir la palette de couleurs et toutes les polices en un coup d’œil, Les atouts  rassemble toutes les images de la page en un seul endroit.

le Collaborer  Onglet est l'endroit où vous pouvez donner votre avis et discuter avec votre équipe. Il est facile de laisser un commentaire en cliquant sur n'importe quel élément de la page.

Comme la plupart des outils avancés, Visual Inspector est livré avec une étiquette de prix: vous devrez payer à partir de 9 $ / utilisateur / mois pour ajouter des commentaires et synchroniser les modifications. Toutefois, ses fonctionnalités de base, telles que l'inspection des couleurs, des polices et des images, sont libres d'utilisation.

Installer:   Inspecteur visuel

6. Capture d'écran facile

Plus important encore, il vous permet de capturer la page Web entière, pas seulement la zone que vous voyez sur votre écran. C’est inestimable lorsque vous devez signaler plusieurs problèmes sur une longue page et que les capturer tous prendrait trois à quatre captures d’écran.

Une autre astuce consiste à copier la capture d'écran dans le presse-papiers et à la coller directement dans un chat ou un courrier électronique, plutôt que de stocker des fichiers d'image inutiles sur votre ordinateur.

Installer:   Capture d'écran facile

7. Muzli 2

Enfin, il ya une tâche cruciale à laquelle vous devez faire face chaque matin: secouer les restes du sommeil et entrer dans le rythme. Muzli 2 by InVision servira de journal du matin avec des articles sur l'art, le design, l'UX et la technologie.

Muzli remplace votre onglet Chrome par défaut et vous permet de personnaliser ce que vous voyez ici. Selon vos intérêts, Muzli choisira des flux pour vous, avec des sites Web allant de Dribble et Behance à 99designs et Creative Bloq. Beaucoup d’inspiration à parcourir pour siroter votre premier café!

Si vous pensez qu'un onglet de navigateur rempli de contenu de conception est trop intense, Muzli a également une version Lite. Il ne remplacera pas l’onglet par défaut et vous pourrez accéder au flux quand vous le souhaitez en cliquant simplement sur l’icône d’extension.

Installer:   Muzli 2

Obtenez des extensions Chrome pour toutes vos tâches de conception

Les extensions Chrome de cette liste ne correspondent pas à votre logiciel de conception, mais couvrent toutes les petites choses inhérentes au métier de designer, qu'il s'agisse de la typographie ou de la collaboration avec vos collègues.