[Mise à jour 10/2017] La trousse à outils du webmaster

Focus sur les principaux outils que nous utilisons.

Graphique

Photoshop CC

Célèbre logiciel de retouche photos et de dessin édité par Adobe. Pour le webdesign, j’utilise 960 grid system pour l’affichage en 12 colonnes, les calques liés pour une meilleure organisation des zones répétitives comme le header et le footer, et pleins d’autres fonctionnalités comme les calques de réglages, les motifs, la plume, le tampon de duplication, le flou de surface (utile pour rendre une photo basse déf en meilleure qualité je trouve), animations gif… Et pour réaliser vos mockups, je vous conseille l’excellent site graphicburger.com

Illustrator CC

Le logiciel de dessin vectoriel édité par Adobe. Perso, j’utilise Illustrator essentiellement pour la création d’identités visuelles (logosets, covering vehicule, enseigne, produits dérivés…)

Bridge CC

Cette visionneuse éditée par Adobe a pratiquement remplacé mon explorateur Windows et mon finder MacOSX tant il est simple de parcourir et de trouver visuellement une maquette Photoshop, une création Illustrator, une mise en page Indesign… Il m’arrive aussi d’utiliser la recherche très puissante (par nom de fichier, extensions, taille…)

Adobe Animate CC

Le successeur d’Adobe Flash est un incontournable pour la réalisation de bannières publicitaires animées. Plus complet à mon sens que Google Web Designer, il offre notamment la possibilité de compacter/compresser les images de la bibliothèque pour une sortie html directement prête pour la livraison sur les plateforme publicitaires comme DoubleClick, IAB…

Google Web Designer

Applications pour concevoir des animations en HTML5 éditée par Google. Conçue pour créer des annonces animées ce logiciel m’a permis de créer des animations très simplement (comme l’animation des écrans sur ma homepage). Il comprend une timeline, une bibliothèque de composants comme des galeries d’images ou vidéos et permet la publication dans un fichier html ce qui facilite l’intégration sur le web. Et en plus il est disponible gratuitement comme souvent chez Google 🙂

Technique

Codiad (open source)

Avec cet IDE en ligne, plus besoin de logiciel à installer, je code partout depuis n’importe quel navigateur ! Pratique pour intervenir rapidement sur un site ou résoudre un bug. Parmi les fonctionnalités intéressantes on note la collaboration en live (idem GSuite), recherche multi-dossiers, autocomplétion, coloration syntaxique, personnalisation de l’interface, librairie de plugins, etc…

Et comme il est hébergé chez vous, sur votre serveur web, les temps d’ouvertures et d’enregistrement de fichiers sont instantanés !

Outils pour les développeurs Chrome

Les outils pour les développeurs Chrome sont un ensemble d’outils de développement Web et de débogage intégrés au navigateur Google Chrome. Je les utilise pour le débogage, le pré-rendu CSS, l’émulation de périphériques divers comme l’iphone, le nexus, le Galaxy S5… Une grande partie de mon travail d’intégration de maquettes et du responsive design se fait grâce à ces outils.

Gandi Simple Hosting

La solution d’hébergement PAAS de Gandi (qui héberge ce site) offre à la fois la simplicité d’un hébergement mutualisé avec les ressources dédiées d’un serveur virtualisé. Beaucoup de choses intéressantes comme le cache Varnish, l’accès SSH, les technologies supportées (Php7, Nodejs, Ruby, Python, MySQL, PostgreSQL, mongoDB), l’accès à l’API Gandi…

ProofMe

Travailler à distance nécessite d’avoir les bons outils pour collaborer avec ses collègues ou ses clients. ProofMe vous facilite les échanges pour faire valider vos créations, qu’elles soient Online ou Offline. Une interface simple offre la possibilité à vos correspondants d’annoter facilement vos documents et enfin d’approuver le travail avant impression ou mise en ligne.

Google Keep

Le système de notes de Google est devenu incontournable pour moi. Il me permet de noter rapidement tout ce qui me passe par la tête. Et avec l’application mobile, je suis sûr de ne rien oublier 🙂

Trello

C’est une sorte de Todolist avec l’organisation en plus. Les tâches sont classées par statut (ex: à faire, en cours, validé, livré…) ce qui permet de voir rapidement l’avancée réelle d’un projet.

N’hésitez pas à laisser un commentaire pour mettre en avant d’autres solutions