Page 1

1


1

Présentation......................................................................................................p.4

2

Cahier des charges détaillé......................................................................p.5

3 Choix 4

sommaire

& justifications....................................................................................p.9 - Charte graphique.........................................................................p.9 - Fonctions ergonomiques...........................................................p.9 - Promotion du site..........................................................................p.11 - Maintenance du site....................................................................p.13

Devis ...................................................................................................................p.14

5 Recherches documentaires......................................................................p.16 - Analyse de l’existant...................................................................p.16 - Analyse concurrentielle............................................................p.17 6 Présentation graphique.............................................................................p.18 - Identité visuelle............................................................................p.18 - Ergonomie......................................................................................p.20 7 Description du site web.............................................................................p.21 - Storyboard......................................................................................p.21 - Site internet...................................................................................p.22 - Visuels..............................................................................................p.23 8 Back-office.......................................................................................................p.26 - Arborescence & Storyboard..................................................p.26 - Guide d’utilisation.......................................................................p.27 - Visuels..............................................................................................p.28 9 Bilan.....................................................................................................................p.29 - Bilans personnels.........................................................................p.29 - Bilan de l’agence.........................................................................p.30 10 Ressources........................................................................................................p.31 - Webographie.................................................................................p.31 - Annexes.............................................................................................p.31 3


présentation Nicole Lecomte, propriétaire de La Villa BellaVista située à Antibes loue sa propriété grâce à son site http://villabellavista.fr. Cependant, suite à un problème technique dû à la suppression des textes par l’hébergeur, le site n’a plus de contenus, la refonte du site Villa BellaVista est donc impérative afin d’avoir un site fonctionnel le plus rapidement possible. Par ailleurs, cette refonte est l’occastion de rendre le site plus attractif, mais aussi plus adapté à la clientèle et axé notamment sur les visuels de la villa. Ce site a pour objectif principal la diffusion de l’offre de location de la villa et doit permettre d’établir un dialogue entre les clients potentiels et la propriétaire. Enfin, les clients étant souvent d’origine anglo-saxonne, il est indispensable que le site dispose d’une version anglaise. Tout d’abord, deux cibles distinctes ont été identifiées : Les familles françaises et anglo-saxonnes comprises dans une tranche d’âge d’environ 35 à 55 ans avec des enfants, vivant plutôt dans des grandes villes avec une situation de CSP++. Ces familles privilégient les endroits plutôt paisibles et reposants avec des activités proches pour leurs enfants, dans un cadre haut de gamme. Les retraités de toutes nationalités d’environ 55 à 70 ans, anciens CSP++, souhaitant profiter du confort d’une villa en France dans un cadre d’exception. Afin de s’adapter au mieux à la demande du client et à la cible, nous avons fait des recherches benchmarking, c’est-àdire notamment une analyse concurrentielle qui nous permet de cibler ce qui se fait sur le secteur de la location de villa haut de gamme mais aussi les défauts de ces sites pour ne pas reproduire les mêmes erreurs et repenser celles qui nous semblent adaptées pour le site Villa BellaVista.

4


cahier des charges détaillé 1. projet Ce site a pour objectif principal la diffusion de l’offre de location de la villa. Il doit par ailleurs permettre d’établir un dialogue (par mail) entre les clients potentiels et la propriétaire. Les clients étant souvent d’origine anglo-saxonne, il est indispensable que le site soit complété d’une version anglaise.

2. Maître d’ouvrage et maître d’oeuvre Auprès des agences, le Maître d’ouvrage (MOA) doit : -

valider les phases de choix (graphisme, ergonomie, contenus) ; valider le respect du cahier des charges ; veiller au respect des délais ; fournir les contenus de base (textes, plaquettes, logos, images, photos).

Le maître d’oeuvre (MOE), vis-à-vis du client, se destine à : - Concevoir et réaliser le site internet ; - Respecter les délais ; - Proposer un planning et un devis pour la réalisation de la prestation.

3. Cibles et objectifs Ce site comporte plusieurs cibles : - familles françaises ; - familles anglo-saxonnes ; - retraités de toutes nationalités. Ce site n’est pas un site de vente à proprement dit mais plutôt un site informatif. Il doit être un support de communication qui permet de faire découvrir la villa aux potentiels clients ainsi que de fidéliser la clientèle en donnant une image moderne et sereine de la villa. 5


4. Contraintes

cahier des charges détaillé

Comme tout projet, des contraintes subsistent. Tout d’abord, nous avons des contraintes temporelles; en effet, nous avons des dates clés à respecter. Le projet se divise en deux étapes symbolisées par deux rendus : - Rapport de Conception (03/02/2014); - Rapport final (27/02/2014). Mais aussi des contraintes en terme de contenus puisque les ressources disponibles pour la réalisation du site comprennent des images en petit et grand format (.jpg) et des textes, en format .txt Ensuite, le site internet devra proposer les contenus en français, et en anglais, en fonction des cibles. Par ailleurs, le site web devra être responsive afin que le client puisse le regarder sur les différents supports. Pour finir, les données relatives au back-office seront stockées dans une base de données MySQL.

