É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.
Quel alternative possible qui ne coute pas un bras ?
Merci !