Typographie et mise en page sur le web

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.

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/) Au sein d’un même site D’un site web à l’autre

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.

Typographie

Typographie Web style guide : Typography 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/ Montrer http://www.smashingmagazine.com/2007/11/19/monday-inspiration-typography-in-motion/ : « The Child ».

Typographie 7

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

Critères d'utilisation du texte 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 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

Critères d'utilisation du texte 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 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

Critères d'utilisation du texte 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.htm http://www.dsi.univ-paris5.fr/typo.html

Critères d'utilisation du texte 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 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 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 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

Le choix des couleurs Quelques sites sur la roue chromatique Principe de la roue chromatique : http://pourpre.com/couleur/lumiere.php http://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-design Harmonie complémentaire, analogue et triadique Pourpre.com : http://pourpre.com/ http://pourpre.com/outils/chromafiltre.php Chromafiltre : 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/

Mise en page Quatre grands principes : Alignement Proximité Répétition Contraste

Le texte peut être centré, ce qui permet un effet de symétrie. Mise en page Justification et alignement À l’intérieur du cadre ou dans des colonnes, le texte peut être positionné de plusieurs manières : Le texte peut être justifié à gauche. On dit aussi En 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é. 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 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 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 Alignement Quelle mise en page parcourt- on le plus rapidement ?

Mise en page 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 Les éléments connexes sont regroupés

Mise en page 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) URL’s Internet Cafe : coffee bar, cafe staff, attic

Mise en page 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

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

Mise en page Concept graphique Élaborer un concept graphique : gestion des horizontales et des verticales dans l’espace 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.

Mise en page 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 design Exemple de forme en « L » : http://ww5.williams-sonoma.com/

Mise en page 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

Etude de cas Etude comparative Ecrits…vains ? / e-critures http://ecrits-vains.com/ http://www.e-critures.org http://www.e-critures.org/temp_utc/2003-2/ Approche comparative La comparaison entre les sites e-critures et Ecrits…Vains ? nous donnera sans doute des éléments de réflexion quant aux différences éventuelles entre les tenants d’une pratique éditoriale « classique » (Ecrits…Vains ?) et des acteurs qui entendent construire et créer aussi bien la politique éditoriale que le champ littéraire dont ils se réclament (e-critures).

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é)

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)