IFT-22261Informatique multimédia

Cours 4

Jusqu’à présent…La mise en page

Quelques techniques PhotoshopInterface graphique* avec VB

Jusqu’à présent…

Vue d’ensemble sur le multimédiaLes intervenants dans le domaineLa chaîne de productionL’image Bitmap et le pixelLe fonctionnement de l’affichage sur ordinateurL’image en mémoire (mémoire vidéo)Les qualités d’un logiciel de traitement de l’imageLes formats d’image et la compressionLe fonctionnement de photoshop pour la conception d’interfaces

Introduction à la mise en page

La mise en page est un art en soit. Certaines règles existent afin de faire une mise en page efficace. Par contre, un graphiste expérimenté trouvera des moyens de contrer ces règles afin d’obtenir des résultats originaux.

Nous verrons ici quelques-unes de ces règles.

Introduction à la mise en page

RÈGLE 1: Ne jamais commencer sur l’ordinateur.

Pour avoir une vue d’ensemble d’un projet, on doit travailler sur des « thumbnails ».

Introduction à la mise en page

RÈGLE 2: Le traitement des marges.

•Ne jamais placer du texte près de la bordure de l’interface. •Garder au moins 1/2po de marge sur les bordures•Être cohérent au niveau des marges d’une page à l’autre.

Introduction à la mise en page

RÈGLE 3: Traitement des images

• Cohérence entre la qualité des différents éléments visuels placés sur les pages

•Auto-level (intensité des ombres et lumières)

•Brightness/contrast (+5/-5)

•Blur/Sharpen

Introduction à la mise en page

RÈGLE 4: Respecter la cohérence entre les pages

• Cohérence subtile (fond d’écran, filigrane) • Cohérence visible (objet de mise en page)• Faire un « master »

Introduction à la mise en page

RÈGLE 6: Fixer et respecter le « ton »

• Le ton c’est grosso modo un qualificatif de l’interface• L’utilisation d’un ton précis est une bonne façon d’éviter l’effet « pizza ».• exemples:

• Froid• Chaud• Vitesse• Corporatif• Underground• Dark• etc.

Introduction à la mise en page

RÈGLE 6: Utiliser intelligemment les polices

• Utiliser 2 polices différentes au maximum • S’assurer de la lisibilité des polices• 2 types de textes:

• Texte courrant• Titres

• 2 types de polices• Sans sérif (sans empattement) ABC• Sérif (empattements) ABC

Introduction à la mise en page

• Sérif => Texte courrant (plus lisible)• Éviter les polices « script »• Éviter les polices trop extravagantes• Utilisation des lettrines

• Une par page• chevauche plusieurs lignes de texte

A

Introduction à la mise en page

• Cohérence au niveau de l’interligne (leading) => espacer• Espacement entre les lettres• => bonne façon d’attirer l’attention sans utiliser une autre police• Créer des contrastes

Introduction à la mise en page

RÈGLE 7: Utiliser un minimum de couleurs

• Utiliser des couleurs complémentaires• Orange => bleu• Jaune => Violet

• Maximum 2-3 couleurs (teintes)• Souvent en lien direct avec le ton• Couleurs « rétro » à la mode:

• Bleu poudre (presque cyan)• Vert lime

• L’important c’est l’harmonie (attention « PIZZA »)

Introduction à la mise en page

Quelques conseils

• Éviter le centre ou la symétrie• Police simple (variation de Helvética et Times) • Contraste de « graisse » • éviter l’italique

Pour faire une belle mise en page, il faut:

JUGEMENT & EXPÉRIENCE