Skip to main content
Yo - STUDIO VITAMINE
La Rochelle 05 46 07 23 16
Accueil / Design sur mesure

Design sur mesure

Il existe aujourd’hui de très nombreux sites de e-commerce et il est donc primordial de vous démarquer avec un design personnalisé, c’est pourquoi nous vous proposons un design sur mesure.

En interne, une équipe composée d’un directeur artistique et de graphistes web vous guide et définie avec vous un webdesign en parfaite adéquation avec votre image et votre cahier des charges, tout en anticipant et orientant le parcours de l’internaute, de manière à transformer ce dernier en acheteur potentiel.

Sommaire

(Cliquez sur l’image principale pour agrandir)

Méthodologie

1) Maîtriser votre image et recueillir vos besoins

Avant de commencer un design il est impératif de vous rencontrer. Notre premier travail étant de vous écouter afin de discerner l’ensemble de vos souhaits et notamment de connaître votre cible :

  • A qui va s’adresser le site ?
  • Qui sont les acheteurs ?
  • Quelle tranche d’âge ?
  • Homme et/ou femme ?
  • Quelle catégorie socio-professionnelle …

Nous devons ensuite prendre connaissance de l’ensemble des éléments de communication de votre entreprise (logo, typographie utilisée, photos, plaquettes commerciales, papier en tête, cartes de visite, catalogues…) afin de se baser sur l’existant et de décliner votre charte graphique ou de retravailler cette dernière si celle-ci ne vous satisfait pas ou n’est pas bien adaptée au format Web.

2) Etudier la concurrence

Avant de commencer le design, nous allons dans un premier temps étudier les sites marchands de vos concurrents afin de connaître les points forts et les points faibles des acteurs spécifiques à votre marché (nous allons par exemple, étudier l’ergonomie de certains sites).

3) Mettre en place la phase de réflexion & le zoning web (wireframes)

Le graphiste va ensuite ébaucher sur une feuille le schéma des principales interfaces*, en commençant par la page d’accueil et la (ou les) fiche(s) produit(s). Ces « rough » vont nous permettre d’organiser et de structurer les éléments les plus importants d’une page web (logo, menu de navigation, moteur de recherche, principales photos mais également l’ergonomie du site…).

Le « rough » sera ensuite mis au propre, sous Illustrator par exemple, afin de vous le présenter : on parle alors de « zoning web » ou « wireframes ».
Ce zoning permet de positionner plus précisément chaque élément sur une page, et d’affiner les éléments ergonomiques.

* Les interfaces sont pensées pour les versions de bureaux (Desktop) et dans un même temps pour les versions tablettes et smartphones. Le responsive design est donc pensé en amont du projet. Le site devra en effet être compatible sur multi-supports (ordinateurs de bureaux, tablettes, smartphones…)

Il arrive parfois de penser les projets dans le sens inverse : dans un premier temps en Smartphones, puis tablettes, en enfin la version Desktop (bureau), afin de conserver uniquement les éléments essentiels d’un site e-commerce et supprimer les éléments inutiles ou superflus, on parle alors de “Mobile First”.

La “phase” de réflexion est sans doute la plus importante du projet.

4) Organiser l’arborescence

L’arborescence du site représente le plan de ce dernier et doit être définie dès le début du projet.
Les intitulés du menu de navigation doivent être simples, compréhensibles par tous et idéalement court.

Dans le cas d’un site e-commerce, nous organisons les catégories de chaque produits, les rangeons dans des rayons comme dans une boutique physique, afin que l’internaute les retrouvent facilement (les produits peuvent être par exemple “rangés” par marques, par types, par rayons…)  L’arborescence est nécessaire à la fois pour les internautes, mais aussi pour les moteurs de recherche. Elle permet d’avoir une vision globale du site et de son catalogue produits.

Réaliser le graphisme

1) L’ergonomie

L’ergonomie d’un site e-commerce est extrêmement importante, l’internaute doit trouver rapidement les produits et naviguer intuitivement de pages en pages en peu de clic. Il est également élémentaire de respecter certains standards du web. Exemple : Le logo est souvent placé en haut à gauche de la page et le panier en haut à droite. Le positionnement de ces éléments devenu une évidence lors de la navigation des internautes participe à les rassurer.