5. Arborescence L’architecture du site est simple et la version tronquée des textes actuellement en ligne http://www.villabellavista.fr permettent d’appréhender simplement l’arborescence. En complément, le client fournit les fichiers d’un site équivalent http://www.gitecamelia.fr/ afin de mieux comprendre l’architecture du futur site et notamment la mise en forme des futurs textes.

6 - Prestations attendues 6.1 - Charte graphique et charte éditoriale - une recherche graphique et iconographique ; - une réflexion ergonomique et la définition d’un système de navigation ; - des propositions de mise-en-page et de charte éditoriale. 6.2 - Création et récupération de contenus : - adapter à une présentation web tous les contenus fournis ; - créer les éléments graphiques (fond de page, boutons, icônes...). 6


cahier des charges détaillé 6.3 - Développement La programmation proprement dite du back-office et le traitement du formulaire de collecte d’informations devront se faire dans les langages de développement classiques à savoir : PHP5, XML, MySQL, CSS3. La diversité actuelle des supports de communication implique de penser la création de ce site en « Responsive Web Design ». 6.4 Maquette du site Afin de valider le site, l’agence devra fournir une maquette afin de vérifier que le site est conforme aux objectifs : navigation, graphisme, mise-en-page et charte éditoriale. 6.5 Dépôt du nom de domaine et hébergement du site Le nom de domaine du site villabellavista.fr est déjà déposé. 6.6 Référencement Le prestataire proposera au client plusieurs solutions possibles pour le référencement du site tenant notamment compte du public visé, ainsi que de la vocation et des contenus du site web pour le référencement naturel. 6.7 Mise à jour La mise à jour des photos et des textes est assurée par le client. C’est un impératif du cahier des charges. 6.8 Statistiques de connections Le prestataire fournira au client un accès en ligne aux statistiques de fréquentation du site. Celles-ci doivent comprendre un maximum de renseignements : - nombre d’accès visiteurs ; - mots-clés tapés par les internautes ; - moteurs et annuaires de provenance ; - nombre de visites, etc. L’ outil Google Analytics est très complet sur ce sujet. 7


cahier des charges détaillé 7 - Livrables attendus Les pièces à livrer par l’agence pendant et après la réalisation du site sont les suivantes : -

planning de réalisation avec un engagement sur la date de « livraison » ; arborescence détaillée du site ; fichiers informatiques source (pages HTML, graphismes, bases de données, programmes...) ; documents décrivant le site, son fonctionnement et son hébergement ; version du code HTML utilisée ; version des navigateurs compatibles.

8 - Obligations, propriété et droits Trois agences concurrentes ont été constituées par l’équipe pédagogique de la licence. Les agences sont encadrées par l’équipe pédagogique et ont plusieurs entrevues avec le client, afin qu’il valide ou réoriente les produits présentés. Une soutenance finale est organisée, le 27 février 2014, pour validation du travail d’une agence par le client et pour évaluation pédagogique du niveau des étudiants (travail noté). Le client s’engage à : - Mettre à disposition des agences le cahier des charges ainsi que les ressources documentaires nécessaires à la réalisation du travail demandé ; - Faciliter les prises de rendez-vous, les repérages des agences, en prenant en charge les déplacements et repas éventuels ; - Participer aux réunions, à la soutenance finale, à l’évaluation des travaux pendant toute la période du projet. L’IUT de Blois s’engage à : -

Garantir l’encadrement des étudiants de la licence ATC et assurer l’ organisation matérielle du projet ; Assurer l’organisation de l’évaluation des produits réalisés ; Assurer la réalisation des produits à la date prévue par le cahier des charges ; Céder les droits de propriété sur les produits réalisés : site Web, outils de gestion du site. 8


charte graphique

choix & justifications

La charte graphique est un élément indispensable afin de se différencier des autres sites présents sur le secteur de la location de villa, mais aussi pour que les internautes se souviennent du site. Pour cela, nous avons créé une identité visuelle au site en utilisant les couleurs du midi, le orange, le bleu turquoise et le vert mais aussi des couleurs plus familiales et luxueuses : le blanc et le gris taupe. Enfin, afin de créer une identité propre à la villa nous avons défini un logo pouvant être décliné en en-tête de facture, en carte de visite ou autres besoins si nécessaire. C’est pour cela que celui-ci est assez classique utilisant des polices simples et classes afin que celui-ci puisse être utilisé sur différents supports au fil du temps, tout en y représentant les valeurs de la villa, le haut de gamme et la confiance.

fonctions ergonomiques Tout d’abord, l’arborescence est inspirée de ce qui existe actuellement sur le site. En effet, nous l’avons revisité de manière à simplifier la navigation de l’utilisateur. Cette simplification est effectuée notamment grâce au regroupement des rubriques existantes “La Propriété”, “La Piscine”, “Les Chambres” et “Les Salles à vivre” dans une rubrique nommée “La Villa”. De même, les rubriques “Actualités”, “Tourisme” et “Services” dans la rubrique “Activités & Services” puis les rubriques “Plan d’accès” et “Contacts” dans la rubrique “Contact”. Les outils à mettre en place, les informations, langues et formulaire de contact, présents dans le cahier des charges du client sont bien présents sur le site. Cependant nous avons également a jouté un filtre des pièces afin de pouvoir faire un tri parmi le grand nombre d’images fournies. Pour finir, le footer contient les informations légales qui sont obligatoires et l’espace admin permet à la cliente d’actualiser le site. Nous avons fait le choix de ra jouter le “Contactez-moi” afin de renvoyer l’internaute vers la page “Contact” mais aussi un retour vers l’accueil afin que l’utilisateur puisse y retourner s’il ne sait pas que le logo est cliquable vers l’accueil.

