10 extensions Google Chrome pour les concepteurs

Si vous êtes un concepteur Web qui suit le processus de conception standard, vos tâches incluent des éléments tels que :

• Recherche
• Filaire
• Choisir un jeu de couleurs
• Choisir la bonne police
• Tester plusieurs variantes
• Collaborer avec les clients et les coéquipiers

Et quelques autres…

Savez-vous que vous pouvez faire tout cela et plus directement dans votre navigateur ? Oui, si vous êtes un pro de Google Chrome, vous pouvez effectuer toutes ces tâches via les extensions de Chrome. La plupart d'entre eux en quelques clics.

Alors, gagnez beaucoup de temps et essayez ces 10 extensions Google Chrome pour les concepteurs.

1. Testeur de conception Web réactif

Après la mise à jour mobile de Google, la réactivité est le mot à la mode ! Voici donc une extension qui vous permet de tester votre site Web sur tous les principaux appareils mobiles Android et Apple.

Cela fonctionne également hors ligne, c'est donc une excellente option même lorsque vous travaillez sur votre conception localement. Il a des préréglages pour tous les appareils populaires, mais vous pouvez également ajouter vos dimensions personnalisées.

Une fois que vous avez sélectionné un appareil pour la prévisualisation, l'onglet actuel s'ouvre dans une fenêtre contextuelle montrant à quoi ressemblerait votre page sur cet appareil.

2. TypeWonder

Les polices définissent vraiment l'ambiance d'un site, mais c'est toute une tâche de choisir la bonne. Vous connaissez l'exercice : revenir à votre code, apporter des modifications et prévisualiser. Et tout cela encore et encore.

Mais c'est là que cette extension de police pratique intervient. TypeWonder vous permet de modifier la police de n'importe quel site Web dans votre navigateur.

Visitez simplement votre site Web et cliquez sur l'icône de l'extension. Plusieurs options de police vous sont proposées. Cliquer sur l'un d'entre eux crée presque instantanément un aperçu de votre site Web dans cette police. Si vous êtes satisfait de l'aperçu, vous pouvez obtenir le code pertinent à ajouter à votre site et à son fichier CSS.

3. Conditionneur d'onglets

La recherche est un gros problème. Et si vous êtes un designer qui prend la recherche au sérieux, je peux dire en toute sécurité qu'à tout moment, vous avez au moins sept à dix onglets ouverts.

Et si vous deviez avoir l'avis de votre ami designer ou coéquipier sur les sites auxquels vous faites référence ? Vous marquerez toutes les pages d'un dossier, vous les exporterez toutes, puis vous choisirez l'ensemble à envoyer, bien sûr, après avoir ouvert votre programme de messagerie. Tout un travail !

Heureusement, vous n'avez pas à travailler aussi dur. Tab Packager vous permet de regrouper tous les onglets ouverts. Et ensuite, vous pouvez envoyer le lien du colis en un seul clic. Vous pouvez partager par e-mail, Twitter et de nombreux autres services.

4. Track Duck

Une communication efficace est derrière chaque projet réussi. Mais cela peut devenir fastidieux de faire des allers-retours avec des e-mails essayant de trouver des modifications mineures ou d'apporter de grands changements.

Cela peut sembler un peu exagéré, mais TrackDuck est comme un mini-Asana, exclusivement pour les concepteurs.

TrackDuck est un outil de collaboration visuelle qui vous permet d'ajouter des sites Web en tant que projets. Une fois que vous avez ajouté un projet, vous pouvez y inviter vos coéquipiers. Chaque fois que vous laissez un commentaire sur ce projet (ou site Web - ce que vous pouvez faire simplement en cliquant sur l'icône de l'extension), une tâche est générée à propos du commentaire. Vous pouvez attribuer cette tâche à vos collègues, ajouter des pièces jointes et des captures d'écran, et l'intégrer à de nombreux outils de collaboration tels que Trello et Basecamp.

5. ColorZilla

