Créer un design mobile efficace peut s’avérer complexe.
Une mauvaise conception entraîne des expériences utilisateur insatisfaisantes et des interfaces peu intuitives.
Cet article vous guide à travers des méthodes éprouvées pour concevoir des pages mobiles harmonieuses et fonctionnelles.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Pour cette page, on va à peu près suivre le même processus qu’avec la page d’accueil. Il faut d’abord dupliquer la page et copier le background à côté de ce dernier.
Maintenant, plaçons ce background dans le design et mettez-le en fond de calque pour qu’on ne puisse pas le voir.
Bien, nous allons à présent être focus sur l’illustration du concept en apportant ces modifications :
- D’abord, il faut enlever la couleur du rectangle et ajouter un contour noir (pour le moment).
- Séparez les trois textes et mettez chacun avec ces propriétés.
- Pour les deux premiers textes uniquement, nous allons enlever la couleur et ajouter des contours.
- Sélectionner ensuite tout le texte et ajouter de l’espacement horizontal entre les lettres.
Après cette partie-là, on décale à droite pour modifier la zone de texte sur la description du Gold Stripe Edition :
- Dans un premier temps, il faut changer ce latin incompréhensible par un vrai contenu textuel.
- Recadrez la zone de texte et mettez la typographie sur Adineue Pro
Pour le texte, au-dessus du bouton, mettez-le sur Adineue Pro, mais en LightWeb.
Et comme avec la page d’accueil, on récupère le bouton EMAIL dans Assets pour pouvoir l’intégrer par la suite dans notre design.
Terminez le tout en changeant la couleur de tous les éléments en blanc sauf pour le bouton EMAIL, puis supprimez le rectangle servant de background dans le wireframe. Vous devriez obtenir ceci à la fin.
- Designer la page concept mobile
Pour cette page, on va directement ajouter ces éléments au-dessous de la page d’accueil comme ça on construit en même temps notre sticky scroll mobile. Il faudra juste se référer à l’emplacement, la taille et autres propriétés des éléments dans le wireframe.
Donc d’abord, si comme moi vous avez besoin de plus d’espace sur le frame, vérifier d’abord les constraints des éléments déjà présents puis rallonger le frame et ajouter le background.
Copier ensuite l’illustration se trouvant dans la version web puis changer la taille du texte et redimensionner le cadre pour s’adapter à la version mobile.
Référencez vous au wireframe pour la taille des polices des textes où modifier le à la façon rock’n’roll .
On termine cette partie avec le bouton EMAIL mobile dans les Assets.
- Designer la page vote mobile
Maintenant, on passe à la troisième page de cette version mobile. Toujours comme tout à l’heure, copier les textes dans le frame et modifier la taille des polices.
Puis ajouter la photo des candidats et changer le bouton LIKE par la version mobile dans les Assets.
Et pour finir, ajouter le texte indiquant la date limite des votes.
Concevoir la page Gold Stripe Edition
On attaque maintenant la prochaine page qui contient les informations sur le Gold Stripe Edition. On répète le même processus qu’avant, c’est-à-dire qu’on va se référencer sur notre wireframe.
Maintenant, copier juste les éléments de la version web et ajuster les propriétés pour ressembler à ceux du prototype en commençant par les textes.
Maintenant, ajouter la photo ainsi que les trois bandes en les copiant.
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 intégrer un background dans le design mobile?
Comment adapter la typographie pour le mobile?
Quels éléments ajouter pour un sticky scroll mobile?
Comment intégrer des boutons dans un design mobile?
Comment adapter un design web pour le mobile?
Conclusion
En conclusion, maîtriser l’art du design mobile nécessite une attention particulière aux détails et une adaptation soignée des éléments du web au mobile. Quel aspect du design mobile souhaitez-vous explorer davantage?
