Voici la situation : vous êtes un développeur et vous disposez de tous les outils nécessaires pour coder une application incroyable. Mais vous êtes un peu coincé en ce qui concerne le design. Sans la maîtrise des outils de conception standard du secteur, comme Adobe Photoshop, comment concevoir une application mobile qui reflète votre génie intérieur ? Comment faire une application qui soit à la fois visuellement époustouflante et facile à naviguer pour les utilisateurs ?

Ne vous inquiétez pas, il y a de bonnes nouvelles. Vous n’avez peut-être pas beaucoup (ou pas du tout) d’expérience en UX/design, mais vous n’en avez pas nécessairement besoin pour créer un projet final visuellement époustouflant. Ces solutions vous aideront dans le processus de comment concevoir une application mobile – chacune remplissant cette promesse sans que vous ayez à débourser un centime.

Comment concevoir une application mobile

Le wireframing consiste à créer un produit minimum nu qui représente essentiellement le squelette de la conception de votre application. Si vous deviez comparer votre application à une startup, vous pourriez qualifier cette étape de conception de produit minimal viable (un concept popularisé par le livre The Lean Startup).

Le wireframing est une étape essentielle lorsque vous suivez le processus de conception d’une application mobile, car il vous permet de penser à la structure comme étant distincte des éléments de conception finale. Il vous permet également de faire passer efficacement votre concept à toutes les parties concernées – collaborateurs, concepteurs ou investisseurs – sans que vous ayez personnellement besoin d’une expérience de conception pour exprimer précisément ces idées.

Les outils suivants peuvent être utiles au cours de cette importante étape fondatrice de la façon de concevoir une application mobile.

Plume et papier

Pour ceux qui ne veulent vraiment pas dépenser un centime, le bon vieux papier et le crayon fiables sont la voie à suivre pour esquisser vos idées initiales d’application comme une ébauche de votre conception. Si certains préfèrent passer directement à Photoshop ou à un outil de prototypage, cette méthode est idéale pour saisir les idées au fur et à mesure. En prime, vous n’avez pas besoin d’une formation spéciale ou de la maîtrise d’un outil pour tirer le meilleur parti de cette méthode de wireframing.

Papier à croquis Android et/ou iOS

Pour ceux qui découvrent comment concevoir une application mobile, il existe un outil de wireframing spécialisé avec vous spécifiquement à l’esprit. Pour le prix raisonnable de la gratuité, vous pouvez télécharger des papiers à grille de points sur lesquels sont imprimés des iPhones et des iPads. Il s’agit de la solution de conception idéale pour les développeurs qui ont besoin d’un meilleur visuel que ce que le stylo et le papier peuvent fournir. Ce papier à croquis iOS est également idéal pour le storyboarding ou pour montrer les différents états de l’apparence de votre application en cours d’utilisation.

Ce papier à croquis iOS comprend des lignes de grille pour tous les éléments d’interface utilisateur par défaut sur les appareils iOS susmentionnés. Pour la version Android de ce papier à croquis, le papier comporte 8 modèles de téléphone imprimés. Cependant, contrairement au papier iOS (qui a une grille de points), celui-ci n’a pas de lignes du tout.

MockFlow

Si vous cherchez un outil un peu plus technique pour faire votre wireframing d’application mobile, envisagez quelque chose comme MockFlow. Mockflow est une solution de wireframing en ligne, avec la flexibilité nécessaire pour gérer tout type de projet de conception – qu’il s’agisse d’une application mobile ou web (ou autre chose entièrement). Il existe une version de base gratuite qui vous permet de travailler sur un seul projet à la fois, jusqu’à 1 Go de stockage et deux membres d’équipe. Vous pouvez débloquer des fonctionnalités supplémentaires (plus de projets, de stockage et de membres d’équipe) lorsque vous passez à un plan payant, qui commence à 14 $/mois.

WireframeApp est une autre option de wireframing basée sur une application web, similaire à MockFlow. Tous les plans sont payants, mais vous pouvez souvent trouver une offre à vie abordable (moins de 49 $ au total) en vous inscrivant à leur bulletin d’information électronique ou à AppSumo.

Prototypage

Le prototypage est l’étape suivante pour savoir comment concevoir une application mobile une fois que vous avez terminé le wireframing. Tout l’intérêt de cette prochaine étape est de créer une version exploitable de la conception, semblable à ce que vous voulez que le projet final ressemble.

Les outils suivants correspondent à la façon de concevoir une application mobile sans payer un centime puisqu’ils sont tous 100% gratuits à utiliser !

