La création d’une application mobile ou tablette, repose sur la cohérence. Un designer doit suivre une certaine logique pour prototyper son application. Une cohérence dans l’arborescence du projet pour que l’utilisateur puisse d’un premier coup d’œil comprendre le fonctionnement de l’application. Une cohérence dans la navigation pour que l’utilisateur puisse se retrouver facilement dans ses choix et les informations qu’il recherche. Une cohérence graphique pour que l’utilisateur ne se perde pas dans le fonctionnement de l’ensemble. Une cohérence qui se base notamment sur la maîtrise des différents éléments relatifs à la création d’une application.
1. L’arborescence
C’est une étape difficile et parfois désagréable par laquelle il est indispensable de passer si vous voulez prendre du recul sur votre projet et mieux vous organiser par la suite. L’architecture de base de votre application dépendra grandement de la nature même de celle-ci. Vous pouvez ainsi choisir entre regrouper votre contenu par cible d’utilisateur, type de contenu, tâche, ou encore zones géographiques. Ce sont vos rubriques principales desquelles vous devrez ensuite tirer des sous rubriques et ainsi de suite jusqu’à réussir un classement général pour tous vos contenus.
Vous devez garder à l’esprit qu’une application est différente d’un site, elle se construit généralement sur une ou deux fonctionnalités principales. Une arborescence trop complexe risque en effet de rendre les informations et les fonctions inaccessibles dans l’immédiat.
Vous pouvez vous servir d’outils simples tels Draw.io, Microsoft Visio ou encore Word pour créer rapidement des arborescences.
2. Le Mockup
Contrairement à ce que beaucoup pensent, le Mockup n’est pas une maquette qui sert à habiller votre application, mais un outil pour définir les zones de contenu et l’emplacement des différents éléments qui la composent. On parle davantage de zoning ou wireframing.
Une fois l’arborescence de votre projet bien établie, il vous sera plus facile de saisir chaque groupe de contenu, pour les disposer ensuite sur la page et leur attribuer un emplacement spécifique en fonction de leur importance hiérarchique. Le Mockup est une première ébauche d’une mise en page. Il doit ainsi permettre de définir les zones d’images des zones de texte, les boutons, les vidéos, etc.
Vous trouverez également de nombreux outils permettant de créer des Mockup. Parmi les plus utilisés, on citera Adobe Fireworks, Illustrator, Blend, Balsamiq ou encore Moqups.
3. La charte graphique
Au vu du nombre d’application mobile qui ne cesse de grandir au jour le jour sur l’App Store, il convient de mettre en place un projet innovant. Sortir du sentier battu des applications mobiles ordinaires vous permettra de toucher une plus grande audience et donc de créer plus d’engagement.
Soigner le graphisme de votre application passe forcément par la mood board. Il s’agit d’une « planche de tendance » sur laquelle vous allez pouvoir retrouver différents éléments essentiels à l’aboutissement de votre application. Boutons, nuancier de couleur, icônes, échantillons d’images, polices de caractère, tous les éléments qui vont définir la charte graphique de votre application. Ici, vous allez surtout faire jouer votre imagination et votre esprit créatif. D’une part, vous aurez à choisir les différents éléments de navigations actifs, et d’autre part les éléments informatifs. Sans oublier bien évidemment les éléments décoratifs qui vont tout simplement ajouter une réelle valeur ajoutée à votre application.
Vous pouvez librement vous inspirer d’autres applications pour dénicher les meilleures idées de charte graphique pour la vôtre.
4. La maquette
Cette phase représente déjà l’aboutissement de la partie graphique de votre projet. C’est là que vous aurez le premier aperçu de votre application. Et éventuellement, c’est une étape décisive de tout le processus de création également. Soit vous constaterez combien vous avez avancé dans votre travail, ou s’il faudra tout refaire.
Concrètement, vous disposez là de toute la structure de votre application. Il ne vous reste plus qu’à saisir tous les éléments pour ensuite les placer selon le zoning choisi.
Internet vous fournit des outils d’exception qui permettent de créer à la fois Mockup, moodboard et maquette. Ces outils vous offrent la possibilité de reprendre vos fichiers et de les remplacer directement les éléments filaires du Mockup par ceux du moodboard. Ces différentes étapes peuvent aussi très bien être traitées sous Adobe Illustrator, en vectoriel, pour éviter d’avoir à gérer les problèmes de redimensionnement d’image d’un plan de travail à un autre.
Ces outils magiques sont Adopte Photoshop, Inkscape (vectoriel), Gimp, Microsoft Expression Design (vectoriel), Photofiltre, Paint.Net.
5. Le découpage
C’est loin d’être la phase la plus divertissante de tout le processus, mais vous devez le faire. Si vous choisissez de faire le découpage sur Photoshop ou Illustrator, vous disposez de scripts permettant d’automatiser l’export de tous les éléments de vos maquettes en sprites png. Vous devez alors travailler la maquette avec une méthodologie différente, mais vous ferez une économie de temps importante à l’export. Ces scripts vous permettent aussi de nommer automatiquement tous vos sprites depuis les intitulés de calques.
En conclusion, ces cinq étapes de travail bien distinctes vont vous permettre de créer votre application de manière logique. C’est aussi un moyen simple mais efficace pour convaincre vos collaborateurs de la rentabilité de votre projet. Du moment que vous vous posez les bonnes questions afin de vérifier la cohérence de chaque étape de création, vous serez sûr de créer une application qui va plaire aux utilisateurs.
