La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1 Typographie et mise en page sur le Web. 2 Support papier et support écran Certains sites Web proposent du contenu sous forme de très longs textes plein.

Présentations similaires


Présentation au sujet: "1 Typographie et mise en page sur le Web. 2 Support papier et support écran Certains sites Web proposent du contenu sous forme de très longs textes plein."— Transcription de la présentation:

1 1 Typographie et mise en page sur le Web

2 2 Support papier et support écran Certains sites Web proposent du contenu sous forme de très longs textes plein écran. 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.

3 3 Support papier et support écran zSource : "Guide de conception pédagogique et graphique dun site éducatif sur le réseau Internet" (http://www.cpm.ulaval.ca/GUIDEW3EDUCATIF/)http://www.cpm.ulaval.ca/GUIDEW3EDUCATIF/) Au sein dun même site Dun site web à lautre

4 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 5 Typographie yPas plus de 2 polices différentes Police à empattement ou sans empattement ? Définition de lempattement (serif) Arial Times New Roman Définition de lempattement (serif) 20 points 20 points 28 points 28 points Abcgy Il Abcgy Il Critères d'utilisation du texte

6 6 Typographie yDe préférence des polices sans empattement (sans serif), en général plus lisibles à lécran Une meilleure typographie pour les écrans Une meilleure typographie pour les écrans yDes polices standards, ou du texte dans un fichier image Texte Typefaces Typefaces Taille minimum de 4 mm (environ 12 points) Critères d'utilisation du texte

7 7 Typographie yMixer majuscules et minuscules : la lecture de phrases en majuscules est 20% plus lente Type and legibility Type and legibility yPour mettre en valeur, éviter l'italique, préférer le gras Typographic emphasis (David Siegel) Typographic emphasis (David Siegel) yÉviter le soulignement (héritage des machines à écrire), qui masque les jambages des minuscules Sans soulignement, cest tellement mieux ! Sans soulignement, cest tellement mieux ! yRespecter les règles de typographie française !règles de typographie française Critères d'utilisation du texte

8 8 Couleur yAvantage : pour signaler des mots ou parties de textes importants yInconvénient : perturbe la stratégie de balayage Critères d'utilisation du texte

9 9 Couleur ySi le texte est susceptible dêtre imprimé, préférer le contraste positif : foncé sur fond clair yUn texte en négatif (caractères clairs sur fond sombre) paraît souvent plus petit quil nest : compenser en choisissant une taille de caractères plus importante et des lignes plus courtes Critères d'utilisation du texte

10 10 Texte animé yAffichage dynamique : guide l'ordre de lecture yPrévoir un temps d'affichage suffisant et un moyen de contrôle (stop, marche) yClignotement : seulement pour message d'alerte, doit pouvoir être annulé Bas de casse : jeux en tous genres avec des lettres, art ASCII... Critères d'utilisation du texte

11 11 Gestion de l'espace ySe limiter à une idée ou notion par page-écran yNe pas dépasser 10 à 12 mots par ligne ou 50 à 60 caractères Critères d'utilisation du texte

12 12 Alignement yAligner le texte à gauche de préférence La justification à droite apporte plus de rigueur, mais la non-justification à droite améliore la lisibilité. yChoisir un alignement et lappliquer à la page entière. Ne pas combiner différents types dalignements. La répétition dun même alignement renforce lapparence dune page. yUtiliser des tableaux pour positionner les différents éléments (en désactivant les bordures : BORDER=0) Mise en page

13 13 Proximité yTous les éléments dune mise en page entrent en relation les uns avec les autres. Deux éléments rapprochés semblent ainsi avoir une relation dappartenance lun envers lautre. Bien souvent, sur les pages Web, plusieurs éléments, comme orphelins, sont relégués à lécart sans raison ; dautres 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 lillustration quelle est censée décrire, etc... Regrouper ensemble les éléments connexes. Mise en page

14 14 Répétition yRépéter les éléments susceptibles de lier toutes les pages dun même site. yLes boutons de navigation sont des éléments qui apportent une homogénéité visuelle et fonctionnelle à lensemble. Mais le choix des couleurs, les illustrations, le format, la typographie, etc. peuvent également être des éléments répétitifs qui permettent dunifier lensemble dun site. Exemple : Urls Internet CafeUrls Internet Cafe Mise en page

15 15 Contraste yJouer 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 dinformations et dy 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 lespace… Pour être efficace, le contraste doit être marqué. yCré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. Mise en page

16 16 Concept graphique Élaborer un concept graphique : gestion des horizontales et des verticales dans lespace de la page écran Le rendu visuel doit composer un équilibre entre les verticales et les horizontales afin de produire une harmonie formelle perceptible au regard. yBannir les règles horizontales qui gênent la progression visuelle (balise ) Mise en page

17 17 Concept graphique yExemple : une « forme en L » permet d ajuster géométriquement une impression douverture (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 design Mise en page

18 18 Concept graphique Deux erreurs à éviter : yUne 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. yA 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). y Mise en page

19 19 Les feuilles de style CSS : Cascading Style Sheets (feuilles de style en cascade) yPermettent de séparer le contenu dun site Web de sa mise en forme. yAutorisent des modifications daffichage sans passer par lédition du code HTML. yPermettent de changer laspect de tout le site en ne modifiant que quelques lignes de code dans un unique fichier.


Télécharger ppt "1 Typographie et mise en page sur le Web. 2 Support papier et support écran Certains sites Web proposent du contenu sous forme de très longs textes plein."

Présentations similaires


Annonces Google