SALON DE COIFFURE ST-GERMAIN QUIMPER

Transcription

1 SALON DE COIFFURE ST-GERMAIN QUIMPER REALISATION D UN SITE INTERNET CAHIER DES CHARGES Jérémy GIGUELAY-GESRET 23 Février 2015

2

3 SOMMAIRE I Generalités Les acteurs du projet... 7 Les principaux acteurs Moyens techniques... 8 Hébergement... 8 Logiciel de création de contenu : Joomla... 9 Stockage des médias Images Vidéos Principaux besoins II Identité visuelle Le logo Les couleurs Les éléments graphiques La typographie Le logo : identité du salon Les titres : Grands, epurés et lisibles Les Textes : Petits, classiques et passe partout Les polices exotiques : Surprendre quand il y a besoin Les images Respect du ratio Dimensions Gestion de la transparence L image professionnelle Les icones III Contenu et presentation Page d accueil A la une Vue d ensemble Presentation Contenu Menu Presentation Contenu A ne pas manquer Presentation Contenu Agenda Presentation Contenu... 24

4 Lumière Sur Presentation Contenu Le mot de l équipe Presentation Contenu Nous trouver Presentation Contenu Pied de page Presentation Contenu Nos produits Vue d ensemble Presentation Contenu Texte d accroche Presentation Contenu Panel de marque Presentation Contenu Page de marque Presentation Contenu Nos Prestations Vue d ensemble Presentation Contenu Texte d accroche Presentation Contenu Liens vers les Sous-rubriques Presentation Contenu Page de prestation Presentation Contenu Actualités Vue d ensemble Presentation Contenu Actualité Contenu l Equipe... 37

5 Vue d ensemble Presentation Contenu Fiche collaborateur Presentation Contenu Le salon Vue d ensemble Contenu IV Module Promo Le programme de fidelite Mise en place technique Scénario d usage V Administration Panneau d administration Gestion des contenus Page d accueil Nos produits, Nos prestations, Actualité Les articles Le salon L equipe Module Promo VI Livrables Charte graphique Formation et documentation Site Assistance technique Conclusion Lexique Table des figures Annexes... 50

6 INTRODUCTION Le salon St-Germain attire depuis plusieurs années une clientèle fidèle et diversifiée de l agglomération de Quimper. Bien situé dans une galerie marchande, la fréquentation et la réputation du salon garantissent une activité viable et croissante. Ainsi, avec l aide d une vingtaine de collaborateurs Stéphane G. et Frédéric B., gérants, développent un chiffre d affaire solide. Dans le but d obtenir une meilleure visibilité de leurs prestations et de leur savoir-faire, Ils ont fait appel à la société Axellium pour la réalisation et la maintenance d un site internet : saintgermainquimper.com. Malheureusement, le produit de la société ne répond pas totalement aux besoins des gérants du salon : certaines pages ne sont pas éditables et sont devenues désuètes, le rendu de la galerie d images n est pas confortable pour l utilisateur et le coût de fonctionnement est élevé. C est pourquoi, au terme de l engagement avec la société Axellium, les dirigeants du salon ont souhaité refondre le site existant pour le rendre plus fonctionnel, plus moderne et plus représentatif de leur engagement au sein du salon. Ainsi, l objectif est d améliorer la visibilité de la société et de ses prestations sur internet parmi ses différents concurrents. Ce document définit le cahier des charges pour la réalisation du nouveau site. Il est organisé en plusieurs parties. Dans un premier temps, nous ferons le point sur les moyens techniques à mettre en œuvre ainsi que les différents acteurs du projet. La seconde partie sera consacrée à la description de l identité visuelle. Ensuite, nous présenterons pour chaque rubrique, la mise en page et le contenu proposé. La rubrique suivante aborde le nouveau programme de fidélité ainsi que les thématiques d administration. Enfin, le document se termine par la présentation des livrables du projet. Plusieurs annexes ainsi qu un lexique (définition des mots écrits en italique) sont présents en fin de document pour un support supplémentaire.

7 I GENERALITES Cette première partie généralités va servir à exposer le projet de manière macroscopique avant d aborder en profondeur les différentes rubriques. Cela débute par les rôles des acteurs du projet puis les moyens techniques à prévoir. Elle termine par une synthèse des principales attentes fonctionnelles évoquées lors de la capture des besoins. 1. LES ACTEURS DU PROJET LES PRINCIPAUX ACTEURS Nous allons débuter par définir les différents acteurs du projet par degré d implication. Les rôles définis en souligné seront utilisé dans la suite du document pour décrire les fonctionnalités du site : Stéphane G. Frédéric B. - Administrateurs: Maitres d ouvrage, ils définissent les besoins fonctionnels du nouveau site internet, valident le cahier des charges ainsi que les développements. Ils louent également les moyens techniques nécessaires. Ils alimentent le site en contenus et s occupent de son administration. Jérémy GIGUELAY-GESRET - Prestataire Technique: Maitre d œuvre. Il capture les besoins du projet et réalise l étude technique et fonctionnelle. Il fabrique l identité visuelle (logo, couleur) et développe l ensemble du site (rubriques, mise en page, module de fidélité ) hors contenu. Société d hébergement - Hébergeur : L entreprise retenue pour l hébergement rendra le site accessible aux internautes et garantira sa disponibilité. Ils seront les interlocuteurs techniques sur les moyens proposés. Collaborateurs du salon - Contributeurs: ils sont invités à s impliquer dans le site via une page présentation dédiée à chacun. Ils devront également mettre en avant les offres proposées dans le cadre du nouveau programme de fidélité. Les usagers Utilisateurs : Visiteurs du site, clients ou non, ils désignent la cible du projet.

8 Gèrent le contrat d hébergement Administrateur Proposent du contenu Crée le contenu Site Internet saintgermain-quimper.com Loue l espace Hébergeur Visitent Contributeurs Technicien Fabrique Utilisateurs Figure 1 - Schéma organisationnel 2. MOYENS TECHNIQUES Le déploiement d un site sur internet nécessite plusieurs prérequis techniques. Le premier est un hébergement. Cela va servir à stocker le site et permettre de le rendre accessible, il peut être comparé à une cellule de vente dans une galerie. A l intérieur, nous allons installer un logiciel afin de construire la vitrine et les étals de la cellule d hébergement. HEBERGEMENT L hébergement est un espace de stockage accessible par internet. Il est possible à quiconque qui dispose d une connexion à internet de devenir hébergeur et présenter des données aux internautes. Néanmoins pour des raisons de débit et de qualité d affichage, cette tâche est généralement confiée à des sociétés d hébergement. Dans le cadre du projet St-Germain coiffure, la société suggérée est OVH. Leader français dans ce domaine, OVH propose des offres adaptées pour particuliers et professionnels. Un catalogue de prestations est disponible sur le site ovh.com. Dans notre cas, l offre Perso semble la plus adaptée pour débuter. Voici ses caractéristiques : 8

