FONCTIONNEL - Chef de projet : Vanessa HERVAGAULT DCPRO6
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
FONCTIONNEL Chef de projet : Vanessa HERVAGAULT DCPRO6 Sergio TACCHINI Wintex Italia Srl , Via Savona 97 20144 Milano Tel +39 02 49489301 Fax +39 02 49489315 E-mail: info@sergiotacchini.com
SOMMAIRE
L’ENTREPRISE
1. Historique
2. Aujourd’hui
3. Les produits
4. L’existant
4.1 Les licenciés
4.2 Sponsorship
4.3 La présence digitale
5. Positionnement concurrentiel
L’ENTREPRISE
5.1 Ses concurrents
5.2 Éléments différenciants
6. L’image actuelle
6.1 Sa communication
LE PROJET
1. Les attentes
2. Le contexte
2.1 Le marché de la mode sportive
2.2 Les tendances des sites web actuels
3. Le site web actuel
3.1 Forces et faiblesses du site
3.2 Analyse d’un concurrent
4. Le comité de pilotage
5. Objectif du site
6. Les cibles
7. Stratégie marketing
8. Contenus du site
9. Les fonctionnalités
9.1 Back-end
9.2 Front-end
10. Déclinaison du site en différentes langues
PRESTATIONS ATTENDUES
1. Les Livrables
2 3
1. HISTORIQUE 2. AUJOURD’HUI Dans ce nouveau quartier général, une-
quinzaine de personnes travaillent pour
Le siège actuel de Sergio Tacchini se situe la marque. Ils ont quitté le site histo-
Sergio Tacchini est un ancien joueur de
à Milan. L’entreprise y a son showroom rique de Bellinzago Novarese où il ne
tennis professionnel italien né le 2 dé-
depuis 2014. reste que l’entrepôt.
cembre 1938. Il créa sa propre marque
de vêtement de sport au cours de l’an-
L’espace s’étend sur 500 mètres carrés La marque distribue ses produits dans
née 1966 dans la ville de Bellinzago No-
dans une ancienne zone industrielle de nombreux pays : l’Espagne, le Por-
varese, situé à 50 kilomètres de Milan,
dans lequel on trouve une salle d’expo- tugal, la Suisse, la Grèce, la France, la
en Italie.
sition, les archives historiques et des bu- Scandinavie, la Serbie et l’Afrique du
reaux opérationnels pour les fonctions nord etc.
À 17 ans, il est devenu joueur profes-
sionnel en entrant au Tennis club de Mi- de conception, la commercialisation des
lan. En 1960, il devient champion d’Italie. produits de la marque fondée dans les
années 60’.
Six ans plus tard, il fonde sa marque de
vêtement Sandy’s Spa qui deviendra par
la suite Tacchini. L’idée était de proposer
une collection de vêtements colorés et
élégants alors que le blanc prédominait
dans le milieu du tennis.
La marque s’est imposée par la suite
dans d’autres milieux sportifs tels que le
ski, le golf, la voile, la remise en forme,
ou même le baseball.
La marque était achetée en 2008 par
l’homme d’affaires chinois Hong Kong
Billy Ngok.
En 2011, son chiffre d’affaire frolait les
50 millions d’euros.
À cette époque, l’entreprise avait plus de
100 boutiques réparties dans le monde
entier.
3. SES PRODUITS depuis 2017, elle s’est lancée dans le
marché des lunettes en confiant le mar-
ché à une entreprise française, GEM lu-
Les produits de la marque Sergio Tacchi-
netterie.
ni sont variés et se démarquent par
leur signature colorée, point fort de la
Cf les visuels des produits de la marque en
marque lors de son lancement. Elle a
page suivante.
su se diversifier et gagner des parts de
marché sur d’autres secteurs que les vê-
tements.
Elle a ainsi développé différents aces-
soires comme des montres, des cas-
quettes, des parapluies, des chaus-
settes, mais également du parfum et
4 5
4. L’EXISTANT Rolex Master voit la marque italienne
continuer son sponsoring pour encore 3
ans supplémentaires. Un partenariat qui
4.1 Les licenciés fonctionne puisque la collaboration date
de 8 ans.
La marque vend ses vêtements grâce
à un réseau mondial de licenciés et de
distributeurs. Elle dispose ainsi d’une
4.3 Présence digitale
présence étendue pour promouvoir sa
La marque est présente sur le web avec
marque d’une manière pérenne. Toutes
un site principal : sergiotacchini.com,
les catégories de vêtements, accessoires,
qui est un site décliné en 5 langues dif-
disposent ainsi d’une visibilité.
férentes (italien, anglais, français, espa-
gnol, et chinois).
4.2 Sponsorship
Elle possède également des pages ré-
Sergio Tacchini a sponsorisé de nombreux seaux sociaux dédiés sur Facebook, Ins-
sportifs depuis 1966 dont John Mc Enroe, tagram et Youtube.
Martina Hingins, Pete Sampras, Novac
Djokovic etc. En 2016, le Monte-Carlo
6 7
5. POSITIONNEMENT une communication contrôlée et ré-
fléchie.
5.1 Ses concurrents 6.1 Sa communication
Sergio Tacchini doit faire face à diffé-
Depuis 2015, la marque embléma-
rents conccurrents dans le domaine
tique italienne travaille avec l’agence
de la mode sportive. Les plus cé-
Pure moment, chargée de la commu-
lèbres sont Adidas, Nike, Lacoste, Le
nication 360° (online, offline, event,
coq sportif etc.
social et in store) dans 32 pays et
pour le distributeur, le groupe Movin.
Chacun de ses concurrents propose
une identité graphique forte et a
modernisé son image selon les ten-
LE PROJET
dances du moment (par des applica-
tions spécifiques, en créant un uni-
vers original destiné à leurs clients).
5.2 Éléments différenciants
de la marque
Sergio Tacchini se positionne comme
une marque italienne qui a su se dé-
marquer par ses vêtements élégants
aux teintes colorées. Son avantage
réside également dans son investis-
sement auprès des grands événe-
ments sportifs tel que le Monte-Carlo
Rolex Master et ses sponsoring au-
près de célèbres sportifs depuis de
nombreuses années.
6. L’ IMAGE ACTUELLE
Sergio Tacchini a une image figée dans
les années 80’. La marque est ratta-
chée aux collégiens de banlieues des
grandes villes. Soucieuse de faire éva-
luer sa notoriété, le dépoussiérage
de son image va s’effectuer grâce à
8 9
1. LES ATTENTES 2.2 Les tendances 2017 des
sites web
Sergio Tacchini souhaite conquérir
l’univers de la mode sportive, séduire Les tendances du webdesign pour
par des produits au caractère renou- 2017 2 évoluent, avec des utilisateurs
velé : décontracté, sophistiqué, mais toujours de plus en plus exigents.
toujours sportif.
Celles de 2016, comme l’effet paral-
Cette nouvelle image de marque doit lax, le responsive design, des grands
passer par la refonte du site web ac- visuels, le scroll infini, les micro inté-
tuel : sergiotacchini.com ractions ou le récent material design
restent d’actualité.
L’esprit de la marque doit rester pré-
sent et ainsi se séparer de l’image Pour 2017, les tendances sont les sui-
stéréotypée auquelle le public l’asso- vantes :
cie.
- Écrans splittés (multi-images) : ils
2. LE CONTEXTE consistent à diviser l’écran en plu-
sieurs parties pour y présenter des
images différentes.
2.1 Le marché de la mode Un travail collaboratif a été réalisé > Bleu ciel Island Paradise est syno-
sportive - UI motion : légers effets de transi- entre le New-York fashion week et le nyme d’évasion et de détente,
tion Pantone fashion color afin de laisser
transparaitre les couleurs qu’il faut > Rose Pale Dogwood est apaisant et
Capitalmind, petit banque d’affaire
- Transparence et superposition utiliser pour cette année1. inspire l’innocence et la pureté,
a récemment mis à disposition une
étude1 portant sur le marché des d’images pour apporter de la pro-
fondeur et un côté aérien. Il en ressort ainsi une planche aux > Vert Greenery rapelle la verdure,
marques vendant des articles de
couleurs variées et aux différentes si- l’exploration et l’oxygène,
sport. Il en ressort que c’est un sec-
- Storytelling : qui permet de la narra- gnifications :
teur qui se porte bien avec une pro-
tion interactive > Rose fushia Pink Yarrow est une
gression de 5% sur la marché mon-
> Bleu gris Niagara évoque le désir, la couleur caprivante, stimulante et fes-
dial, ce qui est deux fois plus élevé
- Typographie plus imposante détente, le confort et la fiabilité, tive,
que celle du PIB mondial.
- Design d’interaction entre la ma- > Jaune Primrose Yellow suscite de > Vert Kalé évoque un mode de vie
Le marché est porté par la hausse
chine et l’homme (IHM). la chaleur, de la vitalité, de l’enthou- sain et le grand air,
de la pratique sportive féminine et
siasme, de la bonne humuer et rap-
encouragé par les pouvoirs publics,
pelle l’énergie du soleil, > Noisette Hazelnut rapelle la nature,
pour des raisons de santé publique.
Concernant les couleurs du web la terre et c’est une couleur de transi-
2017, c’est une année d’audace et de > Bleu du Lapis Blue inspire force et tion.
Les 50 premières enseignes du sec-
contrastes. confiance,
teur (dont font partie Nike et Adidas)
ont des taux de croissance à deux
> Orange Flame est à base de rouge.
chiffres.
Cette couleur est flamboyante et vi-
vace,
1 http://www.capitalmind.com/ 2 zazzlemedia.co.uk, defimedia.be. 1 pantone.com et engelvoelkers
10 11
4. LE COMITÉ Sergio Tacchini
Wintex Italia Srl , Via Savona 97
DE PILOTAGE 20144 Milano
Tel +39 02 49489301
Une équipe constituée de 7 per- Fax +39 02 49489315
3. LE SITE WEB ACTUEL et du dépoussiérage de la marque, une
analyse SWOT à été réalisé afin d’amé-
sonnesest mobilisé sur le projet du
nouveau site web de la marque Sergio
E-mail: info@sergiotacchini.com
liorer le nouveau site dédié à la marque Tacchini. L’équipe travaille au siège de
3.1 Forces et faiblesses qui doit être immersif et créé de ma- l’entreprise, situé à Milan.
nière à rendre l’expérience utilisateur
Sergio Tacchini est présent sur le web originale et fonctionelle.
avec un site multilingues à l’adresse :
http://www.sergiotacchini.com/. Le Une analyse d’un site concurrent a éga-
site donne accès à trois réseaux sociaux lement été souhaitée afin d’en faire res-
officiels : Facebook, Instagram et You- sortir ce que l’utilisateur recherche.
tube ainsi qu’à un e-shop.
Dans le cadre de la refonte du site web
FORCES FAIBLESSES
- Slide d’actualités - Site non responsive
- Le site est multilingue - Pas de possibilité de créer un compte
- Site mis à jour régulièrement en page d’accueil
- Beaucoup d’images - Aucun module de recherche
- Historique de la marque présente en page d’accueil
- Site peu intuitif
- Trop d’informations
- Un seul accès réseaux sociaux
- Aucun texte (SEO) en page d’accueil
3.2 Analyse d’un concurrent avec la collaboration exceptionnelle de
Zach King, le magicien aux 3 millions
En 2015, Lacoste a engagé un renouvel- de fans. Le crocodile est également la
lement de son image. Elle a opté pour première marque de mode à investir le
une communication ambitieuse et a réseau éphémère Snapchat, avec une
souhaité s’afficher comme une marque opération de recrutement sous forme
innovante ancrée dans la pop culture. de jeu-concours («Spot the croc»).
Côté digital, Lacoste a investit dans un
nouveau site (www.lacoste.com), dont le
lancement a été relayé de manière évé-
nementielle sur le réseau social Vine,
12 13
5. OBJECTIFS DU SITE 6. LES CIBLES
Objectif premier : Sergio Tacchini sou- Afin de répondre à l’objectif défini par la
haite un dépoussiérage de la marque, Direction de Sergio Tacchini, une analyse
afin que les stéréotypes qui sont pré- pertiente correspondant aux besoins des
sents et ancrés depuis plusieurs années cibles à atteindre, a été réalisée.
disparaissent. Elle est souvent rattachée
à une cible restreinte (jeunes collégiens Il a fallu déterminer et savoir de quelle
et lycéens de banlieu) alors qu’elle s’im- manière elles se connectent, quelles sont
plique au sein de différents évènements leurs attentes, leurs loisirs, leur apparte-
sportifs qualitatifs et sponsorise de nom- nance sociale.
breux athlètes.
Cette analyse permet de répondre aux
Une image renouvelée implique donc de besoins de manière précise, notamment
en ce qui concerne l’ergonomie du site et
> Séduire l’utilisateur par son univers ses fonctionnalités.
> Toucher de nouvelles cibles qui seront Cf en page 15 les fiches personas réalisées
séduites par les produits et la nouvelle pour déterminer la stratégie à adopter.
image,
> Générer du trafic sur le site.
Objectifs secondaires directement liés
à la nouvelle image :
> Augmenter son chiffre d’affaire global
> Convertir de façon pérenne,
> Fidéliser ses nouveaux clients.
14 15
7. STRATÉGIE MARKE- 8. CONTENUS DU SITE • La possibilité de s’inscrire à la news-
letter
TING Le site de Sergio Tacchini sera agrémenté • De liens vers les réseaux sociaux
Storytelling : Le storytelling permet de de contenus de qualité qui participeront
à son bon fonctionnement dans un but De pages de second niveau dont un
Une stratégie marketing sera mise en raconter une histoire à l’utilisateur du
de popularité du site. e-shop comportant toute la gamme des
place afin de répondre aux besoins dé- site, de le faire plonger dans l’univers de
produits de la marque avec un panier
finis par les cibles. De l’inbound marke- la marque.
Le site sergiotacchini.com sera constitué : pour permettre au visiteur d’acheter en
ting, de l’Outbound marketing, associé à ligne.
du Brand content ainsi que du marketing
relationnel seront mis en place. D’une page d’accueil attrayante et tota-
Le but est de plonger l’utili-
sateur dans l’univers de la
lement immersive composé de : 9. LES FONCTIONNALI-
Inbound Marketing : Cette stratégie
consiste à produire du contenu de quali- marque : D’un Header comportant : TÉS
té, en faisant venir le client à soi. C’est du
marketing entrant, non agressif. Notam- • Avec une vidéo HD, • Un logo Le nouveau site web comportera plu-
ment par la mise en place de plusieurs • Un slider d’actualités in- • Un menu menant à des pages de se- sieurs fonctionnalités qui permettront
moyens : tuitif, cond niveau à l’utilisateur une expérience immersive
• De larges photos qui im- • Une vidéo qui se déclenche automa- optimale et originale.
- Landing page prègnent l’utilisateur, tiquement
- Référencement SEO • Un blog qui permet une • Une barre flottante menant vers 9.1 Back-end
relation privilégié, les comptes réseaux sociaux de la
Le but étant : • Un compte «Membre marque.
plus» qui lui donne des • Des textes d’accroche
avantages,
Attirer Convertir Engager Fidéliser •
•
Des boutons d’action
Un formulaire de contacte
Back-end
• De se connecter en tant que Membre
Brand Content : Le brand content dé- +
signe généralement des contenus édito- • Une barre de recherche
riaux (vidéos d’expérience, conseils, tu- Marketing relationnel : Le marketing
relationnel est l’ensemble des actions D’un Main incluant : • Accès à une base de donnée
toriels vidéo, articles pratiques, forums,
marketing qui visent a établir une rela- (modification)
reportages…) proposés sur Internet, sur
tion continue, renforcée et enrichie avec • Un slider d’actualité • Accès au serveur web (héber-
des supports papier ou en TV. Le brand
le consommateur afin de le fidéliser et • Un bouton d’action pour s’inscrire en geur)
content peut également prendre la
d’augmenter éventuellement sa consom- tant que «Membre plus» • Accès à l’application du site
forme de nombreux autres contenus (vi-
mation. • Un accès à l’histoire de la marque (HTML, CSS, javascript, JQuery)
déos, jeux, expositions, livres, etc.).
• Un blog dédié à l’univers de la marque • Analyse des résultats avec Goo-
Cette relation se construit par l’établis- • Un accès à un e-shop gle analytics
Les objectifs d’une stratégie de brand
sement d’un dialogue entre la marque • Un accès une page relatant les ath- • Ajout / modification de conte-
content peuvent être, entres autres :
et le consommateur qui s’effectue sur lètes sponsorisés nus (image, vidéo, texte)
– d’affirmer l’expertise de la marque sur
différents canaux et supports (site Inter- • Un accès aux produits et accessoires • Gestion des membres / utilisa-
son univers
net, réseaux sociaux, emailing, mailing, de la marque teurs
– d’affirmer un positionnement (les
application mobile, consumer magazine, • Un accès à la liste des licenciés • Gestion des compte administra-
contenus « énergisants » de Redbull ou
etc.) et éventuellement par un dispositif • Un accès à la communication et aux teurs et utilisateurs
de GoPro)
visant à récompenser le consommateur articles de presse de la marque • Gestion de la messagerie rac-
– de réaliser un storytelling de marque
(carte fidélité, services exclusifs, invita- cordée au site web
– d’obtenir une visibilité (earned media,
inbound marketing, etc.) tions, etc.) D’un footer avec :
– de délivrer de la valeur aux individus
consultant les contenus dans une lo- • Un logo
gique servicielle • Un accès au formulaire de contact
– de contourner le phénomène d’ad • Un lien vers l’e-shop
blocking • Un accès aux nouvelles collection
16 17
9.2 front-end
10. DÉCLINAISONS
Front-end DU SITE
Le site, du fait de son étendue au niveau
mondial, sera décliné en cinq langues dif-
1er niveau 2nd niveau férentes : italien, anglais, espagnol, fran-
çais et chinois.
• Inscription / Connection > Blog
membre plus ou membre • Look book,
simple • articles (actualités, témoi-
• Recherche gnages, vous et S. Tacchini)
• Contacte • 360° showroom
• Choix de la langue • Rendez-vous du jeudi à Milan
• Menu sticky de navigation qui • Restaurants et bonnes adresses
passe en transparence pour • Participez aux nouvelles collec-
ne pas gêner l’immersion si la tions.
souris ne passe pas dessus
• Accès aux comptes réseaux > E-Shop
sociaux • Menu produits (hommes,
• Lecture automatique de la vi- femmes, enfants, accessoires,
déo / pause / arrêt / partage soldes)
• Slider d’actualités avec images • Panier menant vers le couloir
cliquables d’achat.
• Possibilité de scroller verticale-
ment pour l’utilisateur > Les nouvelles collections seront
• Accès à l’historique de la gérées par un flux RSS, via la vou-
marque tique.
• Accès au blog dédié à la
marque par image cliquable
• Accès à l’e-Shop de la marque
par image cliquable
• Accès aux visuels de la nou-
velles collections par image
cliquable
• Accès aux accessoires et aux
parfums
• Accès à une liste visuelle des Chaque page de second niveau
athlètes sponsorisés par la aura des boutons d’action
marque et les évènements dont permettant à l’utilisateur de :
S. Tacchini est partenaire
• Accès à une page renseigne- • Changer de pages,
ment pour devenir licencié de • Partager les contenus qu’il
la marque trouve intéressant,
• Accès par images cliquables • Aimer les contenus etc.
aux articles de presse, ancienne
vidéo de communication de la
marque
• Inscription à une Newsletter
18 191. LIVRABLES
• Élaborer un cahier des charges fonc-
tionnel et technique
• Proposer un retro-planning prévi-
sionnel
• Élaborer un budget
• Création de contenus dans le but
d’optimiser les objectifs
• Concevoir une identité visuelle du site
• Concevoir une charte graphique de la
marque
• Réaliser une charte éditoriale
PRESTATIONS
• Concevoir et réaliser le site internet
• Trouver une solution d’accessibilité
du site
• Sécurisé le site de manière optimale
ATTENDUES
• Proposer une solution pour le réfé-
rencement naturel
• Proposer une solution d’héberge-
ment
• Concevoir une campagne marketing
• Former en interne les personnes
concernées par le projet
• Assurer la maintenance et l’évolution
du site après livraison
Le planning s’organisera de la manière
suivante :
1. Préparation du projet
2. Conception du projet
3. Réalisation
4. Recettage
5. Lancement du site
6. Vie du site
Le budget sera calculé suivant :
• Les taux horaires de l’équipe s’occu-
pant du projet, qui s’élève à 60 € de
l’heure
• Les coûts des prestataires externes
chargés des missions spécifiques.
• Le prix de l’hébergeur web
• Les couts de campagne Google Ad-
words et Facebook Ads
20 21CHARTE ÉDITORIALE mettant une interaction pour les
utilisateurs.
une charte éditoriale permettra à la
marque de rester cohérent dans sa com- Le ton : il sera accueillant, sympa
munication globale. En voici les princi- thique et chaleureux.
paux points.
• Le blog :
• Le contexte : Dans le cadre du re-
nouvellement de son image, Sergio Le blog sera constitué de différentes ru-
Tacchini opère une refonte de son briques :
site web et adopte une stratégie de
communication globale renouvelée. 1. Look book,
2. articles (atcualités, témoignages,
vous et S, tacchini)
• Les cibles : définies grâce aux per- 3. 360° showroom
sonnas, leur élaboration a permis de 4. Rendez-vous du jeudi à Milan
déterminer que les cibles à atteindre 5. Restaurants et bonnes adresses
sont des sportifs, professionnels ou 6. Participez aux nouvelles collections
amateurs, actifs et sont des citadins (accès via membre +)
cultivés.
La forme : Les pages seront
agrémentés d’un titre, de photos et de
• Objectifs : texte. Ce dernier n’excedera pas une
page, l’utilisateur pourra commenter les
> 2000 Visiteurs par jour sur le articles et rubriques du blog.
site d’ici un an,
> moderniser l’image de la Chaque contenus sera partageable sur
marque, les réseaux sociaux.
> Obtenir des interactions grâce
au contenu du site sur les ré Il aura un accès à un formulaire pour
seaux sociaux participer aux nouvelles collections en
> Conquérir de nouvelles cibles, tant que membre +.
séduire par son caractère renou
velé. Le ton : Il sera amicale, joyeux
dynamique et décontracté.
• Le site web : les contenus du site se-
ront agrémentés de mots-clés perti-
nents, résultat d’une recherche pous-
sée et dans le cadre de la stratégie de
référencement.
La forme : Il sera très visuel avec
des images en full screen de
haute qualité pour la page d’ac
cueil.
Les pages de second niveau com
porteront des photos et des ar
ticles ainsi que des boutons per
22 23Chef de projet
Vanessa HERVAGAULT
DCPRO6
Sergio TACCHINI
Wintex Italia Srl , Via Savona 97
20144 Milano
Tel +39 02 49489301
Fax +39 02 49489315 TECHNIQUE
E-mail : info@sergiotacchini.com
Chef de projet : Vanessa HERVAGAULT
DCPRO6
Sergio TACCHINI
Wintex Italia Srl , Via Savona 97
20144 Milano
Tel +39 02 49489301
Fax +39 02 49489315
E-mail: info@sergiotacchini.comSOMMAIRE
RESSOURCES DU PROJET
1. Humaines
2. matérielles
3. financières
Solution digitale
1. Nom de domaine
RESSOURCES
2. Hébergeur
3. Réponse technique
4. Site web
4.1 Arborescence
DU PROJET
4.2 Wireframes
5. Référencement
6. Mises à jour
7. Sécurité du site
8. Accessibilité
9. Maintenance
10. Évolution du site
PRESTATIONS ATTENDUES
1. Planning prévisionnel
2. Budget
2 31. HUMAINES permet de planifier des tâches spéci-
fiques.
Référenceur : du site web en cinq langues différentes
et un UX Designer.
• Gantter : Logiciel de création de • Google Adwords : Générateur de-
Afin de mener à bien le projet de refonte
planning. mots clés,. C’est la société SOPEXA, basée en Italie
du site web sergiotacchini.com, une
• Mantis : Logiciel open source per- • Copyscape : Logiciel de vérification et un acteur mondial reconnu dans la
équipe de sept personnes, travaillant au
mettant des tests sur le site et préve- de copie de contenus. communication, qui sera en charge de la
sein du siège de Sergio Tacchini, situé à
nir les bugs • Google Webmaster : Outil d’analyse réalisation de la vidéo. Le prix de la vidéo
Milan, s’investira pour des missions pré-
de l’indexation du site. HD revient à 32 000 €, acteur, scénario,
cises :
Webdesigner : • Outil référencement : Outil propo- musique et montage compris.
sant une palette d’outils d’analyse du
1. Chef de projet : il aura en charge
• Adobe Illustrator : Logiciel de créa- référencement.
la gestion complète du projet et de-
tion graphique vectorielle (logo) • Google Keywords Planner : Outil qui
vra être vigilent sur les délais et des
• Adobe Photoshop : Logiciel de re- évalue le volume de recherche des
étapes nécessaires à la bonne finalité
tourche, de traitement d’image et de expressions cibles
du site. Il sera le vecteur d’informa-
dessin assisté par ordinateur. • Google Trends : Il permet d’estimer le
tion entre la direction, les interve-
• Adobe InDesign : Logiciel de Publica- volume de recherche des internautes
nants et les prestataires.
tion Assisté par Ordinateur. pour des expressions précises. Adresse :
• StartPage : cet outil permet de trou- Via Cusani, 10, 20121 Milan
2. Webdesigner : Il réalisera l’identi-
Intégrateur : ver le postionnement réel d’un site
té graphique du site, sa charte gra-
(de manière privée).
phique, les wireframes et les ma-
• Atom : Éditeur de texte libre + ses • Google Analytics : Outil de mesure
quettes.
packages (Emmet, Atom beautify, et d’analyse des données sur le site.
3. Intégrateur : Il intégrera tous les Bracket Matcher, Commande Palette,
contenus du site (image, texte, vidéo). Auto indent, Color Picker, W3C valida-
tion)
3. FINANCIÈRES
4. Développeurs : les développeurs • BitBucket : Stockage de fichiers de
Pour mener à bien ce projet, les res-
auront en charge la partie back-end façon gratuite et illimitée,
sources financières n’ont pas été plafon-
du site, avec la création de la BDD, la • Langages web : HTML5 et CSS3, Jque-
nées. La Direction de Sergio Tacchini a
configuration de l’hébergeur, la main- ry, JavaScript,
tout de même décidé que les ressources
tenance du site et l’accessibilité. internes à l’entreprise seront prioritaire-
Développeurs :
ment mise à contribution pour la réalisa-
5. Rédactrice web : la rédactrice web tion de la plate-forme.
aura en chage les contenus du site • Aruba.it : Hébergeur de site web
et devra travailler en concomitance • MySQL Workbench : gestion de
Elle a émis la possibilité, que la contri-
avec la référenceur web. bases de données.
bution d’un ou plusieurs prestataires
• Langages web : HTML5 et CSS3, Jque-
extérieurs étaient possible si des conte-
6. Référenceur web : Il devra optimiser ry, JavaScript, PHP.
nus et/ou fonctionnalités réclamaient
les contenus pour le référencement • Mamp : Le logiciel MAMP (abbrévia-
d’autres compétences.
SEO. tion de Macintosh, Apache, Mysql
and PHP) permet de lancer un ser-
veur web local sur une machine fonc-
2. MATÉRIELLES tionnant sur le système d’exploitation
Profils internes : Le taux horaire des
compétences en interne est fixé à 60 €/h
Mac OS X.
HT soit 420 € pour 7 heures de travail.
Chef de Projet :
Rédactrice web :
Prestataire externe : En accord avec la
• Gmail : Boîte de messagerie électro-
Direction, il a été choisi de faire appel à
nique. • Open-Office : Logiciel de texte.
plusieurs prestatataires :
• Google Drive : Logiciel de partage de • Google doc : Logiciel de texte avec
fichiers avec possibilité de modifica- partage.
Un prestataire vidéo afin d’obtenir un
tion et commentaires en direct. • MailShimp : Outil utilisé pour les
produit vidéo de haute qualité ainsi que
• Trello : Outil de gestion de projet qui newsletters.
deux traducteurs pour les déclinaisons
4 51. NOM DE DOMAINE CPU physiques maximum : 2
Mémoire RAM (type) : 16 Go (DDR4)
Le nom de domaine sera le même que max RAM : Jusqu’à 768 Go
celui du site précédent, à savoir : Disque dur (type) : 2x 300Go (SAS - 10k
rpm)
Disque dur - Hot Swap : Par défaut de
sergiotacchini.com disque dur 2.5 « (SATA / SAS / SSD)
Max. Disque dur (type par défaut) : 8
RAID matériel (Type) : Dell PERC H330
2. HÉBERGEUR 0,1,5,10,50 pas de cache de matériel
Nr. Alimentations : 2
Il a été décidé de changer l’hébergeur et
de souscrire un contrat avec le leader en services inclus
terme de solution d’hébergement : Aru-
ba.it Il est situé à Milan, où l’entreprise Système d’exploitation : CentOS Linux
siège également.
SOLUTION
64 bits
connectivité Inclus : plat 100Mb /
Nous avons choisi une offre technique ou 1Gb / s à utiliser 25 To / mois
qui nous permette un site rapide, fonc- Parallels Plesk : jusqu’à 10 domaines
tionnel et sécurisé. adresses IP publique : IPv4 dédié 1
DIGITALE
Service de la protection par des at-
Notre choix s’est porté sur un serveur dé- taques : DDOS inclus
dié afin de profiter de ses performances
spécifiques : services optionnels
Mise à niveau du matériel : oui
Data Center et certifications : oui
Assistance et soutien gratuit : oui
téléphone : oui
Par e-mail et le billet : oui
Guide et Base de connaissances : oui
Soutien aux mains et yeux : oui
Serveur professionnal 3.7 Soutien Smart Hands & Eyes : oui
Système de soutien et matériel de
Prix : 129,00 € HT / mois support : oui
modèle Dell : PowerEdge R630
CPU : Intel® Xeon® E5-2630v3
CPU Clock : 8 x 2,4 GHz
Nr. Socket : 1
Nr. De base : 8
6 73. RÉPONSE Éditeur de fichiers • Montage du film vidéo incluant les
bruitages et les musiques,
D’autres contenus du site seront éga-
lement développer avec ces langages :
TECHNIQUE L’éditeur de fichier utilisé sera Atom. • Édition et retouche de la maquette,
grâce auquel les langages HTML5, CSS3 , • Adaptation au support (blueray, ciné- • Le blog
JQuery, javascript et PHP seront utilisés. ma, TV etc.) • Lien vers la boutique (la boutique
Le site web reste pour l’instant sur Magento mais
C’est la société SOPEXA qui aura en est liée au site. Il est prévu de l’inclure
Pour des questions de sécurité et de charge sa réalisation. dans la continuité du projet par la
rapidité, il a été défini que la meilleure suite)
solution technique était de réaliser un La vidéo pourra être stopper si l’utilisa- • Les collections
site dynamique et responsive sur me- teur ne souhaite pas la visionner et la • L’histoire de la marque
sure. Pour cela il nous faudra sur notre Éléments principaux partager sur les réseaux sociaux s’il le • Les pages personnelles des membres
machine : souhaite. plus
MENU STICKY • Les athlètes et sponsoring de la
• Apache : c’est ce qu’on appelle un SLIDER marque
serveur web. Il s’agit du plus impor- Particularité : afin de ne pas gêner • Les parfims et accessoires
tant de tous les programmes, car l’immersivité de l’utilisateur, il passe en Le slider utilisera un plugin JQuery. Les • Les licenciés
c’est lui qui est chargé de délivrer les transparance lorsque la souris ne passe cinq dernières actualités défileront et il • Les articles de presse et la communi-
pages web aux visiteurs. Cependant, plus dessus. affichera trois atualités en même temps cation
Apache ne gère que les sites web avec une se situant au milieu mise en • Inscription à la newsletter
statiques (il ne peut traiter que des Nous avons choisis un menu sticky, très avant avec un effet de rapprochement de • Formulaire de contact
pages HTML). Il faut donc le complé- apprécié des utilisateurs pour plusieurs l’image cliquable. • Accès au réseaux sociaux
ter avec d’autres programmes. raisons :
• PHP : c’est un plug-in pour Apache
qui le rend capable de traiter des • Il permet à l’utllisateur un accès
pages web dynamiques en PHP. En permanent au menu, sans avoir à
clair, en combinant Apache et PHP, remonter la page en passant par le
notre ordinateur sera capable de lire scroll.
des pages web en PHP. • Il permet une navigation plus rapide
• MySQL : c’est le logiciel de gestion et efficace.
de bases de données. Il permet d’en- • Il augmente la conversion des visi-
registrer des données de manière or- teurs de manière significative (22%).
ganisée (comme la liste des membres
de votre site). Nous n’en aurons pas Réponse technique : le sticky menu sera
besoin immédiatement, mais autant réalisé en HTML5, CSS3 et Javascript.
l’installer de suite.
VIDÉO
Base de donnée
La réalisation de la vidéo demande toute
Nous travaillons sur un parc machine une préparation technique :
Macintosh, nous utiliserons donc MAMP.
Une fois configuré une page vide http:// • Définition du cahier des charges
localhost:8888/tests/ pourra s’afficher. • Écriture du synopsys et du scénrario
• Repérage des lieux de tournage
• Conception du découpage technique
du film
• Casting et recherche des moyens
techniques et humains,
• Prise de vue / mise en scène / tour-
nage des différents plans
• Enregistrement des voix hors champs
(voix off)
8 94. LE SITE WEB SITE WEB sergiotacchini.com E-Shop sur Magento, lié au site
4.1 Arboresence
PANIER
HEADER MAIN Pages de second niveau E-SHOP
Produits 1 (description
MENU STICKY Slider News Contenu MENU Page produits
courte / image / prix)
Logo Histoire Contenu Hommes Filtres Produits 2 (description
courte / image /prix)
Blog Femmes Catégorie / Prix / Taille
Sergio Tacchini Contenu
TOTAL
Produits 1 I Produits 2 I
Les 50 ans E-Shop Enfants
Produit 3 I Produits 4 I
Proposition autres pro-
Accessoires Produits 5 I Produit 6 I
News Nouvelles collections Contenu duits
Produits 7 I Produits 8 I
Blog Athlètes et sponsorship Contenu Archives Produit 9 Continuer mes achats
E-Shop Parfum / Accessoires Contenu Soldes Chaque image est cliquable
Membre + Licenciés Contenu Payer
Presse OU
Barre de recherche Contenu
et communication Page produits individuelle
Contact Connection
Connection M+
VIDÉO
Titre I Image I Réference I Des- E-mail / mot de passe
FOOTER Email / Mot de passe
cription I Taille I Quantité I Prix
Je deviens Membre +
Partage / Arrêt OK
Logo Valider I Proposition autres produits OU
RÉSEAUX SOCIAUX Copyright
Mentions légales Compte Membre + Inscription
Facebook
Instagram Mon compte : modi-
Devenez licenciés Nom, prénom, adresse,
fier mes informations Favoris Ajouter au panier téléphone, email
Youtube E-Shop Mes avantages / Ac- Je deviens Membre +
cès aux ventes pri- OK
Nouvelles collections vées / Je participe à la
prochaine collection
Newsletter
Formulaire etc. PAIEMENT
Je m’inscris Mon compte
Email / Message OK Je m’inscris à la Newsletter
Paypal Carte ban-
Email OK caire
Retour au site OK OK
10 114.2 Les wireframes
Desktop Tablet Mobile Zoom sur le Header
Résolution des écrans
Desktop : 1600 pixels
Tablet : 1024 pixels
Mobile : 800 pixels
L’intégrateur teindra compte des résolu-
tions d’écran ci-dessus lors de l’intégra-
tion des contenus et utilisera les Média
queries.
Le site sera dynamique et responsive,
accessible, ergonomique et très visuel
pour plonger l’utilisateur dans l’univers
de Sergio Tacchnini.
12 135. LE RÉFÉRENCEMENT Le référencement SEA (Search Engine
Advertizing) :
6. MISE À JOUR
Afin de rendre le site accessible faci- Des mises à jour régulières seront effec-
lement sur les moteurs de recherche, En complément du SEO mis en place, des tuées sur les logiciels utilisés.
nous allons utiliser le SEM (Search campagnes SEA (campagnes payantes)
Engine Marketing). Cette stratégie re- seront créées. Un budget leur sera Logiciels
groupe deux stratégies différentes : le aloué. Les avantages du SEA :
SEO et le SEA. • Apache
• Il n’y a pas de délai dans l’obtention • MySQL
des résultats. Le site est effective- • PHP
Le référencement naturel SEO (Search ment visible dès le lancement des • MAMP
Engine Optimization) : campagnes. • Atom
• Le retour su ROI (Retour sur Investis-
Afin d’obtenir une visiblité maximale sement ) est rapide et facile. Web
pour le site, il va falloir définir une mé- • Les campagnes Adwords sont vi-
thodologie de travail que l’on devra sibles d’une manière plus large, via • Navigateur Google
suivre concernant le SEO : les réseaux Adsence. • Google analytics
• Possibilité de cibler finement le pu-
1. Les mots clés : il est impératif d’ef- blic. Les contenus du site seront également
fectuer une recherche de mots clés modifiés selon les besoins et les actuali-
pertinents. Le réfenceur et la rédac- Les coût seront calculés au coûts par clic tés de la marque.
trice web travailleront ensemble (CPC).
pour otpimiser les contenus. Contenus du site
Des campagne Google Adwords, face-
2. Le design et l’accessibilité du site : book Ads. • Slider
Une navigation claire des contenus • Le blog
de qualité augmenteront son réfé- • Avantages Membres +
rencement. • Modification de la vidéo
• Mise en ligne des nouvelles collec-
3. La pertinence des contenus : tions
Nommer les images, ne pas propo- • Les pages accessoires et parfums
ser des contenus en doublon partici- • Modification des images placées en
pront au bon référencement. fond du site
• Les articles de presse
4. Se conformer aux guidelines des mo-
teurs de recherche : ne pas mettre Réseaux sociaux
de liens cachés ou satellite.
• Posts régulièrs des contenus face-
Respecter toutes ces règles de base per- book, Instagram et Youtube, selon
mettra un référencement naturel opti- les sources disponibles et l’actualité.
mal. Les astuces concernant le référen-
cement restent nombreuses.
14 157. SÉCURITÉ DU SITE ture, d’écriture et de suppression des
fichiers contenus sur votre machine. Il 8. ACCESSIBILITÉ Handicap Visuel
Le site sera entièrement sécurisé. Afin de contrôle également la légitimité du ma-
remplir pleinement ce besoin essentiel, nipulateur des fichiers, en vérifiant que ’’Mettre le Web et ses services à la disposi- On estime que près de 10% de la popu-
voici comment remédier aux risques : le propriétaire du script est également le tion de tous les individus, quels que soient lation souffre de troubles légers ou très
propriétaire des fichiers manipulés, par leur matériel ou logiciel, leur infrastruc- importants de la vision.
exemple. ture réseau, leur langue maternelle, leur
Protection du script Afin de rendre le site accessible aux per-
culture, leur localisation géographique ou
Le risque est qu’un individu ait la possi- Le paramètre «Register_Glo- leurs aptitudes physiques ou mentales.’’ sonnes déficientes visuelles, des outils
seront utilisés :
bilité d’agir sur les variables lorsqu’elles bals»
passent par une URL. Tim Berners-Lee, inventeur du Web et
directeur du W3C (World Wilde Web • Check My Colours : vous renseignez
Ce paramètre joue principalement sur
Consortium). une URL de votre site, et l’outil vous
Solution : L’utilisation des sessions ou les variables, il permet de contrôler la
envoie un feedback listant les élé-
des cookies est fortement recomman- provenance des variables intervenant
Nous souhaitons adapter le site aux per- ments à améliorer.
dée. sur votre site. Ce paramètre vous oblige
sonnes souffrant de handicaps visuels, • Color Oracle : cet outil permet de
à définir vous même le contenu de vos
auditifs, moteurs et permettre au site montrer ce que voit une personne
Accès privés aux membres / variables, et empêche les visiteurs de le
d’atteindre un level AA en répondant à ayant des difficultés à différencier
faire pour vous.
connexion des membres un maximum de critères du WCAG 2.0 les couleurs. Vous pouvez aussi utili-
(Web Content Accessibilité Guidelines ser le plugin Chrome « I Want To See
Si la seule protection est la redirection 2.0). Like.
automatique des membres, un risque • WebAIM Contrast Checker, permet
est bien présent. de mesurer la qualité du contraste
entre deux couleurs de votre site.
Solution : Le contenu de l’espace proté-
gé ne doit pas apparaître sur les pages Handicap auditif
des visiteurs.
Selon l’INSEE, 11% de la population fran-
Faille include çaise souffre de problèmes d’audition
(du handicap léger à la surdité totale).
Cette célèbre faille prends le contrôle
entier du site web. Pour nos contenus visuels et audios,
nous veillerons à utiliser des sous-titres
Solution : La solution est une ligne de ou des transcriptions.
code
Handicap cognitif
$page=preg_replace(«/[^a-z0-9_ ]/i», «»,
$page); Il existe de nombreuses personnes qui
if(!@include(«includes/$page.php»))die-; ont du mal à concentrer leur attention
sur la tâche à accomplir. Les distor-
sions telles que le défilement du texte,
Configuration de Apache et les icônes clignotantes et les fenêtres
Mod_PHP contextuelles peuvent rendre l’environ-
nement Web difficile ou même impos-
Paramètre Safe_Mode sible.
Le safe_mode doit toujours être activé,
il ajoute tout un lot de sécurités non Même pour les utilisateurs non at-
négligeables pour la gestion et le trai- teints de ces troubles, ces particulari-
tement des fichiers. Celui-ci intervient tés peuvent être irritantes. Nous évite-
principalement dans les droits de lec- rons donc toute fenêtre clignotante, les
doubles sens dans les textes, ou une
simple erreur 404.
16 17Handicap moteur1
Le handicap moteur touche un nombre
varié de personnes qui peuvent avoir les
maladies suivantes : atteintes à la moelle
épinière, arthrite, paralysie cérébrale,
maladie de Parkinson etc.
Les personnes équipent en général leur
ordinateur des outils leur permettant
d’utiliser internet plus facilement
9. MAINTENANCE
Une maintenance technique et correc-
tive sera effectuée de manière régulière
PRESTATIONS
ATTENDUES
afin d’optimiser le site.
• Mise à jour et adaptation des appels
d’Api javascript ;
• Correction de problème d’accès ou
de lenteur sur une base de données
SQL avec l’optimisation des requêtes
et/ou de la structure des tables ;
• Déboggage de code source proprié-
taire ;
• Correction des bugs (erreur 404,
liens cassés etc.)
• Création d’une page de maintenance
(recommandée par Google) : afin
de prévenir l’utilisateur, toutes les
pages du site renvoient un header
HTTP 503 Service Unavailable.
10. ÉVOLUTION DU SITE
Le site sera amené à évoluer selon :
• Les retours des utilisateurs,
• Les tendances du moment,
• Les évolutions des langages.
Ceci, afin d’améliorer de manière conti-
nuelle et pérenne le site web de la
marque.
1 https://www.lafabriquedunet.fr/
creation-site-vitrine/articles/guide-accessi-
bilite-site-web/
18 191. PLANNING
Le planning sera découpé en cinq étapes :
1. Démarrage du projet
• Analyse et recueil des besoins
• Conception des cahiers des charge-
fonctionnel et technique
• Recherche des prestataires
• Création d’un planning prévisionnel
• Réunion d’information avec l’équipe
2. Conception
Chef de projet
Vanessa HERVAGAULT
• Réalisation de l’arboresence DCPRO6
• Réalisation des zonings
• Réalisation des maquettes
• Mise en place de la stratégie de réfé- Sergio TACCHINI
rencement Wintex Italia Srl , Via Savona 97
• Rédaction des contenus
20144 Milano
3. Production
Tel +39 02 49489301
• Intégration des contenus
• Configuration du serveur Fax +39 02 49489315
• Transfert du NDD
• Création de la BDD E-mail : info@sergiotacchini.com
4. Recettage
• Test en back-end, front end et résolu-
tion des bugs
5. Lancement du site
• Envoi de newsletter annonçant le
nouveau site
• Posts sur Facebook et Instagram
• Mise en place de la vidéo sur You-
tube
• Campagnes Facebook Adds et Goo-
gle Adwords
2. BUDGET
Un budget a été réalisé. Il présente les
coûts internes, externes auxquels ont
été rajouté une marge de risque de 7%.
Cf le document en pièce jointe
20 21Vous pouvez aussi lire
