Cet article reprend un ancien article traitant exclusivement de Macaw. Il a été actualisé et enrichis avec d’autres solutions plus ou moins similaires, dont de nouvelles qui ont fait leur apparition entre temps.

L’idée de départ : faire ses maquettes de webdesign et les exporter en un site qui soit opérationnel, tout beau, tout propre.

Bon, c’est pas gagné.

Macaw vs Edge Reflow

Macaw et Adobe Edge Reflow (uniquement en preview sur Creative Cloud pour le moment) sont des logiciels proposant de réaliser le webdesign d’un site dans un premier temps, puis gérer la partie intégration dans un second temps.

Vous disposez d’une interface similaire à celle d’un photoshop très simplifié, vous permettant ainsi de créer un header/body/footer assez simple, dans un style moderne et assez flat par exemple. La particularité est vous pouvez tout de suite réaliser vos versions desktop/tablette/mobile : l’interface vous encourage à travailler selon une grille, et l’ajout de breakpoint vous permet de tester directement la réaction de votre site internet face aux différentes largeurs d’écran. En temps réel, vous pouvez constater le changement de place des éléments et gérer leurs positionnements en fonction des breakpoints que vous vous êtes fixés.

Dans Edge Reflow, vous avez également la possibilité de simuler l’affichage de votre site sur différents navigateurs et mobiles. Le logiciel étant pensé 100% web et responsive, vous trouverez vos tailles de polices en “em”, les polices Google Font, les options “padding”, “margin”, etc. … Tout est pensé intégration depuis la première étape de la création maquette.

Ce qui en soit est une bonne chose lorsqu’on ne fait que du webdesign : en comparaison à la méthode “traditionnelle” qui consisterait à réaliser une maquette photoshop mobile, une tablette et une desktop… on a ici un gain de temps important. En plus de la possibilité de gérer soit-même la réaction des éléments lors du passage d’une largeur d’écran à une autre : ce qui évitera des erreurs de la part du webdesigner et des arrachages de cheveux en moins pour l’intégrateur.

Quant à l’intégration : tout se fait en direct ! Tout ce que vous créez est directement convertit en CSS, que vous pouvez récupérer séparément, élément par élément, on dans son ensemble. Dans Adobe Edge Reflow, vous avez même la possibilité d’ajouter des animations javascript.

Le gagnant : Adobe Edge Reflow

La grande force d’Edge Reflow, c’est qu’il est le petit dernier d’une grande famille : il est compatible avec plusieurs autres applications d’Adobe, dont Photoshop. En effet, il est possible d’importer directement une maquette .psd, de la convertir en document Edge Reflow, puis de régler les différents breakpoint et comportement des blocs/éléments.

Les points négatifs ou le chemin qu’il reste encore à faire

Vous l’aurez compris, inutile d’opter pour cette option si vous espérez en sortir directement un site très complexe : un gros travail de développement vous attendra encore derrière.

En terme de design, vous risquez d’être assez vite limité. Les différents panneaux et options vous permettront de réaliser, par exemple, une sympathique landing page dans un style flat très moderne. Si vous voulez y ajouter des dégradés, des ombres un peu trop complexes, des puces customisées, etc. … laissez tomber. Ou alors il vous faudra créer ses éléments séparément dans un autre logiciel et les importer en tant qu’image (ce que vous serez très certainement amener à faire de toute façon, tôt ou tard).

Un peu déçu quant à Edge Reflow : sa récupération des fichiers Photoshop n’est pas super. Même avec un fichier très bien rangé, il faudra encore un certain temps de rangement, ré-arrangement, avant de pouvoir exploiter le fichier sur Edge Reflow. Je parle ici en tant qu’expérience personnelle : il se peut qu’avec de l’entrainement, et une méthode d’organisation/de nomination des calques, … la transition se fasse plus rapidement et simplement.

Toutefois, pour la réalisation de sites one-page, simples, flat (une landing page par exemple), ses logiciels vous feront gagner pas mal de temps.

Macaw vs Edge Reflow… vs Source

Oui ! Source : ce petit groupe d’extraterrestres qui fait des plugins photoshop super bien pensés et qui a lancé depuis quelques temps déjà Avocode.

