Docstoc

Semiologie multim�dia:partie4

Document Sample
Semiologie multim�dia:partie4 Powered By Docstoc
					Chapitre 3                     Analyse de la page web



Pour réaliser la page d'un site web il faut construire ce qu'on appelle la maquette.

    1. La maquette du site
Dans la maquette on trouve des images et des textes. Dans ce texte de la maquette se
distinguait par l'indication de toutes « les spécifications typographiques : styles de caractères,
corps, justifications, interlignages, dimensions des marges, etc.

La typographie pourra être fonctionnelle (structurée) et invisible (esthétique).

    -   Typographie invisible : celle des textes de fiction. page roman

    -   Typographie structurée : celle des textes d'information. ( le résumé d'un chapitre d'un
        manuel scolaire).

On peut trouver aussi dans une page ce qu'on appelle bloc informatif il est autonome de la
page il pourra être un texte ou une illustration (un diagramme, une image en couleur…).

On peut trouver deux genres de typo :

- labeur ( antique, égyptienne, elzévir, didot, anglaise )

 - fantaisie (éclairée, gothique, normande, mutilée, ornée...). On utilise cette fantaisie dans
des titres ou de courts textes, notamment en publicité.

Lorsqu'on parle de typographie on parle pour des textes courants de corps : 12, 14,

Et on parle de textes secondaires qui sont de 7 à 8.

2. La typographie :la manière de représentation et objectif.

2.1.Graisse
On trouve des lettres maigres, normales, gras et extra- gras. Le gras permet la mise en valeur
de certains mots ou groupes de mots….L'extra gras doit être utilisé très modérément ; il est
surtout composé en publicité.

2.2. Italique
C'est un caractère incliné, on le trouve dans les titres d'œuvres littéraires, artistiques
scientifiques, citations et mots étrangers, les dédicaces. On arrive à travers l'italique à attirer
l'attention sur le mot.
     Un bloc typographique, par exemple de six lignes, n'attire pas l'œil du lecteur qu'un bloc
de trois lignes.

    La manière de représenter l'image donnera des influences sur la manière de recevoir un
site. Plus une illustration est grande, plus elle attire l'attention du lecteur.

   On peut donner de l'importance à un texte en utilisant les couleurs. La graduation des
couleurs des blocs typographiques peut les hiérarchiser l'informatives (par exemple, un texte
courant d'une couleur moins noire que sa conclusion).

3.Le tableau
  Le tableau joue une influence sur la réception de l'information. Cette influence se réalise à
travers la manière de représentation. Le tableau peut apparaitre plus simple en remplaçant les
filets tracés sur des petits tableaux des filets immatériels qui sont des alignements de blancs.

On crée un tableau dans la page, afin d organiser les éléments en colonnes et en lignes.

Exemple : le site de libération, ( voir projection 3)



