Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!
Extensions pratiques pour les designers

Extensions pratiques pour les designers

14 septembre 2015Par Antoine Prince
Catégories :

Dans un précédent article, mon collègue David Malo vous a présenté quelques extensions utiles pour le développement Web de tous les jours. En voici d’autres que je partage à mon tour sauf que cette fois-ci, elles sont destinées à aider les designers Web. Le but des extensions étant d’améliorer votre rendement et de faciliter certaines actions, je vous propose de les mettre à l’essai et de voir si ces extensions contribuent à vos méthodes de travail.

Extensions fonctionnelles

Découvrez ces extensions qui simplifieront vos tâches quotidiennes et amélioreront votre productivité ainsi que votre rendement!

FontFace Ninja

[img]fontface-1.jpg|||||Source : http://fontface.ninja/[/img]

Il vous est probablement déjà arrivé de voir sur un site Web, une police de caractère que vous trouvez intéressante, et de vouloir connaître son nom pour un usage futur. Si vous êtes moindrement habile avec l’inspecteur d’élément de Chrome, vous êtes allé la chercher directement dans le code.

[img]fontface-2.jpg|||||Source : http://www.nmedia.ca/blogue/site-internet/quelques-extensions-chrome-utiles-pour-le-developpement-web-de-tous-les-jours/[/img]

Grâce à FontFace Ninja, ce temps est révolu! En activant l’extension à partir de n’importe quel site Web, l’outil permet de voir rapidement le nom, la taille, l’interlignage et le crénage de tous les textes. L’extension vous permet également de mettre à l’essai la typographie directement dans la page et même de télécharger le fichier .TTF lorsqu’il est disponible. De plus, l’extension propose un design épuré et intuitif pour tout le monde.

Découvrez l’extension!

ColorZilla

[img]colorzilla.jpg|||||Source : http://www.colorzilla.com/chrome/[/img]

Tout comme David vous l’a fait découvrir dans son article, je vous recommande d’utiliser ColorZilla pour obtenir une couleur rapidement sans avoir à passer par le code ou ouvrir une capture d’écran dans Photoshop et utiliser la pipette. L’application vous permet par ailleurs de conserver un historique des couleurs et de faire sortir la palette de couleurs complète d’une page.

Découvrez l’extension sur Chrome, également disponible pour Firefox.

Page Ruler

[img]pageruler.jpg|||||Source : http://blarg.co.uk/tools/page-ruler[/img]

Voici une autre extension qui vous évitera d’avoir à ouvrir une capture d’écran dans Photoshop pour connaître la largeur ou la hauteur de tel ou tel élément d’un site Web. Page Ruler est une règle qui vous permet de connaître non seulement la dimension d’un objet mais aussi sa distance par rapport aux côtés de votre navigateur.

L’extension vous permet également de créer un bloc sur votre page et de lui donner des valeurs fixes. Vous pourrez ensuite le déplacer n’importe où dans la page. Cette fonctionnalité peut être pratique si vous devez ajouter un élément dans un site déjà conçu comportant des dimensions fixes, comme un espace publicitaire tel que Google Adwords (ajouté pour augmenter le revenu d’un site Web). Vous pourrez donc faire vos expérimentations sans avoir à faire des captures d’écrans ou même à ouvrir Photoshop.

Découvrez l’extension pour Chrome!

Awesome Screenshot

[img]awesomescreenshot.jpg|||||Source : https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj[/img]

Votre poste devrait déjà avoir une application pour faire des captures d’écran dans n’importe quel logiciel. L’avantage d’ajouter une extension comme Awesome Screenshot dans votre navigateur c’est qu’il pourra faire une capture d’une page entière même si la page en question n’apparaît pas au complet dans votre écran. Vous évitez ainsi d’avoir à prendre une multitude de captures et de faire du collage dans Photoshop.

Une autre fonctionnalité bien pratique de cette extension est le minuteur. Une fois activé, le minuteur vous laisse trois secondes avant de prendre la capture. C’est pratique si vous désirez prendre en capture un effet de survol (hover) intéressant sur un élément.

L’extension vous permet aussi d’annoter votre capture avant de la sauvegarder ou de la copier pour la coller dans un document de votre choix.

Téléchargez l’extension pour Chrome ou pour Firefox!

Web Developer

[img]webdeveloppertool.jpg|||||Source : http://chrispederick.com/work/web-developer/[/img]

Même si cette application semble surtout conçue pour ceux qui font de la programmation, certaines de ses fonctionnalités peuvent être utiles pour tous. Par exemple, la fonctionnalité de «resize» est pratique lorsque veut comprendre le comportement des sites responsives, ou pour tester nos maquettes sans avoir à posséder tous les types d’appareils.

Téléchargez l’extension!

Extensions pour l’inspiration

Benchwarmer

[img]benchwarmer.jpg|||||Source : https://chrome.google.com/webstore/detail/benchwarmer-new-tab-exten/lhdjhhpjicomphhjpehdhjenbaamdpnn[/img]

Benchwarmer est une extension qui s’affiche lorsque vous ouvrez un nouvel onglet. Cette extension se connecte à Dribbble, un réseau social pour les gens créatifs, et affiche les résultats les plus récents. Si vous possédez un compte Dribbble, il vous est possible de vous connecter pour voir le contenu récent des gens que vous suivez. Cette extension fonctionne en fait comme un agrégateur de contenu spécifique à Dribbble.

Découvrez l’extension pour Chrome!

Dribbble HD

[img]dribbblehd.jpg|||||Source : https://chrome.google.com/webstore/detail/dribbblehd/ichgbbciejbjechpkakbegaaenamkpib[/img]

Cette extension ne fait rien de bien magique, mais permet d’afficher les visuels présentés sur Dribbble en beaucoup plus gros, ce qui évite d’avoir à ouvrir les images dans une nouvelle page pour mieux voir les détails.

Téléchargez l’extension!

Pinterest

[img]pinterest.jpg|||||Source : https://about.pinterest.com/fr/page-de-confirmation-du-bouton-de-navigateur[/img]

Bien connu de la plupart des gens du domaine, Pinterest permet de créer des tableaux composés sur un thème défini par l’utilisateur et de le garnir d’images variées à des fins d’inspiration ou simplement pour le plaisir. L’extension Pinterest permet d’ajouter rapidement à vos tableaux des images tout en demeurant sur la page en cours. Vous épargnerez ainsi du temps en plus d’éviter d’interrompre votre travail en cours pour vous perdre dans l’univers merveilleux qu’est Pinterest et sa banque d’inspiration inépuisable.

Découvrez l’extension!

Et vous, de quelle(s) extension(s) ne pourriez-vous plus vous passer?

Autres articles pertinents

Voir tous les articles