Créer un webdesign e-commerce – 1/3 Organisation et réflexion créative

Créer un webdesign e-commerce – 1/3 Organisation et réflexion créative

Programme : Photoshop

Difficulté : Intermédiaire

Temps estimé : 1 heure

Arnaud STECKLE vous explique comment créer un webdesign de site e-commerce en passant par différentes phases types de conception de projets web.

Bonjour à tous ! L’objectif de ce tutoriel est clair : vous allez créer un modèle de site e-commerce ! De la maquette sous Photoshop à l’intégration statique, vous allez apprendre à construire un projet web pas à pas. Pour rendre le tutoriel pertinent, je vais le placer en situation réelle, comme si vous aviez affaire à un client, avec de réelles attentes. Afin de détailler un maximum d’étapes et avoir une vision globale du projet, je vais le découper en 3 grandes parties :

  1. La phase d’organisation et de réflexion créative.
  2. La conception du webdesign sous Photoshop.
  3. L’intégration du template avec HTML5 et CSS3.

Au final, vous disposerez d’une intégration statique, prête à être dynamisée avec votre langage côté serveur préféré (PHP, ASPX…). Je m’arrête volontairement après cette étape d’intégration pour vous laisser le choix du CMS ou de la technique à utiliser. Je laisse simplement cette part du travail qui est plutôt réservée à un développeur web. Pour ne pas alourdir le tutoriel, la phase commerciale et stratégique est ici laissée de côté. Ne l’oubliez pas, nous allons surtout traiter le problème d’un point de vue graphique. C’est parti !

A- Organisation du projet

Notre entreprise fictive s’appelle Fine Cookies, une société connue et reconnue pour ses savoureux biscuits. Malgré sa présence avec une boutique « physique », Fine Cookies ne possède pas encore de site Internet. Souhaitant développer ses ventes et sa présence en ligne, elle est à la recherche d’un professionnel du web pour réaliser son premier site e-commerce. Grâce à votre portfolio, votre expérience et vos contacts, vous êtes très rapidement contacté par Fine Cookies qui souhaite vous rencontrer pour discuter ensemble de la création d’un site web et d’un cahier des charges.

- Cerner les attentes du client

Nous y voilà ! La définition globale du projet commence en général par une réunion pour la future élaboration d’un cahier des charges. Après votre rendez-vous avec Fine Cookies, vous savez mieux désormais quelle est la philosophie de l’entreprise, quelle est son histoire. Vous avez clairement défini les points suivants avec le client :

  • Quels sont les objectifs du site ?
  • Quelle est la cible visée ?
  • Quelle image doit véhiculer le site ?
  • Quel est le délai de mise en ligne ?

Vous avez également pris le temps de consulter si l’entreprise possède une charte graphique et quelles est son exigence d’un point de vue graphique. Vous avez aussi expliqué clairement à votre client quel est le déroulement d’un projet web et quelles sont les étapes de validations obligatoires. Autant de questions à maitriser dès le première contact, pour construire le projet sur de solides fondations.

Dans notre cas fictif, la marque souhaite solidement s’implanter en ligne pour mieux se faire connaître en France, booster ses ventes et percer outre-Atlantique, en vue d’y installer des boutiques d’ici les 3 prochaines années. Même si son activité s’est diversifiée avec le temps, le produit phare de Fine Cookies reste encore le cookie :). Le créateur de biscuit cible une clientèle large, en proposant des prix abordables, en misant toujours sur une qualité irréprochable. La société est d’ailleurs connue pour son respect des ingrédients et sa maitrise parfaite des recettes, qui au final, offrent des saveurs authentiques et préservées. Les consommateurs offrent très régulièrement des produits Fine Cookies à leurs proches en toutes occasions.

Avant de terminer la réunion, le responsable vous montre également quelques sites qu’il trouve a son goût, mais également ce que propose ses concurrents directs. Fine Cookies possède pour l’instant « une identité visuelle » très basique, basée sur de la typographie Comic Sans MS (autant dire que tout est à faire…).

Grâce à ce rendez-vous, vous avez pu mettre en lumière certains mots clés qui vous ont permis de cerner les attentes de l’entreprise. Vous devez sûrement déjà avoir plusieurs idées et pistes en tête. Pensez à bien structurer les informations en prenant des notes, pour établir le futur cahier des charges et imaginer l’identité globale du site.

- L’élaboration du cahier des charges

Le cahier des charges sert à détailler les différentes contraintes vues ci-dessus avec votre client, mais aussi et surtout à définir précisement les contraintes fonctionnelles, temporelles et budgétaires. Il est normalement établi par le client. Il n’est pas rare que cet exemplaire client serve uniquement de base. En effet, l’idéal pour un client « sans expérience dans le web » est simplement de vous faire confiance. Vous êtes le professionnel du domaine, faites votre boulot. Tout comme Fine Cookies qui n’a pas besoin de vos conseils en matière de farine à utiliser pour ses biscuits au chocolat :). Attention, je parle tout de même de travailler en équipe.