9 Offre Perso Offre Pro Stockage 100 Go 250 Go Trafic Illimité Illimité Comptes 10 x 5Go 100 x 5Go Base de données 200 Mo 400 Mo Accélérateur de chargement Oui (3 accélérateurs) Oui (3 accélérateurs) Nom de domaine Inclus Inclus Tarif 1,99 HT/mois 4,99 HT/mois Tableau 1 - Comparatif d'offres d'hébergement La possession d un hébergement s effectue par location à l année. Tant qu elle est renouvelée, le site reste accessible. On associe généralement l hébergement à un nom de domaine. Ce nom est un moyen de trouver le site sur internet, cela constitue son adresse d accès. La propriété de ce nom s effectue également par une location annuelle. Dans le cas du salon, un nom est déjà existant : saintgermain-quimper.com. Nous allons le reconduire pour le nouveau site afin d y conserver ses performances de référencement sur les moteurs de recherches. LOGICIEL DE CREATION DE CONTENU : JOOMLA Une fois l espace de stockage acquis, nous pouvons débuter la création du site et de son contenu. Pour cela, je vous propose l utilisation d un logiciel CMS (Content Management System). Un logiciel CMS est conçu pour permettre la fabrication d un site élaboré et dynamique ainsi que la gestion de son contenu : rédaction d articles, gestion des commentaires, mise en page etc. C est la technologie utilisée pour les blogs (wordpress, blogspot ). Cette solution semble la plus adaptée pour le projet du salon (création d actualités, d évènements, de fiches produits ). C est pourquoi, je vous conseille le CMS Joomla. J ai retenu ce logiciel pour plusieurs raisons : Il s agit d un CMS parmi les plus répandus au monde. Ainsi, il dispose d une grande communauté et de nombreuses mises à jour Création et organisation du contenu assisté par une interface web Compatible avec les modules, il s agit de petits logiciels disponibles par milliers qui permettent l ajout de nouvelles fonctions au site (partage facebook, horloge, agenda, etc ). De ce fait, il est également possible de fabriquer un module personnalisé. Dans notre cas, le programme de fidélité Depuis la dernière version, Joomla embarque le logiciel Bootstrap qui permet d adapter la taille du site sur smartphone et tablettes 9

10 Une fois le site en ligne, il sera possible de le basculer en site marchand avec une complexité réduite Logiciel entièrement gratuit et libre de droits ce qui permet un degré de personnalisation optimal Afin de garantir la sécurité ainsi que les performances du site, il sera nécessaire de mettre à jour Joomla ponctuellement (1 fois par trimestre). Cette action sera définie dans la partie des livrables. STOCKAGE DES MEDIAS En plus de son contenu textuel, le site présentera des photos de réalisations, de promotions ainsi que des vidéos de présentation de produits ou de tutoriels. Ces éléments consomment un espace de stockage important. Voici comment ils seront organisés : IMAGES Pour les images, l espace de stockage loué à l hébergeur suffit amplement à stocker un grand nombre de photographies (+ de ). Cela sera le rôle de joomla de stocker et d organiser les images à afficher sur les différentes pages. VIDEOS L espace de stockage est également suffisant pour stocker des vidéos, néanmoins cela présente quelques inconvénients : Débits plus faibles à la lecture en raison du volume de données Vidéos à préparer avant envoi pour la rendre compatible avec tous les ordinateurs Un nombre important de vidéos pourrait permettre d atteindre la limite de stockage Aussi, pour cet usage, je vous propose la création d un compte youtube qui possède plusieurs avantages : Totalement gratuit, capacité de stockage illimité Débits et disponibilité garanties Meilleur référencement, les vidéos stockées seront présentées par google lors de recherches Transformation automatique de la vidéo d origine pour l adapter à tous les supports Possibilité d ajouter la vidéo youtube directement sur la page du site. L utilisateur la visionne en restant sur le site 10

11 3. PRINCIPAUX BESOINS Les principaux besoins exprimés résultent de l expérience de l ancien site internet ainsi que de la volonté de rajeunir la vitrine technologique du salon. Voici les lignes directrices selon lesquelles seront basées les propositions développées dans les parties suivantes : Un design moderne, élégant, clair, aux couleurs du salon Une page d accueil facile à personnaliser pour gérer les contenus à mettre en avant Une gestion des contenus pour présenter les prestations et les produits Un système de codes promotionnels sous forme de codes-barres à présenter au salon Une implication des contributeurs et des utilisateurs dans la création de contenu Une gestion du site et de son contenu adapté à un public non technique (administrateurs) Un site adapté pour une consultation sur PC, tablette ou smartphone 11

12 II IDENTITE VISUELLE L identité visuelle du site est primordiale pour une société, cela fait partie des éléments que le client va retenir dans sa mémoire. Il est donc nécessaire que la charte graphique représente l entreprise et que sa modification soit limitée. Ainsi cette identité est définie par plusieurs éléments qui seront repris dans l ensemble de la communication externe (site, salon, affiches, flyers, banderoles, lettres, annuaires, etc ) : Un logo Une palette de couleur Des éléments graphiques Une typographie Nous allons dans cette partie, décrire ce code avec un maximum de précisions. ATTENTION : les propositions ci-dessous sont susceptibles de varier légèrement lors du développement dans le but d améliorer le rendu d ensemble. 1. LE LOGO Le salon dispose d ores et déjà d un logo. Ce dernier est d ailleurs repris sur le site existant : Figure 2 - Logo actuel du site Les administrateurs ont souhaité le conserver pour la nouvelle charte graphique afin de rester en accord avec la devanture du salon. Il a toutefois été admis que le nom St-Germain ne permettait pas de faire directement le lien avec la coiffure. Ainsi quelques modifications mineures seront proposées par le prestataire technique : Ajout du mot-clé coiffure au sein du logo Modernisation et simplification du logo avec le choix d une couleur unie Différentes versions seront présentées aux administrateurs qui décideront de l aspect définitif. 2. LES COULEURS Les principales couleurs du salon sont blanc et or. Néanmoins, deux couleurs ne suffisent pas forcément pour présenter distinctement plusieurs informations. C est pourquoi nous allons enrichir la charte graphique avec une palette de nouvelles couleurs choisies pour s accorder avec celles dominantes : 12

13 Figure 3 - Panel de couleurs principales 13

14 14 Figure 4 - Panel de couleurs secondaires

