Optimiser la structure d'un site vitrine

CH 2 (8) Optimiser la structure d'un site vitrine

Section 1 les différents choix (chap 1)

Section 2 : Définir la structure et les contenus d'un site Internet

I-Définir l'arborescence

= Architecture d'un site :

-Représenter graphiquement la structure du site

-Organiser les différentes pages

-Hiérarchiser les données et les infos de l'arborescence

-Obtenir une vision d'ensemble du site

-Faciliter le parcours de l'internaute, « Parcours client »

-Accéder à l'information de façon simple, intuitive et rapide

II- Définir les contenus

Textes, Images, Schémas, audio, vidéos, graphiques, dessins

-mettre en valeur le savoir-faire et les produits/ services

Fiches produits, newsletter, livre blanc, présentation de l'entreprise, histoire

Newsletter : entreprise qui offre une information importante exemple : un cours de marketing digitale en échange des coordonnées

Des contenus choisis suivant la charte éditoriale du site Internet, donc en fonction des objectifs fixés

Images et vidéos > contenus lourds > Attention au choix du format pour ne pas ralentir le chargement des pages.

Image : Jpg photo haute définition mais perte de pixels si allègement de l'image

             Png idéal pour apporter de la transparence dans l'image

Vidéos : AVI MP4 FLV

Rechercher différents sites

-Page d'accueil

-Menu horizontale/vertical

-Les différentes rubriques

-Fil d'Ar

Exemple :

Lyon aéroport.com site intuitif avec pas beaucoup d'écriture

On remplace les mots par des dessins

Le site responsive: site qui s'adapte à tout support, format (tablette,PC,smartphone) quel que soit le système d'exploitation ou le moteur de recherche

-Pour le confort

Définir le graphisme d'un site :

Quelques règles pour un site lisible :

Sobriété : graphisme simple, épuré, peu chargé (flat design

Clarté : 2 à 3 couleurs de textes, textes structurés (les éléments importants en haut de page), 1 à 2 polices de caractères, typo lisible

Charte graphique : liste les règles d'utilisation des éléments graphiques (logo, couleurs, typo..) pour la cohérence de l'image de l'entreprise et ses valeurs.

Objectif : l'harmonie entre les pages du site

CONSTRUIRE LES PAGES D'UN SITE

Une page web > fichier html (hypertext Markup Language) qui peut contenir d'autres fichiers (images, vidéos,sons, animations)

Créée par un webmaster ou webdesigner

Une maquette fonctionnelle (wireframe) est réalisée pour chaque page web

Chaque page du site contient l'info et doit attirer l'attention (AIDA)

p151

Back office

Front office

Header (en-tête)

Elément fixe qui reste quelle que soit la page du site, contenant :

-logo, en haut à gauche

-Baseline qui renseigne sur l'activité

-Menu (7 rubriques maxi)

...