mettre en œuvre des compositions C-L-A-I-R-E-S

Studio BenZiv - Formation COM-Créa
Mettre en œuvre des compositions
CLAIRES
C
L
A
I
R
E
S
Contrastes appropriés
Accord typographique cohérent
Rapport proportionnel choisi
Simplicité en tout
Lignes de force structurantes
Informations hiérarchisées
Étagement des couleurs
Contrastes appropriés
Pour faire voir nettement ce qui doit être montré
et faire « ne pas voir » ce qui doit être dissimulé.
Contraste de valeur entre formes et fond
10 % pour une mise en retrait
20 % au moins pour une lecture confortable
35 % minimum pour une mise en évidence
Lignes de force structurantes
Pour aligner ce qui doit être visuellement lié
et ne pas aligner ce qui doit être séparé.
Grille de structuration en appui sur le cadre
Grille à la moitié, aux tiers ou aux quarts
Grille aux huitièmes (3 + 5 = 8)
Parallèles obliques structurantes
Diagonales du cadre ou des modules de la grille
Accord typographique cohérent
Les polices très expressives et très ornées à leur place,
les polices fonctionnelles et simplifiées à la leur.
Une police pour les textes en grands corps
Titres, sous-titres, accroches, etc.
Une police pour les texte en petits corps
Intitulés fonctionnels, paragraphes, légendes, notes, folios, etc.
Informations hiérarchisées
Pour rendre l’important repérable au premier coup d’œil
et différencier ce qui vient en deuxième, en troisième, etc.
Echelle des tailles
Le primordial est plus grand que le secondaire
Contraste des valeurs entre formes et fond
Le primordial se détache davantage du fond que le secondaire
Rapport proportionnel choisi
Pour donner un rythme clair aux proportions
des éléments de la composition
Rapport tiré des suites de Fibonacci et de Lucas (1,618)
1 - 2 - 3 - 5 - 8 - 13 - 21 - 34 - 55 - 89 - 144 - etc.
2 - 4 - 6 - 10 - 16 - 26 - 42 - 68 - 110 - 178 - etc.
4 - 7 - 11 - 18 - 29 - 47 - 76 - 123 - 199 - 322 - etc.
Rapport mathématique simple (2 ou 1,5)
2 - 4 - 8 - 16 - etc. ou 2 - 3 - 4,5 - 6,8 - 10,1 - etc.
Étagement des couleurs
Pour faciliter la superposition des couleurs entre elles et attribuer
à chaque couleur un rôle et une surface différenciés
Étagement qualitatif des couleurs
Contraste de 20 % minimum entre les valeurs des couleurs voisines
et contraste identique entre deux couleurs voisines du nuancier
Étagement quantitatif des couleurs principales
Dominante - Médiante - Tonique
Simplicité en tout
Pour trancher entre deux solutions fonctionnelles ou esthétiques
et orienter globalement le travail de composition graphique
Rasoir d’Ockham (ou principe de parcimonie)
Le complexe ne doit pas être utilisé sans nécessité
Philosophie de Python (Tim Peters)
Le simple vaut mieux que le complexe
Réalisation : Yves Goguely
http://studiobenziv.wordpress.com
1 of 10

More Related Content

Viewers also liked

Web typographieWeb typographie
Web typographiemirko
1.4K views41 slides
Typographie pour le WebTypographie pour le Web
Typographie pour le WebStrasWeb
2.4K views42 slides

Viewers also liked(16)

Web typographieWeb typographie
Web typographie
mirko1.4K views
Typographie pour le WebTypographie pour le Web
Typographie pour le Web
StrasWeb2.4K views
Charte graphiqueCharte graphique
Charte graphique
Laure Adelantado Pro3.3K views
Techniques de web designTechniques de web design
Techniques de web design
Poule Design814 views
Codes Typographiques1Codes Typographiques1
Codes Typographiques1
Signlighter1.7K views
La Typographie Web - CleverTodayLa Typographie Web - CleverToday
La Typographie Web - CleverToday
CleverToday3.2K views
Bien composer le texte webBien composer le texte web
Bien composer le texte web
Romy Duhem-Verdière3.6K views
InkscapeInkscape
Inkscape
Jean-Joseph Thibault932 views
L'Art indémodable du dessin de caractèresL'Art indémodable du dessin de caractères
L'Art indémodable du dessin de caractères
Francis Chouquet18.1K views
Duarte Slidedocs - FrenchDuarte Slidedocs - French
Duarte Slidedocs - French
Duarte, Inc.51.9K views
Petites leçons de typographiePetites leçons de typographie
Petites leçons de typographie
CDI Collège Capeyron1.9K views