2) Les photographies

Les photos d’une boutique en ligne sont des éléments primordiaux. Les internautes  vont  « acheter des photos » sur votre site marchand.
En effet, ce sont les références visuelles de vos produits qui vont attirer et séduire vos clients. Ces dernières se doivent d’être d’excellentes qualités et doivent présenter vos produits de manière très avantageuse. Toutes les photos doivent être homogènes (couleurs, lumières, angles de prise de vue…).

Il est également très important de disposer de belles photos d’ambiance, afin de mettre en valeur vos produits dans leurs contextes.

3) La Typographie

Dans la création de votre design, le graphiste va être amené à utiliser une typographie spécifique. Déjà présente dans votre charte graphique ou spécifiquement utilisée pour le web,  en fonction de votre secteur d’activités et/ou de vos produits, la typographie utilisée ne sera pas la même.

Une bonne maîtrise de la typographie web est importante, elle permet de véhiculer votre message d’une manière efficace et participe aussi au design du site. Le texte la couleur de la typographie, l’interlignage, l’approche sont autant d’éléments à ne pas négliger. La lisibilité étant évidemment à soigner.

4) Les Couleurs

Les couleurs choisies participent non seulement à l’élégance du site, mais également à « l’émotion » (emotional design) que l’internaute va ressentir face à l’interface qu’il a devant les yeux, d’où l’importance de leurs choix.  L’objectif étant de retenir l’attention et de susciter des émotions chez le visiteur et de transformer sa visite en une expérience riche.

5) Composer vos pages (gabarit de pages), les 3 pages les plus importantes d’un site e-commerce

  • La Home page

La page d’accueil d’un site e-commerce est le point d’entrée (même s’il arrive parfois que l’on arrive par une page interne par le biais d’un moteur de recherche), c’est la première “image” que va visionner votre acheteur. Elle doit par conséquent faire l’objet d’une attention toute particulière, être extrêmement bien structurée et pensée. L’internaute doit comprendre en quelques secondes que c’est une boutique en ligne et comprendre ce que vous vendez.

  • La Fiche produit

C’est ici que l’internaute va décider d’acheter ou de ne pas acheter. La mise en page d’une fiche produit doit être effectuée avec attention : les informations sur le produit doivent être simple à trouver, claires et précises.  Le bouton d’ajout au panier doit être très facilement identifiable et se trouver toujours au même endroit pour chaque fiche.

  • Le Panier

Sur cette page il convient de rassurer l’internaute dans le processus d’achat. Il faut lui indiquer clairement les éléments qu’il a mis au panier et il doit connaître également le coût des frais de port et les délais de livraison. Les étapes le menant à l’interface d’achat doivent être intuitives et se faire d’une manière fluide.

6) Le Responsive design

Nous l’avons déjà abordé, les internautes utilisent de nos jours différents supports pour se connecter à votre site marchand. Le site doit s’adapter à l’ensemble de ces supports. À savoir :  l’ordinateur de bureau, les tablettes tactiles, les smartphones, les TV… Les interfaces de chacun de ces écrans doivent être bien pensés afin que la navigation de l’utilisateurs soit parfaite sur l’ensemble de ces supports. Par exemple : certains boutons ou les champs d’un moteur de recherche doivent être plus gros sur un smartphone que sur une version de bureau. Le graphiste pensera chaque interface en se mettant à la place de l’internaute en testant sur les différents supports.

7) La Présentation

Une fois le design de la page d’accueil terminé nous vous présentons le design et argumentons nos choix. Une fois la home page validée (après modifications et corrections potentielles), le graphiste travaillera les pages internes du site (listes de résultats, fiches produits, page panier…)

8) La vérification de l’intégration graphique

Lorsque l’ensemble des pages du site sont créées et validées, notre travail ne s’arrête pas là. Nous vérifions que l’intégrateur / développeur web, respecte bien le design et testons le site sur les différentes plateformes (bureau, tablettes et smartphones) afin de s’assurer que le design est optimal. Le chef de projet et/ou le directeur technique vérifierons de leur côté l’aspect fonctionnel du site.