15 Ces couleurs seront utilisées pour faire ressortir certaines informations du site (à définir au moment de la réalisation). Elles pourront être également incluses dans les supports de communication du salon (affiches, flyers, lettres...). 3. LES ELEMENTS GRAPHIQUES En plus du logo et des couleurs blanc et or, le salon dispose d une particularité graphique : la texture arabesque. Présente dans la vitrine du salon sous forme d une sculpture, les administrateurs souhaiteraient pouvoir l introduire sur le site afin d y ajouter une empreinte unique. La difficulté dans cette étape réside dans l équilibre d une texture trop visible qui impacterai la sobriété de la présentation et une présence trop minime qui limiterai la portée de l idée. Figure 5 - Texture arabesque De ce fait, différents scénarios seront testés lors de la réalisation du site : En fond du site en transparence En fond du logo En fond du pied de page En contour d un élément de la page d accueil En apparition dans le menu lors du survol d une rubrique avec la souris 4. LA TYPOGRAPHIE La typographie est le dernier élément qui constitue une charte graphique. Nous allons parler ici de police d écriture, qu il convient de pouvoir utiliser pour n importe quel usage. Ainsi, on dégagera un set d environ 4/5 typographies pour convenir à toutes les situations de communication. 15

16 LE LOGO : IDENTITE DU SALON La police du logo constitue l identité singulière de l entreprise. Ainsi, la police actuellement utilisée pour le site et la devanture du salon sera conservée. Figure 6 - Police 'Luna Bar' Malheureusement, cette police n est pas adaptée ni suffisamment lisible dans tous les contextes. C est pourquoi, nous allons sélectionner une police plus classique pour les titres. LES TITRES : GRANDS, EPURES ET LISIBLES La police des titres est nécessaire pour indiquer des messages de grande taille de manière très lisible. Je vous propose donc de sélectionner une police plus classique dotée quelques attraits modernes (trais fin, arrondis ). Cette police peut s utiliser dans le cadre des titres de page dans le site mais également en tête des affiches de promotion affichées dans le salon. Figure 7 - Police 'Century Gothic' LES TEXTES : PETITS, CLASSIQUES ET PASSE PARTOUT La police de texte est la plus classique du set. Elle doit permettre une lisibilité maximale dans tous les environnements de communication, indifféremment des couleurs qui l entoure que du support, virtuel ou physique de lecture. De ce fait, je vous oriente vers deux polices de plus en plus répandu pour cet usage : Century Gothic et Calibri. Cette dernière est la police utilisée pour la rédaction de ce document. 16

17 Figure 8 - Police 'Century Gothic' et 'Calibri' LES POLICES EXOTIQUES : SURPRENDRE QUAND IL Y A BESOIN Dans certains cas, les polices précédemment présentées ne permettent pas d exprimer une idée précise. On peut faire appel à des polices exotiques afin de donner une couleur ainsi qu un thème à la communication. Par exemple, on utilisera une police bariolée pour une opération à destination des adolescents ou une écriture calligraphique pour une opération à destination des femmes. Ce choix est assez personnel, c est pourquoi, je vous ai présenté la bibliothèque de polices dafont.com. L important dans le choix de la police est de conserver une bonne lisibilité du texte malgré la forme des caractères. 5. LES IMAGES Les images vont être utilisées sur le site pour illustrer une prestation, un produit ou habiller la page d accueil. Leurs sélection est à l appréciation des administrateurs. Néanmoins, voici quelques conseils pour éviter que l image ne dénature l harmonie de la présentation. RESPECT DU RATIO La première chose à respecter est le ratio de l image, sa forme. On privilégiera une illustration rectangulaire pour un bandeau de titre et une plutôt carrée pour la présentation d une prestation sur un quadrillage. 17

18 Ainsi, dans le cas où la forme de l image souhaitée ne correspond pas à la situation de présentation, il est nécessaire d appliquer un recadrage. Cette opération peut être destructrice (l image ne sera plus complète) mais elle permettra d éviter l effet de déformation. Etirement/Contraction Recadrage Figure 9 - Recadrage d'image DIMENSIONS Il arrive régulièrement que l on trouve l image recherchée mais qu elle n existe qu en petite taille. On obtient alors un effet de pixellisation sur la présentation qui devient visible à l œil. On admet que la taille minimale d une photo pour un site internet est de 800x600 pixels. En dessous, le risque d affichage de mauvaise qualité est plus important. Cela pourrait tout de même être applicable dans le cas de miniatures. Image top petite = flou 18 Figure 10 Agrandissement d une image trop petite A l inverse, si l image est trop grande son poids rendra le site plus long à charger. De même, l utilisateur pourra constater un effet d Aliasing qui ne sera pas agréable à l œil. Il faudra alors réduit la taille de l image.

19 Le schéma ci-dessous synthétise les différents cas de figures avec les actions associées : Ne pas agrandir Trop petite Trop grande Réduire avant insertion Figure 11 - Conserver la qualité des images GESTION DE LA TRANSPARENCE Dans la plupart des cas, un produit est présenté sur un fond blanc pour mieux le mettre en valeur. Or, il n est pas forcément souhaité d obtenir ce contour sur le site :.PNG.JPG Pour obtenir l effet de contours transparents souhaité, il faut être vigilant au format de l image. En effet, les images.jpg,.jpeg ne sont pas capables de gérer cette fonctionnalité. Il faut alors choisir des fichiers aux formats.png ou.gif. L IMAGE PROFESSIONNELLE Pour illustrer une actualité ou les effets d un nouveau produit, on habille généralement l article d une photo représentative. Or, ce média n est pas forcément crée dans des conditions optimales (éclairage, rendu des couleurs, modèle, angle de vue ) quand il s agit d une capture amateur. 19

20 De ce fait, il est important de préférer les images de qualité professionnelle distribuées par les fournisseurs et marques. Vous garantissez ainsi un résultat élégant qui va renforcer l attrait esthétique du site. Rendu Amateur Rendu Professionnel Figure 12 - Photos amateurs et professionnelles 6. LES ICONES Dans l objectif d enrichir l intérêt visuel du site internet, nous aurons recours à un set d icônes. Il s agit d images de petites tailles qui suggèrent une idée ou une donnée. Par exemple, une petite maison pour le lien vers la page d accueil ou une horloge pour une durée. La panoplie d icônes n est pas figée et pourra évoluer au cours du développement. Pour harmoniser l ensemble, je vous propose la mise en forme suivante : Icône ronde pour un aspect doux et moderne Couleur or de l icône pour trancher avec le blanc et reprendre la couleur de logo. Nous allons ainsi lier ces images à l identité du salon. Voici un exemple de trois icônes, type de cheveux, prix et temps : 20

