Design

Développeurs VS Interfaces

La réalisation des interfaces : une lourde responsabilité, sur laquelle repose souvent le succès du logiciel, du moins pour le grand public. Vous pouvez avoir les meilleurs algorithmes du monde, si l’interface de votre application n’allie pas l’esthétique à l’utilisabilité, il y a de grandes chances pour que l’utilisateur aille voir ailleurs. Il y a quelques années, quand je développais mes premières applications je réalisais généralement mes icônes moi-même ou j’en choisissais au hasard sur le net, je ne faisais pas de maquettes (au sens large) avant de commencer le développement. Le résultat en plus d’être affreux, se composait parfois d’éléments que je n’aurais pas pu utiliser si j’avais souhaité publier mes travaux (quelqu’un a parlé de licence ?).

Vous l’aurez compris, comme tout développeur, le design et la création d’interfaces ne sont pas mes compétences premières. Mais sur beaucoup de projets les développeurs sont amenés à travailler seuls sur ces aspects. Au fil des années j’ai découvert différents outils et ressources qui permettent à un développeur de réaliser quelque chose de potable et surtout d’éviter la catastrophe en l’absence d’une personne compétente sur ces domaines. Bien entendu cette liste est très loin d’être exhaustive alors n’hésitez pas à me faire découvrir de nouveaux éléments qui auraient leur place dans cet article.

Réaliser des maquettes

Bien que les phases de conception de l’interface soient bien plus complexe, la maquette est le premier élément qui permet de visualiser l’aspect d’une future application. Bien entendu il existe différents types de maquettes présentant des intérêts complémentaires (wireframes, maquettes d’intégration, …). Ce sujet est très vaste et je ne suis probablement pas le mieux placé pour en parler, en revanche, je peux vous présenter certains outils que j’utilise lors de cette étape.

Photoshop
Même si Adobe est en train d’adopter la démarche cloud, Photoshop reste l’arme ultime pour réaliser des maquettes. De nombreux templates, y compris ceux proposé par Microsoft pour les applications Windows sont délivrés au format .psd. Photoshop présente tout de même deux inconvénients : le temps de prise en main et le prix, ce qui peut être rédhibitoire dans beaucoup de cas, même si Photoshop peut servir à bien plus que réaliser de simples maquettes.

Gimp
Heureusement il existe d’autres solutions qui fonctionnent tout aussi bien et lorsqu’on cherche un équivalent gratuit à Photoshop, beaucoup pensent à Gimp. Personnellement, je n’ai jamais réussi à accrocher avec ce logiciel, je n’en ferais donc pas de grandes lignes d’élloges bien qu’il permette amplement d’effectuer le travail nécessaire.

Paint.NET
Paint.NET est un outil gratuit que j’apprécie énormement. Certes il n’est pas aussi poussé que Photoshop ou Gimp, mais dans la majorité des cas il sera suffisant et sa prise en main est très rapide. Avec son système de calques et ses fonctionnalités de retouche simples à mettre en oeuvre, Paint.NET est un outil tout indiqué pour les développeurs et même pour le grand public.

PowerPoint
Maintenant que nous avons enfoncé les portes ouvertes en citant les classiques, attardons-nous sur des outils moins traditionnels mais tout aussi efficaces. Si vous disposez de PowerPoint 2007 ou ultérieur ainsi que de Visual Studio Premium 2013, Ultimate 2013 ou Test Professional 2013, vous pourrez bénéficier de l’outil de « Création de plan conceptuel ». Celui-ci se présente sous la forme d’un onglet supplémentaire dans PowerPoint et vous permet de schématiser très rapidement une interface en mettant à disposant une bibliothèque d’éléments relativement complète.

Outil de Création de plan conceptuel de PowerPoint

Balsamiq
J’ai beaucoup utilisé Balsamiq (aussi appelé Balsamiq Mockup) par le passé, quand il était gratuit (mais en bêta il me semble). La société Balsamiq Studios qui commercialise Balsamiq propose maintenant deux versions de cet outil : la première en application desktop, la second sur le cloud. A l’heure où j’écris ces lignes leurs tarifs ne sont pas exorbitants donc la solution mérite qu’on s’y intéresse.

Cacoo
L’outil cloud que je préfère reste Cacoo, même si l’ergonomie et la fluidité ne font pas vraiment partie des points forts de cet outil, il reste simple à prendre en main. Nulab, son éditeur, propose plusieurs formules dont les tarifications restent raisonnables et surtout une offre gratuite avec quelques fonctionnalités bridées, mais qui n’empêche en rien d’utiliser cet outil pour les petits projets.

Cacoo

Créer une palette de couleurs

Pour créer une interface, il ne suffit pas de réaliser des croquis noir et blanc, avoir un ensemble de couleurs harmonieuses sur les maquettes (comme sur le produit final) est tout aussi important. Mais quand on ne dispose pas d’une fibre artistique très développée, mieux vaut se faire aider par des outils.