Le cahier des charges du client va vous permettre de définir ensemble un cahier des charges fonctionnel complet, dans lequel vous porterez toute votre expertise.

Cahier des Charges


Commencez par saisir les différents détails du projet énoncés préalablement, pour que la lecture du cahier des charges permette de cerner en un clin d’œil de quel type de projet il s’agit. Toujours en fonction des informations fournies par le client, proposez une arborescence complète du projet. Celle-ci vous permettra de voir l’étendue du site et ainsi la quantité de travail à fournir. Elle précisera à votre client le contenu textuel et photographique à fournir si besoin. L’arborescence donnera également un aperçu des fonctionnalités proposées.

Tiens, parlons des fonctionnalités !

Une fois la boutique lancée, le client souhaite ajouter des produits à son catalogue. Vous devez être en mesure de proposer une solution e-commerce qui soit adaptée à ses besoins. Dans cet exemple, n’étant pas développeur, vous allez donc travailler sur la question avec un développeur web. Nous avons besoin d’une boutique « standard » avec les spécifications suivantes :

  • Gestion de plusieurs langues
  • Fonctionnalité basique de panier
  • Compte utilisateur sécurisé
  • Éditer des bons de réductions
  • Choisir un coffret cadeau lors de la commande
  • Proposer un site capable d’évoluer si besoin

Vous conseillez également à votre client de mettre des produits en avant et de faire des offres promotionnelles pour booster les ventes.

D’après ces fonctionnalités, vous pouvez aborder la présentation des technologies mises en œuvre pour la réalisation du projet. Dans notre exemple, il s’agit d’une boutique codée en HTML5 / CSS3. Le développement sera assuré par un développeur qui utilisera probablement un CMS e-commerce comme Prestashop pour ne citer que cet exemple. Il est également important de faire la lumière sur le fonctionnement de l’hébergement du site car c’est un des éléments qui entrera dans la facturation client.

Il s’agit là bien évidement d’un déroulement en version simplifiée, qui est à détailler d’autant plus dans un réel cahier des charges.

Établir un zoning des pages.

Prochaine étape, la réalisation d’un zoning. Il sert à schématiser les pages du sites à l’aide de blocs. Le but est de montrer les différentes zones de contenu présents sur votre page. C’est une étape indissociable du futur design. Il permet de définir l’organisation de la page et sert de support au client. Après avoir établi un zoning de quelques pages clés du site, il vous reste tout de même encore du chemin avant d’attaquer votre design.

Zoning-FineCookies

Zoning final de la page d’accueil Fine Cookies

Pour permettre au site de se faire connaître comme le souhaite votre client, vous lui présentez votre stratégie de communication et vos leviers webmarketing. Campagne Google Ad-Words ? Jeu sur Facebook ? Campagne vidéo virale ? Autant d’arguments à soulever, mais à détailler dans un cahier des charges à part entière. En effet, il s’agit ici que de simples suggestions, qui donneront lieu à d’autres projets et d’autres budgets une fois le site mis en ligne. Elles montrent toutefois votre professionnalisme et votre souci d’accompagnement client, de la conception à la réussite et le succès final en ligne.

Pour en revenir au site en lui-même, il vous reste à présenter votre gestion du temps en fonction des impératifs techniques et des souhaits de votre client. Un retro-planning permettra de faire toute la lumière sur les étapes importantes du projet. Essayez de rendre le tout visuel, intéressant et attractif. Faites participer le client aux moments clés de validations du projet, en organisant des réunions régulières.

Dernier chapitre et pas des moindres : le budget. Pour vous aider à chiffrer votre projet voici quelques sites et ressources :

Après cette explication détaillée du cahier des charges, je vous propose un petit récapitulatif pour avoir le plan sous les yeux en un clin d’œil.

Récapitulatif du cahier des charges :

  • Présentation de l’entreprise, avec sa philosophie, son histoire…
  • L’objectif du site web
  • L’arborescence
  • Les fonctionnalités
  • Les technologies mises en œuvre
  • Zonings
  • Communication et webmarketing (publicité, suivi et reporting)
  • La gestion du temps (retro-planning)
  • Le budget.

B- Réflexion créative

Votre devis est signé, vous avez déjà encaissé un acompte, à présent c’est à vous de jouer ! Vous entrez dans la phase que j’appelle ici « réflexion créative ». C’est ici que vous allez développer plus en détails vos zonings, trouver de l’inspiration, faire vos recherches graphiques. Le cahier des charges étant bien défini vous possédez déjà les zonings et l’idée globale de l’identité de la marque. Au vue de la charte graphique inexistante, vous avez également proposé de créer un logo en plus de la création du webdesign. Voyons ensemble comment organiser le tout au mieux, pour attaquer le webdesign sous Photoshop en toute tranquillité.