21 III CONTENU ET PRESENTATION Dans cette troisième partie, nous allons aborder le contenu et la mise en page de toutes les rubriques du site. Elles seront chacune présentées par un schéma accompagné d une description des éléments. 1. PAGE D ACCUEIL A LA UNE La page d accueil est le point d entrée de tout utilisateur du site. Au-delà de la présentation attrayante, elle doit également permettre de diriger l internaute vers un ensemble de pages mises en avant. Ainsi, une attention particulière sera portée sur les détails (couleurs, icones, formes) pour obtenir l effet vitrine souhaité. VUE D ENSEMBLE PRESENTATION Pour la page principale, une présentation grand format est disponible sur l annexe 1. Figure 13 - Aperçu de la page d'accueil 21

22 CONTENU La page d accueil est organisée à l aide de plusieurs éléments : 1. Le logo : Premier élément de la page, le logo est placé en haut à gauche. Un clic dessus permettra d accéder à la page d accueil 2. Le Menu : Sur la même ligne que le logo, il permet l accès aux différentes rubriques et sousrubriques du site 3. Les actualités : Placé en dessous du menu sur le côté gauche, le bloc d actualités montre ce que l utilisateur ne doit pas rater 4. L Agenda : Aligné sur le côté droit, cet élément sert à mettre en avant les différents évènements proposés par le salon 5. La sélection d articles : En dessous des contenus d accroche, la sélection présente 3 produits ou prestations à mettre en avant dans le cas d une nouveauté ou d une promotion par exemple. 6. Le mot de l équipe : En dessous de la sélection d articles, il s agit d un petit encart de bulletin d humeur, idéal pour renforcer la proximité avec l internaute 7. L espace contact : En bas à droite de la page d accueil, il contient les éléments pour trouver et contacter le salon 8. Le pied de page : Délimite la fin du contenu de l accueil A partir de cette vue d ensemble, nous allons maintenant décrire chacun des éléments présentés. MENU PRESENTATION A la une Nos prestations Nos produits Notre Actualité Le salon L équipe Figure 14 - Présentation du bandeau de menu CONTENU Le menu présente les différentes rubriques accessibles à l utilisateur. Certaines peuvent être constituées de sous-rubriques afin d être plus précises. Néanmoins, pour plus de lisibilité, elles ne seront pas accessibles directement depuis le bandeau. Ainsi, voici la liste des différentes rubriques proposées pour le menu : Page d accueil A la une (P21.) Nos produits (P28.) Nos prestations (P.32) 22

23 Notre actualité (P.36) L équipe (P37.) Le salon (P39.) L ordre des pages est suggéré par rapport aux intérêts de l utilisateur. Il pourra être facilement modifié par la suite par les administrateurs. A NE PAS MANQUER PRESENTATION 1 3 Comment se boucler les cheveux en 5 minutes? 2 Figure 15 - Présentation du carrousel 'A la une' CONTENU L encart A ne pas manquer se présente sous la forme d un carrousel dans lequel vont défiler plusieurs articles. Chaque article est mis en avant avec une image (1) et un titre (2). Des flèches seront disponibles pour une navigation manuelle (3). A défaut, c est un défilement automatique qui sera programmé. Un clic sur cette zone redirige l utilisateur vers l article mis en avant. Le contenu de cet élément est entièrement paramétrable par les administrateurs via l interface de gestion du site. 23

24 AGENDA PRESENTATION AfterWork Couleurs d été Salon St-Germain coiffure A partir de 18h30 1 AfterWork Couleurs d été Salon St-Germain coiffure A partir de 18h AfterWork Couleurs d été Salon St-Germain coiffure A partir de 18h30 4 AfterWork Couleurs d été Salon St-Germain coiffure A partir de 18h30 Figure 16 - Présentation de l'agenda CONTENU Le salon organise régulièrement des démonstrations pour présenter un nouveau produit ou délivrer des astuces coiffures à ses clients. Ainsi, grâce à l agenda mis en place sur la page d accueil, les utilisateurs pourront être tenus informés des ateliers à venir. L agenda présente un évènement par ligne décrit avec plusieurs éléments : 1. Le mois et le jour 2. Le titre de l évènement 3. Le lieu 4. Les horaires Si possible, nous ajouterons les fonctions suivantes : Un clic sur un évènement redirige vers l article qui le présente Ajout d un bouton qui permet d ajouter l évènement dans un agenda google La création d évènement ainsi que la gestion de l agenda sera effectué par les administrateurs via le panneau d administration. 24

25 LUMIERE SUR PRESENTATION 1 2 Cover 5 Homme Le nouveau coffret Lire la suite Soin boucles express Les boucles en 5 Lire la suite Les nouvelles recrues Magalie rejoint l éq Lire la suite Figure 17 - Présentation de 'Lumière sur' CONTENU Juste en dessous du carrousel se trouve le bloc lumière sur. Il est constitué de 3 images (1) ainsi qu une petite zone de texte (2). Cet emplacement est idéal pour présenter des produits, prestations et promotions. Ainsi, lorsque l attention de l utilisateur est captée, un clic sur une vignette ou sur le texte mène directement sur l article correspondant. Le choix des produits est également paramétré par l administrateur dans l interface de gestion. LE MOT DE L EQUIPE PRESENTATION 1 «Je recommande aujourd hui pour vous le nouveau soin Kérastase Fructi-summer, pour des cheveux lisses et soyeux tout l été!» 2 3 Magalie Technicienne Kérastase Figure 18 - Présentation du mot de l'équipe 25

26 CONTENU Le bloc le mot de l équipe joue un rôle d éditorial, de bulletin d humeur. Il renforce la proximité entre l utilisateur et le site qui s adresse à lui. C est l occasion pour les collaborateurs d exprimer des anecdotes, des tests produits etc Cette tribune peut être également proposée à des clients qui souhaitent s exprimer vis-à-vis de leur expérience au salon. Le bloc se présente de la manière suivante : 1. Une photo de l intervenant (option) 2. Une citation en italique 3. Une signature NOUS TROUVER PRESENTATION 3 1 Centre commercial Géant 163 Route de bénodet QUIMPER contact@st-germain.com Du lundi au samedi de 9h00 à 19h00 en continu 4 5 Figure 19 - Présentation de la zone contact CONTENU Le bloc nous trouver ferme le contenu de la page principale. coordonnées du salon. Les données se présentent de la manière suivante : Il synthétise les principales 1. L adresse du salon 2. Le numéro de téléphone 3. L adresse de contact 4. Les horaires d ouverture 5. Un encart google maps pour visualiser son emplacement 26

