Un livre en ligne complet de 900 pages sur les fondations essentielles, avec du contenu approfondi sur les couleurs, la typographie, les icônes, les médias, la mise en page, et plus.
Taxe calculée au paiement.
Satisfait ou remboursé durant 14 jours.
L’UI Design reste un domaine complexe, et peu importe son niveau, il y a de nombreuses questions que l’on se pose tout au long de sa carrière et que je me suis posées :
“Quelle est la meilleure approche pour apprendre et faire de l’UI Design ?”
“Pourquoi un bouton de 140×48 px, par exemple, ne fait pas la même taille réelle sur tous les écrans ?”
“Qu’est-ce qu’un espace colorimétrique comme sRGB ou P3 que je vois dans Illustrator, Figma et d’autres apps ? Est-ce que c’est important ? (Spoiler, oui)”
“Pourquoi si j’essaye d’utiliser HSL ou HSB pour créer des variantes lumineuses j’obtiens des palettes déséquilibrées ?”
“Pourquoi toutes les polices n’ont pas la même taille réelle (alors que sur Figma / Sketch j’ai bien utilisé la même valeur) ?”
“Comment choisir et faire de bonnes paires de polices selon le projet ?”
“Quels sont les principes essentiels pour une bonne mise en page ?”
“Comment faire un bon mode sombre ?”
“Sur quelles résolutions faire mes designs et quels sont les meilleurs breakpoints pour le responsive design ?”
Et la liste continue...
J’ai longtemps cherché une ressource qui répondrait à toutes ces questions. J’ai bien sûr acheté des livres sur l’UI Design et lu de nombreux articles, mais aucuns n’y répondaient complètement.
Trop souvent, j’obtenais des conseils génériques sur les couleurs et la typographie mais sans rentrer assez dans les détails, comment designer un bouton ou une card, mais non les principes généraux de mise en page, etc.
De plus, aucuns ne parlaient (ou très peu) des caractéristiques importantes des écrans, comme la densité des pixels ou les espaces colorimétriques avec leurs influences dans tout le processus d’UI Design.
Enfin, ils étaient souvent sous format PDF, ce qui n’était pas facile à utiliser, par exemple pour aller à une page en particulier, lire sur mobile, obtenir les mises à jour, etc.
C’est à partir de là que j’ai décidé de rédiger le livre “Les fondations de l’UI Design” et après plus de 2 ans de travail, de nombreuses relectures et réécritures (et plusieurs litres de café ☕️), le voici enfin.
Si j’avais une DeLorean avec un convecteur temporel, c’est le livre que j’apporterais dans le passé pour me le donner (et aussi un almanach des sports, mais ça, c’est une autre histoire…).
Une plateforme faite sur mesure pour lire depuis n’importe où pour le plaisir de votre RX (Reader eXperience ©).
Ce livre s’adresse à tout designer débutant ou plus avancé, mais aussi à des développeurs qui souhaitent :
Se spécialiser dans l’UI Design sur le long terme, gagner du temps et rendre leur travail plus simple.
Une approche d’apprentissage progressive et logique, où chaque chapitre se base sur les précédents.
Un guide riche en visuels que vous pouvez consulter depuis n’importe quelle page quand c’est nécessaire tout au long de votre carrière.
Un contenu qui va vraiment en profondeur, au lieu de conseils rapides comme “utilisez HSL pour les couleurs”, “les textes doivent faire 16 px minimum” ou “utilisez tout le temps 12 colonnes pour la mise en page”.
Un guide théorique spécialisé sur les fondations de l’UI Design et non le reste comme les designs natifs sur iOS / Android ou les différents styles d’UI Design.
Des principes universels pour tout type de projet d’UI Design, tel le design d’un site web, d’une app native ou encore d’une web app.
Un guide sur une plateforme en ligne responsive qui, contrairement à un PDF, vous permet de lire sur n’importe quel appareil le contenu avec ses mises à jour sans besoin de le télécharger de nouveau.
Pas de fausses espérances, il est important de parler aussi de ce que vous ne trouverez pas ici. Ce livre n’est donc pas pour vous si vous cherchez :
Une présentation générale de l’UI Design, dans ce cas je conseille cet article pour découvrir le sujet.
Un recueil d’astuces courtes, même s’il y en a, ce livre prend le temps nécessaire de bien expliquer toute la théorie sur les fondations de l’UI Design.
Un livre qui couvre tout le domaine de l’UI Design, par exemple on ne verra pas comment faire certains composants en particulier, mais bien les principes généraux derrière.
Une formation pratique avec des exercices, ce livre doit plutôt être vu comme un guide théorique sur les fondations qui doit être complété par de la pratique personnelle et d’autres contenus (je liste pour cela plusieurs liens utiles à la fin du livre).
Un guide pour construire un design system en pratique, même si je parle des design tokens (variables) et de comment les structurer avec deux types de palettes, ce n’est pas le cœur du livre.
Une formation sur comment utiliser Figma, mais on verra bien sûr les caractéristiques importantes propres à la majorité des apps d’UI Design comme leurs espaces colorimétriques ou leurs unités.
Bien que ce guide soit pour les designers débutants et plus avancés, si vous n’avez jamais ouvert une app comme Figma ni essayé de designer un peu, je conseille de passer par là avant.
C’est mieux, en effet, si vous avez déjà designé un peu et que vous lisez le livre à la recherche de réponses.
Si ce n’est pas le cas, vous pouvez par exemple simplement copier deux-trois écrans d’un design existant puis faire un petit projet. Je liste ici des idées de pratique : Comment pratiquer l’UX/UI Design ?
Ainsi, vous aurez quelques bases sur Figma (ou une autre app comme Sketch) et un aperçu de l’UI Design, ce qui est conseillé pour le livre.
Un livre riche en images et captures d’écran pour accompagner les chapitres.
Quelle est la meilleure façon d’apprendre l’UI Design ? Faut-il d’abord parler des couleurs ? De mise en page ? De comment faire un bouton ?
Une façon d’aborder efficacement un nouveau domaine pour mieux le comprendre, est de le désassembler jusqu’à atteindre ses parties élémentaires et indivisibles, qu’on peut alors étudier plus facilement dans un ordre logique et progressif.
Si je prends par exemple une maison ou un bâtiment, aux premiers abords c’est une structure complexe, composée d’une multitude de parties avec leurs règles qui s’emboitent et fonctionnent bien ensemble.
Maintenant, si à mon tour je veux designer une maison, il sera préférable d’étudier comment elle a été construite en remontant le temps, la déconstruire pour mieux comprendre toutes les parties qui la composent et leurs ordres d’assemblages, pour pouvoir ainsi refaire quelque chose de similaire.
Je découvrirai, entre autres, qu’il y a d’abord toute une procédure légale, une étude du terrain et que je devrai commencer par étudier le rôle des fondations et comment en faire des solides plutôt que de commencer par la décoration intérieure, et ainsi de suite.
Avec l’UI Design c’est la même chose, et pour répondre à la question du début, il nous faut extraire les parties fondamentales d’un design UI.
Si par exemple on prend ce design :
Dans l’ordre, on peut extraire les différentes parties qui le composent comme ceci, et ça marcherait pour n’importe quel design :
On a donc un design qui est fait de flows, qui sont faits de templates, eux-mêmes faits de composants qui sont un assemblage d’éléments de base, le tout, affiché sur des écrans et donc soumis à leurs contraintes.
Et si on continue, on se rend compte que derrière l’assemblage des composants et des templates, on a aussi des règles de mise en page générales comme la création de groupes clairs, les élévations, aligner les éléments, gérer le design responsive, etc.
Puis on a aussi des bonnes pratiques communes comme le fait de mettre la navigation en bas sur une app mobile, structurer un formulaire d’une certaine manière, etc.
Puis enfin, on a les styles qui vont dépendre de l’image du produit (dont les styles des designs natifs des OS comme iOS ou Android).
Tout cela en prenant en compte les spécificités des utilisateurs, comme le daltonisme, l’acuité visuelle ou encore leurs conditions lumineuses.
Ce qui nous donne en détail :
Enfin, tout cela peut être organisé dans un design system pour faciliter la création et l’évolution d’un projet UI.
Notez également qu’il y a l’usabilité (dont l’accessibilité) mais qui comme on va le voir dans le livre, font partie des points des fondations comme le fait d’avoir des bons contrastes.
Avec les parties définies ci-dessus, voici le chemin d’apprentissage d’UI Design dans l’ordre que je conseille, dont ce que couvre le livre :
(* Apps de design : le livre parle de leurs choix et de la configuration de base comme les espaces colorimétriques, mais pas comment utiliser en détail une app comme Figma ou Sketch.)
Ces six parties sont ce que je considère comme les fondations de l’UI Design.
C’est un ordre logique car mieux vaut d’abord voir les caractéristiques des écrans avant de passer par exemple aux choix des couleurs ou encore les tailles des polices, car ces caractéristiques les influencent fortement.
Et en pratique lors d’un projet, c’est aussi plus ou moins l’ordre que je conseille. Par exemple avant de passer à la mise en page, comme on le verra dans le livre, il vaudra mieux avoir une palette avec des couleurs et des polices de base, voire aussi des icônes selon les cas.
Vous pouvez voir que ce livre ne couvre pas tout le domaine de l’UI Design, comme mentionné avant, il se concentre sur les fondations car c’est d’après moi ce qui manque parmi les livres et guides actuels.
Cependant, à la fin du livre, vous trouverez des liens vers des ressources pour approfondir les trois derniers points.
En huit chapitres, voici tout ce que le livre couvre :
Si vous avez des questions, voici les réponses
Le livre est consultable sur ma plateforme de lecture en ligne : books.dokozero.design. En obtenant ce livre, vous y aurez un accès illimité (un compte y sera créé avec l’adresse email que vous utiliserez lors de l’achat si vous n’en avez pas).
Ce n’est pour l’instant pas possible, il vous faudra une connexion internet pour lire.
Contrairement à un fichier PDF, la plateforme de lecture vous permet : d’obtenir toutes les mises à jour sans devoir retélécharger le PDF, de lire sur mobile et dans le noir avec le mode sombre. De plus, cela me ferait utiliser une app avec ses modes de fonctionnement différents de ceux du web et donc me demanderait plus de temps pour les mises à jour.
900 pages. Ça peut sembler beaucoup, mais en réalité, le livre est riche en illustrations et autres captures qui sont rapides à “lire”. De plus, il peut être lu de manière non-linéaire et certaines parties comme celle des notions avancées en typographie ne sont pas forcément nécessaires pour comprendre le reste.
Comme il s’agit d’un site, pour calculer le nombre de pages j’ai pris le nombre total de mots du livre (220828 mots) plus le nombre moyen de mots par images (955 images × 100 mots = 95500 mots) puis divisé le résultat par une moyenne de mots par pages (350 mots). Ce qui nous donne un total de 904 pages, arrondi à 900 pages.
Un des principaux avantages de la plateforme de lecture est justement de me permettre de faire des mises à jour facilement, ce qui est nécessaire vu que le domaine de l’UI Design évolue rapidement.
Non, une fois que vous avez acheté le livre, toutes les futures mises à jour sont gratuites.
Aucune, il n’y a pas plusieurs versions, peu importe que vous obteniez le livre depuis la page d’une langue ou d’une autre, vous aurez accès au même contenu, où vous pourrez d’ailleurs changer de langue librement.
C’est assez probable, en effet, dans le livre je parle de points assez récents comme le modèle de couleur OkLCH ou encore la norme APCA pour les contrastes, qui sont des notions assez récentes en UI Design et pas forcément abordées dans d’autres contenus sur le sujet.
Pour certaines oui mais en plus éparpillé et pas forcément à jour. Avec ce livre vous avez une source de savoir centralisée, facile d’accès et structurée. De plus, il y a des parties relativement exclusives comme l’utilisation en détail du plugin Figma OkColor créé dans le cadre de ce livre.
Pas de problème, vous avez 14 jours à compter de votre achat pour vous faire rembourser (l’accès au livre sera cependant retiré).
Tombé dans les ordinateurs depuis mon plus jeune âge, j’ai créé mon premier site web à l’époque où internet était limité en temps et où l’on était accueilli par une douce musique de modem (si vous ne voyez pas de quoi je parle, vous n’avez rien raté, rassurez-vous 😉 ). Depuis environ 10 ans, je navigue dans le développement web et l’UX/UI Design.