Faire du design sans designer, l’histoire vraie d’un développeur

Il existe plus de développeurs sans designer qu’il y a de politiciens malhonnêtes, et si ces politiciens sont une peine perdue, ce n’est pas le cas des développeurs. Le héros de notre histoire s’appelle Max, un développeur indépendant qui a réussi à concevoir, développer et publier sa propre application, Academy, à lui tout seul. Intéressons-nous sans plus attendre à la partie design.

Étape 1 : Le concept

Tout commence par un problème à régler dans la vie de tous les jours. De quel problème votre application est la solution ?

Academy aspire à faciliter la vie des étudiants en proposant un seul et même endroit pour organiser leurs devoirs, examens ou cours à venir et suivre leur progression. Les étudiants peuvent également travailler ensemble sur des projets de groupe avec leurs camarades et leurs amis, en gros, c’est un réseau social universitaire.

Avez-vous une quelconque expérience dans le design ?

Mon expérience et mes compétences liées au design se résument presque exclusivement à l’auto-formation. Nous avons bien eu quelques semaines sur le « Design d’interface utilisateur » dans un de mes cours à l’université, mais ça se limitait surtout à « ne mettez pas de texte rouge sur un fond jaune ou vert parce que c’est difficile à lire », ou « l’effet sapin de Noël » comme disait mon professeur.

Étape 2 : Le brouillon

La loi des 80-20 s’applique à bien des choses, et l’une d’entre elles est le fait que seulement 20% des fonctionnalités d’une application seront utilisés 80% du temps. Il est alors possible de déterminer quels sont ces 20% qui seront les plus populaires et les plus utilisés et d’en faire un croquis. Utilisez du papier ou un logiciel de dessin, ça n’a aucune importance.

N’allez pas dessiner directement sur votre téléphone, je dis ça comme ça.

Étape 3 : La maquette

Comment êtes-vous passé du brouillon à la véritable interface graphique ?

Si on parle du processus de développement et de mon design, j’ai commencé par utiliser AppCooker (une application iPad) avec laquelle j’ai créé une maquette de l’interface de chaque écran nécessaire à mon application.

Il ne s’agit pas du résultat final, mais cette transition nous permet de trouver de nouveaux problèmes et des améliorations potentielles qui n’étaient pas évidentes sur le brouillon.

Max a développé son application sur iOS, mais chaque plateforme/système d’exploitation a son lot de logiciels pour réaliser des prototypes, et les trouver ne devrait pas être un problème.

Étape 4 : Le prototype

Pour tout vous dire, le design de chaque écran a été réalisé avec Keynote (l’équivalent Apple de PowerPoint), j’ai ensuite converti chaque écran en image et j’ai utilisé Flinto Lite pour créer un prototype interactif.

Quelles ont été les plus grandes difficultés à ce stage et comment êtes-vous arrivé à donner un aspect professionnel à votre application ?

Le plus gros problème auquel j’ai fait face a été de trouver des éléments graphiques de qualité, tels que de simples icônes qui seraient cohérentes au niveau du style tout en étant agréables à l’œil. Pour la majeure partie du design de l’application, j’ai essayé d’utiliser des éléments standards d’interface utilisateur iOS autant que possible, j’ai donc feuilleté leurs Bonnes pratiques pour l’IHM afin de comprendre quel élément utiliser dans quel contexte.

Rien ne remplace un designer chevronné, mais il faut dire que tout bon design connaît ses limites et ne s’éparpille pas dans tous les sens.

Mon inspiration provient surtout d’interfaces et de tableaux Pinterest que j’ai trouvés sur internet. Pour chaque partie de l’application, j’ai tenté de trouver une application qui « le faisait le mieux », j’ai alors basé mon design sur ce que chacun avait réalisé.

Le design de l’écran d’accueil d’Academy est basé sur celui de Slack

Les nonnes pratiques pour l’IHM d’iOS et le Material Design de Google sont des bases pour donner un aspect professionnel à votre application. Ajoutez-y des icônes de qualité et vous pouvez obtenir de très bons résultats, mais essayez de limiter le nombre d’éléments trop différents, notre but n’est pas de créer une abomination.

Étape 5 : Et après ?

Test utilisateur

Avez-vous demandé à des personnes de tester votre application tout au long du développement ?

Oui, lorsque ce n’était encore qu’un prototype interactif, j’ai demandé à des amis et à ma famille d’essayer l’application afin de me dire ce qui marchait et ce qui ne marchait pas. Les regarder utiliser l’application était également très utile car je pouvais savoir où ils appuyaient et où ils n’appuyaient pas, ce qu’ils trouvaient logique ou non dans le design.

Il est important de comprendre que les tous premiers retours d’un utilisateur sont les plus importants. Demander au même ami de tester votre application dix fois de suite ne sert à rien.

De ce fait, si vous avez, disons, 10 personnes prêtes à tester votre application, commencez avec les 3 premières, résolvez les plus gros problèmes qu’elles auront soulignés, puis passez aux 3 suivantes.

Publication

Pour ce qui est du produit final, l’application est sortie et elle est disponible sur l’App Store, j’ai beaucoup d’amis et de membres de ma famille qui font des études et qui l’utilisent, ainsi que plus de 850 étudiants en Australie et dans le monde. J’ai eu également quelques retours positifs.

Après sa sortie officielle, la vie de l’application continue, des retours et des correctifs constants peuvent permettre à votre design d’évoluer et de rendre votre application plus utile et plus populaire. Cela dépend si vous écoutez ces retours ou non.

Développer sur les autres plateformes

Le Material Deisgn de Google est l’équivalent des Bonnes pratiques pour l’IHM d’iOS, mais pour Android, ainsi, utiliser ces directives comme base de design fonctionne également. Pour ce qui est des icônes d’Icons8, elles sont disponibles dans plusieurs styles, ce qui vous permet de transférer votre design facilement d’une plateforme à une autre.

Plus d’informations sur Academy :

Comme vous pouvez le voir, en suivant quelques directives et en cherchant des éléments graphiques de qualité, il est tout à fait possible de pondre un design plus que correct, même si vous ne pouvez pas vous offrir un designer professionnel pour quelque raison que ce soit.

À quels autres problèmes de design font face les développeurs qui travaillent seuls ? Nous aimerions beaucoup en faire le sujet de nos prochains articles, alors n’hésitez pas à partager vos idées dans les commentaires !

5 commentaires

  • DrKokai

    Belle expérience!

    Je ne suis pas un designer et encore moins un dev.
    Ça fait des mois que je suis entrain de designer l’UX, UI de mon app et de son site web, j’ai utilisé pour la création du wireframe du papier, puis Balsamique. Pour l’UI j’ai tenté ma chance sur Photoshop, puis Sketch ma sauvé la vie!
    J’ai cherché et cherché des icons sympas sur le net et travaillé avec une base, puis j’ai trouvé thenounproject.com… une base de données d’icon tellement longue que des fois je savais plus ce que je cherche et le tout en SVG!

    J’ai testé 2 prototypes tool CanvasFlip et inVision, les 2 sont top, mais due à la jeunesse du premier j’ai dû passer sur le deuxième en cours de création.

    Maintenant, je me trouve au stade du dev et là… pas le choix faudra que je fasse appel à des dev!

  • ange

    Salut très édifiant votre expérience ce métier me passionne énormément je suis une nouvelle étudiante dans le domaine du développement d application et vous me donnez l envie de me donner a fond !

Répondre DrKokai Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*