27 PIED DE PAGE PRESENTATION Mentions légales Réseaux sociaux Copyright Gadget 2 (optionnel) Gadget 3 (optionnel) Figure 20 - Présentation du pied de page CONTENU Le pied de page se présente sous la forme d un encart horizontal en bas de page. Son rôle est de suggérer à l utilisateur la fin de la page. Il est également utilisé pour y inclure des mentions légales, des conditions de vente Dans notre cas, nous allons nous en servir pour marquer l élément arabesque du design mais également pour y inclure quelques gadgets. Actuellement, plusieurs idées ont été évoquées : un module Facebook qui affiche les publications, un module météo ainsi qu un petit jeu. La sélection s effectuera en fonction de la disponibilité et de l intégration de ces modules dans la page d accueil. 27

28 2. NOS PRODUITS VUE D ENSEMBLE PRESENTATION Une représentation plus grande de la page des produits est disponible en annexe 2. Figure 21 - Aperçu de la page Produits CONTENU La page principale des produits affiche à l utilisateur un texte d accroche ainsi qu un panel des marques partenaires du salon. Ces différents éléments sont détaillés ci-dessous. TEXTE D ACCROCHE PRESENTATION "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in Figure 22 - Présentation du texte d'accroche 28

29 CONTENU Le texte d accroche permet d introduire la page des produits. Il sert notamment à mettre en avant la démarche du salon dans le choix de ses produits et fournisseurs dans le but de rassurer l utilisateur. Cet élément est ajouté à la proposition initiale. De ce fait, il reste optionnel et peut être retiré de la réalisation. PANEL DE MARQUE PRESENTATION Figure 23 - Présentation du panel de marques CONTENU Le panel de marque se présente sous la forme d un quadrillage composé des logos des différentes marques proposées par le salon. L utilisateur peut alors consulter la gamme de produit de sa marque favorite en cliquant sur l icône du logo. 29

30 PAGE DE MARQUE PRESENTATION Un aperçu grand format est disponible en annexe 3. Figure 24 - Aperçu de la page des marques CONTENU Lorsque l utilisateur sélectionne une marque dans le panel, il arrive sur une page qui lui présente plusieurs informations liées à son choix : 1. Un texte d accroche sur la marque 2. Une photo de la gamme de produits de la marque 3. L affichage en intégralité du dernier article lié à la marque 4. Un ensemble d articles liés à la marque 30

31 En ce qui concerne le point numéro 3, il serait tout à fait possible de conserver quelques éléments de la fiche produit (prix, type de cheveu) sous la forme d une entête d article afin d harmoniser la présentation des produits. L OREAL COVER 5 Mis en ligne le : 16 Avril h12 Cheveux secs 50 Figure 25 - Suggestion d'entête d'article Pour le dernier point, la présentation n est pas encore définitif car plusieurs solutions sont possibles : Un quadrillage de miniatures d articles Figure 26 - Présentation d'un quadrillage d'articles (jeuxvideo.com) Une liste de titre d articles Figure 27 - Présentation d'une liste d'articles (jeuxvideo.com) Un classement par année de publication Ainsi plusieurs essais seront effectués lors de la réalisation. En effet, il s agit de trouver l équilibre entre un trop grand nombre de vignettes et une quantité importante de texte qui réduirait le confort de lecture et la lisibilité de la page. 31

32 3. NOS PRESTATIONS VUE D ENSEMBLE PRESENTATION Une représentation plus grande de la page des produits est disponible en annexe 4. Figure 28 - Aperçu de la page 'Prestations' CONTENU La rubrique prestations ressemble fortement à celle des produits afin d homogénéiser la présentation du site. Ainsi on retrouve des éléments communs sur la page principale : Un texte d accroche Des liens vers les descriptions de prestations 32

33 Par contre, les prestations ne permettent pas l affichage par marque. De ce fait, nous allons remplacer ce bloc. Plusieurs propositions sont possibles : o o o o Une grille de tarifs de l ensemble des prestations La mise en avant des prestations les plus populaires Les prestations événementielles/temporaires TEXTE D ACCROCHE PRESENTATION "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in Figure 29 - Présentation du texte d'accroche CONTENU Le texte d accroche introduit la rubrique des prestations. Il permet de mettre en avant le savoir-faire et l exclusivité de certaines prestations au salon St-Germain. Tout comme pour les produits, cet élément est optionnel et peut être retiré de la réalisation. 33

34 LIENS VERS LES SOUS-RUBRIQUES PRESENTATION Figure 30 - Présentation des liens vers les prestations CONTENU Il est possible de classer des produits par types ou par marque, néanmoins, cela n est pas forcément réalisable avec les prestations. Un lissage n est pas une coupe et des mèches ne sont pas des couleurs. De plus, l offre de prestations est en constante évolution en fonction des modes, des saisons, de la formation des collaborateurs, etc De ce fait, la rubrique présente un panel de prestations sous la forme d un quadrillage de vignettes accompagnées du nom de la prestation. La particularité de cette partie sera de pouvoir évoluer et être mise à jour régulièrement pour s adapter à l actualité du salon. Nous pourrions aussi imaginer un code couleur pour le contour d une vignette ou un élément graphique pour caractériser l offre (nouveauté, promo, valeur sûre, rapide, top budget ) 34

35 PAGE DE PRESTATION PRESENTATION LE LISSAGE FRANCAIS Mis en ligne le : 16 Avril h12 1h30 50 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Figure 31 - Présentation de la page de prestation CONTENU La page d une prestation se présente comme un article. Organisée à la manière d un document Word, son organisation est dirigée par le rédacteur. L objectif de cette page est de mettre le focus sur une prestation particulière, en expliquer le déroulement au client mais aussi pour mettre en avant le savoir-faire du salon (par exemple, à l aide quelques photos de réalisations). De même, pour rendre cette partie plus homogène avec le reste du site, nous pourrions reprendre l idée d entête de prestation avec l utilisation de quelques icones (durée et prix notamment). 35

36 4. ACTUALITES VUE D ENSEMBLE PRESENTATION Figure 32 - Aperçu de la page 'Actualité' CONTENU La page d actualité se présente sous la forme d un blog. Son rôle est de mettre en avant une actualité. Cela peut être l arrivée d un nouveau produit, un évènement, une démonstration, informer de nouvelles horaires ou de fermetures, diffuser des messages généraux La création de ce contenu s effectue depuis le panel d administration. Les articles s ajoutent automatiquement les uns en dessous des autres dans la page d actualité du plus récent au plus ancien. Cela permet ainsi de fabriquer une mémoire du site. Concrètement, cette page affiche un ensemble de résumés d articles accompagnés d une image d illustration si possible. L article complet est consultable en cliquant sur le bloc de résumé. Pour la présentation, plusieurs options sont possibles : une ligne par article, un carré par article avec image... Des essais seront réalisés pour conserver le meilleur rendu lors du développement. 36

