Extia - D'abord qui, ensuite quoi !

Le blog
Création de l’interface utilisateur d’un site e-commerce

Partager
actuality.blog.title

​Mardi 9 février, les Leads de la Comet’ UX/UI,  Leonardo, Sophia et Victurnien proposaient de découvrir les étapes de conception de l’interface utilisateur d’un site e-commerce autour d’un événement mêlant théorie et pratique. Cette soirée avait pour objectif de présenter et décrire 4 étapes de conception spécifiques à une interface utilisateur : le sketch/zoning, le wireframe, le mockup et le prototype.

La soirée a commencé par une partie théorique durant laquelle Leonardo et Victurnien ont présenté les étapes de conception, en détaillant chacune d’entre elles, notamment au travers d’exemples concrets. C’était l’occasion de présenter les outils nécessaires pour la réalisation de chaque étape et de donner des conseils sur les principes de design graphique aux participants. 

Dans la première étape, le sketch/zoning, on explore et délimite quel sera notre support (desktop/mobile). Il s’agit d’une esquisse au crayon sur du papier. C’est la forme la plus simple et la plus rapide pour visualiser des premières idées et pour en discuter avec votre équipe. Schématiser une page à partir de zones, c’est une technique de maquettage basse fidélité, donc peu détaillée, qui permet d’organiser le contenu des pages avant de passer du temps sur les détails.

Dans l’étape de wireframe, on exploite ce qui a été réalisé précédemment. On précise notre design avec les contenus présents dans chaque section de notre page web ou application mobile : les intitulés de menus, les titres d’articles, les emplacements et la description des visuels, ou encore le format et la taille des boutons.

Lors du mockup, on réalise une représentation haute définition de notre produit, c’est-à-dire fidèle aux dimensions et composants du design final qui sera implémenté par les développeurs. Le mockup comporte les contenus et la charte graphique de la marque : les visuels, les couleurs, la typographie et l’iconographie. 

Pour finir, l’étape de prototypage vient donner vie aux différents mockup de produit qu’on se propose de concevoir. L’objectif est de rendre les écrans statiques définis précédemment en un prototype interactif. Il s’agit de lier les différentes pages entre elles à partir des boutons, menus et liens qui permettent de naviguer sur le site ou sur l’application mobile conçue.

Place ensuite à la pratique : moment fort de la soirée ! 

À partir d’un cas fictif d’un magasin de t-shirt bio made in France, Sophia a expliqué les enjeux de la marque et son objectif en 2021 : augmenter sa présence digitale afin de booster ses ventes en ligne. Les participants ont pu découvrir les étapes de conception effectuées par les Leads pour répondre aux besoins de la marque fictive “Faisant Vert”. Au travers d’un quiz interactif, ils pouvaient interagir et participer à la réflexion autour de la construction de la page d’accueil de la marque.

 Découvrez ici les différentes étapes de conception retenues par les participants et les Leads.

Rendez-vous mercredi 24 février pour nos prochains événements online avec la Comet’ Feel Good ! D’ici là, n’hésitez pas à nous suivre sur notre page Twitter @CometByExtia et à consulter notre site internet dédié à nos événements.

WANTED !
1000 2021 Nos offres d'emploi Candidature spontanée Serez-vous le prochain ? Extia recrute talents en