De mon côté, j’observais le visage inquiet d’un fan de Fireworks apprenant une mauvaise nouvelle. Lors de la conférence MAX et via son blog officiel Fireworks, Adobe annonçait ne plus apporter de nouvelles fonctionnalités à Fireworks CS6. Cet événement signait donc la mort d’un énième logiciel de la firme.

Cette décennie aura été un passage à vide en terme de logiciels pour les designers. Peu d’outils sont vraiment adaptés aux contraintes de l’UI design et de son workflow (UI pour User Interface). Ces dernières années illustrent à merveille les dangers d’un monopole dont Adobe a su tirer profit jusqu’à présent.

Heureusement, les temps changent. Des outils tels que Sketch, Figma, Gravit et Affinity se sont placés au dessus des standards proposés par Adobe. Le nouvel éco-système ne répond pas à tous les besoins. Néanmoins, la torture infligée par la production d’interfaces avec la Creative Cloud d’Adobe est révolue.

Vous avez probablement lu assez de tests et de rapports qui vous informent sur les fonctionnalités de ces logiciels. Ce test ne sera pas l’un d’eux.

Modularité et légèreté

Mon hypothèse est que la conception modulaire, légère et très itérative est la clé d’un processus de design fonctionnelle. Je crois sincèrement que les nouveaux outils de design définissent, sinon dictent nos manières de travailler : taille des fichiers, facilité de partage et d’itération.

Par curiosité, j’ai souhaité tester Affinity Designer, un logiciel d’édition graphique compatible Mac, iOS et Windows.

J’ai voulu voir si ce logiciel pouvait entrer dans ma routine de création. Je m’attarderai uniquement sur les promesses et les fonctionnalités qui sont essentielles dans ma manière de travailler – légèreté et rapidité. Je vous épargne ainsi l’ennuyeuse présentation détaillée de chaque fonctionnalité.

Parlons peu, parlons bien.

Le même format de fichiers sur toutes les plateformes

J’ai recherché désespérément un logiciel de design sur Windows. Mais un qui soit également compatible avec Mac et iOS. Je n’ai pas trouvé mon bonheur jusqu’à la sortie de Figma bêta début 2016. Malheureusement, Figma ne propose pas d’application native à installer sur sa machine. Seule une appli en Web-view est disponible.

Rapidité d’éxécution

En revanche, Affinity marque des bons points en proposant une application native Mac, iOS et Windows. La rapidité d’exécution est très bonne même avec 20 planches de travail ouvertes. Figma est très performant mais montre des faiblesses lorsque le plan de travail comportent des centaines d’éléments. Ce qui n’est pas le cas avec Affinity lors de mes tests sous Windows.

Affinity designer artboards

Logiciel cross-platform

Affinity Designer partage le même format de fichier sur toutes les plateformes. Cela permet aux utilisateurs de passer d’un environnement Mac à Windows sans nécessiter une conversion de fichier. Pratique lorsqu’on est dans un environnement professionnel où les collègues travaillent sur différents systèmes.

Affinity designer 1.5

Les symboles (ou composants) au sein de Affinity Designer

Certains les appellent objets, d’autres composants, je les appellerai symboles dans cet article.

Les symboles vous permettent de combiner plusieurs éléments en un seul objet composé. Ce dernier peut être facilement réutilisé sous la forme d’instances. Dès que le symbole maître est modifié, toutes les instances héritent de la modification.

Cependant, certaines propriétés peuvent toujours être modifiées individuellement. Que ce soit la couleur, le texte, la forme, la taille, le trait ou l’effet, vous gardez un contrôle total sur les propriétés que vous voulez partager ou non avec le symbole parent.

Bien entendu, les symboles peuvent être imbriqués les uns dans les autres.

Les symboles disponibles dans Affinity Designer permettent d’augmenter drastiquement ma productivité lorsque je dois traiter des feedbacks sur une maquette Web. Je modifie uniquement mes symboles maîtres et l’ensemble de mes plans de travail sont mis à jour.

