Afin de prototyper des applications web, nombreux sont les entrepreneurs qui font appel aux agences ou freelance dans le cadre de l’illustration. Le coût des prestations, financier ou organisationnel, doit être mis en perspective au vu de son influence dans le projet. Ce sont tous les outils de création web disponible pour prototype d’application web gratuitement en moins d’une semaine.

Un entrepreneur, c’est quelqu’un qui se jette d’une falaise et construit un avion sur le chemin de la descente.

David Hoffman

Recruter la meilleure personne pour vous accompagner dans vos aventures est chose complexe. C’est d’autant plus difficile lorsque vous avez un petit budget voire pas du tout ! A l’heure actuelle, beaucoup d’outils sont disponibles gratuitement. Cet article a pour vocation de vous proposer quelques conseils qui, accompagnés d’une bonne dose de travail, vous permettront d’atteindre vos objectifs.

Créer vos maquettes vous-même !

Après avoir posé vos idées sur papier, recueilli des premiers avis sur le storytelling, le parcours utilisateur, vous allez maintenant pouvoir commencer à structurer vos écrans.

Vous devez tout d’abord créer vos maquettes filaires (wireframes). Par la suite ces maquettes sont d’une importance primordiale car elles permettent de structurer votre page. Nombreux sont ceux qui négligent cette étape et décident de créer directement des maquettes visuelles (mockups), ce qui est une erreur majeure. En effet, ces wireframes doivent servir à recueillir du feedback utilisateur et ainsi à vérifier la pertinence des éléments affichés.

Pour ce faire, Powerpoint fera largement l’affaire. Vous n’avez qu’à trouver une photo au format PNG du périphérique sur lequel vous souhaitez créer votre application (Web ou mobile). Ajouter des formes que vous nommez comme dans l’image ci-après. Bien évidemment ceux qui ne disposent pas d’une licence Microsoft ne peuvent pas réaliser ceci. Grâce à Google Slides qui est outil gratuit, pour tout détenteur d’une adresse Gmail, vous pouvez commencer à travailler sur votre projet.

A ce stade, vous pouvez présenter votre projet et vos premiers écrans à votre entourage, vos équipes ou des clients potentiels afin de recueillir leurs avis. Quand vous aurez une vision claire de l’emplacement de vos textes et de vos images, vous pourrez commencer à rendre vos écrans plus visuels.

La communauté est votre meilleure alliée !

Ce moment peut être très intimidant voire bloquant pour tous ceux qui n’ont aucune connaissance en design. Nous n’avons pas tous les capacités pour créer de belles pages, de séduisantes icônes. Mais n’ayez crainte, nous allons voir quels sont les éléments partagés sur la toile que vous allez pouvoir utiliser afin de booster vos performances.

La communauté web partage énormément de contenus et dans bon nombre de cas ceux-ci sont totalement gratuits. C’est le cas des template, kit UI et autres banques d’images.

Commençons d’abord par les templates et l’incontournable Bootstrap. Ce projet, né chez Twitter devient très populaire sur GitHub. Il offre une collection d’outils à la création de site et d’applications web responsive. C’est de l’adaptation à tous les types d’écrans : web, mobile et tablettes. Un système de grid (grille) et d’adaptation en fonction de l’écran visé vous permettent de modéliser un site lisible sur tous les terminaux. En vous rendant sur Bootstrap, vous pouvez télécharger des modèles de sites gratuits que vous allez pouvoir customiser à souhait.

Dans le cas où vous ne voulez pas vous aventurer dans la réalisation de code : vous avez la solution de laisser la main à des experts. Si vous voulez prendre part au processus pour créer vos propres mockups , alors vous pouvez utiliser les kits UI (User Interface). Ces fichiers vous permettent donc de regrouper tous les éléments graphiques (boutons de navigation, icônes etc.) et textuels (contenu de texte) afin de rendre cohérent l’ensemble de vos créations.

Vous trouverez des kits téléchargeables gratuitement pour tous les logiciels que vous allez utiliser, Powerpoint, Figma, Photoshop, XD ou Sketch trouvables sur différents sites tels que : https://www.behance.net/ ou https://www.uistore.design/.

A vous de jouer avec vos outils de création web!

