1

Typographie et mise en page sur le web

2

Support papier et support écran

Certains sites Web présentent l'information sous forme de très longs textes.Ces livres transposés en document Web sont peu efficaces.La lecture d'un livre est en effet très différente de celle de pages sur écran informatique.

3

Support papier et support écran

Source : "Guide de conception pédagogique et graphique d’un site éducatif sur le réseau Internet" (http://www.cpm.ulaval.ca/GUIDEW3EDUCATIF/)

Le texte à l'écran Le texte imprimé

émet de la lumière Réfléchit la lumière

est fragmenté (page par page)

est unitaire (livre)

est discontinu

est continu

est évanescent

est permanent

est lu en balayant la page

est lu ligne par ligne

Au sein d’un même site

D’un site web à l’autre

4

Support papier et support écran

La page-écran illustre une réalité parcellaire et segmentée ; ce n'est pas une page dans un livre.

L'information doit être condensée, synthétisée et davantage structurée.

5

Typographie

6

Qu’est-ce que la typographie ?« Manière dont est composé un texte (qualité des caractères, de la mise en page). » (Trésor de la langue française)

• Web style guide : Typography• Wikipedia : http://en.wikipedia.org/wiki/Typography• Planète typographie :

http://www.planete-typographie.com/annuaire/index.html

• Site de design : Smashing Magazine : http://www.smashingmagazine.com/8 Simple Ways to Improve Typography In Your Designs

Notamment :http://www.smashingmagazine.com/2007/11/19/monday-inspiration-typography-in-motion/ http://www.smashingmagazine.com/2008/10/26/retro-and-vintage-typography-showcase/ http://www.smashingmagazine.com/2008/05/12/sexy-bold-and-experimental-typography/ngmagazine.com/2008/07/07/table-of-contents-creative-and-beautiful-examples/ http://www.smashingmagazine.com/2008/04/07/beautiful-handwriting-lettering-and-calligraphy/ http://www.smashingmagazine.com/2008/02/25/breathtaking-typographic-posters/

• The elements of typographic style applied to the Web : http://webtypography.net/

• Five simple steps to better typography : http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/

Typographie

7

Typographie

8

• Pas plus de 2 polices différentes(contre-exemple en regard)

Typographie

9

Choix des polices

• Police à empattement ou sans empattement ?Définition de l’empattement (serif)

Arial Times New Roman

20 points 20 points

28 points 28 points

Abcgy Il Abcgy Il

Critères d'utilisation du texte

10

Critères d'utilisation du texte

Choix des polices

• De préférence des polices sans empattement (sans serif), en général plus lisibles à l’écran

Une meilleure typographie pour les écrans

11

Dites non au Times

Je le dis haut et fort et je l'inscris sur mon étendard: la police de caractères Times en corps 12 est inadaptée à la lecture sur écran. Pourtant la plupart des navigateurs Web l'utilisent par défaut. Même si cette police donne de bons résultats à l'impression, des millions de personnes souffrent de maux de tête et s'usent les yeux à cause de cette police. Pour remédier à cette situation, les fonderies typographiques commencent enfin à développer des polices spécialisées, conçues expressément pour une lecture aisée à l'écran. […]

(Prochainement sur vos écrans: une meilleure typographie par Jeff Carlson)

Critères d'utilisation du texte

12

Critères d'utilisation du texte

• Des polices standard, ou du texte dans un fichier GIF

HTML : <FONT FACE= “ Verdana, Arial… ”>Texte</FONT>CSS : P { font-family: Verdana, Arial, sans-serif ;}

• Taille minimum de 4 mm (environ 12 points)

• Classification périodique des polices de caractères, en fonction de leur degré de popularité : http://www.behance.net/Gallery/Periodic-Table-of-Typefaces/193759

• Tripwire magazine : sélection de 75 polices gratuites :http://www.tripwiremagazine.com/Design/Fonts/75-free-fonts-for-professional-design.html

• Site web de création et de partage de polices en ligne : http://fontstruct.fontshop.com/ • Quel est votre type de caractère : http://www.avuedenez.com/typedecaractere/home.html

13

• Mixer majuscules et minuscules : LA LECTURE EST 20% PLUS LENTE S’IL N’Y A QUE DES MAJUSCULES Type and legibility

• Pour mettre en valeur, éviter l'italique, préférer le gras

• Éviter le soulignement (héritage des machines à écrire), qui masque les jambages des minuscules

• Exemples de liens non soulignés Analyse des journaux français en ligne :http://corumcle.edres74.ac-grenoble.fr/presse/pressefr.htm

• Règles de typographie et de mise en page :http://www.interpc.fr/mapage/billaud/typopao.htmhttp://www.dsi.univ-paris5.fr/typo.html

Critères d'utilisation du texte

14

Couleur

• Avantage : pour signaler des mots ou parties de textes importants

• Inconvénient : perturbe la stratégie de balayage

Critères d'utilisation du texte

15

Couleur

• Si le texte est susceptible d’être imprimé, préférer le contraste positif : foncé sur fond clair

• Un texte en négatif (caractères clairs sur fond sombre) paraît souvent plus petit qu’il n’est : compensez en choisissant une taille de caractères plus importante et des lignes plus courtes.

Critères d'utilisation du texte

16

Texte animé

• Affichage dynamique : guide l'ordre de lecture

• Prévoir un temps d'affichage suffisant et éventuellement un moyen de contrôle (stop, marche)

• Clignotement : seulement pour message d'alerte, doit pouvoir être annulécontre-exemple : http://www.yhchang.com/SVDJ.html

Vidéo « Typolution »John Lycette : Not my type (http://www.lycettebros.com/notmytype)

Critères d'utilisation du texte

17

Gestion de l'espace

• Ne pas dépasser 10 à 12 mots par ligne ou 50 à 60 caractères

• Se limiter à une idée ou notion par page-écran

Critères d'utilisation du texte

18

Quelques sites sur la roue chromatique

• Principe de la roue chromatique :http://pourpre.com/couleur/lumiere.phphttp://www.atollduweb.net/Peinture/Technique/RoueChrom.php

• Les éléments du design : http://www.pouipouidesign.net/index.php/2006/01/07/56-traduction-les-elements-du-designHarmonie complémentaire, analogue et triadique

• Pourpre.com : http://pourpre.com/http://pourpre.com/outils/chromafiltre.phpChromafiltre : un outil en Flash permettant le choix de couleurs sur la roue chromatique, et surtout, proposant des accords de couleurs.

• « Générateur de roues chromatiques » : http://gpolguere.free.fr/couleurs/

• http://www.colourlovers.com/ (site communautaire de partage de palettes de couleur conseillé par Sofiane)

• http://kuler.adobe.com/

Le choix des couleurs

19

Quatre grands principes :• Alignement• Proximité • Répétition• Contraste

Mise en page

20

Le texte peut être justifié à gauche. On dit aussiEn drapeau appuyé à gauche.

Le texte peut être justifié à

droite. On dit aussi en

drapeau appuyé à droite.

Le texte peut être centré, ce qui permet un

effet de symétrie.

Le texte peut être justifié à gauche et à droite. On dit simplement jus-tifié.

Justification et alignement

À l’intérieur du cadre ou dans des colonnes, le texte peut être positionné de plusieurs manières :

Le centrage s’utilise pour certains titres et pour les poèmes.Le texte est justifié dans les livres ou dans les colonnes des imprimés.La présentation en drapeau s'utilise le plus souvent pour les notes de marges, de légendes. Le drapeau à droite est original mais il est fatiguant à lire ; son utilisation n’est donc pas conseillée pour de longs textes.

Mise en page

21

Alignement

• La justification à droite apporte plus de rigueur, mais la non-justification à droite améliore la lisibilité.

• Choisir un alignement et l’appliquer à la page entière.Ne pas combiner différents types d’alignements.La répétition d’un même alignement renforce l’apparence d’une page.

Mise en page

22

Alignement

A gauche, l’alignement centré est « faible » : une ligne invisible traverse le centre, mais les bordures n’ont aucune définition.

Mise en page

23

AlignementQuelle mise en page parcourt-on le plus rapidement ?

Mise en page

24

Proximité

• Tous les éléments d’une mise en page entrent en relation les uns avec les autres. Deux éléments rapprochés semblent ainsi avoir une relation d’appartenance l’un envers l’autre.

Bien souvent, sur les pages Web, plusieurs éléments, comme orphelins, sont relégués à l’écart sans raison ; d’autres affichent des relations inappropriées.Par exemple, dans certaines pages, un sous-titre est plus proche du texte placé au-dessus que du texte auquel il fait référence, une légende est éloignée de l’illustration qu’elle est censée décrire, etc...

Regrouper ensemble les éléments connexes.

Mise en page

25

Mise en page

Les éléments connexes sont regroupés

26

Répétition

• Répéter les éléments susceptibles de lier toutes les pages d’un même site.

• Les boutons de navigation sont des éléments qui apportent une homogénéité visuelle et fonctionnelle à l’ensemble. Mais les couleurs, les illustrations, le format, la mise en page, la typographie, etc. peuvent également être des éléments répétitifs qui permettent d’unifier l’ensemble d’un site.

Exemple : Url’s Internet Cafe (http://www.urlsinternetcafe.com)

Mise en page

27

Contraste• Jouer sur le contraste.

Le contraste est ce qui attire le regard sur une page. Les éléments contrastés guident l’œil, hiérarchisent les informations, permettent de survoler un volume important d’informations et d’y puiser les données recherchées.Le contraste peut être produit par un formatage gras, des caractères plus grands, un style totalement différent, mais aussi par un jeu de couleurs, des graphiques miniatures, une organisation de l’espace… Pour être efficace, le contraste doit être marqué.

• Créer un point focal.Quelque chose doit tenir lieu de force dominante, à partir de laquelle les autres éléments sont structurés de manière hiérarchique. Ce focus est créé en jouant sur le contraste.

http://www.leschinois.fr : la vidéo sert de point focal

Mise en page

28

• logo sorti du cadre et agrandi : devient ainsi le point focal de la page.

• arrière-plan gris supprimé : un texte noir sur fond gris n’offre pas assez de contraste

• cadres supprimés autour des graphiques : un alignement fort est préférable. Les cadres ne font que diviser la page.

• répétition : la couleur-phare est récupérée pour colorer les lignes et les mots-clés

29

Concept graphique

• Élaborer un concept graphique : gestion des horizontales et des verticales dans l’espace de la page écranLe rendu visuel doit composer un équilibre entre les verticales et les horizontales afin de produire une harmonie formelle perceptible au regard.

Mise en page

30

Concept graphique • Par exemple, une « forme en L » permet d’ajuster géométriquement une

impression d’ouverture (espace non délimité) et de fermeture qui est donnée par la présence des barres, des angles, de l’épaisseur des traits.

Web style guide : pattern and page designExemple de forme en « L » : http://ww5.williams-sonoma.com/

Mise en page

31

Concept graphique

Deux erreurs à éviter :

• Une structure de présentation qui n'est pas "accrochée". On a alors l'impression visuelle que le texte flotte sur le support. Nous sommes dans ce cas en présence d'un concept graphique pas suffisamment développé qui ressemble à une mise en page ordinaire d'un texte sur une feuille de papier.

• A l'inverse, un concept graphique trop développé peut donner l'impression d'une certaine lourdeur. Dans ce cas, le texte est enfermé dans des rubriques qui sont trop étanches (encadrements trop soulignés, lignes trop épaisses).

http://www.zazieweb.fr/

• Conseils de mise en page : http://quince.infragistics.com

Mise en page

32

Etude de cas

Etude comparativeEcrits…vains ? / e-critures

http://ecrits-vains.com/http://www.e-critures.org

33

Choix techniques et choix éditoriaux

Etude comparative Ecrits…vains / e-critures

• revue littéraire et site éditeur / site de référencement

• interface d’accès foisonnante / sobre • contenu statique (HTML) / contenu dynamique (base de

données)• forum en ligne (modération a priori + charte) / liste de discussion

(aucune modération)• sélection des œuvres et des textes :

anonymisation / opacité sur les critères de sélection

• auteurs et lecteurs / membres (communauté)

34

Formats techniques, éditoriaux et sociaux

Le contenu et la mise en page des documents et des messages d’une part,

les fonctionnalités des dispositifs techniques d’autre part, peuvent-ils être la signature d’une communauté de pratique ?

Contenu /mise en page(choix éditoriaux)

Technique(choix techniques)

Social (communauté de pratique)