La conception de l’interface d’un site Web ou d’une application est une étape primordiale d’un projet numérique. Souvent négligée au profit du design, cette phase permet pourtant de valider les principes ergonomiques que vous souhaitez mettre en œuvre en tant que web designer. Voici une sélection d’outils qui vous permettront de gagner en productivité.

L’étape de conception consiste souvent à réaliser l’arborescence du site qui s'accompagne de maquettes simplifiées (aussi appelées wireframes) des principaux écrans. Ces pages dites “en fil de fer” ont pour objectif de poser les éléments, de la même manière qu’un story-board.

Des dessins à main levée peuvent être parfaitement adaptés mais peuvent vite s’avérer chronophages quand le scénario d’usage implique de nombreux écrans et des éléments répétitifs (comme les formulaires). Il convient donc de se tourner vers des outils (spécialisés ou non) pour vous épauler dans la conception de vos wireframes.

Les logiciels open-source

Inkscape — L’outil de dessin vectoriel libre. Inkscape est l’équivalent open-source d’Adobe Illustrator. Tout aussi puissant que son cousin propriétaire, il est disponible pour Mac, Windows et Linux. Il ne contient pas de bibliothèque de formes spécifique aux interfaces, mais rien ne vous empêche d’en télécharger pour alimenter vos écrans. Inkscape constitue aujourd’hui une solution très pertinente pour la conception d’interfaces.

Pencil — Libre lui aussi, Pencil a été conçu pour les designers qui souhaitent élaborer des prototypes d’interfaces (wireframes). Pencil est disponible sur la plupart des plateformes et facilite la création d’écrans Web ou mobiles (Android et iOS). A tester pour ses nombreux éléments d’interfaces intégrés, mais il est moins flexible qu’Inkscape, plus généraliste.

Les logiciels propriétaires à installer

Affinity Designer — Très prometteur, Affinity Designer séduit de plus en plus de graphistes. Il s’agit sans doute actuellement de l’alternative la plus convaincante à Adobe Illustrator. Outil de dessin vectoriel généraliste, il propose aussi de nombreuses fonctions utiles à la conception, dans une interface très élégante. Son prix : 49,99 € (actuellement en promotion à 39,99 €).

Sketch — Disponible uniquement sur Mac, Sketch est un compromis entre un logiciel orienté bitmap (comme Photoshop) et un logiciel de dessin vectoriel (comme Illustrator). Il est spécialisé dans le webdesign et propose de nombreuses ressources pour vos interfaces (gabarits de mise en page, éléments de formulaire, etc.). Son prix : 99 $.

Les outils en ligne

Wireframe.cc — Comme son nom l’indique, cet outil en ligne est dédié à création de wireframes. Dans un interface très minimaliste, les outils proposés sont efficaces et surtout gratuits pour un usage limité. Une version Premium (qui intègre notamment les révisions) est disponible à partir de 15 $ par mois.

UXPin — Axé sur le travail collaboratif et pertinent pour un usage avancé, UXPin permet notamment de créer des écrans interactifs. L’outil intègre plus de 1000 éléments d’interface pour le web, les applications mobiles ou les interfaces de bureau. Les tarifs commencent à 19 $ par utilisateur et par mois.

Enfin, si vous souhaitez déléguer la conception de vos outils Web ou mobiles, sachez que les meilleurs freelances webdesigner sont inscrits sur 404Works. Vous pouvez aussi préférer travailler avec des agences, il existe pour cela des plateformes qui vous permettent de sélectionner les meilleures, comme Sortlist.