9


choix & justifications

Arborescence ARBORESCENCE Accueil

Villa

Tarifs & Réservations

Extérieur

Tarifs

Piscine

Module de réservations

Activités & Services

Contact

Formulaire de contact Plan d’accès

Salles à vivre

Coordonnées Propriété

Chambre

Outils Filtre des pièces (La Villa) Changement Langues (FR/EN)

Footer Informations Légales

Formulaire Contact

10


promotion du site

choix & justifications

PROPOSITIONS ON-LINE Référencement naturel : Le référencement naturel est un outil indispensable pour assurer une e-visibilité la plus efficace. Il est déjà effectué lors de la création du site internet. Nous avons sélectionné des mots clés insérés dans celui-ci afin qu’il soit au mieux référencer par Google. Par ailleurs, afin de pouvoir l’entretenir par la suite, une liste de mots-clés est présente en annexe, à utiliser en fonction des images a joutées ou des textes modifiés. Pour assurer la visibilité du site et une notoriété stable, la mise à jour du site doit être effectuée le plus régulièrement possible. Les textes doivent contenir des mots-clés précis afin que le site est un meilleur référencement possible mais aussi pour fidéliser l’internaute, la mise à jour témoigne de l’activité du site et de la fraîcheur des informations qu’on va y trouver. Cependant, d’autres sites disposant de mots-clés similaires peuvent être mieux référencés en fonction de la popularité du site et des modes de promotions web mis en place. Réseaux sociaux : L’utilisation de réseaux sociaux s’appuie sur la commuauté de fans pour faire parler de soi et attirer du monde sur son compte Facebook, Twitter et son site web. Ce système de promotion est gratuit et permet d’attirer une cible plus large. Par ailleurs, l’utilisation des réseaux sociaux est un levier pour accroître la visibilité, simplifier la diffusion d’informations, encourager la multiplicité des contenus et surtout permettre de répandre l’information (marketing viral). Cependant une stratégie marketing sur réseaux sociaux ne se résume pas à la création d’un compte Facebook ou Twitter. Une fois ces comptes créés, la vraie difficulté et le challenge consistent à ramener du trafic et ouvrir sa communauté de fans ou de followers. Relations de presse web : Les relations de presse web permettent de diffuser l’information à des professionnels (journalistes) qui viendront visiter le site et diffuseront ou pas l’information. Ce moyen de promotion est très utile notamment pour le lancement du site ou bien lors d’événements importants (refonte, nouvelles rubriques, entrée sur les réseaux sociaux…) à des journalistes, professionnels de la communication... Ce sont de très bons relais avec un réseaux de lecteurs très vaste. Cependant, créer un lien de proximité avec les journalistes est très important et doit être entretenu afin d’avoir plus de retours sur les sites de presses en ligne. Par ailleurs, l’envoi de communiqué de presse auprès des journalistes ne signifie pas la publication obligatoire d’un article, celui-ci décide s’il est intéressant ou pas pour ses lecteurs. 11


choix & justifications Netlinking - Backlinking : Le Netlinking est l’augmentation du nombre de liens hypertextes menant vers un site web, à partir de sites dont le public correspond à celui visé. Il peut se faire par échange ou achat de liens. Le Backlinking, quant à lui, consiste à être présent sur un site web menant vers le notre. Ces liens permettent d’augmenter la popularité du site et donc d’améliorer le référencement lors d’une la recherche par un internaute. Une stratégie de netlinking et backlinking est essentielle dans une stratégie marketing, cependant celle-ci est difficile à mettre en place, très encadrée, les règles sont strictes et les punitions sans appel. Les coûts peuvent également être élevés en fonction des liens effectués. Référencement payant : Le système Google Adwords (le plus connu) permet de sponsoriser des liens vers un site internet, afin de les placer en tête des pages de résultats Les liens sponsorisés apparaissent donc au sommet des pages des résultats Google. Le coût d’une campagne Google Adwords est calculé par ce que l’on appelle le Coût Par Clic. Elle fonctionne en quelque sorte comme des enchères : plus le prix allouer pour chaque clic d’internaute est élevé, plus les liens seront bien placés. Afin d’être référencé au mieux, ces campagnes sont des investissements permanents au coût très élevé.

PROPOSITIONS Off-LINE Cartes de visite : La carte de visite est un outil de communication indispensable, elle permet d’identifier clairement le détenteur tout en y attribuant une image professionnelle. Par ailleurs, elle crée un lien de proximité entre les deux parties et facilite le contact. Celles-ci pourraient être présentes au sein de la villa afin que les locataires puissent contacter la propriétaire pour tout problèmes ou questions. Papiers à en-tête : Tout comme la carte de visite, le papier à en-tête permet d’identifier clairement le destinataire tout en renvoyant une image professionnelle. Il devient un outil indispensable afin de rassurer le client sur l’officialité du document (devis, facture, courriers divers…) et créer un lien de confiance entre les deux parties. 12


