CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre à Prototyper - Sites Internet et application

Tutoriel : Création de Mock-up pour SoCravate

Retour à la formation
Chapitre 5 Leçon 2
Précédent
Suivant

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.

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est préférable d'avoir des connaissances de base en design web et en e-commerce. Savoir manipuler des outils de dessin simples comme un crayon et du papier ou un tableau Velleda est également recommandé.

Métiers concernés

Les compétences développées dans ce tutoriel sont utiles pour des métiers tels que Designer UX/UI, Chef de projet digital, et Développeur front-end. Elles sont particulièrement pertinentes pour des projets de conception de sites e-commerce.

Alternatives et ressources

Comme alternatives, vous pouvez utiliser des logiciels de design tels que Adobe XD, Sketch ou Figma pour créer vos mock-ups si vous préférez une approche numérique.

Questions & Réponses

Les éléments principaux du header sont le logo de la boutique et le panier d'achat.
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.
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.