Créer un site web efficace peut être un défi sans les bons outils.
Sans une bonne gestion des ressources et un design adapté, le processus peut rapidement devenir chaotique.
Cet article vous montre comment utiliser Figma pour organiser vos ressources et concevoir un site web professionnel et fluide.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
On se retrouve à présent dans ce nouveau chapitre où nous allons designer notre site web. Mais avant de toucher à quoi que ce soit, il faudra d’abord importer les éléments graphiques dont nous aurons besoin dans ce chapitre.
- Importer les ressources
Quand on a fait les wireframes, nous nous sommes dit que nous allons placer des images ici et par là, des logos ainsi que le GIF pour le background. Toutes ces ressources, vous pouvez les retrouver dans la section qui est dédiée et que nous allons ajouter dans Figma en faisant un drag and drop .
Placez-les ensuite dans un frame et indiquer que c’est la partie Ressources comme avec le Design system .
Après avoir vérifié si chaque ressource est bien affichée en passant par les calques, car il se peut que certains designs soient de couleur blanche alors que le fond du frame est aussi blanc.
Pour ces ressources-là, créez un rectangle avec un fond noir à côté comme on l’a fait dans le Design system et placez-les au-dessus de ce dernier pour que l’on puisse les voir.
Voilà, tous les outils nécessaires sont là, donc passons à la vitesse supérieure.
- Designer la page d’accueil
Pour la première de notre site web qui est la page d’accueil, nous allons en premier dupliquer (Ctrl + D) le wireframe afin de calquer notre design dessus. On garde quand même l’ancien wireframe si l’on veut ajouter de nouvelles fonctionnalités dans le futur.
Commencer maintenant par placer le background, regarder dans Ressources le background en GIF qui contient les trois bandes de Adidas et copiez-le d’abord à côté de notre frame.
Placez-le ensuite dans le frame en question et mettez-le à la bonne dimension que le frame en utilisant l’outil scale pour ne pas déformer notre image.
Mettez-le ensuite au fond du calque pour que l’on ne puisse pas le voir pour le moment.
Retourner ensuite dans Ressources et récupérer l’image de la chaussure suivante :
Insérez l’image dans le frame et comme avec le background, modifiez sa taille avec scale et placez-le à l’endroit dédié.
Passons maintenant au Logo Adidas et celui de Zalando. On les a vus lors de l’importation des ressources que les deux logos sont de couleurs blanches, donc pour mieux les voir nous allons faire une série de modifications :
- Tout d’abord, mets la couleur des textes sur le wireframe en blanc, ne me demandez pas pourquoi pour le moment :
- Supprimer ensuite les trois bandes de Adidas, car on en a plus besoin maintenant qu’on a le background.
- Pour finir, nous allons effacer le rectangle qui servait de fond dans le wireframe pour obtenir ceci :
Mettez ensuite dans le frame le logo de Adidas et Zalando que vous trouveriez dans les Ressources comme indiqué sur l’écran :
Pour récupérer le bouton JE TENTE MA CHANCE, dirigez-vous dans Assets pour voir le composant et placez-le.
On va terminer le design de cette page d’accueil avec le texte se situant à droite de la page, en le modifiant comme ceci :
- Supprimer d’abord la ligne contenant le texte, Jour, Heure etc. Enlever les sauts de lignes entre les textes.
- Pour ajouter des espacements entre les lignes, utiliser cette fonctionnalité dans la partieTextde Figma :
- Replacer ensuite les textes Jour, Heure etc., avec chacun sa zone de texte.
N’oubliez pas de grouper tout le texte ainsi que la partie logo et de supprimer le wireframe de la photo au centre. À la fin, vous devriez avoir ceci :
On est d’accord que la plupart des utilisateurs aujourd’hui surf sur internet via leur appareil mobile. C’est pour cela l’importance de concevoir une version à notre projet et dans cette partie, nous allons commencer par le design de notre application. C’est parti !!
- Designer la page d’accueil mobile
Comme on l’a fait avec la version web, il nous faut en premier lieu dupliquer le wireframe de la page d’accueil mobile et le renommer.
Puis pour aller plus vite, masquer tous les éléments se trouvant dans le wireframe, car on va directement copier les éléments déjà designés dans le site web et juste les redimensionner.
Prenez ensuite le background en GIF et ajoutez-le comme le modèle sur le wireframe.
Une fois cela fait commencer par copier aussi l’autre background noir se trouvant dans les Ressources . Et oui ! vu qu’on est sur mobile, le contenu sera disposé verticalement donc il faut ajouter plus de backgrounds.
Ajuster la taille et l’emplacement du background pour avoir à peu près le même aspect que le background du dessus.
Verrouiller le fond puis copier le texte du site web indiquant la vente du moment vers la page d’accueil de la version mobile.
Après mettez le wireframe du texte en blanc, et recopiez ces propriétés sur celui qu’on vient de copier.
Mettez-le ensuite à la place du wireframe et le tour est joué.
Passer ensuite avec la chaussure mise en avance dans la page d’accueil de la page web et les bandes. Vous allez les copier et le placer dans la version mobile.
Copier aussi le logo qu’on a déjà placé dans la version web. Et récupérer le bouton JE TENTE MA CHANCE dans les Assets où se trouve les composants mobiles qu’on a déjà créés dans le passé.
Voilà, vous voyiez que c’est nettement plus rapide que de tout refaire. Allez ! On ne perd pas le rythme et l’on continue directement avec la page concept mobile.
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 importer des ressources dans Figma ?
Comment concevoir une page d'accueil sur Figma ?
Comment adapter un design web à la version mobile sur Figma ?
Quel est le processus pour créer un design system dans Figma ?
Quels sont les avantages de l'utilisation de Figma pour le design web ?
Conclusion
En maîtrisant les outils de Figma, vous pouvez transformer vos idées en designs fonctionnels et esthétiques. Quelle sera votre prochaine étape dans l’exploration des fonctionnalités avancées de Figma pour enrichir vos projets de design ?