Les grilles

J’ai mis un petit temps à comprendre le fonctionnement des grilles sous Affinity. Mais après avoir vu cette vidéo, j’ai compris que c’était du très lourd en terme de flexibilité.

Affinity Designer offre un grand contrôle sur la composition des grilles et leur magnétisme. Le point qui m’a le plus marqué est l’option permettant de créer des lots de grille (cf vidéo ci-dessus). C’est par exemple pratique pour créer des planches d’icônes.

Autre bon point pour un UI designer, le logiciel propose des informations instantanées sur les espacements et les dimensions, garantissant la précision de votre maquette. Ces informations peuvent aussi être utiles pour un développeur front-end.

Des maquettes responsives

Une caractéristique que Affinity a introduit avec la version 1.5 est le design responsive. C’est-à-dire la capacité de définir comment les éléments répondent à différentes tailles de plans de travail ou d’appareils.

La fonction Contraintes propose un contrôle de la position ou de la taille d’un objet par rapport à son conteneur. Cela permet de créer des éléments réutilisables qui se comportent de façon adaptative par rapport à leur contexte. Une précieuse contribution pour fluidifier les processus de design sur différents devices.

Affinity designer constraints

Les exports

Une belle promesse de ce côté-là avec Affinity. Le logiciel offre de vaste options avec la possibilité d’exporter tous vos éléments à la taille, à la résolution et au format de votre choix. Vous pouvez spécifier différents dossiers d’export pour les éléments d’un même document. Et bien entendu choisir la qualité de l’image pour les exports en GIF, PNG et JPEG.

Examinons les formats de fichiers d’exportation pris en charge par Affinity :

• PNG
• JPEG
• GIF
• TIFF
• PSD
• PDF
• SVG
• WMF
• EPS
• EXR
• HDR

J’apprécie la portabilité des fichiers sur PhotoShop et Illustrator avec la possibilité d’exporter et d’importer des fichiers .PSD et .EPS.

Affinity designer site

Seul bémol à mon sens, la fonction Export n’est pas très accessible car cachée dans les menus. Cela peut être dérangeant lorsqu’on utilise fréquemment cette fonctionnalité.

Les itérations et la collaboration

Affinity Designer n’offre pas encore des fonctions aussi développées que d’autres outils en matière de collaboration et d’itération. La duplication des fichiers se fait de manière classique. Et la collaboration en multi-utilisateurs n’est pas encore à l’ordre du jour. Dommage mais j’ai bon espoir que l’équipe Affinity planche déjà sur le sujet.

Test gratuit de Affinity Designer

Serif – la société éditrice de Affinity – offre la possibilité de tester gratuitement cet éditeur graphique pendant 10 jours.

Passé ce délai, le prix est plus que raisonnable : 54,99€ pour une licence à vie à activer sur une machine. Bien entendu, les mises à jour sont comprises dans ce prix. Avec ça, vous vous offrez un logiciel fiable d’édition graphique pour la production d’UI designs, d’illustrations, d’icônes, etc.

Affinity designer windows

On en parle ?!

Avez-vous des commentaires, des questions, de l’amour ou de la haine ? Envoyez tout ça à [email protected]. Si vous n’aimez pas les e-mails, envoyez un tweet à @MagDuWebdesign.

Supporté par Serif

Avec plus de 3 décennies d’expertise et 6 millions de clients, Serif à de longue date accompagné les passionnés de graphisme et de Web design grâce à sa gamme de produits Affinity. C’est donc avec fierté que Serif apporte son support à la communauté du Magazine du Webdesign en proposant une alternative low-cost aux logiciels haut de gamme d’édition et de publication graphique.

Si vous avez apprécié cet article, vous pourriez être intéressé(e) par :

Prenez soin de vous. A bientôt — @guillaumpalayer.

Accédez au meilleur des interfaces directement depuis votre boîte mail

Si vous n’aimez pas les emails, accédez au meilleur des interfaces sur Twitter.