Design : Comment nous avons utilisé Sketch pour créer un livre de conception d’interface utilisateur

Lorsque l’objectif est de créer le meilleur ebook de conception, vous ne pouvez utiliser que le meilleur outil de conception pour lui;)

L’histoire derrière le livre est assez simple.

À la fin de 2018, j’enseignais ma classe de l’Université UI et certains étudiants ont commencé à me poser la même question:

De quel livre vous envoyez ces PDF?

A cette époque, bien sûr, il n’y avait pas de livre. Je faisais ces PDF en tant que métriques supplémentaires spécialement pour la classe. Mais cela a déclenché une idée. J’ai commencé à regarder autour de moi et j’ai découvert qu’il n’y avait presque pas de livres de conception d’interface utilisateur sur le marché. (Un peu plus tard, un assez bon, axé sur les développeurs est sorti, mais c’est une autre histoire).

Je travaille dans l’industrie du design depuis 1999, donc l’idée de partager toute cette expérience sous forme de livre électronique allait et venait depuis des années. Mais ces e-mails d’étudiants étaient le dernier coup de pouce dont j’avais besoin.

Un mois plus tard, en janvier 2019, j’étais assis sur une plage de Palma de Majorque et je tapais la liste des chapitres sur mon iPad Pro. Le processus a commencé!

À l’époque, notre newsletter comptait 50 personnes et ils nous encourageaient presque tout le temps.

Lorsque la table des matières a finalement été décidée, nous avons commencé à travailler sur le premier chapitre gratuit. Nous avons d’abord pensé à utiliser inDesign mais étant donné la lourdeur de la conception du livre, nous avons opté pour Sketch.

Tout d’abord – c’est un livre de design, donc utiliser un outil de design est à la fois cool et amusant à la fois.

L’autre raison est que les symboles, les styles de texte et de calque nous permettraient d’atteindre la cohérence sur les 400 pages prévues.

Avec autant de cohérence, le contenu était la clé pour gagner une tonne de temps, donc tous ces styles ont vraiment payé!

Chaque chapitre dans un fichier .sketch séparé

Nous avons utilisé une bibliothèque externe des principaux types et styles de composants et avons également conservé chaque chapitre dans un fichier distinct.

L’une des raisons était la capacité de se concentrer sur une seule chose à la fois, sans les distractions. Nous aurions pu utiliser des pages d’esquisse pour cela également, mais nous avons décidé que comme il s’agit d’un travail collaboratif et que notre plan était de n’utiliser Dropbox que pour le contrôle de version et le stockage, il est préférable de les séparer.

Pour plus de clarté, nous avons utilisé la fonction de marquage des couleurs de Mac OS pour marquer les chapitres qui nécessitaient un travail dans une zone spécifique (comme le jaune pour les exemples d’applications à ajouter et le violet pour les révisions de texte).

Une fois que tout a été fait, nous avons supprimé toutes les autres balises et ajouté une verte pour signifier que le chapitre est terminé.

Nous voyageons beaucoup, donc le livre a été partiellement écrit à Palma, Munich, Milan et dans divers cafés de Pologne. Avoir un système de mini-conception pour le livre a permis de travailler facilement sur de nouveaux contenus sur un ordinateur portable, tout en buvant de délicieuses infusions froides.

Nous n’étions pas sûrs si cela allait fonctionner au début. Mais je suis heureux que nous ayons essayé. Parce que le livre est illustré de nombreux exemples de conception d’interface utilisateur, nous avons pu les faire «à l’intérieur des pages» au lieu d’utiliser des images externes. De cette façon, nous avons également pu garder tous ces visuels cohérents, et nous pouvons facilement les modifier et les mettre à jour à l’avenir.

L’ebook va s’étendre avec de nouveaux chapitres au cours des prochains mois, et notre flux de travail Sketch va nous permettre de nous concentrer sur le contenu réel, sans avoir à lutter avec les outils et les versions.

En outre, faire un livre d’interface utilisateur dans le meilleur outil d’interface utilisateur a beaucoup de sens.