Conduite de projet de site web – Phase 2 : Création graphique

Classé dans : Conduite de projets web, Mon blog | 0

La phase de création graphique ne commence qu’après la validation du devis, de l’arborescence et de l’étude stratégique (Voir la Phase 1 de la conduite de projet web : Stratégie et Réflexion). L’objectif final de la création graphique est de visualiser le site avant sa mise en production. En effet, à l’issue de cette création, l’agence de communication sera en mesure de présenter des maquettes au client. Ces dernières permettant de se faire une idée précise de ce à quoi ressemblera le site une fois en ligne.

Cette étape de création graphique met aussi à contribution le client puisque ce dernier sera chargé de fournir l’ensemble des contenus éditoriaux et graphiques, nécessaires à la création de ces maquettes.

conduite-projets-sites-web-creation-graphique

1. Préalables aux maquettes

Avant de penser à la réalisation concrète des maquettes, un travail d’organisation visuel doit permettre d’avoir une vision globale des pages. Le zoning et le story-board du site vont permettre de décrire l’interface de ce dernier. Ces préalables à la création graphique vont spécifier et décrire toutes les fonctionnalités présentes sur le site.

1.1. Le zoning

Le zoning permet de découper la page en zones. Ces dernières permettent de visualiser précisément l’emplacement des contenus, du header, du footer, du fil d’ariane et des zones de naivigation.

L’idée est de pouvoir créer un zoning par « page clé ». Le zoning est d’ailleurs un préalable aux maquettes et permet de se mettre d’accord avec le client sur le positionnement des différentes fonctionnalités. La méthodologie à suivre est la suivante :

  • Zoning général : Zones qui apparaîtront de manière identique sur l’ensemble des pages du site ;
  • Zoning « pages clés » : Zoning des pages les plus importantes qui présentent des différences sensibles ;
  • Indication de hiérarchie visuelle : Utiliser des couleurs plus ou moins foncées.

L’intérêt est de pouvoir présenter schématiquement l’aspect général du site internet au client.

zoning-conduite-projets-sites-web-creation-graphique
Exemple de zoning[1]

1.2. Les wireframes

Les wireframes s’appuient sur le zoning et permettent d’indiquer le contenu présent dans chaque zone de la page web ainsi que de structurer l’interface. Cette étape a pour principale vocation de décrire les fonctionnalités du site web. Nous ne sommes toujours pas dans l’aspect graphique du site, puisqu’il s’agit ici d’avoir un point de vue fonctionnel et ergonomique.

Cette fois, l’objectif est de décrire de manière précise ce que contient la page, pour savoir où sont les éléments, quelles sont leurs tailles, leurs comportements…

Par exemple, il est possible de spécifier qu’au survol d’un lien, une info bulle apparaîtra avec un texte particulier. Nous pouvons aussi indiquer que les onglets du menu auront plusieurs états : un état vierge (il ne se passe rien), un état survolé, un état cliqué, etc.

Par ailleurs, dans le cadre d’un site marchand, les wireframes doivent décrire toutes les étapes du processus d’achat, de la mise en panier à la commande, en passant par l’identification et le choix du mode de paiement.

wireframes-conduite-projets-sites-web-creation-graphique
Exemple de wireframe[2]

Tout étant conçu dès le départ, ces étapes évitent de perdre du temps sur des corrections inutiles, des oublis de fonctionnalités, pendant la création des maquettes ou encore pendant la phase de développement.

1.3. Production et livraison des contenus

La production des contenus est généralement de grande ampleur quelque soit la typologie du site web créé. Il nécessite souvent l’implication de plusieurs personnes. Cela va généralement du dirigeant de l’entreprise du client à l’équipe de rédaction de l’agence de communication en passant par le graphiste ou l’équipe webmarketing.

1.3.1. Contenus éditoriaux

La production de contenus éditoriaux d’un site demande beaucoup de rigueur et une connaissance importante du web ainsi que du comportement des internautes. Il faut que la lecture soit agréable et dynamique, sans oublier le référencement. L’agence de communication, et en particulier le rédacteur web, doivent veiller à respecter toutes ces contraintes qui ne facilitent pourtant pas la rédaction. Par ailleurs, la production des textes doit être réalisée avec soin puisqu’elle doit également tenir compte de la ligne éditoriale.

La nature du site a aussi son importance. En effet, nous n’écrivons pas de la même manière pour un site marchand que pour un site institutionnel. Ainsi le premier nommé devra avoir des textes qui incitent le visiteur à acheter. Le second devra véhiculer une image positive, rassurante et valorisante de l’entreprise.

Enfin, nous pouvons dissocier deux types de contenus qui seront présents sur le site. Les contenus appelés à durer sur le site tel que les pages « Qui sommes-nous ? » ou « Métiers » et les contenus ponctuels qui seront diffusés dans la partie « Actualités » ou « Blog ». Ceci permet d’avoir un discours différent, mais aussi de répartir le travail de rédaction entre les différentes parties prenantes, selon leurs compétences.

Mais avant la rédaction concrète des contenus éditoriaux par le rédacteur web, le client doit livrer à l’agence de communication ses propres textes. Ces derniers pouvant être de deux types :

  • Textes bruts : Ils sont ainsi nommés parce que ce sont des textes qui n’ont pas été retravaillés ou qui sont tirés directement des sites concurrents au client. Ils doivent permettre d’identifier la charte rédactionnelle voulue par ce dernier et concernent généralement les pages « Métiers » ou les « Fiches Produits »… Ce sont particulièrement ces contenus qui devront être retravaillés par le rédacteur web ;
  • Textes finaux : Ce sont des textes très spécifiques qui concernent directement l’entreprise. La plupart du temps, ce sont des textes liés aux valeurs de l’entreprise, son histoire… que nous retrouverons dans les pages « Qui sommes-nous ? », « Nos valeurs »…

