Vous cherchez à enrichir vos designs avec des éléments interactifs et dynamiques.
Sans les bons outils et techniques, vos designs peuvent paraître fades et manquer d’interactivité, affectant l’expérience utilisateur.
Découvrez comment utiliser Adobe Illustrator pour créer un footer dynamique qui capte l’attention et améliore l’engagement utilisateur.
Maîtrisez les fonctionnalités de base d'Adobe XD-UX Designer et créez des prototypes d'interface utilisateur interactifs
Nous avons fini notre page d’accueil, on va maintenant nous occuper de la prochaine page dans laquelle l’utilisateur pourra déjà choisir des garnitures pour sa glace. Pour styliser cette page, on va créer un footer pour simuler une roue qui tourne en fonction des ingrédients choisis par l’utilisateur. On va voir étape par étape : la création d’une deuxième page, ensuite la création du footer avec Adobe Illustrator.
Créer un plan de travail dans Illustrator
On va tout d’abord créer notre deuxième page. Pour respecter les mesures initiales du plan de travail, on va tout simplement la dupliquer. Pour cela, on clique sur le nom du plan de travail et on fait CTRL+D .
Les deux plans de travail sont très proches, si on clique sur le background du premier, on verra qu’il va déborder sur le deuxième. Pour éviter des complications, il faut verrouiller le calque du background qui déborde pour qu’on ne puisse plus interférer avec lui.
On peut aussi bouger le plan de travail : pour ça, on clique juste sur le nom du plan de travail et on modifie les coordonnées X et Y dans le panneau transformation.
Il est aussi conseillé de renommer le nom du deuxième plan de travail. Pour bien différencier les deux plans.
Vu qu’on a dupliquer le premier plan de travail, donc ses éléments aussi, alors qu’on n’a besoin que du plan de travail et du logo sur notre deuxième plan, donc il faut supprimer les restes.
Maintenant qu’on a notre deuxième page, on va passer à la prochaine étape : la création du Maintenant, on va créer un footer pour simuler une roue qui tourne en fonction des ingrédients choisis par l’utilisateur.
Concevoir un footer dynamique avec Illustrator
Pour créer ce footer, on aura besoin d’un autre logiciel inclus dans l’offre Adobe Creative Cloud , on aura besoin d’ Adobe Illustrator . Pour l’utiliser, il suffit d’aller dans Creative Cloud et d’ouvrir Illustrator.
On va commencer par choisir un plan de travail. Arrivé dans Adobe Illustrator , on va choisir un plan de travail adapté pour le Web pour que les couleurs soient en mode RVB .
Maintenant qu’on a notre plan de travail, on va créer un cercle. Pour faire cela, on va se servir de l’outil Ellipse . Pour faire un cercle parfait avec l’outil Ellipse , on fait un clic, on maintient le clic et la touche. SHIFT et on glisse jusqu’à ce qu’on a la taille du cercle voulu.
Pour bien avoir le meilleur aspect pour notre footer, on devra utiliser une des fenêtres les plus indispensables pour la création sur Illustrator : la fenêtre Propriétés.
Pour l’avoir, on va dans l’onglet Fenêtre qui se trouve parmi les onglets en haut du logiciel, on clique sur l’onglet et dans la liste des fenêtres, on verra plus bas la fenêtre Propriété .
On va se servir de cette fenêtre pour configurer la taille, le contour, l’alignement et plus d’autres. On configure d’abord la taille et le contour. Il faut tout d’abord sélectionner l’élément qu’on doit configurer, pour cela on doit utiliser l’outil Sélection (Raccourci V )
Maintenant on va sélectionner le cercle et on va le configurer
Maintenant, il faut qu’on enlève le fond du cercle. Pour ce faire, on va utiliser l’outil Fond qui se trouve toujours dans notre fenêtre Propriétés . On clique sur le cercle et on clique sur l’outil Fond et choisit le fond vide.
On a fini notre cercle, on va maintenant tracer deux lignes en utilisant un autre outil d’Illustrator, l’Outil Trait . On aura besoin d’une ligne qui sera précisément à un angle de 45 degrés.
Maintenant, on va dupliquer cette ligne et on va aussi l’inverser pour que plus tard les deux formeront une croix.
Pour la dupliquer, on clique sur la ligne et on fait CTRL+C et CTRL+V . Puis, pour l’inverser, on va dans la fenêtre Propriétés .
Maintenant, on va aligner ces 3 éléments pour pouvoir former le footer. On va sélectionner le cercle et les 2 lignes, pour ça, on va cliquer un élément d’abord, et après cela, on maintient la touche SHIFT et on sélectionne les 2 autres. Et on va pouvoir les aligner avec la fenêtre Propriétés .
On va maintenant fusionner ces 3 éléments, pour cela on va utiliser un outil qui est inclus dans la fenêtre Propriétés : le Pathfinder , qui se trouve tout en bas de la fenêtre. Après, l’alignement les 3 éléments doivent être toujours sélectionné pour pouvoir les modifier.
On a fini la création de notre Footer.
On va maintenant copier le footer sur Adobe XD, on va le sélectionner et on va faire une copie sur Illustrator et on va la faire coller sur XD.
Pour notre design, on va le placer comme ci-dessus. Maintenant, on va colorer notre Footer, on va voir comment faire un dégradé de couleur.
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 créer une deuxième page dans Adobe XD ?
Comment créer un footer avec Adobe Illustrator ?
Comment aligner des éléments dans Adobe Illustrator ?
Comment transférer des éléments d'Illustrator à Adobe XD ?
Comment réaliser un dégradé de couleur pour un footer ?
Conclusion
La création d’un footer dynamique peut transformer l’interface utilisateur de votre projet. Quels autres éléments graphiques aimeriez-vous explorer pour enrichir vos designs ?
