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

 Classé dans Productivité

Focus sur les principaux outils que nous utilisons.


Graphique


ps_appicon-512

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

ai_cc_appicon-512

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

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

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 !

chrome

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

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…

Organisation

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.

keep

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

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

 

Articles Récents
Showing 4 comments
  • Nicolas
    Répondre

    Xian pour ma part je suis plutôt sur brackets de Adobe.

  • victor
    Répondre

    Hey! Alors j’utilisais la version gratuite de ShiftEdit pour le code mais maintenant je suis de plus en plus sur Atom !

  • xian
    Répondre

    Coucou !

    Et comme éditeur de code ?

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Contact rapide

Pas assez lisible ? Générer un nouveau captcha captcha txt
0
En cours de connexion
Merci de patienter...
Laissez-nous un message

Nous ne sommes pas en ligne actuellement, Merci de laisser un message.

* Votre Nom
* Votre Email
* Votre n° de Tél.
* Votre message
    Débuter le chat

    Bienvenue dans le chat en ligne Sitis ! Nous sommes là pour répondre à vos questions

    * Votre Nom
    Nous sommes en ligne !
    Vos impressions ?

    Aidez-nous à mieux vous aider :)

    Avons-nous répondu à vos attentes ?