choix & justifications Plaquettes de présentation : L’utilisation d’une plaquette de présentation permet de rappeler les différentes informations présents sur le site mais en version papier. Elle peut être présente dans la villa afin de rappeler le site internet mais principalement par rapport aux activités touristiques environnantes, mais aussi en y intégrant les services proposés au sein de la villa ou bien le contact auprès de la propriétaire pour tout problèmes.

maintenance du site Afin que le client puisse mettre à jour son site internet régulièrement, un back-office permet d’actualiser les photos présentes dans la page Villa mais aussi de modifier tous les textes du site. Pour cela, un onglet est présent sur le site nommé “Espace Admin” où après la connexion, l’administrateur peut effectuer ces changements. Un guide d’utilisation est présent sur la page d’accueil du back office afin d’expliquer en détails la gestion du site. A l’arrivée sur le Back-Office, l’utilisateur est confronté à une connexion sécurisée identifiant : bellavista mot de passe : vista270214 Extrait du guide d’utilisation : « Dans un premier temps, vous devrez choisir l’onglet à modifier : Accueil, La Villa, Tarifs & Réservations, Activités et Services situé dans l’en-tête. Par la suite, vous avez la possibilité de modifier les textes de chaque catégorie grâce à un module de traitement de texte (type Word). A gauche, la possibilité de modifier la version française et à droite la version anglaise. Dans ce module vous avez la faculté de changer le titre des pages, les sous-titres mais aussi tout le contenu. Des outils sont mis à disposition afin de pouvoir mettre en avant certains mots-clés ou autres éléments importants. Une fois les modifications effectuées, la page se mettra à jour en cliquant sur “Envoyer”.

13


Feuille1

devis

DEVIS Site Villa BellaVista

Agence CinqPointHero* 128 rue Jean Jaurès 41000 Blois Tél : 02 54 55 21 17 Fax : 02 54 55 21 17 E-mail : rafael.lopes@cinqpointhero..com Nicole Lecomte 45, corniche des Cougoulins 06600 Antibes Tél : 06 18 48 11 79

DEVIS prévisionnel Etant une jeune agence, nos tarifs sont effectivement bas puisque le temps à effectuer le projet sera plus long faute de d’expérience en gestion de projet mais aussi faute d’expérience de travail commun. Par ailleurs, une remise commerciale exceptionnelle de 5% est effectuée afin de rassurer le client sur l’opportunité d’un achat, ce qui permet également de fidéliser le client grâce à une remise personnelle.

Le 30 janvier 2014 Désignation

Nombre d'heures prévisionnelles Coût horaire

Montant HT (€)

COMMUNICATION Analyse concurrentielle Analyse existant Plan de communication

70

24

1680

GRAPHISME Logos Charte graphique Maquettes

70

24

1680

INTEGRATION Mobile et PC Modules jQuery

70

21

1470

DEVELOPPEMENT Base de données Affichage dynamique Back office

49

25

1225

GESTION DE PROJET

52

30

1560

Montant HT Remise commerciale Montant remise Net Commercial TVA 20% Montant TVA Montant TTC « Bon pour accord » Signature Page 1

7 615,00 € 5,00% 380,00 € 7 235,00 € 20,00% 1 447,00 € 8 682,00 €

14


Feuille1 FACTURE N°01 Site Villa BellaVista

devis Agence CinqPointHero* 128 rue Jean Jaurès 41000 Blois Tél : 02 54 55 21 17 Fax : 02 54 55 21 17 E-mail : rafael.lopes@cinqpointhero..com Nicole Lecomte 45, corniche des Cougoulins 06600 Antibes Tél : 06 18 48 11 79 Le 27 février 2014 Désignation

Nombre d'heures Coût horaire

Montant HT (€)

COMMUNICATION Analyse concurrentielle Analyse existant Plan de communication

75

24

GRAPHISME Logos Charte graphique Maquettes

72

24

1728

INTEGRATION Mobile et PC Modules jQuery

75

21

1575

DEVELOPPEMENT Base de données Affichage dynamique Back office

38

25

950

GESTION DE PROJET

35

30

1050

Montant HT Remise commerciale Montant remise Net Commercial TVA 20% Montant TVA Montant TTC « Bon pour accord » Signature Page 1

1800

facturation finale La projet de la Villa Bellavista étant notre premier projet en tant qu’agence, nous avons eu du mal à quantifier notre temps notamment à prendre en compte le temps de gestion de projet qui nous a pris moins de temps de prévu. Cependant, quelques heures sont a joutés dans tout les pôles sauf la partie développement. Nous avons donc une facture de 585 de moins que le devis prévisionnel.

7 103,00 € 5,00% 355,00 € 6 748,00 € 20,00% 1 349,00 € 8 097,00 €

15


analyse de l’existant

recherches documentaires

