Merci @graffr!

Récemment, j’ai participé à une conférence, où @graffr nous à fait l’honneur de se déplacer dans notre belle région ( si si ) pour nous montrer combien Fireworks était cool pour faire du web.

D’ailleurs, si jamais vous voulez le voir en vrai, il suffit de le contacter, il viendra vous faire une jolie démo ! 

Merci à lui d’avoir juste changé ma vie de webdesigner. :)

Utiliser le bon outil

Revenons 2secondes aux bases. Photoshop est un logiciel de manipulation photo, et dessin numérique, Fireworks à toujours été crée pour faire des maquettes web. C’est donc assez naturellement que ce dernier est juste une référence pour créer de jolies maquettes de sites internet. La démo de @graffr m’avait pas mal séduite, et j’ai donc décidé de tenter l’expérience. Ayant l’habitude de Photoshop et Illustrator depuis quelques années, ma plus grande difficulté a été de réapprendre les raccourcis claviers, les habitudes ayant la vie dure, je me mélange encore les doigts après plus d’un mois.

Pourquoi c’est vraiment mieux!

Le principal intérêt des pages et des calques partageables entre pages est énorme. Vous partagez par exemple le header de votre maquette, contenant le menu et le logo sur toutes les pages ; plus tard, une fois que vous avez créé une vingtaine de pages, comprenant toutes ce header, vous souhaitez modifier le nom d’une rubrique du menu. Sur Photoshop, vous ouvrez tous les fichiers et faites la modification à la main, ça vous prend vos nerfs et 2 heures. Ici, vous modifiez l’intitulé dans une page où le calque est partagé, et la modification est propagée sur l’ensemble des pages. Votre fichier tout entier est mis à jour comme par magie ! Un gain de temps énorme !

Les fichiers

Le format de fichier, parlons en. Un PSD d’une maquette assez complète pèse souvent plus de 100/120Mo environ. Ici, le png d’une maquette complète, pèse environ 25mo… OK, pas besoin d’être grand mathématicien, la différence est énorme, et mieux encore, c’est du PNG32, donc exit les dégradés pas si dégradés que ça de Photoshop, ici tout est bien lisse et clean. Donc, gain de place, meilleure organisation des fichiers, que demander de plus?

Fonctionnalités

Parmi les fonctions qui sont simplement magiques, j’en retiendrais quelques unes, comme les options d’alignement ou la gestion des styles. Qui n’a jamais souhaité aligner tout les éléments d’un menu horizontal, pour que entre chaque élément, il y ait 32px? Fireworks le fait rapidement et proprement, là ou vous devez mesurer sur Photoshop au pixel près. La gestion des styles est une fonction, qui une fois intégrée, n’est plus dispensable. Cela permet de définir, comme sur inDesign par exemple, des styles de texte, comme le style des h1, h2, p, et autres balises. Comme cela, quand votre intégrateur chéri passera sur votre maquette, il pourra directement récupérer les informations de style, et vous, gagner en rapidité en création, en sélectionnant vos objets et en leur appliquant le style qui va bien. Moins d’erreurs dans vos fichiers, plus propres, moins prise de tête.

Pixel perfect en plus?

Faire un design pixel-perfect sur Fireworks est totalement possible, c’est même simple. Toutes les formes étant vectorielles, les effets non destructifs, les options d’alignement étant là, aligner des choses sur une grille ou définir des blocs d’une taille exacte n’a jamais été aussi facile, et c’est un vrai plaisir! Redimensionner des éléments est aisé, les blocs ne se pixellisent pas, un régal par rapport à Photoshop!

La bibliothèque

Autre chose très intéressante, et peut-être plus importante, est la gestion d’une bibliothèque de “symboles”. Elle se présente comme sous Flash pour les quelques personnes qui s’en servent encore, et elle est séparée en 2. Les éléments de votre maquette actuelle, et une bibliothèque commune, déjà pré-remplie de base par de nombreux éléments très intéressants pour faire du wireframe, ou simplement des icônes, et éléments de différents OS à intégrer à vos maquettes.

Facilité pour l’intégration

Je ne parle même pas de la simplicité pour découper une maquette, la création de tranches, et l’exportation se font en quelques clics. C’est rapide, bien fait, et les fichiers que Fireworks produit sont directement compressés pour le web. En fait les fichiers produits par Fireworks, quelle que soit la taille et le format de fichier, sont plus propres, et moins lourds que Photoshop. Étonnant ! Etant aussi intégrateur, les nouvelles options que m’apporte Fireworks me facilitent vraiment la vie !

Et le futur?

Je continue de découvrir des choses au fur et à mesure de mes journées passées à l’utiliser, et c’est un réel plaisir. Pour ceux qui disent, “Fireworks a été arrêté chez Adobe”, certes, mais n’oublions pas qu’ils ne l’arrêtent pas, mais continuent simplement de corriger des bugs, en n’ajoutant plus aucune fonctionnalité. Et puis, tant que le logiciel se lance, pourquoi s’inquiéter? Il me parait assez impensable pour le moment qu’ils le suppriment purement du catalogue, les outils pour le concurrencer n’étant pas encore assez évolués dans leur catalogue.

Pour ma part, je suis pleinement satisfait de cette migration, que je conseille à tout les webdesigners ! Cela changera votre méthode de travail, et l’améliorera définitivement !

Merci à Alexandra Bianchini pour sa relecture ;)