Concevoir son application soi-même : 6 décisions, pas 40 écrans

1. Pouvez-vous concevoir votre application vous-même ?
2. Ce que coûte le design d'une application, et le temps qu'il prend
3. Les six décisions qui vous appartiennent vraiment
4. Ce que vous n'avez pas à décider
5. Android, iPhone et le web
6. Et Figma, alors ?
7. La checklist avant de vous lancer
8. Questions fréquentes
9. Par où commencer

Presque tout ce qui s'écrit sur la conception d'une application s'adresse à des designers. Étudiez vos utilisateurs, cartographiez les parcours, esquissez des wireframes, passez en haute fidélité, transmettez à l'équipe technique. C'est une vraie méthode et c'est la bonne pour une équipe de design.

Ce n'est pas une réponse pour quelqu'un qui a un projet, un budget, et aucune formation en design.

La question de fond est plus simple. Pouvez-vous concevoir votre application vous-même, ou faut-il payer quelqu'un ? Les deux réponses se défendent. Voici ce que chacune coûte, et en quoi consiste réellement le travail de design une fois qu'on en retire tout ce qu'un système sait faire à votre place.

Voici ce qu'il reste du travail de design une fois que le système a pris sa part. Six décisions. Vous pouvez toutes les prendre en un après-midi, et revenir sur n'importe laquelle plus tard sans refaire l'application.

1. Ce que contient l'application

Vos sections, et leur ordre. Une décision de contenu avant d'être une décision de design, et celle qui détermine le plus si l'application tombe juste. Cinq sections qui méritent chacune leur place valent mieux que quinze qui ne le méritent pas.

Partez de ce que les gens viendront y faire. Le reste relève de la navigation secondaire.

2. Comment on y circule

Une barre d'onglets en bas, un menu latéral, ou les deux. C'est la décision la plus visible d'une application mobile, et celle que l'utilisateur ressent avant de remarquer quoi que ce soit d'autre.

La règle empirique : une barre d'onglets pour trois à cinq destinations entre lesquelles les gens font des allers-retours en permanence, un menu pour tout ce qu'on visite de temps en temps.

3. À quoi ressemble une liste

C'est la décision qui fait le plus de travail, et celle qu'on sous-estime.

Une application de contenu, c'est surtout des listes. Listes d'articles, grilles de produits, listes d'épisodes, listes d'événements. Choisissez la présentation d'une liste et vous avez choisi l'allure de la plus grande partie de votre application : image à gauche ou pleine largeur, une colonne ou deux, titre au-dessus ou en dessous, combien de texte s'affiche avant la coupe.

GoodBarber propose plus de 100 layouts prêts à l'emploi, et vous en choisissez un par section. Une grille magazine pour vos dossiers, une liste compacte pour l'actualité, un carrousel à grande image pour votre accueil. Le même contenu, trois applications différentes selon ce que vous prenez.

4. La couleur

Vous choisissez quatre couleurs, pas trente.

Un thème GoodBarber définit quatre rôles de couleur sémantiques, appliqués partout de la même façon. Sémantique veut dire que chaque couleur a un métier plutôt qu'une position : l'une est la couleur de vos actions, l'autre celle de vos surfaces. Modifiez le rôle et tous les écrans qui s'en servent suivent.

Si choisir quatre couleurs qui vont ensemble est précisément la partie qui vous inquiétait, Genius Palette est une IA maison entraînée sur la couleur lisible en application. Et si vous savez exactement ce que vous voulez, vous pouvez reprendre la main sur chaque couleur, jusqu'à l'affectation élément par élément.

5. La typographie

Une police, ou deux si vous voulez que les titres contrastent avec le texte courant.

Vous ne choisissez pas les tailles. La typographie de GoodBarber est un système de 18 niveaux sémantiques, du grand titre jusqu'au badge, chacun calibré par appareil pour le téléphone, la tablette et le bureau, avec un interligne de 1,2. Vous choisissez la police. L'échelle est déjà construite.

6. Votre icône et votre écran de démarrage

Les deux images qu'aucun système ne peut décider à votre place, parce qu'elles portent votre identité et non votre interface.

L'icône est la chose la plus difficile de cette liste, et celle sur laquelle il vaut la peine de passer du temps ou de mettre de l'argent. Elle doit tenir à 60 pixels, à côté d'Instagram, sur l'écran d'accueil de quelqu'un. Une forme simple, peu de couleurs, pas de texte, reconnaissable d'un coup d'œil.

Tout ce qui suit est pris en charge par le système, sur chaque écran, sans un réglage à apprendre.

Les espacements. Un système de gouttière s'adapte à l'appareil à partir d'une valeur de base : 16 px sur mobile, 20 px sur tablette et sur bureau, avec des paliers en demi et en double et des pas verticaux. Une seule configuration produit les bons espacements sur tous les formats.

La hiérarchie typographique. Les 18 niveaux gardent leurs rapports entre eux quelle que soit la police que vous choisissez.

La lisibilité. Les palettes sont construites en tenant compte des contrastes, et chaque contrôle conserve une zone de tap confortable même quand l'élément paraît petit.

Les formes, les ombres, les bordures et les états. Définis une fois comme des atomes et réutilisés partout, pour qu'un bouton se comporte comme un bouton dans toute l'application.

La cohérence entre les écrans. C'est ce qui distingue une application qui a l'air dessinée d'une application qui a l'air assemblée, et c'est aussi ce qu'un designer doit entretenir à la main. Ici, c'est acquis par construction.

Vous concevez une fois. Une seule configuration produit trois sorties : une application iOS native, une application Android native, et une progressive web app.

