Cela fait maintenant quelques temps que je bosse régulièrement sur du développement web front-end et du webdesign, et je commence à avoir des projets qui tombent de la part d'agences ou de particuliers. Contrairement aux travaux d'études, et comme je bosse en freelance, je facture ces projets en fonction des heures de travail passées dessus. L'objectif est donc pour moi d'être rapide et efficace, afin de pratiquer des tarifs attractifs et compétitifs, et ainsi fidéliser mes clients actuels et en attirer d'autres potentiels.

Dans cette optique, une problématique commence à se poser : l'optimisation du flux de travail.

En effet, travailler en freelance implique de bien s’organiser pour gagner du temps (et des clients), que ce soit au niveau de la gestion de ses clients, des devis et factures, du matériel et des logiciels ou encore du travail en lui même.

Je vais me concentrer dans cet article sur les différentes techniques et outils employés pour créer des sites Internet, qu'il s'agisse du design ou du développement de ceux-ci. Je n'aborderai par contre pas les étapes antérieures telles que la lecture et compréhension du brief, la définition des besoins et de la cible, l'étude de la concurrence, la recherche d'inspiration ou les croquis et ébauches papier.

Le design

Cette étape se décompose la plupart du temps en trois sous-parties : le zoning ou wireframe, la maquette graphique et le prototype.

Le zoning/wireframe – comme son nom l'indique – sert à identifier les principales zones de l'interface web. Il est représenté sous la forme d'un schéma en noir et blanc qui permet de lister et hiérarchiser les informations de la page. Cette maquette filaire monochrome détaille chaque bloc ainsi que son emplacement et ses proportions, afin de définir les meilleures zones de contenu et navigation pour optimiser leur pertinence dans l'espace (dans l'optique de présenter l'ergonomie et les fonctionnalités de chacune des pages du site web). Il permet également de définir le storyboard du site – c'est-à-dire le parcours utilisateur – sous forme de chemin de fer.

En parallèle du wireframe, je réalise généralement un moodboard afin de présenter sous forme de planche d'inspiration graphique, des palettes de couleurs, des échantillons de typographies et titrailles, des exemples de visuels et photographies, etc.

Niveau outils, j'utilise Balsamiq Mockups pour créer les wireframes (il y a aussi des services en ligne comme Alouka, Wireframe.cc ou encore Cacoo) et Illustrator ou Photoshop pour créer les moodboards.

Une fois le wireframe terminé et validé avec le client, on passe à la maquette graphique qui sera une prévisualisation haute fidélité du rendu graphique des différentes pages web. Elle permet de valider l'apparence définitive du site avec le client afin de pouvoir ensuite passer à l'intégration.