Comme dans la presse, le système du « colonnage » ( l'utilisation de colonnes) permet une
lecture très aisée des pages web.

   On trouve dans la manière d'organiser le texte, un texte dit « justifié » ou « en payé »
lorsque les extrémités droites et gauches sont alignées verticalement. C'est la composition la
plus fréquente.

  On trouve aussi le « texte centré ».

   On trouve aussi l'interlignage qui signifie le blanc entre les lignes. Cet interlignage peut
donner une importance au site en jouant un rôle esthétique.

   La couleur typographique donnera une idée sur la nature du site. Plus celle-ci est noire ,
plus le texte semble sérieux.

4.La mise en page et son influence sur la navigation
  Tout d'abord il faut prendre en considération que la lecture sur ordinateur est une lecture
rapide : l'écran, à la différence du papier, fatigue les yeux. Cet inconvénient matériel oblige à
une organisation des éléments présents à l'écran qui permet à l'utilisateur de visualiser
rapidement les informations importantes.

Pour faciliter la navigation il faut :

    -   Ne pas multiplier les polices de caractères. Car, la multiplication des polices de
        caractères, des tailles et des graisses différentes dans un même texte, a priori pour
        mettre en avant telle ou telle information, vient plus souvent perturber la lecture , et la
        rendre plus difficile.

    -   Ne pas recourir que rarement à la couleur, et d'être attentif aux harmonies de
        couleurs.

    -   Hiérarchiser les rubriques et les informations pour que l'importance des données les
        unes par rapport aux autres soit apparente.

    -   D'éviter le souligné sur internet, il est exclusivement réservé aux hyperliens. Il est
        donc fortement recommandé de ne pas utiliser cette possibilité à l’intérieur même de
        son texte, au risque de perturber l'utilisateur.



5.Analyse de sites web
   5.1.le site de libération ( voir projection 3)
*Organisation de la page
-(1) ( accueil) une barre de navigation liée à la réalité,

 - Un sommaire général, qui permet d'accéder en permanence à l'ensemble des rubriques du
site.

- Une zone d'informations divisées en deux colonnes, la colonne À est consacrée aux articles.
La colonne B aux photos. L'organisation de la colonne A est simple et efficace, on trouve les
principaux titres, rubrique par rubrique, avec un titre en majuscule et en rouge, un titre de
niveau 1 en noir.

- la dernière zone (4), la colonne de droite, qui liste les dépêches d'actualité, identifiées par un
intitulé en blanc dans un cartouche rouge.

    -   Utilisation d'une seule police avec quatre niveaux de corps. Des majuscules pour les
        titres.

    -   Un découpage en quatre colonnes. Ce site est un modèle de site d'information. Clair,
        efficace et simple, il permet de trouver les informations du jour en deux clics
        maximum : soit, en un clic.

    -   L'organisation de la page est toujours la même, et l'internaute ne sera pas perturbé lors
        de la navigation.

    -    L'internaute aura l'habitude à comprendre facilement le cheminement dans la page,
        on lui montre où se trouve les tiroirs à ouvrir pour aller d'une page à une autre.
5.2 Analyse du site de la cité de la musique ( voir projection 3).
La cité de la musique propose sur son site internet une librairie permettant découvrir et de
commander l'ensemble des livres que publie l'institution.

*Organisation de la page
La première zone : le logo de la cité de la musique localisé en haut. Elle est consacrée à
l'identification du site, et permet de toujours rappeler où se trouve l'utilisateur.

La deuxième zone : on trouve des boutons sous la forme d'icones regroupant les services liés
à la commande et à la recherche dans le catalogue. On arrive à identifier la rubrique où l'on se
trouve (« la librairie »).

La troisième zone : est divisée en deux colonnes. La colonne de gauche permet d'accéder
directement aux rubriques du catalogue, tandis que la colonne de droite intègre un texte
accueillant les internautes et leur présentant l'organisation de la librairie.

 Le menu de navigation utilise un système de sous-menus dynamiques de couleur orange (
lorsque l'on amène la souris sur un titre de rubrique, il apparait alors une liste de sous-
catégories dans des encadrés de couleur orange) ;

Le dernier bloc (4) est divisé en trois colonnes, chacune présente un titre du catalogue mis en
avant par rapport à l’actualité de la Cité de la Musique. Les titres des livres sont indiqués en
rouge et en gras, ce qui permet de les distinguer des autres contenus (la présentation des
livres), pour lesquels la couleur noire est prédominante.

5.3. Le site : la fondation Cartier pour l'art contemporain ( voir
porjection 3)
  Ce site internet de la célèbre marque française est dédié à la fondation Fondation Cartier
pour l'art contemporain. Le langage artistique apparait dans le coté graphique et
typographique.

*Organisation de la page
Découpage de l'écran en quatre zones distinctes.

La zone de navigation principale (1) montre un découpage simple en trois grandes entrées, de
guider facilement l'utilisateur. On remarque aussi des sous- menus aux intitulés clairs.

Afin de distinguer les entrées principales (« Fondation », « En ce moment », « Presse ») du
reste du site, une hiérarchie typographique est établie : elle se limite à deux niveaux.

   -   L'espace central (2) est destiné à mettre en avant l'une des créations exposées au sein
       de la Fondation (une photo). La photo remplit bel et bien son rôle de vecteur
       d’information.
        La photo repose sur un fond blanc, qui crée un contraste fort ; équilibre la page et
centre l'attention sur l'œuvre d'art.

Le logo peut s'inscrire dans la création sans perturber la navigation.

La couleur rouge détourne quelque peu l'attention du principal ( les expositions proposées par
la Fondation).

La dernière zone du site (4) est une zone utilitaire : elle se distingue par sa couleur ( bandeau
gris clair, textes en gris foncé) et par le rappel du nom de la Fondation. Cette barre de
navigation vient fermer le site et a un but simple.

5.4. Analyse du collectif des Riches Contre Euromillions
  Ce site a été créé par la Française des Jeux, dans le cadre de la promotion de son jeu
Euromillions.

*Organisation de la page
   La composition du site est assez « légère » : ressortir les éléments forts autour de
rubriques simples. Pour garder une grande clarté, le site utilise une couleur- le rouge- en plus
du noir.

   (1) On remarque l'utilisation de tables, permet un découpage efficace du site en quatre
       zones aux rôles distincts.

  La zone supérieure est consacrée au nom du site, et permet de montrer le sigle CRCE.

   La zone centrale permet de mettre en avant l'actualité du site. On remarque aussi une