Kuler
Kuler commence à être connu, je rencontre régulière des personnes qui utilisent cet outil en ligne proposé gratuitement par Adobe. Les utilisateurs ont la possibilité de créer ou de rechercher des palettes de couleurs, de les adapter à leur convenance en jouant sur différents paramètres. On y trouve des palettes de 5 couleurs, ce qui correspond aux recommandations habituelles en matière de création d’interface.

Kuler

La boite à couleur
Egalement très populaire, cette petite application permet de récupérer n’importe quelle couleur intéressante présente sur votre écran, plutôt pratique pour ceux qui souhaitent travailler avec précision.

Colour Code
Colour Code se rapproche beaucoup de Kuler, il très bien pensé et permet également de partager vos palettes de couleurs avec un permalien. Seule ombre au tableau il semble qu’il n’y ai pas de galerie pour visualiser les réalisations des autres utilisateurs.

Hex Color Tool
Un autre outil que je souhaitais vous présenter est Hex Color Tool, à partir d’une couleur de base, celui-ci peut vous proposer des déclinaisons plus claires ou plus sombres. Grâce à cet outil en ligne plus de problème pour créer les ombres ou matérialiser les interactions des éléments cliquables.

Ajouter des icônes

Les maquettes et les couleurs ne sont pas les points les plus délicats, le grand ennemi du développeur est l’icône. Lorsqu’une personne avec une dominante technique commence à se pencher sur un domaine où un certain sens artistique est nécessaire, on court souvent à la catastrophe (même si certaines personnes arrivent à combiner les deux avec brio). Heureusement il existe des solutions que les développeurs pourront mettre en place sans trop risquer de dénaturer l’interface de leur application.

Bootstrap
Bootstrap est le Framework CSS et JS mis au point pas Twitter, il propose donc tout un ensemble d’éléments permettant de construire très rapidement une interface web. Parmi ces éléments on trouve un set de glyphicons (gratuites quand elles sont utilisées avec Bootstrap). Ces icônes sont en réalité une police de caractères, ce qui présente deux avantages : l’aspect vectoriel et la légèreté (réduction du temps de chargement). J’en profite d’ailleurs pour faire une petite parenthèse dév’ car certains d’entre vous préférerons peut être utiliser Bootstrap par l’intermédiaire d’Initializr qui permet d’y ajouter quelques éléments pratiques (Modernizr, avertissement pour les anciens navigateurs, robots.txt, …).

Font Awesome
Font Awesome est un excellent complément aux glyphicons de Bootstrap si ces dernières ne vous suffisent pas. Cette police d’icônes fonctionne exactement sur le même principe que celle de Bootstrap. De plus Font Awesome est disponible par CDN ce qui permet d’améliorer encore un peu plus les performances (étant donné que la police de caractères restera en cache pour l’ensemble des sites qui utilisent le CDN).

Iconmoon
Iconmoon propose également des packs d’icônes reposant sur une police de caractères. Attention tout de même : le pack de base avec 450 icônes est gratuit, mais les packs plus étoffés sont payants. Il en va de même si vous souhaitez qu’Iconmoon héberge vos icônes.

Fontello
Fontello vous permet de combiner les icônes de différents sets présent sur internet. Vous disposerez ainsi d’une police de caractère qui comporte juste les éléments dont vous avez besoin (ce qui allège également le poids des fichiers et le temps de chargement). En bonus Fontello vous propose de personnaliser les noms et les codes associés à chacune des icônes, plutôt pratique pour être familier avec son set d’icônes.

Fontastic
Fontastic propose des fonctionnalités similaires à celles de Fontello, mais permet également de télécharger les icônes au format .svg pour ceux qui souhaiteraient les retravailler facilement avec Inkscape par exemple.

Iconmonstr
Les outils précédents sont plutôt orientés web, même si ils pourraient également être utilisés dans une application classique. Iconmonstr propose simplement des sets d’icônes gratuits au format .svg et .png avec la possibilité de personnaliser les tailles et les couleurs.

Metro Studio
Une fois n’est pas coutume, Metro Studio est un client lourd proposant plus de 2500 icônes dans le style Modern UI. Cette application permet de créer des packs à partir des icônes fournies par l’éditeur ou en les important à partir de polices de caractères installées sur votre ordinateur. Il est ensuite possible de voir le code XAML correspondant à chaque icône et d’exporter les packs en tant que sprites ou ResourceDictionary.

Metro Studio

Icon Finder
Si vous ne trouvez pas votre bonheur parmi toutes les ressources présentées ci-dessus, vous pouvez opter pour le moteur de recherche Icon Finder et générer vous-même vos sprites grâce à Stitches.

J’espère que cet article vous aura fait découvrir quelques outils utiles, si jamais vous connaissez d’autres ressources intéressantes, n’hésitez pas à m’en parler !

Facebooktwitterlinkedinmail