Le site Internet de FilCall.com

Transcription

1 Le site Internet de FilCall.com Visuel de la page d'accueil du site FilCall.com (Février 2008) Introduction Le développement du site FilCall.com (filiale de la société VitavieTravel.com) a été conçu à partir du seul élément graphique existant au sein de la société, le logotype, tant au niveau des couleurs (rouge et blanc) qu'au niveau de la forme (rectangle à coins arrondis pour l'interface). Le site se découpe en trois partis principales : l'en-tête, le corps (où s'insère le menu principal d'un côté et le contenu des pages de l'autre) et le pied de page. Du fait d'un site "vitrine" avec peu de contenu, l'ensemble est centré dans la fenêtre des navigateurs sur un fond dégradé rouge pour focaliser l'attention des internautes. 33

2 Découpage fonctionnel du site FilCall.com (Février 2008) Une interface moderne et efficace L'obtention d'un design épuré, convivial et chaleureux s'est fait de la manière suivante : Les pages sont construites de façon claire et aérée par une implémentation d'éléments graphiques sur fond blanc et l'emploi de couleurs sombres au niveau du texte (noir pour les paragraphes, gris pour les titres, rouge orange pour les liens, etc.) créant un fort contraste pour une lisibilité accrue. La navigation linéaire et principalement en seul clic se fait intuitivement. L'ensemble des liens se situe dans la partie gauche des pages sous forme de liste. Seulement quatre autres liens se trouvent dans l'en-tête du site (en haut et à droite) sous forme d'icône simple de couleur blanche : une enveloppe pour contact, un cadenas pour l'espace privée, une feuille cornée pour mentions légales et une maison pour accueil. Le message direct et concis (phrases simples et paragraphes courts) amplifie le discours qui se veut franc et précis. 34

3 L'organisation du site Le découpage du site s'est fait sous forme d'un tableau de 710 pixels de large et centré dans la fenêtre des navigateurs Internet (il est constitué d'une seule colonne sur cinq lignes). Les pages génériques sont quant à elles composées par des blocs via le style CSS : {DIV #minimenu} pour le menu du site à gauche et {DIV #contenu} concernant le contenu des pages. Découpage fonctionnel d'une page générique du site FilCall.com (Février 2008) Il y a bien sûr une petite exception concernant le page d'accueil ("Homepage") qui a sa propre mise en page dans le style "marketing" : une grande photographie en fond qu'argumente une phrase d'accroche jouant sur la différence de taille et de graisse au niveau de la police de caractères. 35

4 La mise en page La cohérence visuelle de l'ensemble des pages est confiée à des styles CSS (présents dans le fichier "include.php" insérés par programmation dans chaque page agissant ainsi comme une feuille de styles externe). La puissance du CSS au niveau des effets visuels réalisables, la facilité et la rapidité de transformation sur la totalité du site est la principale raison de son utilisation. La feuille de styles Les pages sont hiérarchisées principalement en deux niveaux de titre par les balises HTML suivantes : <H1> et <H2>. Le corps du texte est quant à lui mis en forme par la balise <P> (paragraphe). Détail de la feuille de styles du site FilCall.com (Janvier 2008) 36

5 Les polices de caractères utilisées Les titres se différentient, en dehors de la taille et de la couleur, par l'utilisation de la famille de police de caractères serif ("Times New Roman", Times, serif) en opposition de la famille sans-serif (Verdana, Arial, sans-serif) pour le corps du texte. Les couleurs utilisées Mise en forme du texte d'une page générique type du site FilCall.com (Février 2008) Rouge FilCall (fond et texte) R V B / #E43A3A Rouge intermédiaire R V B / #8F1D1D Rouge sombre (fond) R V B / #3A0000 Orange (liens et texte) R V B / #F35B14 Gris clair (texte) R V B / #BFBFBF Gris intermédiaire (titres) R V B / #8F8F8F Noir (texte) R V B / # Blanc (texte) R V B / #FFFFFF 37

6 Le graphisme Les images La réalisation des divers visuels a été effectuée sous Adobe Photoshop CS2 (et ImageReady occasionnellement) aux deux formats usuels du Web : le.jpg et le.gif. Le.JPG est dédié aux photographies, aux images complexes avec beaucoup de couleurs comme l'apparence générale du site, les bandeaux en haut des pages, les logotypes des différents référents, etc. Exemples d'en-tête de page du site FilCall.com Le.GIF est utilisé pour les éléments avec transparence, peu de couleur ou animés tel que les puces, les icônes en haut du site, les boutons d'action, les bandeaux publicitaires, etc. Exemple d'un bandeau publicitaire du site FilCall.com 38

7 L'animation La recherche graphique concernant l'en-tête du site FilCall.com s'est effectué sous Adobe Photoshop CS3 avec l'élaboration d'une image d'arrière-plan au format.jpg. A partir de cette base, une animation a été produite sous le logiciel Macromedia Flash 8 pour profiter de la puissance de la mise en mouvement des divers objets et de la légèreté du fichier généré (13 Ko seulement en format.swf).l'apparition du haut du site Web gagne donc en fluidité et en finesse des détails avec une interaction accrue sur le menu d'icônes. Animation Flash du site FilCall.com (Février 2008) Les autres pages La page "error404" Visuel de la page "error404.html" du site FilCall.com (Février 2008) 39

8 La page erreur 404 a été réalisé pour permettre aux internautes de revenir sur la page d'accueil en toute circonstance et interdire par la même occasion la visualisation de répertoire contenant des fichiers autres que des pages Web consultables. Le fait de personnaliser cette page dans la charte graphique du site apporte une note de professionnalisme et de sérieux pour la société FilCall. La page "login" La page "login" avait déjà été créée avant le site en ligne pour permettre aux clients de la société de consulter les statistiques concernant leurs prestations et leurs statistiques. Cette page (ainsi que l'ensemble des pages statistiques) a donc été retravaillée visuellement pour un prolongement logique à partir d'un lien sur le site FilCall.com. Visuel de l'étude de la page "login" du site FilCall.com (Février 2008) 40