Après une analyse du site actuel Villa BellaVista, nous avons pu constater que, le site souffre globalement de défauts d’utilisabilité et de graphisme. En effet, le fait que le menu soit disposé sur deux lignes et qu’il comporte autant d’entrées, dont certaines mal intitulées, est très problématique en terme d’utilisabilité mais également en navigabilité puisqu’il n’y a pas de soulignage, soulignement ou symboles qui indiquent la page sur laquelle nous sommes. Par ailleurs, la page “Les chambres” disposent de différents fonctionnements puisque les miniatures du milieu changent la photo de gauche ainsi que les miniatures de droite tandis que celles de droite ouvrent des “pop-up”. De même, la couleur verte omniprésente dans le site ne permet pas de donner plus d’importance aux éléments qui en ont besoin tels que les titres de pages et ne permet pas à l’internaute de se projeter dans un univers de vacances. Enfin, le site souffre globalement du fait qu’il soit assez âgé et ne dispose pas des derniers standards afin de le rendre fluide et dynamique (lightbox, slider et responsive). Néanmoins, le chargement des nombreuses images se fait rapidement. Tout le contenu est accessible en seulement 3 clics et le formulaire de contact permet de créer un lien de proximité et de faciliter le contact pour des renseignements ou autres.

16


analyse concurrentielle

recherches documentaires

Après avoir analysé plusieurs sites de location, nous avons choisi une stratégie d’adhésion en s’inspirant de sites déjà existants tout en a joutant une pointe d’originalité qui permettra de se démarquer de la concurrence. Pour cela et afin de répondre aux attentes et exigences de la cible déterminée, nous avons sélectionné un certain nombre de points négatifs qui ne seraient pas adaptés à la cible ou qui pourraient les faire fuir. Notamment un formulaire à double entrées qui permet de contacter la propriétaire mais aussi à réserver, cela peut paraître confus en fonction des commentaires mais aussi réfractaire si le potentiel client souhaite plus d’informations et que celui-ci pense également réserver. Tout comme une musique d’ambiance qui peut elle aussi être réfractaire et perdre l’internaute. Cependant, certains critères sont, quant à eux, plus adaptés à la demande de la cliente mais aussi en accord avec la cible retenue. Tout d’abord, le menu doit être simple et intuitif. Ce qui permet d’être en cohérence avec les personnes ciblées ; en effet, les locataires sont principalement des personnes à la retraite, c’est pour cela qu’un menu standard avec des entrées simples et explicites serait plus adapté. La gestion de l’espace en format magazine permet de créer un univers chic et moderne, afin créer chez l’internaute et au futur locataire un ressenti privilégié et de répondre à la demande de la cliente qui souhaite un site axé sur les photos de la villa. Par ailleurs, une galerie de photos permettrait de mettre en avant les visuels, et grâce à un système de tri l’utilisateur pourra visionner les différentes pièces de la maison et s’y projeter. Pour finir, une accroche “contactez-moi” permettrait de créer un lien de proximité avec les internautes et faciliterait le contact et les demandes d’informations.

webographie

http://mouschetty.fr / http://lafiteniaresort.fr / http://domainehautesribes.fr / http://riadmhidou.com / http://lacriquemagique.com

De gauche a droite, 3 des sites concurrents : le Mas mouschetty, Lafitenia resort, La crique magique. 17


présentation graphique

identité visuelle le logo

elements visuels

Tout d’abord, la droiture, la confiance, la rigueur et le haut de gamme sont les maîtres mots de ce logo. Nous avons favorisé la capitale avec Serif plutôt que l’aspect manuscrit pour donner un aspect plus luxueux, et dégager une certaine classe. Par ailleurs, on met en avant le nom BellaVista, ensuite en second plan, Villa, puis le nom de la ville : Antibes. Ainsi, une lecture aisée et une présentation symétrique font foi de la simplicité et à la fois du haut de gamme du lieu.

La disposition des éléments du site avec la mise en valeur des images en plein écran se veut simple d’utilisation. Le contenu central présent en moitié texte et moitié photo permet de mettre en avant les images de la villa, et les valeurs qu’elle véhicule : Le soleil, la chaleur, les couleurs, les vacances, l’apaisement. En effet, il tend à évoquer l’utilisation d’un catalogue magazine, ainsi cela renvoie à une image pivilégiée. Par ailleurs, en ce qui concerne le header et le footer, ils sont présents tous les deux sur le site en prenant tout l’espace par sa longueur, l’association des deux favorise le principe visuel évoqué plus haut, un aspect catalogue et cinémascope. Enfin, les triangles sont des éléments importants de la charte graphique, propres au site, ils représentent le côté original et moderne du site, ces éléments permettent de facilité la mémorisation du site.

typographie La police utilisée pour les titres, header et footer est “optimus princeps regular” et “garamond regular” a été validé pour le texte courant (contenu).

OPTIMUS PRINCEPS : TITRES ET SOUS TITRES / MENUS

Garamond : Textes, contenus

18