Vous disposez désormais des polices, icônes et autres boutons de votre application. Mais il vous manque de belles images, celles qui accrochent le regard, qui reflètent l’identité de votre site ou application. Unsplash est sans conteste la banque d’images en libre accès qui vous permettra de trouver l’image dont vous rêvez. Vous y trouverez des images pour tous les goûts, avec du contenu régulièrement mis à jour. Vous avez la possibilité de télécharger gratuitement ces images sous plusieurs tailles (pratique pour le responsive).

Enfin si vous manquez totalement d’inspiration, la communauté a également pensé à vous. En effet, des sites comme Dribbble sont tous les jours mis à jour avec les dernières inspirations des designers. Aussi bien pour une icône, un bouton, une landing page ou bien un pan entier de parcours user.

Avec toutes ces clés en main, vous êtes fin prêt pour commencer la création de vos maquettes. Mais il faut un outil dans lequel vous allez pouvoir utiliser tous les éléments précédemment cités. De nombreux logiciels sont disponibles gratuitement (Origami Studio) ou payants (Sketch, Axure, Proto.io, InVision). Nous allons nous attarder sur Adobe XD. Dans sa version gratuite, Adobe XD permet de créer des écrans visuels et de prototyper tous les parcours disponibles.

Mais qu’est ce qu’Adobe XD ?

C’est un des outils préférés des designers UX/UI. Il sert à créer et prototyper des applications web ou mobile. Ce logiciel, bien pourvu est disponible en version gratuite sur tous les OS. Il fait partie de la suite Adobe. A ce titre, il dispose d’un large panel d’options. Principalement d’une interface intuitive qui vous permettra une prise en main rapide et efficace.

Prise en main

Après avoir téléchargé l’application sur le site d’Adobe et ouvert l’application vous atterrissez sur la page d’accueil.

Pour les novices, un tutoriel très explicite vous guidera pas-à-pas dans la découverte des raccourcis, fonctionnalités et autres bonnes pratiques. Mais pour les experts, des écrans aux dimensions prédéfinies, vous sont proposés pour travailler sans perdre de temps.

Tous les initiés de Photoshop et Illustrator reconnaitront cette interface si particulière. Pour les autres, une petite explication s’impose.

Les trois onglets principaux représentent chacun une phase de votre travail de conception. L’onglet Design est celui dans lequel vous allez pouvoir créer vos écrans. L’onglet Prototype vous permet de lier les écrans créés. Par conséquent l’onglet Partager, comme son nom l’indique, vous offre la possibilité de partager votre travail avec vos collègues, amis ou clients.

En haut à gauche, se trouve la barre d’outils qui vous permettra de créer des formes, du texte. En bas à gauche, vous trouverez les actifs, calques et plug-ins que vous pouvez paramétrer à votre guise. A droite se trouve l’inspecteur qui permet de paramétrer toutes les propriétés de vos éléments.

Afin de vous faciliter l’apprentissage des best practices et de vous familiariser avec vos outils de création web, vous pouvez jeter un œil à cette vidéo du très fameux Jesse Showalter https://www.youtube.com/watch?v=JttI6YpmPGI

Adobe XD est un outil qui s’est particulièrement développé ces dernières années. C’est devenu un must auprès de la communauté d’UX/UI designers. Sa courbe d’apprentissage est rapide et vous parviendrez à mettre vos idées en forme rapidement et ce à moindre coût. Les développeurs et designers partagent beaucoup de contenus. N’hésitez pas à vous en servir pour lancer vos projets.

Fiche Auteur

Nicolas Caillot, étudiant au sein du master MDCE dirigé par Monsieur Detout.

Cet article a été rédigé dans le cadre de mon master, afin d’exposer la facilité à réaliser ses propres maquettes, dans le cadre de son projet professionnel. Vos outils de création web pour prototype d’application web gratuitement en moins d’une semaine. L’article, cible les outils et les chemins à suivre pour réaliser au mieux vos designs. J’espère vous apporter une aide et une solution sur cette partie de création qui est souvent une zone d’ombre.

Merci de votre attention.

Nicolas Caillot.

Pour continuer dans cette lancée https://datadoo.fr/les-3-composantes-du-marketing-intemporel/