7 incontournables extensions Chrome pour les concepteurs Web

• Créatif

Publicité

En tant que concepteur Web, quel est le logiciel que vous devez absolument posséder sur votre ordinateur? Les chances sont que c'est Photoshop et Illustrator. Et bien que ce soit l'essentiel de votre flux de travail de conception, il existe des outils plus petits que vous ne savez probablement pas dont vous avez besoin.

Déverrouillez la feuille de triche "Google Chrome Keyboard Shortcuts" maintenant!

Cela vous inscrira à notre newsletter

La meilleure chose à faire 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 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 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 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.

FontFace Ninja est une extension Chrome qui vous aide à faire exactement cela. Tout comme les outils de recherche de polices à partir d’images WhatTheFont et 4 alternatives pour rechercher des polices à partir d’images WhatTheFont et 4 alternatives à la recherche de polices à partir d’images Vous voulez trouver des polices à partir d’images? Il existe des outils en ligne qui peuvent le faire pour vous, y compris WhatTheFont et diverses alternatives. En savoir plus, 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 code CSS de la page, comme la police de caractères des en-têtes et du corps du texte.

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 créer un signet pour cette police, vous devez disposer d'un compte auprès du service soeur, FontFace Dojo.

Installer: FontFace Ninja

3. Pipette ColorPick

Aussi bon que soit votre œil sur 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.

Comme les meilleures applications de sélecteur de couleur pour Mac Les 5 meilleures applications de sélecteur de couleur pour Mac Les 5 meilleures applications de sélecteur de couleur 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. En savoir plus, Pipette ColorPick vous montrera les valeurs de toutes les couleurs que vous pointez. La différence réside dans le fait qu'il est toujours présent dans votre navigateur et que vous ne devez rien télécharger: il vous suffit de cliquer sur l'icône et de déplacer 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 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 l'onglet Inspecter, 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. Les sous-onglets Couleurs et Typographie vous permettent de voir la palette de couleurs et toutes les polices en un coup d'œil, tandis que Actifs regroupe toutes les images de la page au même endroit.

L'onglet Collaborer vous permet de commenter et de discuter avec votre équipe. Il est facile de laisser un commentaire en cliquant sur un élément de la page.

Comme la plupart des outils avancés, Visual Inspector est livré avec une étiquette de prix: vous devez 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

Une extension de capture d’écran peut sembler redondante, car vous pouvez faire une capture d’écran sur Mac Comment prendre des captures d’écran sur Mac: Astuces, outils et astuces pour savoir comment réaliser des captures d’écran sur Mac: Astuces, outils et astuces à connaître Besoin de prendre une capture d’écran sur ton mac? Voici les meilleurs raccourcis, astuces et applications pour les captures d'écran macOS. Lire la suite est un jeu d'enfant, et capturer votre écran sous Windows Comment prendre la capture d'écran parfaite sous Windows Comment effectuer une capture d'écran parfaite sous Windows La meilleure façon de prendre une capture d'écran dépend de la version de Windows utilisée. Nous vous montrons les différences subtiles, donnons des conseils de dépannage et vous révélons les meilleurs raccourcis clavier et outils. Lire la suite est juste un peu plus de tracas. Mais Easy Screen Capture a quelques points de vente.

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 y a une tâche cruciale à laquelle vous devez faire face chaque matin: secouer les restes de 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 à tout moment en cliquant simplement sur l'icône de l'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 concepteur, qu'il s'agisse de la typographie ou de la collaboration avec vos collègues.

Une fois que vous réalisez que le Chrome Web Store regorge d'outils, il peut être difficile d'arrêter d'en ajouter de nouveaux. Alors, apprenez à gérer vos extensions Chrome. Comment gérer vos extensions Chrome sans problème. Comment gérer vos extensions Chrome sans problème. Gérer correctement les extensions Chrome peut rendre votre navigateur encore plus puissant. Voici quelques trucs et astuces essentiels à connaître. Lire plus avant qu'ils ne deviennent incontrôlables.

En savoir plus sur: les extensions de navigateur, Google Chrome, la conception Web.