Vous ne savez jamais quand vous verrez une belle couleur qui inspirera la palette de votre prochain projet Web.

Alors, comment capturer n'importe quelle couleur sur le Web ?

Eh bien, voici ColorZilla - c'est facilement le goodie Chrome préféré de tous les concepteurs. Sa fonctionnalité la plus basique et la plus populaire consiste à obtenir le code de n'importe quelle couleur sur une page Web.

Une autre caractéristique est qu'il vous permet d'obtenir le jeu de couleurs de n'importe quel site Web. Vous devrez cliquer sur l'option Webpage Color Analyzer et une palette affichant toutes les couleurs de cette page Web apparaîtra.

6. Quelle police

Il y a tellement de fois où vous tombez sur un site Web qui utilise la police, la couleur et la taille parfaites. En fait, cela pourrait être si bon que vous voudriez utiliser la combinaison exacte sur votre site.

Mais vous n'avez plus besoin d'emprunter la route Inspect Element - WhatFont dissèque n'importe quelle police sur une page Web en un seul clic.

Cliquez simplement sur l'icône de l'extension et survolez la section de texte qui vous intéresse. WhatFont produit le type, la taille, la hauteur, la couleur et la famille de la police.

7. Filaire instantané

Si vous définissez la hiérarchie des informations de votre site Web avant de le concevoir, vous créerez un site convivial. Et le wireframing est la meilleure façon de procéder.

L'extension Instant Wireframe vous permet d'afficher une image filaire raisonnablement bonne de n'importe quelle page Web. Il est encore en version bêta mais fait un bon travail.

Si vous rencontrez un site dont vous souhaitez afficher le fil de fer, cliquez simplement sur l'icône de l'extension dans la barre d'adresse. Ça vaut le coup d'essayer!

8. Règle des pages

Il existe plusieurs façons de mesurer les dimensions des éléments d'une page Web. Mais la plupart d'entre eux impliquent plusieurs étapes et prennent du temps.

Page Ruler est le moyen le plus pratique de le faire. La règle de page vous permet de voir la hauteur, la largeur et la position relative d'un élément. Vous pouvez également analyser les éléments par division.

Et c'est excellent pour créer des bannières au pixel près, des images vedettes et d'autres supports marketing.

9. Palette pour Chrome

Les sites Web regorgent d'images et vous ne pouvez pas dire quand vous verrez une image assez bonne pour inspirer une palette de couleurs.

Mais vous n'avez pas à vous inquiéter car Palette for Chrome vous couvre toujours. Faites un clic droit sur l'image que vous trouvez intéressante et choisissez l'option de cette extension. Il créera instantanément une palette de couleurs inspirée de l'image choisie. Vous pouvez spécifier le nombre de couleurs que vous souhaitez générer pour le jeu de couleurs.

J'aurais aimé plus s'il y avait un moyen d'exporter le jeu de couleurs. Mais l'extension reste un incontournable.

10. ExtensionMuzli – Petit déjeuner design

Vous savez, lorsque vous débutez, vous vous abonnez à tous les meilleurs blogs de votre créneau. Vos flux RSS sont tous activés. Mais au fur et à mesure que votre travail s'accumule, vous êtes quelque peu déconnecté. Et ce n'est pas que vous n'avez pas besoin d'inspiration, c'est juste que ça devient difficile à rattraper.

ExtensionMuzli est conçu pour compenser cela. Il organise des histoires d'environ 12 à 15 des meilleures ressources de conception. Il y a aussi une section d'emplois de conception Web si vous cherchez à changer.

Une fois que vous avez installé cette extension, votre nouvel onglet présentera certaines des dernières histoires de conception inspirantes ou éducatives sur le net. Il offre un moyen pratique de garder un œil sur les dernières nouveautés de votre créneau.

Alors, voilà. Alimentez votre Chrome avec ces incroyables extensions de concepteur Web et regardez votre productivité monter en flèche. Comment divisez-vous votre processus de conception et quelles extensions utilisez-vous pour quelles tâches ? J'aimerais en savoir plus.