7 extensions Chrome indispensables pour les concepteurs Web

En tant que concepteur Web, quel logiciel devez-vous absolument avoir sur votre ordinateur? Il est probable que ce soit Photoshop et Illustrator. Et bien que ce soient les éléments essentiels de votre flux de travail de conception, il existe des outils plus petits dont vous ne savez probablement pas que vous avez besoin.

La meilleure chose est que vous n’avez même pas besoin de les télécharger. Installez simplement ces extensions Chrome et c’est parti. De l’identification des polices sur les pages à la mesure des distances entre les éléments Web, ces extensions Chrome de conception Web vous faciliteront la vie.

1. Dropbox pour Gmail

Dropbox pour Gmail, une extension Chrome pour prévisualiser les liens Dropbox

Dropbox a commencé comme un service d’hébergement de fichiers, mais il a rapidement découvert que son principal public était les concepteurs, qui utilisent le service pour partager leur travail avec des collègues. Étant donné que les fichiers de conception sont souvent trop volumineux pour les pièces jointes, il est plus facile d’envoyer un lien Dropbox vers le fichier.

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

Installer: Dropbox pour Gmail

2. FontFace Ninja

FontFace Ninja, une extension Chrome qui capture des polices sur une page Web

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.

FontFace Ninja est une extension Chrome qui vous aide à faire exactement cela. Tout comme les outils qui trouvent des polices à partir d’images, il vous aide à identifier les polices que vous voyez en ligne. La seule différence est que FontFace Ninja lit les polices codées dans le CSS de la page, comme la police des titres et le corps du texte.

Lorsque vous lancez FontFace Ninja, il vous montrera les informations sur la police vers laquelle vous le dirigez, et non seulement la police de caractères, mais également le poids, la taille, la hauteur, la largeur et la couleur. Pour mettre cette police en signet, vous aurez besoin d’un compte auprès du service partenaire, FontFace Dojo.

Installer: FontFace Ninja

3. Pipette ColorPick

ColorPick Eyedropper, une extension Chrome pour capturer les couleurs

Peu importe la qualité de vos yeux, il est difficile de recréer une nuance particulière que vous avez vue en ligne à moins de connaître ses valeurs RVB ou HTML. Heureusement, vous n’avez pas à deviner si vous avez ColorPick Eyedropper.

En relation :  Les 6 meilleurs appareils photo à 360 degrés de 2020

Comme les meilleures applications de sélection de couleurs pour Mac, ColorPick Eyedropper vous montrera les valeurs pour toutes les couleurs que vous pointez. La différence est qu’il est toujours présent dans votre navigateur et que vous n’avez rien à télécharger. Cliquez simplement sur l’icône et déplacez la cible au bon endroit.

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 vous montre les valeurs HTML, RVB et HSL pour celle-ci.

Installer: Pipette ColorPick

4. Dimensions

Dimensions, une extension Chrome pour mesurer des objets sur une page Web

Cette extension open-source est une trouvaille pour les concepteurs de sites Web, surtout si vous faites des concerts ponctuels pour les petites entreprises. Lorsqu’un client vous transmet un site Web sans aucun fichier ou documentation préalable et vous demande de concevoir «une page comme celle-ci, mais avec un texte et des images différents», déterminer la mise en page est une douleur.

Les dimensions vous permettent de mesurer facilement la hauteur et la largeur de n’importe quel élément de la page, ainsi que les marges entre eux. Cela permet de recréer facilement les pages existantes et de revérifier vos propres conceptions après leur mise en production.

Installer: Dimensions

5. Inspecteur visuel

Visual Inspector, une extension Chrome pour inspecter les pages Web et fournir des commentaires

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

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

le Collaborer L’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. Cependant, ses fonctionnalités de base telles que l’inspection des couleurs, des polices et des images sont gratuites.

Installer: Inspecteur visuel

6. Capture d’écran facile

Capture d'écran facile, une extension Chrome pour prendre des captures d'écran

Une extension de capture d’écran peut sembler redondante, car prendre une capture d’écran sur Mac est un jeu d’enfant, et capturer votre écran sur Windows est juste un peu plus compliqué. Mais Easy Screen Capture a plusieurs arguments de vente.

En relation :  Les utilisateurs demandent à Snapchat de supprimer la nouvelle mise à jour

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 les capturer tous nécessiterait de 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 e-mail, plutôt que de stocker des fichiers image inutiles sur votre ordinateur.

Installer: Capture d’écran facile

7. Muzli 2

Muzli 2, une extension Chrome pour l'inspiration du design

Enfin, il y a une tâche cruciale à laquelle vous devez faire face chaque matin: secouer les restes de sommeil et entrer dans le sillon. Muzli 2 par InVision vous servira de journal du matin avec des articles organisés sur l’art, le design, l’expérience utilisateur et la technologie.

Muzli remplace votre onglet Chrome par défaut et vous permet de personnaliser ce que vous y voyez. En fonction de 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 pendant que vous sirotez votre premier café!

Si vous pensez qu’un onglet de navigateur complet contenant du contenu de conception est trop intense, Muzli a également une version Lite. Il ne remplacera pas votre onglet par défaut et vous pourrez accéder au flux à tout moment 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 sur cette liste ne correspondent pas à votre logiciel de conception, mais elles couvrent toutes les petites choses qui viennent avec le fait d’être concepteur, que ce soit des informations de typographie ou de collaborer avec vos collègues.

Une fois que vous vous rendez compte que le Chrome Web Store regorge d’outils, il peut être difficile d’arrêter d’en ajouter de nouveaux. Apprenez donc à gérer vos extensions Chrome avant qu’elles ne deviennent incontrôlables.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.