Au niveau des outils, j'ai eu l'occasion de tester Macaw, Sketch, Affinity Designer, Pixelmator ou même GIMP (et je dois en oublier d'autres) mais – même si ce sont de très bons outils – je finis toujours par revenir sur Photoshop car j'y ai mes habitudes, mes plugins (notamment GuideGuide, Cut & Slice, CSS Hat, PNG Hat, Layrs, Pixel Dropr & Refill Readr), mes scripts… Et surtout parce qu'on a plus de probabilités de travailler avec un client ou collaborateur qui utilise Photoshop plutôt que Sketch ou Macaw. Il y a beau y avoir de belles alternatives à Photoshop et Illustrator qui se développent, Adobe reste pour le moment dans une situation indéniable de monopole auprès des graphistes et développeurs web, ce qui rend ses logiciels incontournables.

(Edit : Je suis récemment passé à Sketch, Affinity Photo & Affinity Designer, mais j'en parlerai dans un prochain article.)

Le prototype reprend la maquette graphique mais la présente de manière fonctionnelle. Les pages web se consultent donc dans le navigateur, avec des liens cliquables et des interactions. Cela permet de vérifier tous les détails du parcours utilisateur et de se rendre compte de ce que donnera le site web finalisé une fois en ligne.

Pour faire cela, il existe des services en lignes comme Marvel, Invision et UXPin ou des logiciels comme Axure, Justinmind et Pixate.

Une fois ces différentes étapes terminées, le travail de l'intégration et du développement peut commencer…

[Ce process est bien sûr à adopter avec souplesse et interprétation, en modulant en fonction des projets, des équipes et des habitudes de travail, mais aussi des préférences personnelles.]

Le développement front-end

Commençons par les outils, et plus particulièrement les IDE ou logiciels de développements web.

Chacun a ses outils de prédilection, en fonction de l'OS installé sur sa machine, de ses besoins, de son budget, de son éthique (open source, freemium, commercial)… Il en existe de nombreux – excellents – ce qui fait que vous en trouverez forcément un qui collera à vos exigences et préférences personnelles.

Contrairement à beaucoup de personnes, je n'ai pas débuté avec Dreamweaver mais avec Fraise car il était simple, léger, gratuit et open source.
C'est mon prof qui nous l'avait fait télécharger en cours et cela convenait très bien pour apprendre les langages HTML et CSS.

Néanmoins, j'ai rapidement découvert qu'il existait de nombreux autres éditeurs plus puissants, plus ergonomiques, plus modulables… Pendant un moment, je changeais d'IDE tous les 3-4 mois environ afin de me faire une idée du marché. Je suis d'abord passé par Coda, puis par Brackets (développé par Adobe), Sublime text, Atom et enfin Textmate.

Je tiens à préciser que je travaille sous OSX et lorsque le choix se présente entre deux logiciels équivalents mais avec une licence différente, j'ai toujours une préférence pour celui qui sera open source.

TextMate - The missing editor for Mac OS X

Aujourd'hui, j'utilise majoritairement TextMate et Atom. Tous deux sont open source (tout comme Brackets) contrairement à Coda et Sublime Text, qui sont sous licence commerciale, mais ils ont tous des fonctionnalités assez similaires. Ils proposent tous la fonction de live reload (en natif ou avec une extension) permettant de visualiser en live les modifications effectuées directement dans le navigateur. En général, les extensions les plus utilisées (telles que Emmet, Linter, Minimap, Beautify, Color Picker…) se retrouvent également chez tous ces IDE, et les thèmes étant modifiables à souhait, on peut se retrouver avec les interface graphique et colorisation syntaxique que l'on souhaite.

Il y a bien évidemment certaines différences néanmoins :

• Brackets est plutôt orientée webdesign avec sa fonction de live reload native, son color picker, son éditeur d'animations web…
• Sublime Text est très stable et rapide et dispose du plus large gestionnaire d'extensions.
• Atom est légèrement plus lent que les deux précédents mais a la particularité d'être hautement customizable & hackable.

Sublime Text reste très probablement l'IDE le plus utilisé à l'heure actuelle du fait de sa stabilité, sa rapidité, ses fonctionnalités avancées pour le front-end aussi bien que le back-end, son gestionnaires de plugins, sa large communauté – et donc ses documentations, aides, tutoriels et supports en ligne en tout genre.

Mais alors, pourquoi TextMate ?

Eh bien tout d'abord car il est gratuit et open source depuis sa version 2.0. Il est mis à jour très régulièrement (tous les 5-7 jours pour les nighty builds). Il est extrêmement léger et rapide et possède une interface graphique simple et ergonomique. C'est un IDE qui permet de développer dans à peu près tous les langages (aussi bien front-end que back-end) et auquel on peut ajouter de nombreuses extensions grâce à son système de bundles et snippets. Un outil que je ne suis donc pas prêt d'abandonner pour le moment !

Le mieux reste de les essayer pour vous faire une idée et adopter celui qui correspondra le mieux à vos besoins.

Jusqu'ici, je développais mes sites en local avec MAMP, mais j'ai eu quelques soucis avec les mises à jour d'OSX, ce qui m'a poussé à aller voir ce qui se faisait d'autre. J'ai d'abord installé AMPPS qui est une excellente alternative gratuite à MAMP, et puis j'ai finalement fini par configurer directement Apache, Php et MySql sur mon MacBook Pro.

Codekit - It's like steroids for web developers

J'utilise également Codekit pour la plupart de mes projets web, qui est un peu le couteau suisse du développeur. Il permet de compiler de nombreux langages (Less, Sass, Jade…) et a des fonctions très utiles comme l'autoprefixer, le live reload et live preview, l'optimisation d'images, et bien d'autres… C'est un des outils indispensables dont j'aurais du mal à me passer aujourd'hui.

Ne travaillant pas sur de gros projets web avec de nombreux collaborateurs, je n'utilise pas d'outils de versioning (Git, Github) et je ferai donc l'impasse sur cette partie du workflow de nombreux développeurs qui seront plus à même d'en parler.

Pour le déploiement des sites internet, j'utilise Cyberduck comme client FTP et sFTP qui est gratuit et open source, mais il existe également le très célèbre FileZilla (open source) ou Transmit ($34). J'avais testé Transmit pendant une période. C'est un très bon client FTP qui propose une fonction avancée de synchronisation permettant de détecter les fichiers qui ont été modifiés depuis la dernière synchronisation afin de ne re-déployer que ceux-ci sur le serveur. Mais cette fonction ne détecte pas toujours tous les fichiers modifiés et manque de stabilité, ce qui fait que je suis assez vite revenu sur Cyberduck.

J'ai également eu l'occasion de tester DPLOY qui est particulièrement utile si vous utilisez Git. C'est un outil en lignes de commande qui permet de déployer uniquement les dernières modifications effectuées, en comparant la version sur le serveur avec votre dépôt Git. C'est finalement assez semblable à la fonction de synchronisation de Transmit que je viens d'évoquer plus haut, mais en plus rapide, plus stable et gratuit !

Conclusion

Voici donc les différents outils que j'utilise et qui me permettent d'avoir un workflow agréable et adapté à mes besoins. Il est très certainement perfectible et personne n'aura le même, mais cela pourra certainement vous donner quelques pistes pour améliorer le vôtre ou pour découvrir de nouveaux outils.

N'hésitez pas à poster vos remarques, corrections ou suggestions sur Twitter, ainsi que les outils que vous utilisez pour optimiser votre workflow. C'est toujours intéressant d'avoir des retours d'expérience de la part de designers graphiques ou développeurs web.