présentation graphique couleurs Pour le site, nous avons défini une palette globale de cinq couleurs, tantôt neutres tantôt vives afin de créer une réelle identité permettant ainsi aux internautes de se souvenir du site et permettre à celui-ci de se démarquer des concurrents : Le blanc (#FFFFFF) représente la sobriété relative à l’univers du luxe. C’est une couleur lumineuse, douce, qui s’associe avec n’importe quelle autre couleur, en particulier avec les couleurs vives. Le blanc est présent sur le site dans le header et le footer afin de donner une ambiance globale lumineuse au site, relative aux vacances. se souvenir du site et permettre à celui-ci de se démarquer des concurrents : Le gris (#585858) symbolise l’univers du luxe avec la sobriété et l’élégance. Cette couleur donne un ton sérieux, professionnel et rassurant. Elle s’associe avec toutes les couleurs mais plus particulièrement avec des couleurs vives, telles que l’orange, le vert et le bleu turquoise présents sur le site.

La couleur orange (#F85708) représente le dynamisme, la chaleur et la communication. Cette couleur vive s’associe parfaitement avec des couleurs neutres telles que le gris, le blanc et le taupe et donne du punch au site web afin qu’il ne soit pas monotone.

Le vert (#B9CD2E) symbolise la nature associant ainsi l’idée de l’espérance, la chance, favorisant ainsi la concentration générale de l’utilisateur. C’est pourquoi cette couleur a été mis en évidence dès la page d’accueil à travers des éléments graphiques triangulaires, présents sur toutes les pages du site, comme ligne directrice de l’identité visuelle de la Villa BellaVista. L’avantage de cette couleur, c’est qu’elle est généralement en adéquation avec toutes les autres, particulièrement avec la couleur taupe, couleur choisie en filtre opaque où est intégré le texte de contenu. Le bleu turquoise (#39CECC) est relative à l’univers des vacances comme la mer ou la piscine, mais aussi à la fraîcheur afin que l’internaute puisse se ressourcer. Elle s’associe avec des tonalités neutres : le blanc, le gris et le taupe afin de créer un contraste et la mettre en valeur.

19


présentation graphique ergonomie du site La disposition des éléments du site avec la mise en valeur des images en plein écran se veut simple d’utilisation. En effet, les éléments du site sont disposés en sorte que notre oeil lise les informations de gauche à droite. Il tend à évoquer l’utilisation d’un catalogue magazine, ainsi cela renvoie à quelque chose de moderne, dans l’air du temps, qui accentue sur l’aspect privilège et haut de gamme de la villa. Tout d’abord pour l’en-tête, le logo, qui fait office d’onglet d’accueil, est centré pour plus de rigueur dû à sa symétrie avec deux onglets de chaque côté. L’utilisateur rencontre une navigation classique, intuitive, pour ne pas charger le site et aller à l’essentiel : le contenu. La navigation reste en place tout au long de l’usage du site, l’internaute n’est donc pas perdu et reste sur des pages qui le mettent en confiance.

mettre en avant les images de la villa, et les valeurs qu’elle véhicule : le soleil, la chaleur, les couleurs, les vacances, l’apaisement.

ZONING

Zoning (Full-screen)

HEADER

IMAGE

TEXTE

En ce qui concerne le pied de page, Il répond à l’en-tête, par sa longueur qui prend tout l’espace. L’association des deux favorise le principe visuel évoqué plus haut, un aspect catalogue et cinémascope. Il contient un onglet accueil si l’internaute souhaite retourner sur cette page et ne sait pas qu’on peut y retourner via le logo. Il dispose également des mentions légales qui ne s’ouvre pas sur une nouvelle page afin que l’internaute garde son objectif premier qui est la visite du site et son contenu. Pour finir, le contenu central découpé en deux parties, moitié contenu et moitié photo, permet d’avoir un rendu épuré, de

FOOTER

20


description du site web STORYBOARD

21


site internet

description du site web

En arrivant sur le site, l’utilisateur accède à une page d’accueil épurée aux couleurs du midi avec un modèle original mais intuitif de présentation d’images grâce à la division en deux parties distinctes : le texte et un visuel attractif. Il se compose également d’un menu constitué de quatre rubriques claires et précises permettant de faciliter la navigation de l’utilisateur : La villa, Tarifs & Réservations, Activités et Services et Contact. Sur la page La Villa, l’internaute accède à une page avec de nombreuses images de la villa où il pourra gagner du temps dans sa recherche d’informations grâce à un système de filtrage afin de pouvoir trier les différentes catégories d’images : extérieur, piscine, salles à vivre ou chambre.. En choisissant la catégorie “Extérieur”, le filtre affichera seulement les images des différentes vues de la maison, le jardin ou encore la terrasse. S’en suit le choix de “La piscine” où se trouve les nombreuses photos de celle-ci. Le filtrage “Les chambres” est constitué d’un sous-menu déroulant avec les noms des 5 chambres (Agapante, Reseda, Iris, Palmiers et Mimosas) afin de pouvoir visualiser les chambres une par une et pouvoir s’y projeter. Pour finir, le filtrage “Salles à vivre” permet d’afficher la cuisine, le salon ou bien la salle à manger. Sur la page Tarifs & Réservations, l’utilisateur peut consulter les tarifs saisonniers de la villa et par la suite la louer via un lien direct vers Abritel.fr. Sur la page Activités & Services, l’utilisateur peut consulter les différentes activités touristiques présentes dans la région ainsi que des services complémentaires facilitant la vie quotidienne du séjour du client. Cette page est divisée en deux parties avec sur la partie gauche se trouve les activités possibles lors du séjour et à droite les informations historiques de la ville et des alentours. Sur la page Contact, l’utilisateur peut demander des renseignements via un formulaire de contact, la mise en place d’un plan d’accès permettant de situer la propriété ainsi que la photo de la propriétaire et ses coordonnées. Dans le footer, l’internaute a la possibilité de changer la langue en français ou en anglais puisque la villa est aussi sollicitée par des couples anglo-saxons ou d’autres nationalités, il peut aussi visualiser les mentions légales mais aussi de contacter l’annonceur avec un module “Contactez-moi”. Par ailleurs, une entrée “espace admin” permet à l’administratrice de modifier les photos de la villa, ou bien modifier les textes en anglais comme en français afin d’actualiser son site quand elle le souhaite. Pour conclure, le site Villa BellaVista se veut axé sur les visuels de la location grâce à des images présentes sur chacune des pages mais aussi dynamique avec des couleurs méditerranéennes et ainsi mettre en avant la qualité de la villa, en version française comme anglaise. 22


visuels

description du site web

format paysage

23


description du site web

24


visuels

description du site web

format portrait

25


back office arborescence & storyboard Grâce au Back-office, la cliente pourra a jouter, modifier ou supprimer des images dans la galerie de photos située dans la page Villa et modifier tous les textes du site, en français comme en anglais. L’accès à la gestion du site se fait grâce à l’onglet “espace admin” situé dans le pied de page du site. A l’ouverture de la page, un identifiant et un mot de passe est demandé afin d’accéder à la modification des contenus.

arborescence du back office

storyboard > 26


back office guide d’utilisation A l’arrivée sur le Back-Office, l’utilisateur est confronté à une connexion sécurisée identifiant : bellavista mot de passe : vista270214 Après connexion, vous vous retrouvez face à une page comprenant le guide d’utilisation. En en-tête nous retrouvons le logo, permettant de retourner à l’accueil et au guide d’utilisation. Tout comme le lien “retour vers accueil du back-office” situé dans le pied de page. Dans un premier temps, vous devrez choisir l’onglet à modifier : Accueil, La Villa, Tarifs & Réservations, Activités et Services situé dans l’en-tête. Par la suite, vous avez la possibilité de modifier les textes de chaque catégorie grâce à un module de traitement de texte (type Word). A gauche, la possibilité de modifier la version française et à droite la version anglaise. Dans ce module vous avez la faculté de changer le titre des pages, les sous-titres mais aussi tout le contenu. Des outils sont mis à disposition afin de pouvoir mettre en avant certains mots-clés ou autres éléments importants. Une fois les modifications effectuées, la page se mettra à jour en cliquant sur “Envoyer”. L’a jout, la modification et la suppression des photos se font dans l’onglet Villa. Pour cela, il vous faut choisir votre image en la recherchant à l’aide du bouton “Parcourir”. Les images ont trois formats possibles : png, jpg et gif. Par la suite, vous aurez la possibilité de choisir la catégorie dans laquelle vous a jouterez la photo : Extérieur, Piscine, Salles à vivre ou bien le nom de la chambre correspondante. Enfin, vous pouvez mettre une description à cette image : en français comme en anglais. Mettre une description n’est pas obligatoire, cependant, elle est fortement conseillée en utilisant particulièrement les mots-clés de la villa (en annexe du rapport final) afin de favoriser le référencement naturel du site. Enfin, vous pouvez consulter la liste des clients, via l’onglet “Afficher les clients”. Une fois dessus, la liste des clients apparaît et se met à jour à chaque envoi du formulaire de contact par un client ou futur client. A partir de celle-ci, vous pouvez voir les informations relatives au client : civilité, nom, prénom, adresse, code postal, ville, pays, téléphone, mail, message via une fiche client.

27


visuels

back office

De haut en bas, gauche Ă droite : -

Guide d’utilisation Ajout de photos Modifications de textes Suppression de photos

28


bilans bILANS PERSONNELS RAFAÊL / CHEF DE PROJET ET DEVELOPPEUR Ce projet m’a été bénéfique car j’ai pu acquérir beaucoup d’expérience de travail en groupe, en effet, même si chaque personne du groupe avait un rôle spécifique, nous avons tous travaillé ensemble sur toutes les étapes du site. Le projet s’est très bien déroulé grâce à la motivation et la bonne volonté de toute l’équipe. J’ai été désigné chef de projet, j’ai donc du prendre en charge tout ce qui concernait la gestion de projet, heureusement, j’ai été grandement aidé par les membres de mon groupe sur cette partie, ce qui nous a répartis d’avoir une bonne répartition du travail tout au long du projet.

AURélie / RESPONSABLE COMMUNICATION Peu de contraintes ont été imposé pendant le projet et les validations ont été faites rapidement grâce à un client réactif, ce qui nous a permis d’avancer vite sur le projet et de respecter le planning notamment en terme de graphisme. Par ailleurs, la partie communication à faire, dont j’avais la charge principalement, était relativement complète, plan de communication à créer en totalité, analyse de concurrence et existant à effectuer. Enfin, la gestion de projet étant un domaine dont je connais les bases par ma formation pré-licence, j’ai eu l’occasion d’assister Rafaël notamment dans les création des documents (Planning, PERT, devis,...), ce qui nous a permis de réduire le temps de gestion de projet et se focaliser sur l’essentiel du projet.

CLARA / RESPONSABLE CHARTE éditoriale Grâce au projet professionnel, j’ai pu enrichir mes connaissances concernant le domaine du web. Dans le cadre du projet, j’étais responsable de la réalisation de la charte éditoriale à savoir l’élaboration du zoning, storyboard, arborescence, cahier des charges… mais je suis également intervenue d’autres étapes du projet comme en communication (devis, analyse concurrentielle, analyse de l’existant, traduction), en graphisme (déclinaison des différentes pages du site) et en intégration web (HTML, CSS, plugins jQuery). Grâce également au soutien mutuel du groupe, j’ai développé mon sens de l’adaptation et acquéri des méthodes de travail. Néanmoins, faute de temps, je regrette de ne pas avoir eu l’occasion de suivre la réalisation du back-office du site.

29


sarah / responsable intégration

bilans

Tout d’abord, mon rôle concernait la partie intégration. Au travers de ce projet, j’ai appris les avantages ainsi que les contraintes spécifiques à la création de sites, mais aussi, l’importance du travail en équipe. Les points positifs seraient le fait que l’équipe était soudée, du début à la fin du projet, car on s’aidait les uns, les autres, dans toutes les étapes du projet, ce qui a permis d’avancer plus vite, dans le projet. Mais aussi, pour la partie dont j’étais responsable, j’ai pu consolider les bases de l’intégration web que j’avais déjà acquis par ma formation précédente, en DUT. Au final, ce projet a permis de mettre en pratique les connaissances théoriques acquises en licence.

mélodie / responsable graphisme Ce projet était pour moi l’occasion d’un réel travail d’équipe qui a été efficace à mon goût. J’ai su guider le reste de mon équipe concernant la partie visuelle du projet, mais j’ai su aussi faire confiance à mes co-épquipiers. J’ai nottament souvent travaillé avec Aurélie et Clara, qui entretenaient elles aussi le rôle de communiquantes, ce qui m’a permis d’en apprendre davantage sur le domaine de la gestion de projet et la communication pure. Concernant l’ensemble du projet, il m’a aidé à valider les compétences acquises mais aussi les lacunes sur les différents modules effectués au cours de la licence. Au final, ce projet «professionnel» m’a permis d’enrichir mon expèrience au sein d’une équipe, une chose importante pour la suite de cette année de licence.

bILAN de l’agence Lors du projet professionnel, les tâches ont été réparties en 5 pôles clés : communication, charte éditoriale, graphisme, intégration et développement web. Grâce au soutien mutuel, à la cohésion du groupe et à un esprit d’équipe, ce projet nous aura permis d’enrichir nos connaissances théoriques et pratiques dans le cadre de la licence. Le client était réactif sur la validation des différentes étapes du projet, ce qui nous a permis de nous focaliser sur l’essentiel. Nous avons rencontré peu de contraintes; nous offrant ainsi plus de liberté quant à la refonte du site. Nous avons su guider le client vers des choix qui nous semblaient adaptés et pertinents, portant ainsi nos idées jusqu’à la finalisation du produit. Avec du recul, si la réflexion autour du processus d’intégration de la maquette avait été plus approfondie, nous aurions ainsi pu éviter une remise en question des méthodes d’intégration au début de la production. 30


webographie

ressources

Concucrrence : http://mouschetty.fr / http://lafiteniaresort.fr / http://domainehautesribes.fr http://riadmhidou.com / http://lacriquemagique.fr Divers : http://journaldunet.fr / http://et-cetera.fr / http://www.categorynet.com http://www.modern.ie/ie6countdown

annexes reférencement Référencement naturel : Pour mettre en place le référencement naturel, nous avons sélectionné les mots-clés du site et de son environnement que nous avons décliné en champ lexical afin d’optimiser au mieux ce référencement : VILLA : villa, bungalow, chalet, cottage, maison, pavillon, piscine, villa bellavista, bellavista. LOCATION : bungalow, chartreuse, véranda, chalet, cottage, maison, pavillon, louer, particulier, professionnel. VACANCES : repos, plaisir, tranquillité, calme, bien-être, apaisement, sérénité. PRIX : tarif, barème, montant, somme, frais, Festival de Cannes, tarifs. SUD : France, monaco, alpes-maritimes, 06, antibes, midi, cote d’azur, provence, Provence Alpes Cote d’Azur, sud-est. PLAGE : mer, méditerranée, sable, soleil, rivage, bord, littoral. Sans oublier les commodités proches : golf, aéroport, commerce, services, activités. Mais aussi les divers mots pouvant être importants lors de la recherche : 10, 11, personnes. ENGLISH VERSION VILLA : bungalow, chalet, cottage, home, swimming-pool, suburban house RENT : bungalow, charterhouse, chalet, cottage, home, suburban house, to rent, private individual, professional, veranda, conservatory, detached house. VACATION, HOLIDAYS : rest, calm, pleasure, tranquillity, peacefulness, quietness, quiet, tranquil, peacefull, serenity, equanimity, calming, calming down, cooling off, cooling down, well-being. PRICES : cost, fee, sum, addition, total, price scale, price list, rate. SOUTH : France, monaco, alpes-maritimes, 06, antibes, midi, cote d’azur. BEACH : sea, Mediterranean, sand, sun, shore, coastline, seaside, seafront, seaside. Without forgetting next commodities : golf, airport, shops, services, activities. But also various words could be important during the research : 10, 11, persons. 31


32


Projet Villa "BellaVista Antibes"  

Projet professionnel réalisé en équipe pour un client. Licence Professionnelle ATC CORPSEM

Read more
Read more
Similar to
Popular now
Just for you