Si après avoir testé Macaw et Edge Reflow je n’ai pas été personnellement convaincu de faire la transition depuis Photoshop, je vous conseille en tout cas vivement de jeter un coup d’œil aux possibilités que permet les différents outils mis à dispositions par Source.

Les plugins

J’en ai déjà parlé dans un autre article : Source propose de nombreux plugins qui vous faciliteront la vie en tant que webdesign, mais aussi en tant qu’intégrateur :

• CSS Hat : vous permet d’avoir directement le code CSS de l’élément sélectionné
• Subtle Pattern : la bibliothèque de textures/motifs Subbtle Pattern disponible directement dans Photoshop
• Enigma : permet l’export d’un calque, d’une sélection ou de tout le document en JPG/PNG directement dans un dossier précédemment sélectionné (pas compatible avec Photoshop CC 2014 *pleurs*)

L’association de ses plugins vous permettra de retrouver plusieurs fonctionnalités que vous retrouverez dans Macaw et Edge Reflow sans avoir à changer de logiciel, et surtout en restant dans Photoshop.

Avocode

Avocode est un logiciel développé par Source permettant aux développeurs d’ouvrir des fichiers Photoshop, sans avoir besoin de savoir utiliser Photoshop. Vous y trouverez donc une interface design très simplifiée avec uniquement des outils tels que la règle ou la pipette. Mais vous y trouverez également tous les plugins cités précédemment : le moyen de récupérer immédiatement le CSS des éléments graphiques sélectionnés, exporter simplement et rapidement les images, etc …

Toutefois, à ma connaissance, il n’y a pas la gestion des breakpoints et la réaction des blocs en fonction des tailles d’écran : ça ne m’a pas l’air d’être pensé dans la même optique que les deux logiciels précédents, avec cette volonté de réaliser et visualiser directement le responsive d’un site.

Avocode + Cloud

En plus du logiciel, vous disposez également d’un espace dédié en ligne. Cet espace vous permet de gérer vos projets : à vous d’y ajouter un nouveau projet, ses différentes maquettes, etc. … et pourquoi pas de les partager avec une équipe. Vous pourrez ainsi suivre les différentes mises à jour des maquettes de la part des webdesigner par exemple, à quand date la dernière maj sur le document en question et de qui, … Le logiciel étant connecté au cloud, vous trouverez ces mêmes informations dans Avocode, ainsi que les différents projets et fichiers.

Avocode + Photoshop

Source met à disposition un plugin Photoshop vous permettant de synchroniser le fichier ouvert avec votre compte Avocode. Vous pouvez ainsi directement uploader votre maquette webdesign dans tel projet, ou mettre rapidement à jour un fichier suite à des corrections clients. L’intégrateur sera ainsi directement avertis de ces corrections.

Ma conclusion

Je n’ai personnellement pas trouvé mon bonheur dans des solutions logiciels qui pourront me permettre d’exporter mon design en une page web directement : en terme de design, j’aime trop la flexibilité que je retrouve dans Photoshop et même si j’aime beaucoup ce style graphique et le trouve bien pratique, je n’aime pas l’idée être cantonné à ne faire que du flat design pour des raisons techniques. Dans un certain sens, je me suis vite sentis brider en terme de liberté créative.

Peut-être est-ce parce que j’ai vu tout cela depuis un œil de webdesigner : mon avis aurait peut-être été un peu différent si j’avais été développeur web aguerris.

Ma solution personnelle quant à tout ça reste l’utilisation de plugin Photoshop. Ça ne perturbe pas trop mes habitudes de travail en terme de créa, mais me permet de gagner pas mal de temps en terme d’intégration.

La possibilité de voir et d’ajuster directement le comportement de son site en fonction des largeurs d’écran, comme on l’a sur Edge Reflow ou Macaw, reste une fonctionnalité très impressionnante et pratique.

Peut-être que bientôt un plugin Photoshop nous permettra d’en faire autant, tester le responsive design de notre site en fonction de breakpoints, ou pourquoi pas Photoshop directement ?

En tout cas les solutions en la matières évoluent vite : beaucoup de choses ont changé en un an, entre la première version de cet article et celle-ci sur Medium, et tout laisse à penser que dans un an de nouvelles solutions auront vus le jour remettant en question cet article, corrigeant peut-être les faiblesses que j’ai reproché et répondant aux interrogations posées.

Rendez-vous dans un an.