Marvel

Marvel est une application web qui est également disponible pour iOS et Android. Outre la possibilité de concevoir sur l’appareil avec lequel vous êtes le plus à l’aise, cet outil permet de transformer facilement vos croquis en prototypes exploitables. Outre la possibilité d’ajouter des éléments de conception de base, vous pouvez également relier des conceptions entre elles pour créer un flux. Marvel vous permet de créer des hotspots interactifs et des transitions réalistes, et vous pouvez choisir des actions telles que le survol, le clic, le glissement, le pincement et plus encore. Avec des tonnes d’intégrations tierces, Marvel joue bien avec de nombreux autres outils que vous utilisez déjà, et avec les collaborateurs de votre équipe.

InVision

InVision est similaire à Marvel, en ce sens que c’est un outil de prototypage web et mobile gratuit. C’est un outil de prototypage parfait pour les équipes, grâce à des fonctionnalités qui permettent de commenter et de collaborer simplement. Ce qui le distingue de nombreux types d’outils similaires, c’est sa fonction de contrôle de version, qui vous permet de revenir sur vos modifications à une version précédente si nécessaire.

InVision est utilisé par des entreprises innovantes comme Adobe, Zappos, AT&T, Dell et Sony, ainsi que par des startups à croissance rapide comme Prezi, Soundcloud et Evernote. L’utilisation d’InVision ne vous garantit pas leur succès, mais vous ne pouvez pas nier les avantages de l’association !

Axure

Pour compléter vos options sur la façon de concevoir une application mobile sans payer un centime, voici une option payante si elle est utilisée à long terme, mais complètement gratuite à utiliser pendant un essai de 30 jours. Axure permet de prototyper facilement des applications grâce à des designs très fonctionnels (semblables aux transitions sur Marvel). Comme les autres options de cet article, cet outil fournit des fonctionnalités pour une collaboration d’équipe facile.

Proto.io

Proto.io se facture comme un outil qui peut vous aider à créer des « Prototypes qui semblent réels. » Pour un développeur d’applications mobiles qui cherche à créer un prototype réaliste et fonctionnel, cela peut être de la musique à vos oreilles. Il fournit aux utilisateurs de multiples bibliothèques d’interface utilisateur, des intégrations tierces (avec des partenaires comme Dropbox) et même des tests utilisateurs pour s’assurer que l’expérience utilisateur est transparente au lancement. Un essai gratuit vous permet 15 jours d’accès avec un accès à vie à des fonctionnalités limitées, ou la possibilité de passer à un compte entièrement fonctionnel avec plusieurs projets et fonctionnalités, à partir de 24 $/mois.

Si vous n’avez pas encore trouvé l’outil de wireframing ou de prototypage parfait, Developer Drive partage quelques options génériques supplémentaires à considérer.

Bien sûr, si c’est l’étendue de votre intérêt et de votre capacité en matière de conception d’applications, vous devrez payer quelqu’un pour amener votre wireframe ou votre prototype de base nue au niveau supérieur. Mais se présenter avec un plan de base peut être un bon moyen d’économiser du temps et de l’argent au départ. Plus vous serez en mesure de communiquer votre vision à un concepteur, plus il sera facile d’en faire une réalité, et moins vous gaspillerez d’argent sur des versions de conception qui ne s’alignent pas sur votre vision.

Design visuel

Que vous cherchiez des conseils sur la façon de concevoir une application pour iPhone, ou sur la façon de concevoir une application Android, ces outils gratuits peuvent vous aider à envelopper votre tête autour du design parfait pour l’un ou l’autre des systèmes d’exploitation mobiles.

Parfois, un peu d’inspiration peut aider à lever un blocage créatif, et se perdre dans un tutoriel de conception peut vous aider à comprendre comment terminer le projet complètement par vous-même.

Laudable Apps

Laudable Apps est un site Web abare-boness/galerie d’applications qui se concentre spécifiquement sur la présentation de magnifiques conceptions iOS 7. Il n’y a pas de texte ou d’autres distractions, juste des designs présentés sans commentaire.

Pendant que vous pensez spécifiquement à iOS, vous pouvez également prendre le temps de revoir les directives strictes de soumission de l’Apple App Store. Puisqu’ils ont une attitude  » sans exception « , garder ces directives à l’esprit tout en déterminant comment concevoir une application mobile peut vous aider à faire les choses correctement dès la première fois, ce qui vous permettra d’économiser du temps et de l’argent à long terme.

Patrons Android