More from Yves Goguely(11)

Etagement des couleurs d'un nuancierEtagement des couleurs d'un nuancier
Etagement des couleurs d'un nuancier
Yves Goguely196 views
Valeurs et usages des couleurs puresValeurs et usages des couleurs pures
Valeurs et usages des couleurs pures
Yves Goguely683 views
Couleurs et contraste de valeursCouleurs et contraste de valeurs
Couleurs et contraste de valeurs
Yves Goguely1.8K views
Etagement des valeurs des couleursEtagement des valeurs des couleurs
Etagement des valeurs des couleurs
Yves Goguely204 views
Compositions MALINESCompositions MALINES
Compositions MALINES
Yves Goguely652 views
Graphisme ÉCLAIRÉGraphisme ÉCLAIRÉ
Graphisme ÉCLAIRÉ
Yves Goguely697 views
4 directions graphiques4 directions graphiques
4 directions graphiques
Yves Goguely1.8K views
Cercles chromatiquesCercles chromatiques
Cercles chromatiques
Yves Goguely26.3K views
En 3 motsEn 3 mots
En 3 mots
Yves Goguely5K views

mettre en œuvre des compositions C-L-A-I-R-E-S

  • 1. Studio BenZiv - Formation COM-Créa Mettre en œuvre des compositions CLAIRES
  • 2. C L A I R E S Contrastes appropriés Accord typographique cohérent Rapport proportionnel choisi Simplicité en tout Lignes de force structurantes Informations hiérarchisées Étagement des couleurs
  • 3. Contrastes appropriés Pour faire voir nettement ce qui doit être montré et faire « ne pas voir » ce qui doit être dissimulé. Contraste de valeur entre formes et fond 10 % pour une mise en retrait 20 % au moins pour une lecture confortable 35 % minimum pour une mise en évidence
  • 4. Lignes de force structurantes Pour aligner ce qui doit être visuellement lié et ne pas aligner ce qui doit être séparé. Grille de structuration en appui sur le cadre Grille à la moitié, aux tiers ou aux quarts Grille aux huitièmes (3 + 5 = 8) Parallèles obliques structurantes Diagonales du cadre ou des modules de la grille
  • 5. Accord typographique cohérent Les polices très expressives et très ornées à leur place, les polices fonctionnelles et simplifiées à la leur. Une police pour les textes en grands corps Titres, sous-titres, accroches, etc. Une police pour les texte en petits corps Intitulés fonctionnels, paragraphes, légendes, notes, folios, etc.
  • 6. Informations hiérarchisées Pour rendre l’important repérable au premier coup d’œil et différencier ce qui vient en deuxième, en troisième, etc. Echelle des tailles Le primordial est plus grand que le secondaire Contraste des valeurs entre formes et fond Le primordial se détache davantage du fond que le secondaire
  • 7. Rapport proportionnel choisi Pour donner un rythme clair aux proportions des éléments de la composition Rapport tiré des suites de Fibonacci et de Lucas (1,618) 1 - 2 - 3 - 5 - 8 - 13 - 21 - 34 - 55 - 89 - 144 - etc. 2 - 4 - 6 - 10 - 16 - 26 - 42 - 68 - 110 - 178 - etc. 4 - 7 - 11 - 18 - 29 - 47 - 76 - 123 - 199 - 322 - etc. Rapport mathématique simple (2 ou 1,5) 2 - 4 - 8 - 16 - etc. ou 2 - 3 - 4,5 - 6,8 - 10,1 - etc.
  • 8. Étagement des couleurs Pour faciliter la superposition des couleurs entre elles et attribuer à chaque couleur un rôle et une surface différenciés Étagement qualitatif des couleurs Contraste de 20 % minimum entre les valeurs des couleurs voisines et contraste identique entre deux couleurs voisines du nuancier Étagement quantitatif des couleurs principales Dominante - Médiante - Tonique
  • 9. Simplicité en tout Pour trancher entre deux solutions fonctionnelles ou esthétiques et orienter globalement le travail de composition graphique Rasoir d’Ockham (ou principe de parcimonie) Le complexe ne doit pas être utilisé sans nécessité Philosophie de Python (Tim Peters) Le simple vaut mieux que le complexe
  • 10. Réalisation : Yves Goguely http://studiobenziv.wordpress.com