Comprendre l'Utilisation des Wireframes pour le Design d'Applications

Du wireframe au design d'interface UI
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Atelier Figma - Design d'application
Revoir le teaser Je m'abonne
4,5
Transcription

159,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
159,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont les suivants :

  • Comprendre l'importance d'un wireframe pour le design d'application
  • Apprendre à structurer des idées sur papier avant de passer au numérique
  • Identifier les ajustements nécessaires pour améliorer l'ergonomie et l'expérience utilisateur

Apprenez comment utiliser un wireframe pour structurer le design d'une application mobile, en commençant par des esquisses simples jusqu'à leur réalisation finale.

Dans cette leçon, nous explorons le processus de création d'un design d'application mobile à partir d'un wireframe. L'approche commence par des esquisses sur un carnet pour structurer les éléments clés. Ensuite, nous passons à une version basse résolution appelée wireframe, permettant un premier aménagement de l'écran. Par exemple, une prévision météorologique initialement représentée avec un simple pictogramme évolue vers une interface plus élaborée. Les placements d'éléments comme les heures ou les barres de recherche peuvent être ajustés pour améliorer l'ergonomie. Ce processus itératif est crucial pour garantir une expérience utilisateur optimale. Enfin, une couche de design graphique est appliquée, conférant à l'application une présentation finale polie et professionnelle.

Voir plus
Questions réponses
Qu'est-ce qu'un wireframe en design d'application mobile?
Un wireframe est une esquisse basse résolution permettant de structurer les éléments d'une application avant de passer à un design plus abouti.
Pourquoi est-il important de réaliser un wireframe avant le design final?
Le wireframe permet d'optimiser l'aménagement des éléments pour une meilleure ergonomie et une expérience utilisateur améliorée.
Quels ajustements peuvent être faits à partir d'un wireframe?
Des modifications concernant la disposition des éléments, l'ajout de fonctionnalités comme une barre de recherche ou des ajustements pour faciliter la navigation utilisateur.

Programme détaillé

8 commentaires
4,5
8 votes
5
4
3
2
1
pa12
Il y a 1 year
Commentaire
Je viens de débuter la formation mais quel dommage de ne pas avoir le fichier de travail avec... Une grosse perte de temps pour les images, les icones...etc. Pouvez-vous svp ajouter ce fichier à télécharger?
jc.mosca
Il y a 1 year
Commentaire
Comme dit plus haut, mise à part les centaines de "du coup" et "en fait" plutôt agaçants, c'est comme d'habitude chez Elephorm une formation enrichissante. J'ai mis seulement 4 étoiles car il manque la démonstration des overlays, des contraintes, des listes à puces et pas mal d'autres. Ce serait bien qu'Elephorm fasse des mises à jour de ses formations.
ousmane.ndia
Il y a 1 year
Commentaire
Bien pour apprendre les bases, mais manque les nouveautés de 2022.
nicolas.dessis
Il y a 1 year
Commentaire
Merci !
pioupiou06
Il y a 2 years
Commentaire
Super formation ! très bien expliquée !
pulpozien
Il y a 2 years
Commentaire
Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super
maellechancerelle
Il y a 3 years
Commentaire
Super formation!!
stephanehugon
Il y a 3 years
Commentaire
Cette formation est vraiment au top ! Je ne connaissais rien de Figma (étant "seulement" développeur à la base) et j'ai appris beaucoup de choses, je recommande donc cette formation; le formateur est très sympathique et professionnel dans sa pédagogie, c'est très agréable à suivre. Je recommande par contre d'avoir au moins deux écrans (voir trois) pour suivre la vidéo et pratiquer/prendre des notes en même temps.

Seul bémol par contre, pitié Elephorm, mettez les fichiers de travail avec la formation... (Ce n'est pas la seule sur laquelle il manque les fichiers d'ailleurs); mais mettez-les, ça évite d'aller chercher à droite et à gauche des SVG que l'on doit convertir, des images, etc...

A part ça, super formation !