Dossier de Conception Site Web · 100% signifie que le temps de chargement du site est le plus...
Transcript of Dossier de Conception Site Web · 100% signifie que le temps de chargement du site est le plus...
Dossier de Conception Site Web
Dossier de conception Mikael DESPORTES 2019 1
Dossier de conception Mikael DESPORTES 2019 2
SOMMAIRE I -- Brief clientII -- Brief prestataireIII -- Charte GraphiqueIV -- SitmapV -- Phases de conception
I - ZoningII - SketchingIII - WireframesIV - MockupVI - Maquettes Graphiques
VI -- SEOVII -- Sources (droits d’auteur)VIII -- Certificats conformitéVIIII -- Recette
Dossier de conception Mikael DESPORTES 2019 3
I Brief Client
« Nous avons reçu votre questionnaire et voici les éléments de réponse. Le « Grand Alpana » souhaite se doter d’un site internet pour faire sapromotion.
Le public visé est assez large : familial, couples, groupes, comité d’entreprise, sportifs… Nous cherchons à avoir un outil de communicationsimple qui aura vocation à évoluer dans le temps. Nous possédons en interne une ressource qui prendra le relais sur la mise à jour du site.Nous ne souhaitons pas de CMS.
Nous souhaitons un site consultable tout autant sur ordinateur et smartphone avec un temps de chargement très rapide. Nous ne possédonspas encore de nom de domaine ni d’hébergement mais nous nous occuperons de cette partie. Nous n’avons pas de logo. Nous souhaitons quevous nous fassiez des propositions sur ce sujet. Concernant les contenus, nous vous fournirons les textes, et quelques photos. Nous sommesd’accord pour que vous complétiez nos existants avec des photos additives. La réalisation d’une vidéo serait un plus mais nous n’avons pas ungros budget pour cette partie.
Nous souhaitons un plan d’accès interactif et des pages présentant la station, nos pistes, les activités de randonnées en été et un agenda. Nousne sommes pas intéressés par ce que vous appelez site « one page ». Nous sommes intéressés par votre proposition de « référencementnaturel – seo ». Une fois cette première version publiée et éprouvée, il sera envisageable de vous confier un deuxième lot de travaux pour desévolutions. »
Dossier de conception Mikael DESPORTES 2019 4
II Brief ClientEquipe de projet : Chargé d’affaire + Web designer.
Etape 01 : suite à l’analyse des éléments fournis par le client, voici la liste des travaux à réaliser :
Produire un zoning de la page d’accueil version desktop. (Bandeau menu, slider, triple colonage de contenu, footer). Produire un ou plusieurslogos et une charte couleur. Nous validerons ces pistes de travail avec le client et établirons avec lui un sketching de type zoning durant le rdvde lancement de chantier.
Etape 02 : suite à la validation de nos propositions avec le client, voici la liste des travaux à réaliser :
Produire les wireframes version desktop et mobiles (page d’accueil uniquement pour les mobiles). Voici la liste des pages : accueil, station,pistes, randonnées, média, contact (accessibles depuis le menu primaire) crédits, politique de confidentialité (accessibles depuis le footer).Produire un mockup version desktop. Largeur maximum : 1200px.
Etape 03 : suite à la validation du mockup par le client, voici la liste des travaux à réaliser :
Produire les maquettes de chaque page version desktop et de la page d’accueil version mobile (avec sa version menu déroulé). Utiliser lestextes fournis sur les maquettes (sans correction).
Etape 04 : suite à la validation des maquettes par le client, voici la liste des travaux à réaliser :
Réaliser l’intégration des pages desktop et mobiles. Utiliser le logo et la charte couleur validée. Breakpoint principal pour passage en burgermenu : à déterminer par vos soins (min : 700px). Navigateurs cibles : chrome, firefox, safari, edge. Effectuer les phases de test et lescertifications (temps de chargement, indexation google, w3c). Mise en production avec un sous domaine « alpana » sur nos serveurs avecfourniture d’un htaccess assurant l’url rewritting permanente sécurisé. Mise à jour et finalisation du dossier de conception pour livraison finaleaprès recette.
III CHARTE GRAPHIQUE
Dossier de conception Mikael DESPORTES 2019 5
LOGO
Projet GRAND ALPANA
ETUDE LOGO TYPE1- Veille concurrentielle des logos de stations de ski et domaine skiables…
2- Création de propositions de logos…
Dossier de conception Mikael DESPORTES 2019 6
Logo type retenu
Logo flat design
Felix Titling (Regular)
Dossier de conception Mikael DESPORTES 2019 7
Dossier de conception Mikael DESPORTES 2019 8
Couleurs retenues et déclinaisons logo
Polices de caractères
« Felix Titling » pour le LOGO « Roboto » Regular pour le site
Dossier de conception Mikael DESPORTES 2019 9
IV SITEMAP
Page Home Page Station
Page Randonnée Page Quoi de neuf?
Page Ski
Page Recherches
Page ContactPage Medias
Dossier de conception Mikael DESPORTES 2019 10
Arborescence du site
Dossier de conception Mikael DESPORTES 2019 11
V Phases de conception
I - Zoning
II - Sketching
III - Wireframes
IV - Mockup
VI - Maquettes Graphiques
ZONING
Dossier de conception Mikael DESPORTES 2019 12
Zoning type des pages (ex page home)
SKETCHING
Dossier de conception Mikael DESPORTES 2019 13
WIREFRAME
Version Desktop
Dossier de conception Mikael DESPORTES 2019 14
Dossier de conception Mikael DESPORTES 2019 15
Dossier de conception Mikael DESPORTES 2019 16
Dossier de conception Mikael DESPORTES 2019 17
Version Mobile
Dossier de conception Mikael DESPORTES 2019 18
MOCKUP
Dossier de conception Mikael DESPORTES 2019 19
https://mikael-desportes.fr/travaux/Mokup/
On peutr visualiser le mockup du site à cette adresse
MAQUETTES GRAPHIQUES
Dossier de conception Mikael DESPORTES 2019 20
Dossier de conception Mikael DESPORTES 2019 21
Dossier de conception Mikael DESPORTES 2019 22
Dossier de conception Mikael DESPORTES 2019 23
Version Mobile
Dossier de conception Mikael DESPORTES 2019 24
SEO
Meta description de chaque page
personnalisée
Mots clés pour chaque onglet de
page
Noms des fichiers html détaillés et pertinents
Dossier de conception Mikael DESPORTES 2019 25
Noms des images ainsi que la balise ALT détaillés et pertinents
La méta description, les titres (et titre des onglets), les noms des fichiers (html, images…), les balises ALT contribuent à un meilleur référencement naturelle (partie on-site du SEO) :
Dans notre cas, tous les mots clés comme GRAND ALPANA, ski, randonnée, station, piste, neige…seront à intégrer au maximum.
Dossier de conception Mikael DESPORTES 2019 26
DROITS D’AUTEUR
Images libres de droits
Libre de droit Non libre de droit
Libre à usage privée
Libre même à but commercial
Image/Vidéo
Dossier de conception Mikael DESPORTES 2019 27
Voici les possibilités testées lors de la phase de maquettage
Images utilisées pour le site GRAND ALPANA
Images libres de droit : le client et le prestataire pourront utiliser les images sans contraintes ni sanctions.
Sources
Pixabay / Pexels / Google (avec filtre )
Images non libres de droit : le client devra fournir ses images ou payer une option supplémentaire (banque d’images).
Sources
Pixabay / Pexels
Dossier de conception Mikael DESPORTES 2019 28
Vidéo utilisées pour le site GRAND ALPANA
Vidéos libres de droit: Le client et le prestataire pourront utiliser la vidéo sans contraintes ni sanctions.
Sources
Pixabay / Pexels
Création d’une vidéo (Premiere pro) à l’aide de vidéos illustrant les activités du site GRAND ALPANA
Dossier de conception Mikael DESPORTES 2019 29
CERTIFICATS DE CONFORMITÉ
Dossier de conception Mikael DESPORTES 2019 30
Temps d’accès du site
Vérification du temps d’accès du site en version desktop (sur ordinateur) et mobile (sur tablette ou téléphone)100% signifie que le temps de chargement du site est le plus rapide possible.
Dossier de conception Mikael DESPORTES 2019 31
Déclaration d’indexation
La déclaration d’indexation par Google Search Console signifie que Google (moteur de recherche le plus utilisé dans le monde), reconnaitra le site dans ses résultats de recherches et de façon optimisé (même pour les mobiles).
Dossier de conception Mikael DESPORTES 2019 32
Structure racine FTP
Dossier de conception Mikael DESPORTES 2019 33
HTACCESS et HTTPS (Apache)
RewriteEngine OnRewriteCond %{SERVER_PORT} 80RewriteRule ^(.*)$ https://alpana.mikael-desportes.fr/$1 [R,L]
Afin de sécurisé le site, on installe un certificat SSL/TLS, mais le trafic ne sera pas nécessairement redirigé vers HTTPS.Pour cela l’on doit éditer ou créer un fichier .htaccess à la racine du site.Maintenant, le site se retrouve sécurisé!La méthode utilisée est de l’ URL rewriting, en redirection permanente qui a pour avantage d’éviter le « duplicate content ».
Dossier de conception Mikael DESPORTES 2019 34
Validateur W3C
Le passage du site au validateur W3C permet l’assurance d’une écriture de code propre et dans les règles de l’art.Cela permet également de corriger des bugs pendant l’écriture des lignes de code.Attention, certaines erreurs n’empêche cependant pas d’avoir un site visuellement beau, opérationnel et efficace!!
Dossier de conception Mikael DESPORTES 2019 35
RECETTE
La recette permet de vérifier si la conception du site est conforme au cahier des charges.Dans le cas du site GRAND ALPANA, la recette à été validée et permet donc maintenant de le mettre en production, c’est-à-dire visible sur internet:
https://alpana.mikael-desportes.fr
Il est cependant toujours modifiable afin d’y réaliser des retouches, correctifs, évolutions…
Dossier de conception Mikael DESPORTES 2019 36