rapport de projet professionnel
TRANSCRIPT
RAPPORT DE PROJET PROFESSIONNELMURIEL PALISSE - OCTOBRE 2020
REFONTE SITE DANSES DE SALON ET ROCK
AP Formation - TP Infographiste Multimédia
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 2
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 3
PROLOGUE 5
PRESENTATION 7
OBJECTIF DE REFONTE 7
LE PROJET 8MISE EN PLACE ................................................. 9
RECHERCHE ...................................................... 10
ARBORESCENCE ............................................ 11
LE LOGO ............................................................... 12
LE SITE ................................................................... 19
CONCLUSION 35
ANNEXES 36
S O M M A I R E
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 4
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 5
Pour mon projet professionnel de fin de formation, j’ai choisi la refonte d’un site réalisé par un ami il y a plusieurs années.
Il s’agit d’un site d’une Association de danse rockn’roll et de salon basée en Auvergne.
Le but de cette refonte est de donner un coup de jeune au site, et de le rendre responsive. Un logo sera également réalisé afin de compléter l’identité visuelle de l’association.
Le nouveau site sera réalisé en «flat design», tendance actuelle des sites internet. Des animations seront également ajoutées pour le rendre plus dynamique et avoir ainsi une bonne expérience utilisateur.
Je tenais à remercier Eric Ponchant pour sa disponibilité et son écoute durant tout mon parcours de formation, ainsi que le centre AP Formation pour cette période très enrichissante.Je souhaite également remercier Frank Parizot et l’association «Les rendez-vous de la danse» pour m’avoir accordé leur confiance dans la réalisation de ce projet.
P R O LO G U E
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 6
Site actuel de l’association
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 7
Créée en 1992, l’association «Les rendez-vous de la danse» est une association loi 1901 située au Cendre dans le département du Puy de Dôme. Elle propose plusieurs styles de danse, essentiellement en couple. Les 2 professeurs font découvrir aux adhérents le rockn’roll, les danses de salon (Paso doble, Valse, Tango, Cha-Cha-Cha, Rumba, Boston, Fox Trot) et les danses latines (Bachata, Salsa, Kizomba). L’état d’esprit de l’association est basé sur le plaisir et la convivialité. Des soirées sont régulièrement organisées durant l’année, ainsi que des stages de perfectionnement.
Le site actuel a été créé il y a quelques années bénévolement par un adhérent. Il se compose d’une simple page regroupant toutes les informations concernant l’association.Il est hébergé chez free, l’URL est http://danseraucendre63.free.fr/.Il a été réalisé en HTML et CSS ,n’est pas responsive et possède très peu d’images et de contenu, ce qui pose problème pour le référencement naturel.Les graphismes sont minimalistes et le site ne possède ni logo, ni charte graphique. Un flyer a été réalisé pour la diffusion des informations de la saison 2020/ 2021
L’objectif de la refonte du site «danseraucendre.free.fr» est de le moderniser et de l’adapter au web actuel:• faire de ce site «onepage» un site multi-pages afin de structurer les différentes
informations présentes sur le site actuel,• rendre le site responsive afin de l’adapter aux différents devices, et d’améliorer le
référencement Google,• donner une identité visuelle au site en créant une charte graphique et un logo,• attirer la jeunesse à l’association en améliorant l’UX du site.
L’ASSOCIATION
LE SITE
P R É S E N TAT I O N
O B J E C T I F D E R E F O N T E
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 8
LE PROJET
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 9
M I S E E N P L AC E
La première étape de ce projet était de réunir toutes les informations nécessaires à la refonte du site.En effet, le site actuel ne possède très peu de renseignements sur l’association. Il m’a donc fallu récolter le maximum d’éléments (photos, histoire de l’association, détails concernant les professeurs, etc...).Frank a donc été d’une aide précieuse dans cette démarche. Après avoir contacté l’association, il m’a fourni beaucoup d’éléments afin de les intégrer au nouveau site. Cela a permis de remplir les différentes pages avec suffisamment de contenu pour avoir un référencement de meilleure qualité.Il nous a fallu travailler et communiquer à distance car Frank habite à Clermont Ferrand et moi en région toulousaine.
L’hébergement actuel est gratuit (fournisseur d’accès FREE). Le non de domaine actuel (danseraucendre) est différent du nom de l’association. Le site est mis à jour par Frank Parizot sur demande de l’association.L’association n’exclut pas la possibilité de souscrire à un hébergement payant, mais sous réserve de convenir au budget de celle-ci.L’objectif était de rendre le site facilement trouvable sur les différents moteurs de recherche avec les mots clés du nom de l’association.Le nom de domaine a donc été modifié: lesrendezvousdeladanse.asso.st (domaine gratuit sur le site Azote.org, avec l’extension .asso réservée aux associations).
Plusieurs pistes ont été étudiées pour l’intégration du site: l’utilisation d’un CMS (Wordpress) ou le développement à l’aide d’un simple éditeur de code (VsCode). Le choix a été porté sur un codage simple avec éditeur de code pour plusieurs raisons:• la liberté totale pour la mise en forme du site (pas de contraintes liées au thème du
CMS),• pas de formation nécessaire pour la personne en charge de la mise à jour du site,• le site contient peu de pages et les différents contenus sont simples • je suis à l’aise avec les différents languages de programmation (notamment HTML5 et
CSS3).
LA RECHERCHE D’INFORMATIONS
L’HÉBERGEMENT
L’INTÉGRATION
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 10
R E C H E R C H E
Le site actuel ne comportait pas beaucoup d’informations à intégrer au nouveau site. Il fallait en effet créer plusieurs pages, ce qui n’était pas le cas actuellement. Le site avait besoin de contenu et d’images pour être opérationnel.Travaillant à distance avec l’intermédiaire de mon client, j’ai réalisé un fichier à lui transmettre, afin de récupérer les informations nécessaires.
Les informations récupérées ont pu remplir les différentes pages, et également améliorer le référencement naturel, qui n’était pas optimisé sur l’ancien site. En effet, pour qu’un site soit bien référencé sur Google, il doit avoir un minimum de contenu (suffisamment de textes, des images, ...).
Frank m’a donc transmis des photos, un historique de l’association ainsi que des détails sur les professeurs. Le président a souhaité que les flyers présents sur l’ancien site (imprimés en début de saison) soient également présents sur le nouveau.
La phase de recherche a également permis de savoir vers quelle charte graphique évoluer. En effet, le site actuel ne comportait pas de charte graphique ni de logo. Il a donc été demandé si le client souhaitait un logo pour l’association.
En annexe: demandes pour refontes site.pdf
Arbo
resc
ence
du
site
«les
rend
ez-v
ous d
e la
dan
se»
Accu
eil
Adhé
sion
insc
riptio
n in
divi
duel
lePD
Fin
scrip
tion
coup
lePD
Fpl
anni
ngPD
F
Agen
daPl
anni
ngG
aler
ieCo
ntac
t
lien
dire
ct (m
enu)
lien
de p
age
lien
vers
�ch
ier P
DF
Une
arb
ores
cenc
e sim
ple
a ét
é ch
oisie
pou
r le
site:
cha
que
coul
eur c
orre
spon
d à
une
page
. La
bar
re d
e m
enu
rest
e vi
sible
lors
du
scro
ll po
ur fa
cilit
er la
nav
igat
ion.
U
n bo
uton
de
reto
ur v
ers l
e ha
ut a
éga
lem
ent é
té a
jout
é.
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 11
A R B O R E S C E N C E
L’objectif de l’étape suivante était de créer l’arborescence du nouveau site, car le site actuel ne possédait qu’une seule et unique page.
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 12
L E LO G O
L’association n’avait pas de logo. Quelques visuels étaient présents sur les flyers ainsi qu’en image de fond du site. J’ai donc proposé d’en créer un, afin de donner une identité propre à l’association «les rendez-vous de la danse». Une recherche de piste a été menée, en dégageant des mots-clés. Puis s’en sont suivi des essais, une finalisation et enfin plusieurs déclinaisons de couleurs.
Les couleurs ont été pensées en rapport avec les danses de salon (rouge et noir) et les couleurs du flyer existant (rose et bleu).
RECHERCHE DE PISTES
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 13
L’idée était de dessiner un couple de danseurs, car l’essentiel des danses pratiquées à l’association sont en couple. Les tracés ont été dessinés avec le logiciel Illustrator. Le premier essai a été dessiné au pinceau, il a ensuite été afinné et le profil des contours a été modifié pour rendre les extrèmités plus fines. Plusieurs couleurs ont été essayées pour la robe de la femme et la chemise de l’homme. Ensuite, j’ai créé une version avec remplissage léger des habits du couple (large pinceau en opacité réduite).Une fois le couple terminé, j’ai construit une portée musicale avec des notes à l ‘aide de l’outil «dégradé de forme» d’Illustrator et le crayon.
ESSAIS
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 14
TYPOGRAPHIE ET ASSEMBLAGE
L’étape suivante: la typographie. J’ai recherché sur Google Fonts des typographies de type cursive, style qui correspondait à mon sens à un logo de danse. La police «Montez» me paraissait convenir. J’ai ensuite écrit le nom de l’association. Cela est lisible et me plait, je continue donc mon cheminement. Afin d’intégrer le titre de l’association au visuel créé précédemment, j’ai effectué un tracé au crayon en suivant la porté musicale. J’ai transformé ce tracé en texte captif afin que le texte prenne la forme de la portée. J’ai ensuite ajouté les notes et créé différentes versions de mon assemblage.
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 15
DÉCLINAISONS
Après assemblage des différents éléments, le logo a été décliné en plusieurs versions colorées afin de les exposer au client et que ce dernier choisisse sa préférée. Des versions en noir et blanc ont été également réalisées en vue d’intégrer le logo sur différents supports (lettre, t-shirt, etc...)
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 16
CHOIX DU CLIENT
VERSION FINALE
Après envoi du document final composé des différentes déclinaisons au client, ce dernier a porté son choix sur la première version sans être totalement emballé par les différentes déclinaisons proposées.Les couleurs «rouge et noir» ont été écartées, car trop axées sur le tango selon lui.
Après avoir pris en compte les remarques du client ainsi que divers avis extérieurs, j’ai retravaillé certaines parties. La portée musicale a été épurée (moins de lignes et de notes), la police a été remplacée par «Pacifico» afin de gagner en lisibilité, le texte a été légèrement modifié pour intégrer le lieu de l’association et j’ai ajouté une vague plus claire au dessus des danseurs pour donner plus de mouvement au logo.
Version choisie par le client, mais à adapter aux couleurs du flyer
Version définitive aux couleurs des flyers
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 17
MOCKUPS
Il est courant pour une association de danse de proposer la création de t-shirts floqués pour les adhérents. C’est pourquoi j’ai intégré les différentes versions du logo sur des t-shirts noirs et blancs à l’aide d’un mockup. Cela permattra à mon client de visualiser le rendu s’il souhaitait réaliser des t-shirts.
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 18
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 19
L E S I T E
LE WIREFRAME
Une première maquette a été réalisée sans graphismes, afin d’établir la structure du site. La page d’accueil (à droite ) a été réalisée afin de faire apparaitre le logo de l’association ainsi que le titre du site sur une bannière en opacité réduite. Le menu a tout d’abord été placé en bas de cette bannière.
La première partie concerne les informations importantes du moment, comme les règles sanitaires, le ou les prochains évènements. Elle comporte également les flyers, qui défileront grâce à un caroussel.
La seconde partie fera apparaitre l’historique de l’association et éventuellement des images liées à la danse. Un bouton «adhésion» amènera l’utilisateur sur la page Adhésion.
Une troisième partie sera consacrée aux professeurs avec leur photo, prénom et détails sur les danses enseignées. Un bouton «voir planning» sera ajouté.
S’en suivra une partie «contact» sur laquelle une ancre sera intégrée afin que l’utilisateur y accède via le menu.Dans cette section, les coordonnées de l’association ainsi qu’une carte indiquant le lieu des cours seront ajoutés. Un formulaire de contact pourra être intégré si le client le demande Le pied de page sera composé des information légales de l’association et du site, ainsi que du plan du site.
Page d’accueil
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 20
La page Adhésion sera composée de deux parties.La première fera apparaitre les tarifs détaillés avec création d’un tableau pour structurer le différents prix selon la danse choisie et la formule (individuelle ou en couple. Des bannières informeront les futurs adhérents sur des modalités de paiement ou des tarifs préférentiels. Un bouton d’accès au planning sera ajouté.
La seconde partie concernera les divers documents à télécharger pour l’adhésion à l’association. plusieurs boutons seront créés avec accès aux documents en format pdf.
Page Adhésion
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 21
La page Planning permettra à l’utilisateur de s’informer sur les horaires des différents cours en fonction des jours ainsi que d’accéder au calendrier annuel des cours et manifestations prévues tout au long de la saison.La page sera donc composée de 2 parties distinctes.La première fera apparaitre les horaires de cours dans un tableau en fonction du jour de la semaine.La seconde donnera accès à un fichier PDF du calendrier de la saison. Il sera représenté par un visuel cliquable et le visiteur pourra ainsi l’ouvrir dans une nouvelle fenêtre.
Page Planning
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 22
Page Agenda
La page agenda permettra de réunir dans une seule page tous les évènements prévus durant la saison. Elle sera composée d’une partie unique regroupant les évènements, avec un bloc «date» et un descriptif en face de ce bloc. Si le client le souhaite, il pourra ajouter une image (type flyer).Un bouton d’accès à la page Adhésion sera ajouté.
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 23
Page Galerie
La page Galerie regroupera les photos des différentes manifestations de la saison. Si le client le souhaite, une vidéo pourra être ajoutée.Un bouton «adhésion» pourra également être présent.
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 24
Cette première maquette a été envoyée au client. Il n’avait pas encore envoyé tous les éléments nécessaire à l’élaboration finale du site. La maquette a donc évolué en fonction des contenus apportés par mon client.
Le client n’avait pas de demande particulière concernant les couleurs, polices de caractères et graphismes du site. Je lui ai donc proposé de s’inspirer des couleurs des flyers, qui avaient été choisies pour l’élaboration du logo.
Les polices de caractères choisies sont «Pacifico» (type cursive) pour le titre du site et «Montserrat» (type sans-serif ) pour le reste des textes du site.Ces polices sont adaptées pour le web et reconnues par les différents navigateurs. Elles ont été récupérées sur le site Google Fonts.
LES GRAPHISMES
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 25
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 26
LA MAQUETTE GRAPHIQUE
La maquette graphique a été réalisée à l’aide du logiciel Adobe XD. Cela a permis de faire du prototypage, afin de montrer les différentes interactions lors de la navigation sur le site.Trois versions ont été faites: pour ordinateur, tablette et mobile. Certains éléments ont été modifiés par rapport au wireframe. Le menu a été placé tout en haut du site et restera fixe lors du défilement.
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 27
A partir de la version tablette (largeur d’écran plus petite que 768 pixels), la barre de navigation de vient un menu burger. Lorsque l’on clique sur les 3 barres horizontales, le menu apparait en couvrant tout l’écran. Son opacité est réduite, on peut distinguer la page en dessous de celui-ci. Ce style de menu est très répandu sur les petits écrans, et permet une meilleure lisibilité. Il sera réalisé à l’aide d’un script Javascript.Le logo passe au dessus du titre du site et ces éléments sont centrés sur la largeur.Les bannières colorées prennent quant à elles toute la largeur de l’écran.Les images seront adaptées en largeur grâce au CSS (média queries).
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 28
Des tableaux ont été réalisés pour les tarifs ainsi que le planning des cours. Pour que ces derniers soit parfaitement responsive, ils ont été réalisés avec les propriétés CSS Grid pour le premier et Flex pour le second. Ces propriétés permettent de modifier avec facilité l’ordre et la disposition des colonnes. En effet, ces tableaux se transforment lors du passage sur tablette et mobile: les colonnes passent les unes en dessous des autres.
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 29
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 30
Pour améliorer l’UX et créer ainsi de l’interactivité, des effets ont été ajoutés lors du survol des liens avec la souris. Ces interactions sont visibles sur la maquette.
Sur les pages Adhésion et Planning, des liens ont été ajoutés pour accéder aux documents PDF.Les boutons ainsi que le visuel du planning auront des effet lors du survol de la souris
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 31
Le site a été développé avec l’éditeur de code Virtual Studio Code. Ce logiciel permet de créer des fichiers de type HTML, CSS, Javascript et PHP.. Il est facile d’utilisation grâce aux codes couleurs ainsi qu’à l’extension Emmet intégrée au logiciel. Cette extension permet de gagner du temps lors du codage, car elle nous propose différents types d’éléments, ce qui évite de tout taper au clavier.
La page d’accueil (ci-dessus) est bien représentative de la maquette. Certains détails ont été ajoutés comme la bordure en dessous de la barre de navigation, ainsi que le triangle violet qui montre à l’utilisateur la page consultée. Lors du chargement de la page, le logo n’est pas visible et apparait petit à petit. Le titre n’est également pas présent, il arrive par le haut grâce à une animation. Un bouton de retour en haut de page a été ajouté en bas à droite de la fenêtre.
L’ INTÉGRATION
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 32
Les flyers défilent grâce à une animation. Lorsque le visiteur passe la souris dessus, l’animation s’arrête. Il peut également cliquer sur une des images et l’ouvrir dans une autre fenêtre. Le menu reste fixé en haut de la page lors du défilement.
Dans la section contact, une carte a été intégrée via le site de Google Map. Le client a choisi de ne pas intégrer de formulaire de contact. Il optera pour un bouton de contact par mail, en créant une adresse via l’hébergeur afin de ne pas faire apparaitre son adresse email personnelle.
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 33
Les tableaux sont adaptables à toute taille d’écran grâce aux propriétés CSS et aux média-queries
Le footer se compose de trois parties: les coordonnées de l’association, le plan du site et les mentions légales.
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 34
LE FAVICON
Le favicon a été réalisé avec le logiciel Illustrator.Il représente l’initiale du titre du site avec la police «Pacifico» en blanc sur fond dégradé (rose #d30f64, bleu #008edc). Il n’est pas composé de détails car ces derniers ne seraient pas visibles sur l’onglet du navigateur. Le favicon a été généré à l’aide du site favicon.io afin de l’intégrer dans la balise «head» des pages HTML.
La page galerie a été créée mais je n’ai pas encore de photos à y mettre. J’ai donc préparé la structure de la page en créant une grille. Les images de substitution seront alors remplacées par les photos à venir.
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 35
Ce projet me tenait à coeur car Frank est un ami d’enfance. J’ai mis toute mon énergie et mes compétences apprises lors de ma formation à l’élaboration du nouveau site, ainsi qu’à la création du logo.
Il n’a pas toujours été facile de trouver les idées et la communication à distance ne facilite pas non plus les choses. Cependant j’ai pu compter sur la disponibiité et la réactivité de Frank ainsi que de l’Association «Les rendez-vous de la danse» pour me fournir dans les délais les nombreux éléments qui constituent le nouveau site.
Je suis fière d’avoir conçu de A à Z le nouveau site ainsi que le logo de l’association. Le site est maintenant conforme aux codes du web, au référencement naturel et totalement responsive. J’espère qu’il fournira la meilleure expérience utilisateur à ses visiteurs.
J’ai beaucoup appris durant cette formation, notamment dans le domaine du web. Je ne connaissais en effet aucun language de développement. Ces six mois au sein d’AP Formation m’ont permis de me conforter sur mon choix d’orientation professionnelle.A l’issue, je souhaiterais intégrer une agence de communication ou de publicité afin de gagner en expérience professionnelle.
CO N C LU S I O N
ANNEXES
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 36
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 37
1 - G LO S S A I R E
ARBORESCENCE
CHARTE GRAPHIQUE
CMS
CSS
DOMAINE (NOM DE)
EXPÉRIENCE UTILISATEUR (UX)
FLAT DESIGN
DEVICE
L’arborescence d’un site est la charpente sur laquelle on vient ajouter le contenu, c’est-à-dire les différents éléments que les visiteurs auront à consulter. Elle est représentée sous la forme d’un schéma.
Document de travail qui contient l’ensemble des règles fondamentales d’utilisation des signes graphiques qui constituent l’identité graphique d’une organisation, d’un projet, d’une entreprise.
L’acronyme anglais CMS signifie Content Management System, cela désigne une famille d’applications qui ont pour but de créer et mettre à jours facilement un site web dynamique. Le nom de ces logiciels se traduit en français par «Système de Gestion de Contenu».
Les CSS, Cascading Style Sheets (feuilles de styles en cascade), servent à mettre en forme des documents web, type page HTML ou XML. Par l’intermédiaire de propriétés d’apparence (couleurs, bordures, polices, etc.) et de placement (largeur, hauteur, côte à côte, dessus-dessous, etc.), le rendu d’une page web peut être intégralement modifié sans aucun code supplémentaire dans la page web.
Un nom de domaine est une chaine de caractères (ex : prodomaines) associée à une extension (ex : .com, . ... Il constitue ainsi un nom familier associé à une adresse IP. Votre nom de domaine indique l’adresse internet de votre site web.
Le terme UX (acronyme de l’anglais : User eXperience), expérience utilisateur en français, désigne la qualité de l’expérience vécue par l’utilisateur dans toute situation d’interaction. L’UX qualifie l’expérience globale ressentie par l’utilisateur lors de l’utilisation d’une interface, d’un appareil digital ou plus largement en interaction avec tout dispositif ou service.
Le flat design est un design plat, minimaliste, dépouillé de tout élément graphique en 3D.
Le terme device désigne l’appareil avec lequel l’internaute accède à Internet ou à une application mobile (ordinateur, smartphone, tablette, mais également les objets connectés, dont la variété croît régulièrement).
Refon
te site «les rend
e-vous d
e la dan
se» - Projet p
rofessionn
el - Mu
riel Palisse
p. 38
HÉBERGEMENT (WEB)
FOOTER
HTML
RÉFÉRENCEMENT NATUREL
MEDIA QUERIES
JAVASCRIPT
RESPONSIVE DESIGN
URL
WIREFRAME
WORDPRESS
L’hébergement internet est un service qui consiste à mettre à disposition 24h/24h, 7j/7j votre site internet sur un ordinateur sécurisé et connecté à internet (serveur web).
Le footer (traduction : pied de page) fait référence au bas d’une page web (contient souvent le copyright, des liens et diverses autres informations).
L’HTML est un langage informatique utilisé sur internet. Ce langage est utilisé pour créer des pages web. L’acronyme signifie HyperText Markup Language, ce qui signifie en français «langage de balisage d’hypertexte».
Le référencement est un terme désignant les actions permettant d’améliorer la visibilité d’un site web dans les résultats naturels d’un moteur de recherche.
Les Media Queries sont des critères en CSS3 qui permettent de spécifier des propriétés CSS selon des conditions particulières comme la largeur d’écran par exemple
Le JavaScript est un langage informatique utilisé sur les pages web pour ajouter de petites animations ou effets (parfois futiles).
Le responsive design est une façon de concevoir un site pour qu’il s’adapte automatiquement sur plusieurs terminaux (grand écran, tablette, mobile ...).
Une URL sert à désigner une ressource du web (page HTML, image, son ...). C’est aussi appelé une adresse web et c’est utilisé par les navigateurs pour naviguer sur le web.
Un wireframe en webdesign est un schéma simplifié d’une page web. Cette maquette facilite la communication lors de la conception d’un site.
Le système de gestion de contenu WordPress est un logiciel très populaire qui est utilisé sur le web pour créer un site ou un blog.
2 - D E M A N D E S AU C L I E N T
Ref
onte
sit
e «l
es r
end
e-vo
us
de
la d
anse
» -
Pro
jet
pro
fess
ion
nel
- M
uri
el P
alis
sep
. 39
Refonte du site «danseraucendre»Demandes au client
1. Informations principales• Informations sur l’association:
- histoire de l’association (temps d’existence, évolution, manifestations marquantes,...) - nom, fonction + photos des membres du bureau - nom, photos des profs, détail de leur spécialité - détails sur les différentes danses proposées => le site doit avoir du contenu texte pour le référencement (minimum 300 mots pour Google)=> le site doit avoir du contenu texte pour le référencement (minimum 300 mots pour Google)
• Photos, vidéos de cours, de soirées récentes, ... afin de créer une galerie• Tarifs 2020 des cours (avec précisions sur les formules, les moyens de paiement, etc...)=> page tarifs
2. Couleurs, typographie• Des couleurs particulières préférées pour le nouveau site? => l’association du rouge et du noir est proposée (en référence aux danses latines et au rock) avec du blanc pour éclaircir l’ensemble.• Un style de typographie est-il préféré ? Un mélange d’une police cursive pour les titres principaux et d’une classique sans serif pour le corps de texte est proposée (Pacifico pour le titres et roboto pour le texte par exemple)
3. Logo, identité de l’association• Existe t-il un logo de l’association ? => si oui, doit-il être refait ? (merci de le fournir dans tous les cas) => si non, souhaitez-vous en avoir un ? Possibilité d’en créer un et de l’intégrer au site. Dans ce cas, avez-vous des idées de visuels, couleurs, typographie, exemples à suivre, ... ?• Les objectifs de la refonte du site seront les suivants: -redonner de la modernité et de l’accessibilité au site, -réaliser plusieurs pages pour avoir du contenu et améliorer le référencement naturel, -rendre le tout responsive. =>Avez-vous des suggestions supplémentaires ?
4. Evênements, réseaux sociaux• Pourriez-vous fournir l’agenda des prochaines manifestations si exitantes ? => Une soirée est-elle prévue ? Si oui, une affiche peut être réalisée• L’association est-elle présente sur les réseaux sociaux? Si oui fournir le ou les liens.
5. Suggestions, demandes • Avez-vous des demandes, des suggestions sur des sujets non cité ci-dessous?
Muriel PalisseProjet professionnel 2020