Les wireframes web manquent souvent d’interactivité et de clarté.
Cette absence de dynamisme peut mener à une expérience utilisateur médiocre et à des designs inefficaces.
Découvrez comment créer des composants interactifs et optimisés pour le web, assurant un design à la fois fonctionnel et attrayant.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Pour finir cette partie sur le wireframe de la version web, nous allons ajouter une interaction avec les mentions légales et toute la paperasse. C’est-à-dire que lorsqu’on va survoler un texte, chacun d’entre eux va être mis en avant. Et pour y arriver, nous allons devoir apporter quelques petites modifications.
D’abord il faudra copier les textes dans le Design system , les colorer en blanc pour les mettre sur un fond noir.
Après, il faudra séparer chaque texte dans une zone de texte distincte pour pouvoir créer un composant pour chacun d’entre eux. Pour cela, créer de nouvelles zones de texte avec chaque texte distinct.
Changer ensuite la typographie sur Adineue Pro avec une taille de 24px pour chaque zone de texte :
Dupliquez chaque texte et mettez-les en surlignés et en Bold pour avoir les deuxièmes états de chaque texte.
Nommer chaque état comme vous le voulez pour pouvoir les différencier puis créer les composants de chaque lien avec Create component set .
C’est tout pour la création des différents composants qu’on a trouvé dans la version web de notre projet. On a commencé par identifier les éléments avec lesquels nous allons interagir pour finir par la création de chaque composant avec leurs designs. Dans le prochain chapitre, on quitte le mode desktop pour aller vers la version mobile et réaliser les différents composants de la version mobile de notre site web.
Terminons cette partie sur les composants avec les boutons de la page footer dans sa version mobile. Pour cela, renommer les composants en ajoutant une indication que c’est celui de la version mobile.
Tournez-vous ensuite dans le wireframe de la page et regardez la taille des polices dans ce dernier.
Changer les valeurs des composants par la même que celui dans le wireframe.
Et voilà le tour est joué !
C’est maintenant la fin de cette partie concernant les wireframes, on a terminé les différents composants que l’on va intégrer dans le design que ce soit pour la version web ou bien la version mobile. Dans le prochain chapitre, on passera dans la version web pour réaliser son design.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment ajouter des interactions aux mentions légales dans un wireframe web ?
Quelle typographie utiliser pour un wireframe web ?
Comment créer des composants distincts pour un wireframe ?
Comment adapter les composants wireframe pour mobile ?
Quelles sont les étapes pour finaliser un wireframe web ?
Conclusion
En terminant votre wireframe web, comment pourriez-vous intégrer davantage d’interactions pour enrichir l’expérience utilisateur ?
