Vos wireframes sont-ils moches? Êtes-vous gêné d’être vu avec eux en public? Est-ce qu’ils finissent dans vos placards parce que vous ne pouvez pas les regarder en face? Si vous vous voulez y remédier cet article est pour vous!

Premièrement, essayez-vous réellement de créer des wireframes? Neuf fois sur dix au démarrage d’un projet, il vous sera plus facile de plonger la tête la première dans l’écriture du code. Au moment où vous réalisez que vous avez besoin d’un wireframe pour vous guider, il sera trop tard. La bonne nouvelle: il n’est jamais trop tard pour un wireframe. Beaucoup de projets ont été sauvés avec un wireframe en retard. Pensez aux avantages d’avoir un plan avant de tenter quoi que ce soit — dans la vie ou dans le codage. Vous ne partez pas vers une destination à laquelle vous n’avez jamais conduit sans d’abord regarder une carte ou configurer votre GPS (mon favoris 😬). Donnez-vous la meilleure chance de réussir et créez un wifeframe à suivre avant de commencer.

Que vous soyez un développeur développeur ou quelqu’un avec plus d’expérience, vous pourriez trouver l’idée d’apprendre à faire des wireframes un peu intimidante. La vérité est qu’il n’y a pas de mauvais moment pour apprendre quelque chose de nouveau dans le développement, donc soit par la pratique en privé ou sur des projets de collaboration. Souvent, les autres offriront une aide positive lorsque vous leur demanderez une critique constructive.

Voici une liste pratique de choses à faire pour devenir meilleur :

1. Restez simple

Tout ce dont vous avez besoin est d’un stylo et du papier. C’est le moyen le plus rapide et le plus facile de transférer des idées de votre tête à votre wireframe, et vous n’avez pas besoin de vous habituer à utiliser un logiciel de wireframe (J’utilise en général Sketch ou Webflow). De plus, si vous n’aimez pas le résultat, vous pouvez le jeter et en faire un autre.

2. Éliminer les détails inutiles

Assurez-vous de faire votre wireframe facile à utiliser. Si vous n’utilisez votre wireframe que pour guider votre structure ou votre mise en page, il ne doit pas forcément s’agir d’un document de conception de tank spacial avec tous les éléments magnifiquement détaillés. Il est parfaitement acceptable qu’un wireframe soit un ensemble de rectangles sur une page en indiquant où ira le contenu.

3. Étiquetez au fur et à mesure

Plus précisément, étiqueter les choses qui vont vous aider à faire votre travail et vous faire gagner du temps quand vous en venez à la construction. Cela signifie identifier les balises HTML telles que les div. Des points supplémentaires pour l’utilisation d’éléments sémantiques HTML5 tels que l’en-tête, le pied de page, la section et le main pour mieux structurer votre document. Cela vous permettra de réfléchir à la structure de votre HTML avant même d’avoir allumé votre ordinateur portable.

4. Construisez les choses que vous wireframez

Le processus de transformer un croquis sur papier en un somptueux site web vous aidera à en savoir plus et vous permettra de développer une compréhension plus profonde de ce dont auront besoin vos wireframes à l’avenir.

5. Documentez les changements au fur et à mesure

Tout comme un entrepreneur comprend que les meilleurs plans d’affaires sont ceux qui sont tenus à jour et utilisés comme guide tout au long de l’année, vous devrez aussi garder votre wireframe à jour pendant que vous allez en tirer le meilleur parti tout au long de votre développement. Changer cette <div> en <aside>? Déplacer cet élément pour être sur une nouvelle ligne? Assurez-vous d’enregistrer les modifications.

6. Continuez à chercher de l’inspiration

Allez-y et naviguez Codepen, consultez les blogs de design et recherchez des portfolios de développeurs — ce sont des endroits parfaits pour trouver un travail incroyablement innovant qui peut vous donner des idées créatives et vous donner des idées pour votre prochaine mise en page de wireframes.

Continuez à pratiquer et vous  deviendrez un champion du wireframe en un rien de temps!

PS: Je vous partage aussi des templates hyper cool qui rendront vos wireframes plus rapides 😊.

#TheGalsenGeek 👨🏾‍💻🇸🇳

Partagez cet article: