Dossier de Conception Site Web · 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

Dossier de Conception Site Web

Dossier de conception Mikael DESPORTES 2019 1


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


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. »


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


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…


Logo type retenu

Logo flat design

Felix Titling (Regular)



Couleurs retenues et déclinaisons logo

Polices de caractères

« Felix Titling » pour le LOGO « Roboto » Regular pour le site


IV SITEMAP

Page Home Page Station

Page Randonnée Page Quoi de neuf?

Page Ski

Page Recherches

Page ContactPage Medias


Arborescence du site


V Phases de conception

I - Zoning

II - Sketching

III - Wireframes

IV - Mockup

VI - Maquettes Graphiques

ZONING


Zoning type des pages (ex page home)

SKETCHING


WIREFRAME

Version Desktop





Version Mobile


MOCKUP


https://mikael-desportes.fr/travaux/Mokup/

On peutr visualiser le mockup du site à cette adresse

https://mikael-desportes.fr/travaux/Mokup/

MAQUETTES GRAPHIQUES





Version Mobile


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


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.


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


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


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


CERTIFICATS DE CONFORMITÉ


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.


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).


Structure racine FTP


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 ».


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!!


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…


Documents

Dossier de Conception Site Web · 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