- Chercher de l’inspiration :

Vous avez déjà avancé sur cette partie lors de l’élaboration préalable du cahier des charges. En analysant les sites concurrents et en parcourant les blogs et galeries de design (comme Webdesignertrends par exemple ;) ) vous avez déjà peut-être une petite idée du style graphique. Si non, surfez, faites un tour en ville, prenez l’air, et surtout éloignez-vous temporairement de votre machine. Griffonnez, notez-vous des mots clés, recherchez, le tout pour au final placer les produits de Fine Cookies dans leur univers. Cet univers précis se construira avec des couleurs, des typographies spécifiques, et votre style graphique propre.

- Créer un mood-board :

Un mood-board est un poster constitué d’images inspirantes pour vous immerger dans l’univers de votre futur site. Parcourez le web et analysez tout ce qui se rapporte à l’univers des cookies. Servez-vous également des images fournies par votre client si tel est le cas. Créez un large document Photoshop ou même un simple document avec un logiciel de traitement de texte pour avoir toutes les images sous les yeux. Vous allez ainsi en dégager des couleurs, y voir des éléments récurrents, pour petit à petit vous amener à créer une image de marque et un design cohérent pour votre site.

- Créer le logo : faites des schémas, déchirez, recommencez  !

Créer un logo est une tâche complexe qui nécessite beaucoup de réflexion et du temps. En effet, à lui seul, le logo va représenter la marque. Il est donc important de le soigner, de lui donner du sens et de l’efficacité. Pour plus de conseils sur la création d’un logo je vous renvoie aux très bons sites et articles :

Pour vous donner un exemple concret de création de logo, voici comment j’ai procédé pour Fine Cookies. Après m’être inspiré de divers exemple et conseils en tout genre, j’ai commencé a dessiner une vague forme de logo lors de la recherche graphique du webdesign sur papier. Intuitivement je suis parti sur un disque, qui évoque à lui seul le cookie ! Ce disque va servir de base au logo en lui apportant de solides fondations graphiques. Débuter sur une forme basique est une bonne manière de procéder pour créer un logo.

Zoning papier Fine Cookies

Recherches graphiques sur papier

Pour accompagner ce disque, je dessine ce qui pourrait devenir la typographie représentant la marque Fine Cookies. D’après le mood-board créé précédemment, je me rends compte qu’une typographie manuscrite correspondrait parfaitement à Fine Cookies. En effet, elle permettra de diffuser l’image authentique que la marque souhaite transmettre, en rappelant les enseignes des magasins d’époque par exemple. C’est tout naturellement que je me dirige en priorité vers des typographies gratuites. Mes recherches me mènent à la police Cookies (quel hasard :)), disponible gratuitement sur Google Font.

Après divers essais de compositions avec la typographie, je me met à abandonner l’idée du disque. En effet, il devient une contrainte pour placer les mots « Fine » et « Cookies ».  Au fil des essais et des croquis, je reviens tout de même sur ce disque, qui donne un impact fort à l’identité. C’était donc une bonne idée au final ;)). Je décide d’accompagner le logo d’une baseline « eat them all ! » (mangez les tous). J’utilise l’anglais car j’ai toujours en tête que la marque souhaite percer outre-Atlantique. Ce souffle international doit être facilement lisible et rattaché au logo. Pour rester simple, j’ai choisi une police sans empattement (Fredoka One) qui se mariera très bien avec notre police Cookie. Je commence ensuite à placer les éléments et tester différentes couleurs :

FINECOOKIES-rechercheLogos

Recherches graphiques pour le logo Fine Cookies

Rappelons-le l’image de marque doit refléter la philosophie et le type de société en un clin d’œil. Dans notre cas, un site de biscuits se doit d’utiliser des couleurs « alimentaires« , comme le rouge ou l’orange par exemple. Le beige peut-être très bien utilisé comme couleur complémentaire pour atténuer ces couleurs chaudes. Après réflexion j’abandonne rapidement les couleurs sombres ou le bleu qui ne renverrai pas la bonne image . Il manque tout de même un éléments massif pour soutenir le logo. Il s’agit encore une fois de ce fameux disque, que je décide de remplir en rouge.  J’ajoute également du bruit dans le fond pour donner un côté usé. Au final, j’obtiens un logo :

  • Identifiable facilement
  • Utilisant deux typographies différentes
  • Qui peut-être apposé sur tout type de support, autant sur le web, que sur un magasin par exemple

La planche en bois dans le visuel ci-dessous est un élément de la charte future. Elle soutient l’identité authentique et quelque peu vintage de la marque.

