Contenu
- Qu'est-ce que la conception d'applications mobiles?
- Pour quelle plateforme dois-je concevoir?
- Quels outils dois-je utiliser?
- Directives de conception du système d'exploitation
- Wireframes et flux d'applications
- Maquettes et prototypes
- Passage au développement
Vous avez donc décidé d'essayer la conception d'applications mobiles, mais vous ne savez pas par où commencer. Pas de soucis, nous sommes là pour vous. Dans cet article, nous décrirons cinq choses que vous devez savoir pour vous aider à démarrer dans la conception d'applications mobiles.
Ce guide est destiné aux débutants dans la conception d'applications mobiles. Si vous avez déjà des compétences, jetez un œil à notre tour d'horizon de didacticiels qui vous guidera à travers différents aspects de la création d'une application, en détail.
Qu'est-ce que la conception d'applications mobiles?
Pour le dire en termes très larges, les concepteurs d'applications sont chargés de donner une belle apparence à une application, tandis que les développeurs la font fonctionner correctement. La conception d'applications mobiles englobe à la fois l'interface utilisateur (UI) et l'expérience utilisateur (UX). Les concepteurs sont responsables du style général de l'application, y compris des éléments tels que le jeu de couleurs, la sélection de polices et les types de boutons et de widgets que l'utilisateur utilisera. Alors, par où commencez-vous? Au début.
Pour quelle plateforme dois-je concevoir?
En fonction des raisons pour lesquelles vous souhaitez concevoir des applications mobiles, vous savez peut-être déjà sur quelle plate-forme vous souhaitez travailler et pourquoi. Mais si vous débutez et que vous ne savez pas ce qui vous convient le mieux, choisissez celui que vous connaissez le mieux.
Si vous utilisez un téléphone Android, concevez pour Android. Si vous utilisez un appareil iOS, commencez par là. Vous pouvez également choisir la conception pour les deux, mais il est préférable de ne pas mordre plus que vous ne pouvez mâcher - du moins pas au début.
Quels outils dois-je utiliser?
Une fois que vous savez pour quelle plate-forme vous concevez, l'étape suivante consiste à sélectionner les bons outils de conception Web pour faire le travail. En ce qui concerne la conception d'applications mobiles, la bonne nouvelle est que, quelle que soit la plate-forme, vous pouvez généralement utiliser les mêmes outils pour les deux.
Les options populaires pour la conception d'applications incluent Adobe Photoshop, Adobe XD et Sketch. Il y en a beaucoup, beaucoup plus, mais ce sont les gros frappeurs de l'industrie. Inscrivez-vous à Adobe Creative Cloud ici.
Vous pensez peut-être que Photoshop est votre meilleure option pour la conception d’applications mobiles, en particulier si vous l’avez utilisé pour d’autres types de travaux de conception. Cependant, pour la conception d’applications mobiles, il vaut mieux utiliser Adobe XD ou Sketch. Cela dit, Sketch est considéré comme la norme de facto ici, bien qu'Adobe XD se mette en concurrence, ayant récemment ajouté des systèmes de conception.
L'une des principales raisons d'utiliser Adobe XD ou Sketch sur quelque chose comme Photoshop est que ces deux outils sont conçus pour la conception et le prototypage. Ils aident à rationaliser vos flux de travail de conception et sont destinés aux concepteurs d'interface utilisateur et d'UX, tandis que Photoshop est davantage destiné à la manipulation d'images.
Une remarque importante ici: si vous prévoyez un développement ou un support multiplateforme, Adobe XD est clairement le gagnant ici car Sketch n'est disponible que sur macOS.
Directives de conception du système d'exploitation
Avant de commencer à concevoir, car vous devez d'abord comprendre les choses à faire et à ne pas faire de votre plate-forme. De manière générale, la conception des applications mobiles partage certaines similitudes entre les différents systèmes d'exploitation, telles que:
- Conception axée sur les objectifs
- Restez simple (moins c'est plus)
- Maintenez le flux
- La lisibilité est la clé
- Respecter la plateforme
Ce dernier, "respecter la plate-forme", est plus important que vous ne le pensez. Lorsque les utilisateurs téléchargent et installent une application sur leur appareil, ils s'attendent à ce qu'elle se comporte d'une manière qui leur est familière et intuitive. Ils basent leurs opinions sur ce qu'ils savent, donc lorsqu'une application va à l'encontre de 90% des règles de conception spécifiques au système d'exploitation, les utilisateurs sont susceptibles de la supprimer.
Non seulement vous devez tenir compte des différents modèles de navigation d'iOS et d'Android, mais vous devez également penser aux boutons, à la sélection de polices et au placement des objets de l'interface utilisateur - qui varient tous pour chaque plate-forme.
La bonne nouvelle est que vous n’avez pas besoin de deviner ce qui est acceptable. Apple et Android ont tous deux un ensemble de consignes de conception que vous pouvez consulter avant de commencer (et pendant que vous concevez activement):
- Directives d'interface humaine iOS
- Directives de conception Android
Wireframes et flux d'applications
Avant de concevoir l'apparence et la convivialité d'une application, il est essentiel de travailler sur son contrôle de flux et sa structure. C'est là que les wireframes entrent en jeu. Les wireframes vous aident à comprendre comment les utilisateurs navigueront et utiliseront une application. Leur conception est généralement simplifiée afin que l’accent soit mis sur la fluidité et la convivialité.
Bien qu’il existe de nombreux outils filaires dédiés, il n’est pas rare que les concepteurs utilisent simplement un stylo et du papier. Cependant, si vous recherchez quelque chose de plus high-tech et collaboratif (ce qui est particulièrement important lorsque vous travaillez avec une équipe distante), pensez à créer vos wireframes dans Sketch ou Adobe XD. L'avantage de l'utilisation de ces outils pour le wireframing est que vous pouvez transformer vos wireframes basse fidélité en aperçus haute fidélité avec une relative facilité.
Remarque: avec Adobe XD, vous pouvez même vous procurer des kits gratuits pour vous aider à démarrer.
Maquettes et prototypes
Une fois que vous avez travaillé sur vos wireframes et que vous les avez partagés avec l'équipe de développement et / ou votre client pour discussion et approbation, il est temps de créer des maquettes et des prototypes.
Cette étape est généralement plus simple si vous avez utilisé le même outil de conception pour créer à la fois vos wireframes et la conception de votre application mobile. Si vous ne l'avez pas fait, il vous faudra peut-être un peu plus de temps pour remplir votre outil de conception, mais une fois que vous l'avez fait, vous êtes sur la bonne voie. De nombreux outils, y compris UXPin (qui s'intègre à Sketch), incluent des moyens d'annoter vos wireframes avec les informations détaillées requises par les développeurs, pour éviter toute conjecture.
Pendant que vous travaillez sur la conception de l'application, c'est le moment idéal pour commencer à créer une bibliothèque partagée d'éléments. Par exemple, les boutons, icônes et autres éléments standard que vous créez ici peuvent s'avérer utiles dans d'autres applications que vous concevez, alors assurez-vous de les enregistrer.
En savoir plus sur cette étape dans notre article: 4 façons différentes de créer des maquettes de sites Web et d'applications.
Passage au développement
Les concepteurs sont également responsables de la fourniture de ces éléments et actifs visuels au développeur. Des éléments tels que les icônes, les arrière-plans, les logos et même les polices sont autant de choses qu'un concepteur peut confier à un développeur.
Une fois que le développeur a tout ce dont il a besoin, il lui incombe de prendre cette conception - et ses différentes parties - et de la faire fonctionner. Parfois, cependant, un concepteur ne comprend pas les limites auxquelles un développeur est confronté. Et quand cela arrive, tout l'enfer se déchaîne.
En tant que concepteur d'applications mobiles, vous pourrait ignorez complètement le développeur et le processus de développement, mais il est préférable de comprendre les défis auxquels un développeur est confronté, qu'il s'agisse des outils qu'il utilise ou des limites du système d'exploitation et / ou des appareils sur lesquels vos applications seront exécutées. Forts de ces connaissances, vous pouvez concevoir des applications mobiles plus efficacement, avec moins de pression de la part de votre développeur, tout en favorisant un environnement plus collaboratif.