Ce qui diffère entre elles relève des plateformes, pas de vous. Les deux stores ont leurs conventions, et le système les respecte. Vous n'entretenez pas trois designs, et vous n'avez pas à choisir entre une application juste sur iPhone et une application juste sur Android.

Un point à anticiper : ajouter une fonctionnalité ou modifier votre design demande une recompilation, et cela vaut pour les trois sorties, la web app comprise. C'est une seule action, mais elle n'est pas instantanée.

Huit réponses, et votre design est fait.

1. À quoi sert l'application, et qui l'ouvre ? Tout le reste en dépend.
2. Quelles sections méritent leur place, et dans quel ordre ? Cinq qui font chacune un travail, pas quinze qui remplissent un menu.
3. Lesquelles vont dans la barre d'onglets ? Trois à cinq destinations entre lesquelles on passe constamment. Le reste va dans le menu.
4. Quel layout pour chaque section ? Un choix par section, et il décide de l'allure de la plus grande partie de l'application.
5. Quelles couleurs prennent les quatre rôles sémantiques ? Commencez par la couleur de vos actions et celle de vos surfaces.
6. Une police, ou deux ? Deux si vous voulez que les titres contrastent avec le texte courant. Vous ne choisissez pas les tailles.
7. Votre icône, et votre écran de démarrage. L'icône tient-elle à 60 pixels, à côté d'Instagram ? Forme simple, peu de couleurs, pas de texte.
8. Y a-t-il là-dedans quelque chose de vraiment sur mesure ? Si une partie demande un développeur et un designer, mieux vaut le savoir maintenant qu'après.

Peut-on concevoir une application soi-même sans être designer ?

Pour une application de contenu ou de commerce, oui. Ces applications sont faites de pièces que tout le monde reconnaît : des listes, des pages d'article, des fiches produit, un panier, un profil, une recherche. Un design system prend en charge le travail répétitif, les espacements, la hiérarchie, les contrastes et la cohérence entre les écrans, et il vous laisse six décisions. Pour un jeu ou une place de marché, non. Ces produits tiennent leur valeur d'une logique métier sur mesure, et ils demandent un développeur et un designer.

Combien coûte le design d'une application ?

Les grilles publiées par les studios situent une application simple entre 5 000 et 15 000 dollars chez un indépendant, et entre 15 000 et 40 000 en agence. Une application complexe monte de 40 000 à 80 000. Ce sont des montants de design seul. Le développement, les tests, la publication et la maintenance sont des budgets à part. Quand le design system est intégré à l'outil qui fabrique l'application, il n'y a plus de facture de design par écran.

Combien de temps prend le design d'une application ?

Quatre à huit semaines pour un MVP cadré, six à douze pour un projet plus large. Il s'agit de la phase de design seule, avant qu'une ligne de l'application ne soit fabriquée. Choisir à l'intérieur d'un design system qui existe déjà se fait en un après-midi, parce que les fondations et les composants sont déjà là.

Quelles sont les six décisions du design d'une application ?

Ce qui entre dans l'application et dans quel ordre, comment on y circule, l'allure des listes, la couleur, la typographie, et votre icône avec votre écran de démarrage. Tout le reste, les espacements, la hiérarchie typographique, la lisibilité, les formes et les états, la cohérence entre les écrans, est pris en charge par le design system plutôt que décidé par vous.

Qu'est-ce qu'un design system ?

Un ensemble de fondations, de composants et de règles qui produisent des écrans cohérents sans que personne ait à les redessiner à chaque fois. Apple en a un, Google en a un, et toute équipe produit sérieuse aussi. Quand le design system est logé dans l'outil qui fabrique l'application plutôt que dans un fichier livré à la fin, la plupart des écrans ne sont jamais dessinés.

Faut-il Figma pour concevoir une application ?

Non. Figma est excellent et c'est ce qu'un designer vous livrera, mais il produit un fichier de design, pas une application. Il reste à fabriquer ce que le fichier décrit, et ce second budget est en général plus lourd que le premier. Pour une application faite de listes, d'articles, de produits et d'un panier, un design system intégré au constructeur produit directement les écrans finis.

Combien de couleurs pour une application ?

Moins qu'on ne le croit, et ce qui compte n'est pas le nombre mais le fait que chaque couleur ait un rôle. Un thème GoodBarber définit quatre rôles de couleur sémantiques appliqués partout de la même façon : l'une est la couleur de vos actions, une autre celle de vos surfaces. Changez le rôle et tous les écrans qui l'utilisent suivent. Trente couleurs choisies une par une, ce n'est pas de la richesse, ce sont trente choses à tenir cohérentes à la main.

Quelle différence entre le design et le développement d'une application ?

Le design est l'ensemble des décisions qui donnent son organisation et son allure à l'application : les sections, la navigation, les layouts, la couleur, la typographie, l'icône. Le développement, c'est fabriquer le logiciel : le code, le back-end, les intégrations, les tests, la publication sur les stores. Les montants cités dans cet article sont des montants de design. Le développement est un budget distinct.

Peut-on changer le design une fois l'application fabriquée ?

Oui. Les six décisions reposent sur un design system, donc changer un layout, un rôle de couleur ou une police se propage à tous les écrans concernés. Appliquer le changement demande de recompiler l'application iOS, l'application Android et l'application web. C'est une seule action, mais elle n'est pas instantanée.

Quand faire appel à un designer professionnel ?

Quand la valeur de l'application tient à quelque chose qui n'existe pas encore : des interactions inédites, des parcours complexes, une logique métier lourde et sur mesure. Un jeu, une place de marché façon Airbnb ou Booking. Pour une application bâtie sur des motifs conventionnels, sous-traiter le dessin des écrans revient surtout à payer un travail que le design system fait déjà.