recherche d'assurer la promotion du jeu grâce à des titres en majuscules, avec l' alternance du
noir et du rouge.

    La zone centrale inferieure présente les rubriques du site, et permet donc de naviguer
simplement et rapidement.

Le choix d'utiliser de grosses formes rouges permet :

   -   d'utiliser les majuscules pour les intitulés, et donc de bien les faire ressortir ;

   -   de laisser de la place pour des images

       La dernière zone en bas, permet des renvois vers d'autres sites.

   (1) Au niveau typographique, on trouve une hiérarchie à cinq niveaux. Le plus important
       ici est l'alternance noir/rouge qui permet de dégager des différents éléments. Le texte
       « ILS ONT OSE !» est le plus visible du site et a une seule utilité : rappeler qu'il s'agit
       d'un jeu proposé par la Française des jeux, et qu'il est même possible d y jouer sur
       Internet… C'est la partie essentielle de ce site : montrer que d'autres joueurs ont déjà
       gagné, et que tout le monde peut ainsi devenir riche.
       Tout le reste ne sert qu'à marteler l'idée que ce jeu permet de devenir millionnaire en
       euros.

       5.5.Le site AFJV
          C'est une association dont le but est la promotion du jeu vidéo et des éditeurs et
       producteurs français de ce marché. Chaque semaine elle envoie par courriel, une lettre
       d'information à ses adhérents.

       Elle est coupée en cinq zones.

       La zone supérieure : elle rappelle l'organisme émetteur de la lettre. Et sous la zone
       grise renvoie vers les principales rubriques du site internet de l'association.

       Les trois zones qui suivent (2. 3 et 4) permettent de distinguer l'information technique.

      (1) L'actualité majeure de la semaine.

      (2) Le sommaire de l'ensemble de l'actualité.

       On remarque l'utilisation des encadrés (2) qui mettent en avant les deux actualités
       importantes.

       Les deux blocs d'information dans (3) et (4) sont mis en valeur par l'emploi d'un
       cartouche noir, avec le texte en blanc ( ex : A la une cette semaine).

       Dans la zone (5) on remarque cette présence des intitulés de couleur rouge , qui se
       distinguent du texte , noir , et des liens ( bleus et non soulignés). Nul besoin ici
       d'utiliser un corps différent : le changement de couleur indique le changement de type
       d'information.

La dernière zone ( 5) zone d informations générales sur l'actualité de la semaine , il y a eu
l'utilisation du double « colonnage » : un maximum de brèves rassemblé dans un minimum
d'espace.

5.6. Site : le journal du Management
  C'est une lettre d'information électronique. Il permet une mise en page plus riche , avec des
images et une hiérarchie dans la typographie.

L'organisation de la page

        Elle est fondée sur l'utilisation des tables : on a une division en deux lignes (1),

       -la deuxième ligne est elle-même découpée en deux colonnes principales (2).

       - la colonne (2 a) a une utilité fonctionnelle : elle présente des partenaires, et renvoie
       vers des services ( fiches d'informations, études , sondages, etc.).
       La colonne (2b) présente le dossier principal de la semaine ( en haut de la colonne).

Les rubriques sont présentées de façon simple : un cartouche jaune, un intitulé en vert et en
majuscules.

Ce principe d'organisation est le plus efficace : une série de blocs d'informations, une
typographie lisible et pas trop petite. Le lecteur pourra lire d'un regard l'ensemble des
informations et cliquer sur celle qui l'intéresse.

5.7.Site libération : le meilleur exemple en matière de lisibilité et
d'organisation
L'organisation de la page

   La partie supérieure est divisée en deux parties : une zone rappelant le site sur lequel on se
trouve, grâce au logo, et consacrée aux actualités génériques du moment, et un espace dédié à
la publicité, pour permettre de financer en partie le site Internet.

  On trouve une barre de navigation générale (6) divisée en trois parties, chaque couleur
renvoyant à un type de contenu.

Un cartouche rouge pour le contenu quotidien du journal.

Une barre jaune orangée pour les services

Une barre grise pour tout ce qui concerne des opinions (chats, forums, blogs) ou des
informations extérieures au site (météo, dépêches, etc.).

Ce principe de division de l'espace en colonnes est celui qui permet la lecture la plus aisée.

Le seul problème avec ce site réside dans sa richesse en informations, qui amène à avoir des
pages très langues.

				
DOCUMENT INFO
Description: Cours of multimedia semiotics: Cours de S�miologie Multim�dia: differentes partie1: Defenition et introduction to S�miologie Multim�dia partie2: Construction des logos part3: Signification graphique des logos part4: Analyse des sites web avec une presentation sous le nom (projection3)