7 extensions Chrome indispensables pour les concepteurs Web

Publicité

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 a commencé comme un service d'hébergement de fichiers, mais il a rapidement découvert que son public principal était les concepteurs, qui utilisent le 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 en 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

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 le des outils qui trouvent des polices à partir d'images WhatTheFont et 4 alternatives pour trouver des polices à partir d'imagesVous 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. Lire la suite 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

Peu importe la qualité de vos yeux, il est difficile de recréer une teinte 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.

Comme les meilleures applications de sélection des couleurs pour Mac Les 5 meilleures applications Color Picker pour MacBesoin de trouver la couleur parfaite sur votre Mac? Essayez ces applications de sélection de couleurs macOS pour identifier, enregistrer, formater et copier facilement les couleurs. Lire la suite , Pipette ColorPick vous montrera les valeurs de n'importe quelle couleur vers laquelle vous pointez. La différence est qu'il est toujours là 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

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 ni 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 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 un 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

Une extension de capture d'écran peut sembler redondante, car prendre une capture d'écran sur Mac Comment prendre des captures d'écran sur Mac: conseils, outils et astuces à connaîtreBesoin de faire une capture d'écran sur votre Mac? Voici les meilleurs raccourcis, conseils et applications pour les captures d'écran de macOS. Lire la suite est un jeu d'enfant, et capturer votre écran sous Windows Comment prendre la capture d'écran parfaite sous WindowsLa meilleure façon de prendre une capture d'écran dépend de la version de Windows sur laquelle vous vous trouvez. Nous vous montrons les différences subtiles, donnons des conseils de dépannage et révélons les meilleurs raccourcis clavier et outils. Lire la suite est juste un peu plus compliqué. Mais Easy Screen Capture a plusieurs arguments 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 les capturer tous nécessiterait de trois à quatre captures d'écran.

Une autre astuce intéressante est de pouvoir copier la capture d'écran dans le presse-papiers et de 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

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 sélectionnera 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 tous les les petites choses qui viennent avec le fait d'être un designer - que ce soit des informations typographiques ou collaborer avec votre 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. Alors apprenez comment gérer vos extensions Chrome Comment gérer vos extensions Chrome sans aucun souciUne bonne gestion des extensions Chrome peut rendre votre navigateur encore plus puissant. Voici quelques trucs et astuces essentiels que vous devez connaître. Lire la suite avant qu'ils ne deviennent incontrôlables.