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 présentent l'information sous forme de très longs textes.

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 présentent l'information sous forme de très longs textes."— 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 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 3 Support papier et support écran Source : "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

6 6 Quest-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 : TypographyTypography Wikipedia : Planète typographie : Site de design : Smashing Magazine : 8 Simple Ways to Improve Typography In Your Designs Notamment : examples/ 8 Simple Ways to Improve Typography In Your Designs examples/ The elements of typographic style applied to the Web : Five simple steps to better typography : Typographie

7 7

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

9 9 Choix des polices Police à empattement ou sans empattement ? Définition de lempattement (serif) Définition de lempattement (serif) Arial Times New Roman 20 points 20 points 28 points 28 points Abcgy Il Abcgy Il Critères d'utilisation du texte

10 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 Une meilleure typographie pour les écrans

11 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 12 Critères d'utilisation du texte Des polices standard, ou du texte dans un fichier GIF HTML : Texte 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é : Tripwire magazine : sélection de 75 polices gratuites : Site web de création et de partage de polices en ligne : Quel est votre type de caractère :

13 13 Mixer majuscules et minuscules : LA LECTURE EST 20% PLUS LENTE SIL NY A QUE DES MAJUSCULES Type and legibility 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 : Règles de typographie et de mise en page : Critères d'utilisation du texte

14 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 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 quil nest : compensez en choisissant une taille de caractères plus importante et des lignes plus courtes. Critères d'utilisation du texte

16 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 : Vidéo « Typolution »Typolution John Lycette : Not my type (http://www.lycettebros.com/notmytype) Critères d'utilisation du texte

17 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 18 Quelques sites sur la roue chromatique Principe de la roue chromatique : Les éléments du design : Harmonie complémentaire, analogue et triadique Pourpre.com : 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 » : (site communautaire de partage de palettes de couleur conseillé par Sofiane)http://www.colourlovers.com/ Le choix des couleurs

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

20 20 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é. Justification et alignement À lintérieur du cadre ou dans des colonnes, le texte peut être positionné de plusieurs manières : Le centrage sutilise 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 nest donc pas conseillée pour de longs textes. Mise en page

21 21 Alignement La justification à droite apporte plus de rigueur, mais la non- justification à droite améliore la lisibilité. Choisir 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. Mise en page

22 22 Alignement A gauche, lalignement centré est « faible » : une ligne invisible traverse le centre, mais les bordures nont aucune définition. Mise en page

23 23 Alignement Quelle mise en page parcourt- on le plus rapidement ? Mise en page

24 24 Proximité Tous 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

25 25 Mise en page Les éléments connexes sont regroupés

26 26 Répétition Répéter les éléments susceptibles de lier toutes les pages dun même site. Les boutons de navigation sont des éléments qui apportent une homogénéité visuelle et fonctionnelle à lensemble. 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 dunifier lensemble dun site. Exemple : Urls Internet Cafe ( Internet Cafe Mise en page

27 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 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é. 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. : la vidéo sert de point focal Mise en page

28 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 noffre 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 29 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. Mise en page

30 30 Concept graphique Par exemple, une « forme en L » permet dajuster 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 Exemple de forme en « L » : Mise en page

31 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). Conseils de mise en page : Mise en page

32 32 Etude de cas Etude comparative Ecrits…vains ? / e-critures

33 33 Choix techniques et choix éditoriaux Etude comparative Ecrits…vains / e-critures revue littéraire et site éditeur / site de référencement interface daccè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 34 Formats techniques, éditoriaux et sociaux Le contenu et la mise en page des documents et des messages dune part, les fonctionnalités des dispositifs techniques dautre part, peuvent-ils être la signature dune communauté de pratique ? Contenu /mise en page (choix éditoriaux) Technique (choix techniques) Social (communauté de pratique)


Télécharger ppt "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."

Présentations similaires


Annonces Google