1.3.2. Contenus graphiques

Les contenus graphiques participent non seulement à assurer une navigation agréable et intuitive, mais aussi à illustrer les propos et le discours véhiculé dans le site. Le niveau d’attente concernant la qualité des contenus graphiques est toujours très élevée, notamment parce qu’ils véhiculent l’image de la société, mais également parce que les photos dans le cadre d’un site e-commerce par exemple, participent tout autant à la vente que le prix ou les informations produits.

On distingue principalement deux types de contenus graphiques :

  • Les photos : Il est d’usage que le client fournisse l’ensemble des photos qui seront présentes sur le site. Cependant, certaines entreprises n’ont jamais engagées les ressources nécessaires pour réaliser les prises de vues des produits ou de l’entreprise. Si les photos sont d’une qualité trop insuffisante pour la mise en valeur du site, il sera nécessaire de faire appel à un photographe professionnel ;
  • Les images : Elles concernent principalement le logo, les schémas…

Après que l’ensemble des contenus éditoriaux et graphiques aient été livrés par le client, l’agence de communication peut concrètement commencer la création graphique des pages principales (maquettes) et la création des contenus.

2. Création graphique des pages principales

La création graphique des pages principales est plus communément appelé « création des maquettes ». Celle-ci intervient après la validation du zoning et des wireframes.

2.1. Brief de création graphique

La création du design est un élément fondamental dans un projet de site web puisque le graphisme véhicule l’image de l’entreprise. Cette étape ne peut commencer sans un brief créatif. En général ce brief est réalisé conjointement par le client et le chef de projet web. Le client fait part de ses désirs et les formalise à travers une liste de sites qu’il apprécie d’un point de vue graphique. Le rôle du chef de projet web sera de concilier les envies du client avec l’image que devrait véhiculer le site.

2.2. Proposition de maquettes

Briefé par le chef de projet web, le webdesigner est chargé de trouver la charte graphique du site qui représentera la base de l’identité visuelle de l’entreprise sur le web. Les maquettes sont créées en fonction du zoning, des wireframes et de l’arborescence précédemment établis. C’est la raison pour laquelle, le webdesigner créé en générale une maquette par « page clé ». Les lignes suivantes présentes une liste non exhaustive des pages les plus souvent maquettées dans le cadre d’un projet de site internet. Cette liste varie selon la typologie du site créé :

  • Page d’accueil ;
  • Rubriques (Niveau 1 de l’arborescence) ;
  • Sous-rubriques (Niveau 2 de l’arborescence) ;
  • Fiches produits (Niveau 3 de l’arborescence) ;
  • Page « Contact » ;
  • Page « Actualités » ;
  • Page « Articles » ;
  • Page « Forum » ;
  • Page « Annuaires » ;
  • Page avec une pop up…

Le web devenant de plus en plus mobile, les maquettes sont parfois déclinées en plusieurs formats selon les tailles d’écrans utilisés par les internautes. En effet, le Responsive Web Design offre une expérience de consultation optimale qui facilite la navigation sur les supports mobiles (smartphones et tablettes). Le design doit ainsi prendre en considération cette volonté des clients de créer des sites de plus en plus « mobiles », ceci se traduisant concrètement d’un point de vue graphique par l’intégration de « points de rupture » au sein des maquettes web.

2.3. La validation de maquettes

L’une des parties importante de la création des maquettes est la phase d’aller-retour entre l’agence de communication et le client. Ce dernier donne ses impressions et émet parfois le souhait d’effectuer quelques corrections. Une fois validées, les maquettes ne peuvent plus être modifiées. En effet, le client ne mesure pas toujours la complexité de la création graphique d’un site internet et pense pouvoir apporter des modifications tout au long du projet et ce, même jusqu’à la livraison du site. C’est la raison pour laquelle, il est nécessaire de faire valider et signer les maquettes web.

Alors que dans le secteur de l’imprimerie, les maquettes validées sont formalisées par un BAT[3], il n’existe pas d’équivalent pour les maquettes web. Dans la plupart des cas, l’agence de communication fait signer à son client un document exprimant sa validation des maquettes pour se couvrir lors de tout changement éventuel.

3. Conclusion de la phase de création graphique

3.1. Rôles de chaque partie

Client :

  • Livrer les contenus éditoriaux et graphiques ;
  • Valider et signer les maquettes.

Agence de communication :

  • Créer le zoning ;
  • Créer les wireframes ;
  • Créer et livrer les maquettes.

3.2. Etapes

  • Etape 1 : Création du zoning ;
  • Etape 2 : Création du story-board ;
  • Etape 3 : Livraison des contenus éditoriaux et graphiques ;
  • Etape 4 : Création et livraison des maquettes ;
  • Etape 5 : Validation des maquettes.

3.3 Schéma des étapes de la phase de création graphique

schéma-conduite-projets-sites-web-creation-graphique


[1] Clever Age, 2013, Zoning, Wireframe, maquettage, prototype … : les meilleurs pratiques, ick.li/XNhu4P

[2] Voyelle, 2013, Maquette fonctionnelle, ick.li/Pa5iIz

[3] Bon à Tirer : Les maquettes sont approuvées et signées par le client, ce qui déclenche ainsi le travail de l’imprimeur qui devra se conformer à l’image du BAT tout au long du tirage

 

Laissez un commentaire

*