Tutortiel Webdesign E-commerce

Logo final de Fine Cookies

- Hiérarchiser les informations et pensez à l’ergonomie :

Lors de la définition plus précise de votre zoning papier, pensez à bien définir un ordre d’importance dans les informations que doit véhiculer le site. Quoi mettre en avant ? Pourquoi ? Par quelle astuce graphique le faire ressortir ? Autant de questions auxquelles vous pouvez déjà répondre à partir de cette étape. Bien évidement une fois arrivé à l’étape de conception, vous trouverez sûrement d’autres alternatives et d’autres problèmes. Une bonne préparation en amont est toujours payante au final. Pensez déjà à l’ergonomie du site, à comment les internautes vont utiliser le site, se déplacer, scanner les informations. N’oubliez-pas que le site doit être agréable et simple à utiliser pour maximiser les conversions.

- Contraintes techniques et intégration web :

C’est une des différences fondamentales dans notre métier de webdesigner. Même si nous sommes issus d’un monde créatif comme un graphiste par exemple, nous ne pouvons pas faire abstraction des contraintes  inhérentes à la création d’un site web. De très bonne bases en intégration constituent un énorme plus pour créer des maquettes qui seront parfaitement intégrables et fidèles à la création Photoshop. Certaines données seront dynamiques et variables alors pensez-y. Ne vous mettez pas des bâtons dans les roues, pensez à l’optimisation de l’intégration et au référencement. Vous allez gagner énormément de temps par la suite.

Pour conclure

Vous avez parcouru une très bonne partie de la phase en amont du webdesign. Se mettre dans le bain permet d’y voir plus clair et d’imaginer la quantité de travail nécessaire pour arriver à un site concluant et réussi. Avec cette préparation intensive, vous êtes prêt pour ouvrir Adobe Photoshop et enfin passer au webdesign pur et dur ! N’hésitez pas à poser toutes vos questions en laissant un commentaire ci-dessous. Suivez-moi, je vous invite à consulter la seconde partie de ce tutoriel ! ;)


17 Comments to “Créer un webdesign e-commerce – 1/3 Organisation et réflexion créative”

  • Au top !
    C’était l’heure du goûter quand tu as trouvé le thème du tuto ? ;)

    • Haha merci à toi et figure toi que oui, c’était le goûter ;)

  • Superbe tutoriel merci !

  • Etant un jeune webdesigner apprenant tout en autodidacte (pour le moment), j’ai appris énormément de chose notamment au niveau des étapes à réaliser.

    Merci beaucoup pour ce tutoriel, j’attend la suite impatiemment ! :)

  • Toujours très utile ce genre d’article, quelque soit notre niveau. Au plaisir de lire la suite ! :)

  • Merci pour ton énorme travail.

    Il est toujours intéressant et utile de se pencher sur les phases de réflexions et la théorie avant de se lancer dans la pratique et pour cela ton tutoriel m’aura été vraiment bénéfique. C’est clair, bien expliqué. Et lorsque cela est dur à comprendre tu nous fait même des croquis :D

    Mais que demande le peuple ?! La partie 2 ! Bien évidement !

    :)

  • Merci pour ce tuto. Y’a t’il un problème avec les images, elles ne s’affichent pas?… C’est bien dommage… On attend la suite avec impatience.

    • Bonjour, chez nous tout s’affiche correctement. Le problème persiste-t-il même après rafraîchissement ou sur un autre navigateur ?

  • Enfin du tuto, meric j’étais en manque de vos tutos de qualité MERCI !
    Jeune apprenti webdesigner !

  • [...] 1. La phase d’organisation et de réflexion créative. 2. La conception du webdesign sous Photoshop. 3. L’intégration du template avec HTML5 et CSS3. (À venir !) [...]

  • Ahhhhh ! les coulisses d’avant projet, j’adore ça !
    Merci pour ce partage d’infos très intéressantes ! Les clients qui n’ont jamais fais de sites ne se doutent souvent pas de tous se qui doit être fait avant de commencer un projet de site internet et que tous cela est primordiale pour la suite de leur projet.

  • Bonjour, merci beaucoup pour ce tuto, j’en avait bien besoin. Ça m’a beaucoup aidé pour la création de mon nouveau site. Beau travail BRAVO! J’attends impatiemment la suite :)

  • Merci pour cette article très intéressant. Ayant quelques sites e-commerce à réaliser, je sais sur quoi partir désormais !

  • merci pour le tuto,je suis un webdesigner dans le début de chemin; j’attend la suite impatiemment pour toute qui concerne L’intégration du template avec HTML5 et CSS3

  • Enfin un tutoriel digne de ce nom qui reprend toutes les phases incontournables pour créer un site efficace !!

Laisser un commentaire