A la fin de l’article de la partie 1 je te disais que la prochaine étape était les wireframes sur papier… Et bien c’est pas tout à fait vrai…Pour t’aider tu vas commencer par imaginer l’architecture de ton site ! Et après promis…tu vas dessiner.

Architecture

Pour savoir quelles pages tu dois créer pour l’app tu vas mettre à plat l’architecture de ton site. Mettre tout ça en avant sur ton portfolio montrera que tu sais imaginer un parcours utilisateur. Celui-ci doit être simple à comprendre et logique. Ca commence toujours par l’accueil, pour aller vers une page profil, puis des catégories. Tu verras qu’il y a plusieurs exemples sur Google pour t’aider à concrétiser la chose. J’ai utilisé les couleurs de mon app pour que mon portfolio reste logique au niveau des couleurs :

‍

‍

Wireframes

Ca y’est t’as dessiné ce à quoi doit ressembler ton app sur papier ? Tu te rends compte que c’est pas évident de dessiner des rectangles à main levée.. quand j’ai vu mes premiers carrés, mes « écrans » qui devaient ressembler à des mobiles j’ai flippé…c’est brouillon, mais c’est une première ébauche, on va mettre tout ça au propre sur Figma.

Je suis toujours pressée de passer à l’UI, colorer les écrans, ajouter des icônes, des photos, pour moi c’est la meilleure partie. Celle où je crée, j’imagine, je fais et défais, des fois je me plante c’est laid, je recommence jusqu’au moment où je suis satisfaite (pas toujours complètement mais ça c’est un sacré débat messieurs dames). Dans le fond, rien ne t’oblige à créer des wireframes, tu peux passer directement à l’UI et corriger au fur et à mesure si besoin, comme je te disais juste, mais on va jouer le jeu pour le portfolio et montrer aux recruteurs qu’on sait faire.

Déjà en entreprise (ou avec tes clients si tu es freelance) tu auras besoin de ces wireframes pour montrer ta vision. Si il faut changer un élément, le supprimer, en rajouter, c’est beaucoup plus simple avec les wireframes. Car c’est vraiment ton (joli) brouillon. Ce sont les contours d’un dessin avant la colorisation en gros.

‍

‍

Pour ton portfolio tu seras pas obligé de mettre tous tes wireframes, si tu as 10 écrans, tu peux en mettre 5, ça suffit largement. Tu peux ajouter les corrections que tu as fait pendant la construction de ces derniers, mettre en évidence un CTA ou une pagination. Tu peux expliquer ce qui t’a poussé à réfléchir de la sorte.

Personas

Tu design une app, imagine qu’elle prenne vie. A qui s’adresse-t-elle ? Tu vas imaginer au moins deux personnes fictives et parler de leurs besoins et frustrations. Ton personas aura : un nom, prénom, âge, une ville où il vit, un métier. Penses aux Sims si tu veux t’inspirer ! T’écriras aussi une petite bio qui argumente sur le fait que ce personas aura besoin de l’app.

A quoi ça sert ? A developper ton empathie pour l’user, ça aide à la création d’un produit adapter à plusieurs besoins, le personas t’aideras à imaginer des fonctionnalités qui solutionnent leur problèmes.

‍

‍

L’intro de ton portfolio

L’introduction de ton portfolio doit être soignée, tu dois donner envie aux recruteurs de scroller. Ca commence par quelques écrans (2 ou 3) finis de ton application, sur un background qui colle aux couleurs de ton app. Le titre de l’app et ce que l’on va trouver dans le portfolio : Wireframes, Personas… Expliquer en quelques lignes pourquoi tu as imaginé cette application précisément. Par passion ? Vrai projet pour un ami ou la famille ? En gros, explique toutes les raisons qui t’ont motivé à te lancer dans le processus.

Dans la dernière partie je t’expliquerai comment j’ai présenté toutes les parties du portfolio : (écrans, wireframes, personas…) pour ensuite le publier sur Behance.

Je te raconterai aussi comment je prépare mon troisième projet qui s’appelle Dress Like. J’ai déjà fait 3 écrans pour ce site web, mais cette fois-ci je vais créer une app mobile et aussi une landing page mais version web, ce projet je l’ai fait il y a quelques mois, il est temps de lui donner un coup de neuf !

Cheers !

VS

‍