Design : le choix des armes

L’objectif de tout designer est de répondre à des problèmes. Toutefois, le premier problème auquel un designer fait face est le choix des bons outils. Keaton Herzer illustre très bien cette problématique dans son article publié récemment sur Medium, The Ideal Design Workflow – Prototyping: From UX to Front End. C’est une perle qui résume parfaitement la plupart des situations.

Les applications dédiées à la gestion et à l’élaboration d’applications web & mobiles sont légion. On finit par ne plus savoir où donner de la tête et pour quelle solution opter. Je vous propose ici quelques pistes qui, je l’espère, vous aideront à faire les choix qui vous correspondent.

Architecture de l’information

Je place cette étape en premier lieu de chaque projet. Le principe est de définir, avec l’aide de votre client, la structure du contenu à venir. On peut, en parallèle, travailler les premiers prototypes. Les ébauches de visuels permettent souvent d’identifier des éléments que l’on omet lors de la phase d’analyse.

Coggle

Coggle est une application en ligne pour gérer des documents collaboratifs sous la forme de Mind Map. Simple et intuitif, Coggle n’a que peu de contraintes et vous pourrez définir vos propres méthodes de travail. Les utilisateurs sont notifiés des adaptations et peuvent aussi commenter chaque partie du projet. Enfin, Coggle peut être utilisé gratuitement et dispose de tarifs très compétitifs pour jouir de l’ensemble des options.

Dropbox

Dropbox reste une des solutions les plus simple pour centraliser les contenus tels que photos et vidéos. On peut aussi envisager d’y centraliser les contenus rédactionnels mais avec le risque que ceux-ci soient mal organisés ou altérés lors d’adaptations par un tiers. Dropbox reste financièrement abordable si vous ne gérez pas trop de projets en parallèle.

Google Drive

Google Drive est une solution collaborative et gratuite pour la gestion du contenu rédactionnel. Simple et efficace pour un projet à faible contenu, il demande beaucoup plus de rigueur et d’organisation sur des projets à moyen ou large contenu.

Gather Content

La Rolls de la gestion de contenu mais aussi la solution la plus onéreuse. Cette application collaborative permet de gérer son contenu rédactionnel en équipe de façon très structurée. Vous pourrez y définir des modèles de page afin de faciliter le travail des rédacteurs. C’est aussi l’outil idéal si vous envisagez de réaliser votre site avec une Static Site Generator comme Jekyll ou Nanoc, pour exemples.

CMS

Si la solution technique envisagée est un outil de CMS ( WordPress, Joomla ), vous pouvez aussi opter pour le back-office de celui-ci. Même si GatherContent offre des exports de contenu tip top, vous ferez des économies non négligeables à travailler de cette manière.

Documentation graphique

Pinterest

Ce réseau vous permet de créer vos tableaux et d’y enregistrer les épingles que vous appréciez ou trouvez utiles. À terme, c’est le meilleur outil de documentation graphique, aidé à la fois par les autres utilisateurs qui organisent leurs propres tableaux et les nouveautés qui arrivent chaque jour de sites de référence comme Behance ou Dribbble.

CodePen

CodePen propose une belle galerie d’effets, d’animations et d’interactions graphiques pour le web. Vous pourrez y glaner quelques idées pour vos futurs projets ( et les partager avec le développeur front-end ).

Wireframes

Papier & crayons

Rien ne vaut les bonnes vieilles méthodes, surtout au début d’un projet. Les post-its et cahiers seront vos meilleurs amis avant de passer à des solutions plus étoffées ( et chronophages ) comme Adobe XD et InVision.

Pour vous faire gagner du temps, le top reste Interface Sketch qui vous propose un large choix de supports. Personnellement, je ne suis pas un fan des pages volantes que j’égare avec un doigté incomparable. Je me suis donc rabattu sur Dotgrid.co et ses magnifiques cahiers, histoire de ne plus me lancer dans des fouilles durant des heures…

POP

Sur base de vos croquis, POP va vous permettre de créer vos premiers prototypes. Cette application, simple comme bonjour, est juste géniale et il vous faudra moins d’une heure pour tester votre version alpha.

Wireframe Kits

Il existe aussi pléthore de Wireframe Kits, comme le propose UI8, pour exemple. Ces kits sont souvent très complets et visuellement attractifs  pour les présentations clients ou même pour illustrer votre portfolio. Toutefois, durant la phase de conception du projet, manipuler ces kits vous fera perdre un temps précieux.

Prototypes

Adobe Photoshop / Sketch

Ces outils restent des valeurs sûres pour concevoir des visuels plus élaborés. Vous pourrez gagner du temps en y associant un kit acheté en ligne, sur UI8 ou ThemeForest, pour exemple.

InVision

Vous importez dans InVision vos visuels réalisés sous Photoshop ou Sketch et spécifiez des interactions entre les différentes pages. InVision émule des applications pour smartphone, tablette et desktop, en retina ou pas. Vous y gérez vos versions de visuels, les commentaires de votre équipe et spécifiez les maquettes validées par le client des maquettes refusées ou en attente de validation.

InVision reste toutefois assez coûteux, comme la plupart des outils de gestion des prototypes. Prévoyez en moyenne 300 à 450$ par an, que ce soit InVision, Frontify ou UXPin.

Frontify

Frontify est assez similaire à InVision dans l’ensemble. Il est toutefois un poil plus complexe et dispose de fonctionnalités complémentaires comme les guidlines ( typos, couleurs, etc. ) ou la possibilité de définir les éléments d’Atomic Design dans vos maquettes.

En bref, Frontify est plus adapté pour échanger avec le développeur front-end alors qu’InVision s’adapte bien mieux aux échanges avec le client.

UXPin

À la différence de InVision et Frontify, UXPin vous propose de réaliser vos designs directement en ligne. L’outil est bien pensé et permet d’aller très loin dans l’élaboration de vos projets. Les prototypes réalisés sont aussi les plus aboutis point de vue interactions et animations.

Je n’ai toutefois pas opté pour UXPin qui fait un peu double-emploi avec Adobe Photoshop ou Sketch.

Adobe XD

Adobe Experience Design n’est encore qu’en version beta mais promet déjà d’être le must dans l’élaboration d’applications web et mobile. Simple et intuitif, vous maitriserez Adobe XD après avoir consulté les vidéos explicatives, donc en moins d’une heure. À terme, cette nouveauté d’Adobe pourrait bien remplacer InVision, Frontify et UXPin.

En conclusion

Les projets web deviennent de plus en plus complexes. Il convient à la fois de fournir des informations claires et précises à votre client ainsi qu’à vos partenaires ( intégrateurs, développeurs, rédacteurs, seo, etc. ) et de s’assurer du bon fonctionnement et de l’ergonomie des outils que vous concevez.

Avec l’aide des bons outils, vous gagnez en productivité, vous êtes plus structuré et vous fournissez des informations pertinentes en un minimum de temps. Vos collègues apprécieront et le temps gagné sur un projet vous permettra de bosser sur votre portfolio et vos projets personnels.