37 ACTUALITE CONTENU Les articles rédigés peuvent être de longueur différentes. De ce fait, on utilise un résumé pour permettre l affichage d un ensemble d articles de même taille. L article complet est consultable lors d un clic sur le résumé. En ce qui concerne la présentation de cet affichage, la rédaction d un contenu se déroule à la manière d un document Word. Ainsi, l administrateur est libre d organiser l information en fonction de son besoin. Pour un contenu de qualité, il est important de respecter les conseils indiqués dans la partie Charte Graphique. 5. L EQUIPE VUE D ENSEMBLE PRESENTATION Un clic sur le trombinoscope affiche la fiche collaborateur Figure 33 - Aperçu de la page 'L'équipe' CONTENU La page d équipe présente l ensemble des collaborateurs du salon sous la forme d un trombinoscope. Un clic sur un visage ou un nom affiche la fiche collaborateur. 37

38 Il peut exister d autres formes plus originales pour présenter l équipe de manière dynamique et visuelle. Ces possibilités seront étudiées lors du développement FICHE COLLABORATEUR PRESENTATION 1 Nathalie Tiff Technicien Kerastase 4 2 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 3 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non MES COUPS DE COEUR J AI TESTE POUR VOUS! Lorem ipsum dolor sit Lorem ipsum dolor sit 5 6 Lorem ipsum dolor sit Lorem ipsum dolor sit MES REALISATIONS 7 CONTENU La fiche collaborateur est une sorte de carte d identité d un membre de l équipe du salon. Elle présente plusieurs informations sur le salarié. Son contenu est à l initiative du collaborateur qui sera en mesure de transmettre des mises à jour à l administrateur. Elle présente : Le nom et le prénom du collaborateur 2. Sa photo (au choix du collaborateur) 3. Un paragraphe de présentation (sa personnalité, sa carrière, ses formations/diplômes) 4. Sa spécialité (optionnel) 5. Les produits et prestations qu elle recommande 6. Elle a testé pour vous! présentation d un produit ou d une prestation essayée par le collaborateur 7. Ses réalisations : entre 1 et 10 photos sous forme d une galerie

39 6. LE SALON VUE D ENSEMBLE CONTENU Cette dernière rubrique sert à présenter le salon St-Germain, son histoire, son inspiration, ses valeurs. Il s agit ici d une page à contenu fixe qui n est pas censé subir d évolution majeure. Tout comme les actualités, la présentation de cette page est libre à la manière d un document de traitement de texte. Le contenu présenté est rédigé par les administrateurs. Pour améliorer l interactivité de la présentation, il est possible de mettre en place les informations sous forme frise chronologique par exemple. D autres présentations pourraient être compatibles. Les différentes solutions seront étudiées lors du développement. 39

40 IV MODULE PROMO 1. LE PROGRAMME DE FIDELITE Le salon à la volonté de développer un nouveau programme de fidélité en marge du site internet. Les objectifs sont multiples, le système doit fonctionner sur plusieurs types d actions : Bon de réduction sur une prestation ou un produit Fidélisation (réduction au bout de X prestations) Parrainage Déstockage Jeu (par exemple, cacher des bons sur certaines pages du site) 2. MISE EN PLACE TECHNIQUE Pour répondre à ces contraintes, un module spécifique sera développé au sein du CMS Joomla. C est un système de code barre qui sera utilisé. En effet, ce dernier peut s interfacer avec la caisse du salon et permet ainsi un contrôle pointu sur les usages : Date de début, date de fin de validité Nombre d utilisation Associer les utilisations à des collaborateurs De plus ce mode de fonctionnement permet de former rapidement les collaborateurs et représente une faible charge de travail supplémentaire au quotidien. Pour la mise en œuvre, l administrateur disposera d un menu spécifique dans le panneau d administration du site. Ce menu permettra de créer, modifier et supprimer des codes-barres à l aide des données suivantes : Numéro du bon (généré automatiquement) Code barre (généré automatiquement) Nom du bon Description de l action du bon (conditions particulières) Date de début et de fin de validité Nombre d usage maximum (à indiquer dans le champ stock de la caisse du salon) Une note à l attention des collaborateurs Ainsi, lorsqu une action de création ou modification est effectuée, il sera possible d imprimer un Bon d application à transmettre au salon pour l enregistrement dans la caisse. Le scénario d usage est définit ci-dessous. 40

41 3. SCENARIO D USAGE Création du bon de promotion Impression du bon d application Création du bon dans la caisse Utilisation du bon sur la caisse Figure 34 - Scénario d'usage des bons de promotion 41

42 V ADMINISTRATION Cette partie décrit le panel d actions réalisables par l administrateur du site sans avoir à faire appel à des compétences techniques. Toutes les autres actions nécessitent des développements ainsi qu une maintenance supplémentaires. 1. PANNEAU D ADMINISTRATION Le panneau d administration est la porte de derrière du site. C est à partir de cette page (protégée par mot de passe) que l intégralité du site sera géré. Elle permet la gestion de paramètres très généraux (heure, nom du site, langues ) à d autres plus pointus (référencement, base de données ) qui seront automatiquement répercutés pour le visiteur. Figure 35 - Interface d'administration de Joomla 2. GESTION DES CONTENUS Les éléments ci-dessous décrivent les principales actions réalisables par l administrateur via le panel d administration. PAGE D ACCUEIL La page d accueil a été définit suivant les besoins du salon. La disposition des éléments ne pourra pas être éditée, par contre, il sera possible de modifier : 42

43 Les éléments à la une L Agenda Les produits et prestations lumière sur L éditorial Les paramètres des gadgets (météo, facebook, jeu ) NOS PRODUITS, NOS PRESTATIONS, ACTUALITE Dans cette nouvelle version, les pages produits, prestations et actualités sont construites à l aide d articles. C est la manière de configurer l article qui va le répartir sur la bonne page. Ainsi, ces rubriques sont mises à jour automatiquement. Il sera uniquement possible de modifier les éléments suivants : Nos produits o Page principale Texte d accroche Ajout/Suppression d une marque o Page de marque Texte d accroche Photo de la gamme de la marque Nos prestations o Page principale Données sous le quadrillage de prestations (grille de tarifs par exemple) LES ARTICLES Les articles vont occuper une place centrale dans la présentation des informations. L administrateur sera en mesure d ajouter, de modifier, de supprimer des articles. Il sera également possible d effectuer des actions avancées parmi : Rédiger un article sous forme de brouillon (l article ne sera pas visible du visiteur tant qu il n aura pas été publié) Programmer la mise en ligne d un article Renseigner des mots-clés ou tags sur un article (utilisé pour afficher l article sur la bonne page ainsi que le référencement) Inclure l article dans une catégorie (utilisé pour afficher l article sur la bonne page) En termes de création, l interface pour rédiger l article s apparente à un logiciel de traitement de texte. Il est ainsi possible de mettre en forme le texte (gras, italique, puces, numéros, titres ), le paragraphe (aligné à gauche, à droite, au milieu) et d y ajouter photos, vidéos, liens, etc 43

