CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre à Prototyper - Sites Internet et application Tutoriel : Création de Mock-up pour SoCravate

Tutoriel : Création de Mock-up pour SoCravate

Mock up
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre à Prototyper - Sites Internet et application
Revoir le teaser Je m'abonne
4,0
Transcription
Cette leçon fait partie de la formation
49,90€ Ajouter au panier

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,0
Cette leçon fait partie de la formation
49,90€ Ajouter au panier

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm

Étape 1 : Structurer le mock-up

Objectifs

Les objectifs de cette vidéo sont :

  • Comprendre les principes de base de la création de mock-ups.
  • Apprendre à structurer un site e-commerce.
  • Savoir utiliser une grille de 12 colonnes pour organiser les éléments.
  • Anticiper les interactions utilisateurs pour un prototype fonctionnel.

Résumé

Apprenez à créer un mock-up pour le projet SoCravate en utilisant du papier et un crayon ou un tableau Velleda. Ce tutoriel couvre toutes les étapes essentielles pour structurer efficacement la page principale du site.

Description

Dans ce tutoriel, nous abordons la création d'un mock-up pour le site SoCravate, un projet e-commerce de vente de cravates. Nous commencerons par dessiner la structure de base sur une feuille blanche. Nous définirons les éléments clés du site tels que le header où nous placerons le logo et le panier, les filtres dans une colonne à gauche, et la zone principale qui affichera les produits.

Nous utiliserons une grille de 12 colonnes pour faciliter l'organisation des éléments. La partie centrale affichera les produits, avec des options pour filtrer par couleur. Nous détaillerons également le processus de pagination pour naviguer entre les produits, avec un footer à la fin pour des informations supplémentaires.

Le tutoriel inclut aussi des conseils pour la conception d'un prototype en anticipant les interactions utilisateur, comme l’affichage d’un bouton ajouter au panier au survol des produits. Enfin, nous aborderons l'expérience utilisateur, en imaginant le parcours typique d'un visiteur du site.

Voir plus

Questions fréquentes

Quels sont les éléments principaux du header dans le mock-up SoCravate ?
Les éléments principaux du header sont le logo de la boutique et le panier d'achat.
Pourquoi est-il important d'utiliser une grille de 12 colonnes dans un mock-up ?
Une grille de 12 colonnes permet de structurer les éléments de manière équilibrée et d'assurer une mise en page cohérente et adaptable, facilitant ainsi la répartition des éléments et le design réactif.
Comment le tutoriel suggère-t-il d'anticipe l'ajout de produits au panier ?
Le tutoriel propose d'ajouter un bouton « ajouter au panier » qui apparaît lors du survol des produits, ce qui améliore l'interaction utilisateur et prépare le terrain pour la phase de prototypage.

Programme détaillé

1 commentaire
4,0
1 vote
5
4
3
2
1
Profile picture for user daniellucarini
Daniel L.
Il y a 4 ans
Arrrgh ! Je n'ai pas Axure...
Quel alternative possible qui ne coute pas un bras ?
Merci !