Que vous conceviez exclusivement pour un appareil Android, ou que vous créiez deux versions de votre application mobile (dont une pour l’App Store d’Apple), vous voudrez vous familiariser avec les tenants et aboutissants de la conception pour un appareil Android. Vous serez peut-être surpris d’apprendre que les normes de conception des applications Android sont résolument différentes (et nettement moins rigides) de celles des applications iOS. Il peut être utile de lire les documents de soumission de la boutique Google Play, comme cette liste de contrôle de lancement.

Vous pouvez également utiliser Android Patterns comme cours accéléré de conception Android. Ce site Web est une bibliothèque de modèles d’interaction Android que vous pouvez utiliser lors de la création de votre conception. Les modèles d’interaction sont classés par type d’application et comprennent des actions telles que la navigation, les notifications et les interactions avec l’écran. Bien que ces modèles puissent être utiles pour un nouveau concepteur d’applications mobiles, ils doivent être pris comme un guide, mais pas comme des règles absolues.

Icons

Ajouter une certaine dimension à vos éléments visuels peut aider votre prototype à se rapprocher le plus possible du résultat final. Icons8 propose une bibliothèque de plus de 53 800 icônes dont l’utilisation est totalement gratuite. En plus de cette gigantesque ressource gratuite, vous devriez également consulter ces outils de conception d’interface utilisateur pour différentes façons de rechercher et d’utiliser les icônes lorsque vous déterminez comment concevoir une application mobile.

Adobe Kuler

Adobe a beaucoup de ressources pour ceux qui cherchent à concevoir une application mobile, d’un niveau de conception débutant à avancé, mais l’un des plus simples et des plus utiles est leur outil de schéma de couleurs. Kuler aide les concepteurs et les non-concepteurs à choisir des schémas de couleurs en se basant sur la roue chromatique et sur différentes règles de couleurs : monochromatique, complémentaire, triade, etc. Vous pouvez créer un schéma de couleurs à partir d’une image, ou parcourir les soumissions de schéma de couleurs des autres pour vous inspirer.

Mobile Design Inspiration

Selon CSSWinner, Mobile Design Inspiration est la galerie d’inspiration la plus dense pour la conception d’applications mobiles, avec des inspirations de conception d’applications disponibles pour et organisées spécifiquement par iPhone, Android, Apple Watch et iPad. De nouveaux designs sont ajoutés chaque semaine, et leur section « Champs créatifs » peut fournir une inspiration supplémentaire si vous travaillez également sur la conception d’un logo d’application.

Tuts+

Si vous voulez vraiment savoir comment concevoir une application mobile sans payer un centime, vous devriez envisager d’investir votre temps pour acquérir de nouvelles compétences. Apprendre à concevoir votre propre application plutôt que d’engager quelqu’un pour le faire peut vous faire économiser de l’argent ET aussi vous faire gagner des compétences précieuses que vous pourrez monétiser plus tard.

Il existe plusieurs sites Web qui offrent d’excellents cours en ligne en matière de conception (Treehouse est une ressource payante impressionnante), mais Tuts+ offre beaucoup de connaissances approfondies, entièrement gratuites, sans sacrifier la qualité. En plus d’articles utiles, ils ont également des ressources supplémentaires longues sur le design, comme des ebooks.

Comment concevoir une application mobile sans payer un centime

Vous n’avez vraiment pas besoin d’embaucher un designer pour concevoir votre application mobile, en particulier dans les premières étapes de wireframing et de prototypage. Prenez le temps d’amener votre application là où vous voulez qu’elle soit à un niveau de base, puis même si vous finissez par embaucher un designer, le projet ne sera pas aussi profond (et coûteux).

Avec ces outils de conception d’applications mobiles, vous pouvez comprendre comment concevoir une application mobile par vous-même, et acquérir quelques nouvelles compétences en cours de route. Imaginez les possibilités d’embauche pour une personne qui peut prouver sa capacité à la fois à concevoir et à développer une application !

Quels conseils ou outils ajouteriez-vous à cette liste sur la façon de concevoir une application mobile sans payer un centime ? Nous serions ravis d’entendre vos réflexions ! Tweetez vos idées à @icons8, et nous partagerons nos favoris.

À propos de l’auteur
Maddy Osman aime WordPress et l’écriture. Lorsqu’elle n’est pas occupée à aider à organiser le WordCamp Denver, elle partage ses meilleurs conseils en matière de marketing de contenu/SEO sur son blog, www.the-blogsmith.com. Suivez ses derniers articles sur le Web sur Twitter : MaddyOsman.