44 LE SALON La présentation du salon est une page relativement fixe. Aussi suivant le degré d interactivité choisi pour l afficher, il s agira d un article (facile à modifier dans la gestion des articles) ou d un module (degré variable de modification suivant le module choisi). Quel que soit le cas retenu, il sera possible d ajouter, modifier ou de supprimer du contenu de cette présentation. L EQUIPE La rubrique équipe se présente sous la forme d un trombinoscope des collaborateurs du salon. Un clic sur une photo déclenche l apparition d une fiche d identité. Pour des raisons de dynamisme, nous allons privilégier un module pour cette rubrique. Ce dernier pourra être configuré pour ajouter, modifier ou retirer un collaborateur via le panel d administration. 3. MODULE PROMO Le module promo est décrit dans la partie 4. En termes d administration, il sera possible de créer, modifier, supprimer et imprimer des codes-barres. 44

45 VI LIVRABLES La partie livrable définit l ensemble du contenu fourni pour la réalisation du site. Plusieurs domaines sont concernés, les différents éléments sont indiqués ci-dessous. 1. CHARTE GRAPHIQUE Pour la charte graphique, voici l ensemble des éléments qui seront mis à disposition des administrateurs : LOGO o o Format.PNG avec contour transparent Tailles : A3, A4, A5, A6, carte de visite, Site web grand format, site web petit format COULEUR o Un tableau qui référencie les codes couleurs présents sur le site POLICES o Luna Bar o Century Gothic o Calibri ICONES o SITE o Un set d icônes pour aider à illustrer les caractéristiques des produits et prestations 3 tailles (Grand pour impression, moyen, et petit pour le site), format.png avec contour transparent Une icône Tarif Une icône Durée Une icône Type de cheveux Ensemble des éléments graphiques qui permettent de réaliser le design du site 2. FORMATION ET DOCUMENTATION Un ensemble de documents seront fournis comme support pour les actions courantes du site : Rédaction et gestion des articles Définition des catégories et mots clés pour l organisation des articles Gestion de la page d accueil Utilisation du module PROMO D autres documents pourront être mis à disposition en fonction du besoin. 3. SITE Le livrable du site comprend l ensemble de son squelette divisé en plusieurs parties. Cela ne comprend en aucun cas le contenu des pages dont la rédaction sera à la charge des administrateurs. 45

46 Le développement de ce livrable est le plus important. Ainsi, en vue d une mise en production progressive, je vous propose un ordonnancement en lot afin d ajouter les fonctions au site petit à petit. Cela permet ainsi de réduire la durée d indisponibilité suite au changement de prestataire mais également de permettre aux administrateurs de commencer la saisie des données. Voici l étalement proposé : Lot 1 o o o Lot 2 o o o Lot 3 o o Lot 4 o o Lot 5 o o Lot 6 o Page d accueil en mode dégradé (partie nous contacter uniquement) Rubrique Actualités pour la saisie d articles Documentation sur la gestion des articles Page d accueil complète Rubrique Le salon Documentation de gestion de la page d accueil Rubrique Nos Produits Documentation de gestion de la page Nos Produits Rubrique Nos prestations Documentation de gestion de la page Nos Prestations Rubrique L équipe Documentation de gestion de la page L équipe Module Promotion au format Joomla 4. ASSISTANCE TECHNIQUE Au-delà de l administration quotidienne du site, certaines manipulations nécessitent une intervention technique : Mise à jour de Joomla Modification de la présentation d une page (disposition, couleurs, taille ) Refonte du design Ajout d un module Gestion de la base de donnée De même, les administrateurs peuvent être confrontés à des incidents fonctionnels (un article n apparait pas sur la bonne page, par exemple). Pour cela, un support technique est nécessaire afin de détecte l anomalie. Aussi, cette maintenance sera assurée tout au long du processus de livraison des lots. Une fois le site entièrement livré, un nouveau processus sera à définir pour ces actions. 46

47 CONCLUSION A travers ce cahier des charges, nous avons pu définir le projet de site internet de manière macroscopique. Nous avons fait le point sur l ensemble des rubriques et données à afficher. Néanmoins, quelques détails subsistent. C est pourquoi il est nécessaire de clarifier les propositions indiquées dans les encadrées bleus avec l ampoule. Avec l achèvement de cette première phase, nous allons pouvoir déclencher le début du développement. Grâce à cela, il sera possible d ajuster quelques paramètres mais également de tester différentes dispositions des contenus. De ce fait, de nouveaux échanges seront à prévoir au fur et à mesure pour valider les développements réalisés. La livraison du site sera effectuée en plusieurs parties. Chaque livrable fera l objet d une recette (validation des fonctionnalités) puis d une mise en production sur le nouvel espace d hébergement. Une communication sera mise en place sur le site pour les opérations de maintenance. 47

48 LEXIQUE Aliasing : En informatique, une image est définie par des pixels carrés. De ce fait, il n est pas possible de dessiner une ligne diagonale parfaitement droite, on obtient un effet d escalier : c est l Aliasing. Cet effet peut être constaté lors de l agrandissement d une image trop petite ou la réduction d une image trop grande. Une transformation d image avec un logiciel adapté réduit ce phénomène. Boostrap : C est un Framework CSS. Cette boite à outil de design permet de dessiner des interfaces internet adaptée à l ensemble des navigateur (Internet Explorer, Firefox, Google Chrome, Safari ) et l ensemble des supports (PC, tablettes, smartphone) avec une grande flexibilité. Charte Graphique : Il s agit d un guide de spécifications qui permet de représenter l identité d une institution. Cela permet d obtenir une forte cohérence dans les supports de communication et définit les règles de bonne conduite de style lors de la réalisation de documents. CMS (Content Management System) : Un CMS est un Framework web spécialisé dans la gestion des contenus. Il est la base du site, on lui ajoute ensuite des paramètres, des fonctions et du contenu afin de modeler le rendu final CSS (Cascading Style Sheets): Langage de programmation web spécialisé dans le style des pages internet. On l utilise pour définir les polices d écritures, les couleurs, les formes d une page d un site. Framework : En développement, le framework est une sorte de boite à outils. C est un logiciel qui contient un ensemble d actions récurrentes préprogrammées destinés à faire gagner du temps pour se concentrer sur les fonctionnalités spécifiques du projet. Hébergement : Un hébergement est un espace de stockage sur internet géré par un tiers. Il peut se présenter soit comme un disque dur (stockage simple), soit comme un serveur dédie (ordinateur en location). Les données de cet espace sont consultables sur internet. Icônes : Image de petite taille qui permet de définir une caractéristique ou une fonction. Lien : Un lien est un texte ou une image dont le clic permet de déclencher le chargement d une nouvelle page. Cela permet d aiguiller la navigation du visiteur sur le site. Logo : Image associée à l identité du salon. Elle est utilisée dans plusieurs contextes de communications (site, lettre, flyer, affiche ). Menu : Le menu défini la liste des pages accessibles à l utilisateur. Il se trouve dans le haut de chaque page sous forme d une barre horizontale. 48

49 Module : Un module est un bloc logiciel destiné à ajouter de nouvelles fonctions à un site. A la manière d un LEGO, l avantage du module est de pouvoir être ajouté ou retiré facilement sans interférer sur le fonctionnement général du site. Nom de domaine : adresse permettant d accéder au site internet par un navigateur. Le nom de domaine est composé d une chaine de caractère ainsi qu un indicatif de pays séparée par un point (exemple : saint-germain-quimper.com). Le nom de domaine dispose d un propriétaire qui peut l utiliser pour d autres usages (exemple : créer des adresses mail contact@saint-germain-quimper.com, rdv@saintgermain-quimper.com ou encore magalie.d@saint-germain-quimper.com ). L obtention du nom de domaine s effectue par une location annuelle auprès d un prestataire spécialisé. Palette de couleur : représente un ensemble de couleurs dans une charte graphique Référencement : Sur internet, on accède généralement aux différents sites via un moteur de recherche. Celui-ci collecte continuellement des informations sur chaque site afin de consolider sa base et proposer des résultats le plus pertinent possible. On dit alors qu il référence un site. De ce fait, il est possible de paramétrer dans le site des données de référencement afin de faciliter le travail des moteurs de recherches et ainsi améliorer la position du site dans les résultats de recherche proposés. Rubrique : Une rubrique est une page de contenu du site. La rubrique est directement accessible depuis le menu. Ainsi, chaque élément présent dans le menu constitue une rubrique. Sous-Rubrique : Dans certains cas, il est difficile de regrouper les données au sein d une rubrique trop large (par exemple : la page nos produit peut concerner des shampoings, des gels ou des soins. Il est alors intéressant de créer une sous-rubrique pour chaque type de produits). Il est alors nécessaire d organiser la rubrique en plusieurs sous-rubriques. Les sous-rubriques ne sont pas directement visibles de l utilisateur. Elles s affichent lors du survol du curseur de la souris sur la rubrique dans le menu. 49

50 TABLE DES FIGURES Figure 1 - Schéma organisationnel... 8 Figure 2 - Logo actuel du site Figure 3 - Panel de couleurs principales Figure 4 - Panel de couleurs secondaires Figure 5 - Texture arabesque Figure 6 - Police 'Luna Bar' Figure 7 - Police 'Century Gothic' Figure 8 - Police 'Century Gothic' et 'Calibri' Figure 9 - Recadrage d'image Figure 10 Agrandissement d une image trop petite Figure 11 - Conserver la qualité des images Figure 12 - Photos amateurs et professionnelles Figure 13 - Aperçu de la page d'accueil Figure 14 - Présentation du bandeau de menu Figure 15 - Présentation du carrousel 'A la une' Figure 16 - Présentation de l'agenda Figure 17 - Présentation de 'Lumière sur' Figure 18 - Présentation du mot de l'équipe Figure 19 - Présentation de la zone contact Figure 20 - Présentation du pied de page Figure 21 - Aperçu de la page Produits Figure 22 - Présentation du texte d'accroche Figure 23 - Présentation du panel de marques Figure 24 - Aperçu de la page des marques Figure 25 - Suggestion d'entête d'article Figure 26 - Présentation d'un quadrillage d'articles (jeuxvideo.com) Figure 27 - Présentation d'une liste d'articles (jeuxvideo.com) Figure 28 - Aperçu de la page 'Prestations' Figure 29 - Présentation du texte d'accroche Figure 30 - Présentation des liens vers les prestations Figure 31 - Présentation de la page de prestation Figure 32 - Aperçu de la page 'Actualité' Figure 33 - Aperçu de la page 'L'équipe' Figure 34 - Scénario d'usage des bons de promotion Figure 35 - Interface d'administration de Joomla

51 ANNEXES ANNEXE 1 : PRESENTATION DE LA PAGE D ACCUEIL ANNEXE 2 : PRESENTATION DE LA PAGE PRODUITS ANNEXE 3 : PRESENTATION DE LA PAGE DES MARQUES ANNEXE 4 : PRESENTATION DE LA PAGE PRESTATIONS ANNEXE 5 : PRESENTATION DE LA PAGE ACTUALITES 51

52 ANNEXE 1 : PRESENTATION DE LA PAGE D ACCUEIL 1 2 LOGO A LA UNE NOS PRODUITS NOS PRESTATIONS ACTUALITE L EQUIPE A NE PAS MANQUER 3 AGENDA 4 Titre de l article LUMIERE SUR 5 LE MOT DE L EQUIPE NOUS TROUVER 6 7 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris Adresse 8 PIED DE PAGE Mentions légales Gadgets Module météo 52

53 ANNEXE 2 : PRESENTATION DE LA PAGE PRODUITS NOS MARQUES "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 53

54 ANNEXE 3 : PRESENTATION DE LA PAGE DES MARQUES 1 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 2 TITRE DE L ARTICLE LE PLUS RECENT 3 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." PLUS D ARTICLES SUR LA MARQUE (SUGGESTION DE PRESENTATION NON DEFINITIF) TITRE Résumé de l article Voir Plus TITRE Résumé de l article Voir Plus TITRE Résumé de l article 4 Voir Plus TITRE Résumé de l article Voir Plus TITRE Résumé de l article Voir Plus TITRE Résumé de l article Voir Plus 54

55 ANNEXE 4 : PRESENTATION DE LA PAGE PRESTATIONS NOS PRESTATIONS "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Frisage Couleur Pointes Lissage NOS TARIFS (NON DEFINITIF) 55