{"id":767,"date":"2020-04-16T20:30:09","date_gmt":"2020-04-16T18:30:09","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=767"},"modified":"2025-11-16T23:29:32","modified_gmt":"2025-11-16T22:29:32","slug":"fondamentaux-communication-visuelle","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/com-crea\/fondamentaux-communication-visuelle\/","title":{"rendered":"Les fondamentaux de la communication visuelle"},"content":{"rendered":"\n<p>Ce rappel des <strong>fondamentaux de la communication visuelle<\/strong> marque la fin du <strong>niveau 1 de la formation com-cr\u00e9a<\/strong>. Vous allez mettre en pratique vos nouveaux acquis lors d&rsquo;une premi\u00e8re <strong>mise en situation professionnelle<\/strong> (le fameux TP1).<\/p>\n\n\n\n<p>Nous allons faire le point sur <strong>les enseignements les plus importants \u00e0 retenir et \u00e0 appliquer<\/strong> pour la r\u00e9alisation de tout projet de design graphique. Il s&rsquo;agira principalement des r\u00e8gles apprises pour <strong>finaliser les aspects suivant d&rsquo;un projet<\/strong> <strong>de comvi<\/strong> :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>la <strong>structuration<\/strong> des contenus<\/li>\n\n\n\n<li>La <strong>couleur<\/strong> et les nuanciers<\/li>\n\n\n\n<li>La <strong>typographie<\/strong> et les accords typographiques<\/li>\n\n\n\n<li>La <strong>composition<\/strong> et les styles graphiques<\/li>\n<\/ul>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/fondamentaux-communication-visuelle\/#Affirmations_de_designers\" >Affirmations de designers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/fondamentaux-communication-visuelle\/#Structuration_des_contenus\" >Structuration des contenus<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/fondamentaux-communication-visuelle\/#Couleurs_et_nuanciers\" >Couleurs et nuanciers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/fondamentaux-communication-visuelle\/#Typographie_et_lettrage\" >Typographie et lettrage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/fondamentaux-communication-visuelle\/#Compo_et_styles_graphiques\" >Compo et styles graphiques<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/fondamentaux-communication-visuelle\/#Se_souvenir_des_operations_a_effectuer_en_design_graphique\" >Se souvenir des op\u00e9rations \u00e0 effectuer en design graphique<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/fondamentaux-communication-visuelle\/#Check_list_des_operations_a_effectuer\" >Check list des op\u00e9rations \u00e0 effectuer<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/fondamentaux-communication-visuelle\/#Approfondir_le_sujet\" >Approfondir le sujet<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Affirmations_de_designers\"><\/span>Affirmations de designers<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Je vous propose, pour commencer \u00e0 r\u00e9viser, de <strong>compl\u00e9ter une courte bande dessin\u00e9e<\/strong> mettant en sc\u00e8ne deux designers graphiques. Ceux-ci \u00e9noncent, \u00e0 tour de r\u00f4le, <strong>six maximes sur le design graphique<\/strong>.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c \u00c0 vous de <strong>formuler les cons\u00e9quences techniques de ces maximes<\/strong> dans la pratique de la communication visuelle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/bd-6affirmations.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"1024\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/bd-6affirmations-788x1024.jpg\" alt=\"Six affirmations de designers sous forme de bande dessin\u00e9e.\" class=\"wp-image-772\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/bd-6affirmations-788x1024.jpg 788w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/bd-6affirmations-462x600.jpg 462w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/bd-6affirmations-768x998.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/bd-6affirmations.jpg 864w\" sizes=\"auto, (max-width: 788px) 100vw, 788px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c T\u00e9l\u00e9chargez le dossier de cette bande dessin\u00e9e publi\u00e9e sous forme de page Web et <strong>compl\u00e9tez les dialogues en utilisant un \u00e9diteur de code<\/strong> (Brackets ou Notepad++ en local ou encore Repl.it en ligne).<\/p>\n\n\n\n<p><em>Si vous ne pouvez pas installer sur votre poste l&rsquo;\u00e9diteur de code <a rel=\"noreferrer noopener\" href=\"http:\/\/brackets.io\/\" target=\"_blank\">Brackets<\/a> et que ne pouvez pas utiliser Notepad++, je vous montrerai comment utiliser <a rel=\"noreferrer noopener\" href=\"https:\/\/repl.it\/\" target=\"_blank\">Repl.it<\/a>. <\/em><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"http:\/\/graphizm.fr\/bd-pedagos\/six-affirmations.zip\" style=\"border-radius:18px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger le dossier de la BD \u00e0 compl\u00e9ter<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Apr\u00e8s avoir compl\u00e9t\u00e9 la page, <strong>vous me transmettrez simplement le fichier \u00ab\u00a0index.html\u00a0\u00bb en pi\u00e8ce jointe via Slack<\/strong> (sans les fichiers-dossiers d\u00e9pendants&#8230;)<\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\">\u279c Pensez \u00e0 <strong>renommer le fichier index<\/strong> et \u00e0 ajouter vos initiales. Je vous propose cette nomenclature&nbsp;: index-XX.html (XX \u00e9tant vos initiales). <\/p>\n\n\n\n<p>Si vous avez le temps, vous pouvez personnaliser les personnages utilis\u00e9s dans la bande dessin\u00e9e. Si vous souhaitez qu&rsquo;un seul personnage prenne la parole, <strong>pensez \u00e0 modifier l\u00e9g\u00e8rement l&rsquo;expression d&rsquo;une case \u00e0 l&rsquo;autre<\/strong>, en r\u00e9alisant plusieurs versions du m\u00eame personnage.<\/p>\n\n\n\n<p>Pour cela dupliquez et renommez une des images fournies. Ouvrez-la dans Illustrator, faites vos modifications et enregistrez l&rsquo;image au format SVG. Modifiez les appels des images dans le fichier HTML. Transmettez-moi la ou les nouvelle(s) image(s) avec votre fichier index-XX.html modifi\u00e9. Je mettrai le tout en ligne \u00e0 cette adresse&nbsp;: <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/bd-pedagos\/six-affirmations\" target=\"_blank\">http:\/\/graphizm.fr\/bd-pedagos\/six-affirmations\/<\/a>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c En rajoutant \u00e0 cette adresse index-XX.html (XX \u00e9tant vos initiales), vous pourrez voir votre travail et celui de vos coll\u00e8gues (&#8230; en changeant les initiales). \ud83d\ude09 <\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Structuration_des_contenus\"><\/span>Structuration des contenus<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Concernant la structuration des contenus avant toute composition, vous retiendrez la formule \u201cD\u00e9couper \u00e0 chaud c&rsquo;est structurer\u201d ou <strong>DHO=S<\/strong>. Les lettres D, H et O sont des initiales de 3 mots d\u00e9signant <strong>3 op\u00e9rations fondamentales<\/strong> (d\u00e9finissant la structuration en design graphique).<\/p>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-b779fd6 ugb-divider--v2 ugb-divider--design-bar ugb-main-block\">\n<style>.ugb-b779fd6 hr.ugb-divider__hr{background-color:#6d6d6d !important;height:7px !important;margin-left:auto !important;margin-right:auto !important;border-radius:calc(7px \/ 2) !important}<\/style>\n<div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>D\u00e9coupage<\/strong> <strong>du texte<\/strong> en blocs d&rsquo;informations coh\u00e9rents<\/li>\n\n\n\n<li><strong>Hi\u00e9rarchisation<\/strong> <strong>des informations<\/strong> selon leur importance<\/li>\n\n\n\n<li><strong>Ordonnancement<\/strong> <strong>des infos <\/strong>dans des blocs d&rsquo;information (&#8230; et des blocs dans la page, puis des pages dans le livret, etc.)<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-c14f14d ugb-divider--v2 ugb-divider--design-bar ugb-main-block\">\n<style>.ugb-c14f14d hr.ugb-divider__hr{background-color:#6d6d6d !important;height:7px !important;margin-left:auto !important;margin-right:auto !important;border-radius:calc(7px \/ 2) !important}<\/style>\n<div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<p><strong>La structuration pr\u00e9c\u00e8de toutes les op\u00e9rations qui concernent le look ou l&rsquo;apparence des contenus<\/strong>. Quand la structuration des infos est n\u00e9glig\u00e9e ou volontairement zapp\u00e9e, les informations cl\u00e9s sont difficiles \u00e0 localiser et le message essentiel est noy\u00e9 dans l&rsquo;ensemble des autres messages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"506\" height=\"716\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-04.jpg\" alt=\"\" class=\"wp-image-809\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-04.jpg 506w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-04-424x600.jpg 424w\" sizes=\"auto, (max-width: 506px) 100vw, 506px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-right\"><em>Source&nbsp;: <a rel=\"noreferrer noopener\" href=\"https:\/\/litoole.wordpress.com\/2012\/02\/06\/type-hierarchy-design-resolution-poster-attempt-in-armin-hofmann-style\/\" target=\"_blank\">litoole.wordpress.com<\/a><\/em><\/p>\n\n\n\n<p>Certains styles graphiques se caract\u00e9risent par une hi\u00e9rarchisation minimale. Il s&rsquo;agit donc de faire un choix clair dans ce domaine et d&rsquo;\u00e9viter une hi\u00e9rarchisation ind\u00e9cise.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Cr\u00e9ez un tableau Pinterest consacr\u00e9 \u00e0 <strong>des publications sur lesquelles le texte est fortement hi\u00e9rarchis\u00e9<\/strong>. Cr\u00e9ez ensuite un second tableau regroupant <strong>des publications sur lesquelles le texte est tr\u00e8s peu hi\u00e9rarchis\u00e9<\/strong>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Vous partagerez ensuite, via Slack, les adresses de ces tableaux.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Couleurs_et_nuanciers\"><\/span>Couleurs et nuanciers<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dans le domaine de l&rsquo;utilisation des couleurs, Je n&rsquo;ai pas de formule mn\u00e9motechnique \u00e0 vous proposer. <strong>Quatre points importants sont \u00e0 retenir<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-dfbb876 ugb-divider--v2 ugb-divider--design-bar ugb-main-block\">\n<style>.ugb-dfbb876 hr.ugb-divider__hr{background-color:#6d6d6d !important;height:7px !important;margin-left:auto !important;margin-right:auto !important;border-radius:calc(7px \/ 2) !important}<\/style>\n<div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Contraste<\/strong> <strong>bas\u00e9 sur la luminosit\u00e9<\/strong> (ou valeur de gris)<\/li>\n\n\n\n<li><strong>\u00c9tagement r\u00e9gulier des valeurs<\/strong> des couleurs d&rsquo;un nuancier<\/li>\n\n\n\n<li><strong>R\u00e9partition in\u00e9gales<\/strong> <strong>des surfaces color\u00e9es<\/strong> (dominante, m\u00e9diante, tonique)<\/li>\n\n\n\n<li><strong>Symbolique prise en compte<\/strong> dans le contexte culturel d&rsquo;utilisation du produit de communication<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-5502367 ugb-divider--v2 ugb-divider--design-bar ugb-main-block\">\n<style>.ugb-5502367 hr.ugb-divider__hr{background-color:#6d6d6d !important;height:7px !important;margin-left:auto !important;margin-right:auto !important;border-radius:calc(7px \/ 2) !important}<\/style>\n<div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<p>En design graphique comme en peinture, dans la pratique, <strong>le nuancier utilis\u00e9 dans une composition est d\u00e9compos\u00e9 en de nombreuses nuances<\/strong>, en particulier dans les images. Si vous devez d\u00e9terminer le nuancier utilis\u00e9 dans l&rsquo;affiche ci-dessous, vous \u00eates contraints de trancher concernant le nombre de jaunes ou de gris utilis\u00e9s. Un choix similaire s&rsquo;impose pour d\u00e9terminer le nuancier de l&rsquo;affiche Gedimat pr\u00e9sent\u00e9e plus bas.<\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\"><strong>On d\u00e9cide souvent de ne pas prendre en compte les nuances des couleurs pr\u00e9sentes dans les images<\/strong>. Dans ce cas, pour l&rsquo;affiche ci-dessous, le nuancier se limite \u00e0 3 couleurs, le gris tr\u00e8s clair (blanc), le jaune et le noir.<\/p>\n\n\n\n<p>Le gris tr\u00e8s clair visible sur l&rsquo;image de l&rsquo;affiche Kiloutou est en v\u00e9rit\u00e9 du blanc. Pour s&rsquo;en assurer, il suffit de prendre connaissance de <a rel=\"noreferrer noopener\" href=\"https:\/\/www.grapheine.com\/actulogo\/kiloutou-change-de-logo\" target=\"_blank\">la charte graphique de Kiloutou<\/a>, revue en 2016 par l&rsquo;agence AKDV. <strong>Lisez la critique de cette charte sur le blog de Graph\u00e9ine<\/strong> (lien ci-dessus), vous mesurerez l&rsquo;enjeu d&rsquo;un choix typographique pour le design d&rsquo;un logo. Nous approfondirons ces questions au niveau 2 de la formation Com-Cr\u00e9a.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"564\" height=\"740\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-01.jpg\" alt=\"\" class=\"wp-image-793\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-01.jpg 564w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-01-457x600.jpg 457w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-right\"><em>Source&nbsp;: <a href=\"https:\/\/www.grenade-sparks.com\/project\/kiloutou-parlons-pro\" target=\"_blank\" rel=\"noreferrer noopener\">grenade-sparks.com<\/a><\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Note sur le rapport quantitatif des couleurs<\/h4>\n\n\n\n<p>Un peu plus haut, <strong>il est question de couleur dominante, de couleur m\u00e9diante et de couleur tonique<\/strong>. Le vocabulaire est ici le m\u00eame que dans la musique&#8230; ou dans la peinture (de chevalet)&nbsp;! Pour faire simple nous parlerons de rapport quantitatif concernant les couleurs. Il s&rsquo;agit de r<strong>\u00e9partir les couleurs du nuancier sur des surfaces in\u00e9gales<\/strong> : une tr\u00e8s grande surface, une ou plusieurs moyennes surfaces et une toute petite surface.<\/p>\n\n\n\n<p><strong>La couleur couvrant la plus grande surface est nomm\u00e9e couleur dominante.<\/strong> Il s&rsquo;agit souvent de la couleur du fond. <strong>La couleur couvrant la plus petite surface est nomm\u00e9e couleur tonique<\/strong>. Il s&rsquo;agit souvent d&rsquo;une couleur qui se d\u00e9tache visuellement dans le contexte chromatique de la composition.<\/p>\n\n\n\n<p><strong>Les couleurs m\u00e9diantes sont celles qui se r\u00e9partissent sur les surfaces interm\u00e9diaires.<\/strong> Avec un nuancier de 2 couleurs, il peut ne pas y avoir de tonique ou ne pas y avoir de m\u00e9diante (c&rsquo;est une question de surfaces de r\u00e9partition). Avec 3 ou 4 couleurs, il est plus facile de faire jouer le r\u00f4le de tonique, d&rsquo;accent ou de focus \u00e0 l&rsquo;une des couleurs.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Sur l&rsquo;affiche Kiloutou <\/strong>pr\u00e9sent\u00e9e plus haut, quelles sont la couleur dominante et la couleur tonique&nbsp;?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Note sur la fonction des couleurs<\/h4>\n\n\n\n<p>Pour d\u00e9crire les couleurs en design graphique, on focalise parfois le propos sur la fonction de chaque couleur dans la composition. Quand on dit que la couleur dominante est g\u00e9n\u00e9ralement la couleur de fond, l&rsquo;expression \u201c<strong>couleur de fond\u201d<\/strong> se rapporte \u00e0 la fonction de la couleur (et non \u00e0 sa quantit\u00e9).<\/p>\n\n\n\n<p>Ainsi, on parle de <strong>couleur de focus ou de couleur d&rsquo;accentuation<\/strong> pour d\u00e9signer une couleur servant \u00e0 mettre en valeur un \u00e9l\u00e9ment de la composition, la partie d&rsquo;un texte ou la partie d&rsquo;une image.<\/p>\n\n\n\n<p>On peut aussi parler de <strong>\u201ccouleur de texte\u201d<\/strong> ou de <strong>\u201ccouleur de titrage\u201d<\/strong>, pour d\u00e9signer les couleurs utilis\u00e9es respectivement pour le texte courant et pour les titres.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"564\" height=\"843\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-03.jpg\" alt=\"\" class=\"wp-image-803\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-03.jpg 564w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-03-401x600.jpg 401w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-right\"><em>Source&nbsp;: <a rel=\"noreferrer noopener\" href=\"http:\/\/www.designe.fr\/blog\/figaro-2016\/\" target=\"_blank\">designe.fr<\/a><\/em><\/p>\n\n\n\n<p><strong>Sur l&rsquo;affiche Gedimat<\/strong> pr\u00e9sent\u00e9e ci-dessus, vous remarquerez que <strong>le rouge est la couleur dominante<\/strong>&#8230; <strong>La tonique est le bleu vif<\/strong>, sur la gauche de la coque du bateau.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Toujours sur l&rsquo;affiche Gedimat, pr\u00e9sent\u00e9e ci-dessus, quelle est la couleur de texte&nbsp;?<\/p>\n\n\n\n<p>D&rsquo;un point de vue fonctionnel, vous noterez que <strong>le rouge est utilis\u00e9 comme couleur de focus<\/strong> dans la partie inf\u00e9rieure de l&rsquo;affiche (pour mettre en valeur les dates).<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Combien de couleurs sont utilis\u00e9es dans l&rsquo;affiche Gedimat&nbsp;? Quel est le nuancier utilis\u00e9 pour composer cette affiche&nbsp;?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Typographie_et_lettrage\"><\/span>Typographie et lettrage<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>En mati\u00e8re de choix typographiques, rappelez-vous que nous avons class\u00e9 les polices de caract\u00e8res dans <strong>5 grandes cat\u00e9gories<\/strong> (acronyme DANSE&#8230;)&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>les <strong>s\u00e9rieuses<\/strong> (caract\u00e8res \u00e0 empattements triangulaires ou polices \u201cserif\u201d comme le Times ou le Merriweather)<\/li>\n\n\n\n<li>les  <strong>neutres<\/strong> (caract\u00e8res sans empattement ou police \u201csans serif\u201d comme l&rsquo;Arial ou le Roboto)<\/li>\n\n\n\n<li>les <strong>amicales<\/strong> (caract\u00e8res cursifs ou manuscrits comme le Comic Sans ou le Pacifico)<\/li>\n\n\n\n<li>les <strong>expressives<\/strong> (caract\u00e8res tr\u00e8s contrast\u00e9s \u00e0 la forte pr\u00e9sence comme le Bodoni Poster ou l&rsquo;Abril Fatface<\/li>\n\n\n\n<li>les <strong>d\u00e9coratives<\/strong> (caract\u00e8res \u00e0 l&rsquo;usage tr\u00e8s limit\u00e9 du fait de leurs particularit\u00e9s comme le Blippo Black ou le Monoton)<\/li>\n<\/ul>\n\n\n\n<p> Vous vous souviendrez de <strong>quatre principes fondamentaux<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-304d104 ugb-divider--v2 ugb-divider--design-bar ugb-main-block\">\n<style>.ugb-304d104 hr.ugb-divider__hr{background-color:#6d6d6d !important;height:7px !important;margin-left:auto !important;margin-right:auto !important;border-radius:calc(7px \/ 2) !important}<\/style>\n<div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Utilisez<\/strong> <strong>les typos expressives, d\u00e9coratives ou amicales, pour le titrage seulement<\/strong> (jamais pour le texte courant)<\/li>\n\n\n\n<li><strong>Utilisez,<\/strong> <strong>pour le texte courant, les typos neutres ou s\u00e9rieuses, dans la mesure imp\u00e9rative o\u00f9 elles sont disponibles en au moins 4 styles<\/strong> (<em>Regular<\/em> ou Normal, <em>Bold<\/em> ou Gras, <em>Italic<\/em> ou Italique, <em>Bold<\/em> <em>Italic<\/em> ou Gras Italique)<\/li>\n\n\n\n<li><strong>Utilisez un syst\u00e8me de ratio proportionnel pour \u00e9tager la taille de vos caract\u00e8res<\/strong> en fonction du niveau hi\u00e9rarchique du texte<\/li>\n\n\n\n<li><strong>Prenez en compte la symbolique culturelle des typos<\/strong> que vous utilisez dans vos projets<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-4ba77b4 ugb-divider--v2 ugb-divider--design-bar ugb-main-block\">\n<style>.ugb-4ba77b4 hr.ugb-divider__hr{background-color:#6d6d6d !important;height:7px !important;margin-left:auto !important;margin-right:auto !important;border-radius:calc(7px \/ 2) !important}<\/style>\n<div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"564\" height=\"798\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-02.jpg\" alt=\"\" class=\"wp-image-800\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-02.jpg 564w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/04\/good-graphic-design-example-02-424x600.jpg 424w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-right\"><em>Source&nbsp;: <a href=\"https:\/\/www.behance.net\/gallery\/8248895\/THE-END-Fashion-Symposium\" target=\"_blank\" rel=\"noreferrer noopener\">behance.net<\/a><\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Compo_et_styles_graphiques\"><\/span>Compo et styles graphiques<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>La composition graphique fait appel \u00e0 de nombreuses comp\u00e9tences. Elle est <strong>mise en action apr\u00e8s avoir choisi<\/strong> <strong>les couleurs<\/strong> (le nuancier)<strong>, l&rsquo;accord typographique<\/strong> (la combinaison de polices de caract\u00e8res) et \u00e9ventuellement <strong>les formes structurantes<\/strong>.<\/p>\n\n\n\n<p>Vous essaierez de vous rappeler de la n\u00e9cessit\u00e9 de mettre en \u0153uvre les <strong>quatre op\u00e9rations cl\u00e9s<\/strong> list\u00e9es ci-dessous.<\/p>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-81b108c ugb-divider--v2 ugb-divider--design-bar ugb-main-block\">\n<style>.ugb-81b108c hr.ugb-divider__hr{background-color:#6d6d6d !important;height:7px !important;margin-left:auto !important;margin-right:auto !important;border-radius:calc(7px \/ 2) !important}<\/style>\n<div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Aligner les informations<\/strong> qui doivent \u00eatre lues ensemble<\/li>\n\n\n\n<li><strong>Espacer les blocs d&rsquo;informations<\/strong> pour bien les individualiser<\/li>\n\n\n\n<li><strong>\u00c9quilibrer les masses graphiques<\/strong> de telle sorte que la composition ne bascule ni \u00e0 droite ni \u00e0 gauche<\/li>\n\n\n\n<li><strong>Rythmer la disposition des blocs<\/strong> et des formes dans la page<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-a49f059 ugb-divider--v2 ugb-divider--design-bar ugb-main-block\">\n<style>.ugb-a49f059 hr.ugb-divider__hr{background-color:#6d6d6d !important;height:7px !important;margin-left:auto !important;margin-right:auto !important;border-radius:calc(7px \/ 2) !important}<\/style>\n<div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<p>Au cours du niveau 1 de la formation \u201cCom-cr\u00e9a\u201d et \u201cPAO-Tech\u201d, <strong>vous avez pris connaissance de plusieurs styles graphiques et de plusieurs types de composition<\/strong>. Avez-vous pris le temps d&rsquo;en s\u00e9lectionner et d&rsquo;en analyser quelques uns en d\u00e9tails pour \u00eatre capables de les mettre en \u0153uvre&nbsp;?<\/p>\n\n\n\n<p>Concernant le <strong>style graphique vintage<\/strong>, il est assez vite n\u00e9cessaire de faire des distinctions entre les d\u00e9cennies du XXe si\u00e8cle. Consultez l&rsquo;article <a href=\"https:\/\/www.onlinedesignteacher.com\/2016\/05\/graphic-design-styles.html\" target=\"_blank\" rel=\"noreferrer noopener\">Graphic design styles<\/a> (&#8230; \u00e0 faire traduire en fran\u00e7ais par Google) pour mieux vous y retrouver.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/graphic-design-timeline.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/graphic-design-timeline-1024x683.jpg\" alt=\"\" class=\"wp-image-3083\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/graphic-design-timeline-1024x683.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/graphic-design-timeline-600x400.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/graphic-design-timeline-768x512.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/graphic-design-timeline-1200x800.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/graphic-design-timeline.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-right\"><em>Source&nbsp;: <a href=\"https:\/\/www.onlinedesignteacher.com\/2016\/05\/graphic-design-timeline.html\" target=\"_blank\" rel=\"noreferrer noopener\">onlinedesignteacher<\/a><\/em><\/p>\n\n\n\n<p><strong>Les styles de compositions<\/strong> ne doivent pas \u00eatre confondus avec les styles graphique. Il s&rsquo;agit d&rsquo;une des caract\u00e9ristiques d&rsquo;un style graphique.<\/p>\n\n\n\n<p>Prenons l&rsquo;exemple du style que nous avons \u00e9tudi\u00e9 de mani\u00e8re plus approfondi, celui du style suisse et international. <strong>Choix des typos<\/strong> : lin\u00e9ales. <strong>Choix des couleurs<\/strong> : tr\u00e8s peu de couleurs et souvent du noir ou du blanc dans le nuancier. <strong>Choix des formes<\/strong> : g\u00e9om\u00e9triques et\/ou \u00e9pur\u00e9es. <strong>Choix des compositions<\/strong> : utilisation d&rsquo;une grille, orthogonalit\u00e9 et\/ou inclinaison du texte, composition asym\u00e9trique.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/swiss-style-graphic-design.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"291\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/swiss-style-graphic-design.jpg\" alt=\"\" class=\"wp-image-3085\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/swiss-style-graphic-design.jpg 640w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/11\/swiss-style-graphic-design-600x273.jpg 600w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-right\"><em>Source&nbsp;: <a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/@bhattifaizan\/graphic-design-styles-fa85aff1ff69\" target=\"_blank\">onlinedesignteacher<\/a><\/em><\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Compl\u00e9tez votre compte Pinterest<\/strong> en consacrant un tableau \u00e0 chaque style ou type de composition que vous souhaitez pouvoir utiliser ult\u00e9rieurement.<\/p>\n\n\n\n<p>Les intitul\u00e9s de vos tableaux et sous-tableaux dans Pinterest doivent \u00eatre pr\u00e9cis et v\u00e9ritablement en rapport avec leur contenu. Constituez des tableaux ou des sous-tableaux pr\u00e9sentant au moins une dizaine d&rsquo;\u00e9pingles pertinentes. <strong>Plus votre classement sera logique, plus vous pourrez exploiter facilement les ressources collect\u00e9es<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Se_souvenir_des_operations_a_effectuer_en_design_graphique\"><\/span>Se souvenir des op\u00e9rations \u00e0 effectuer en design graphique<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Une carte disponible sur <a href=\"https:\/\/www.mindmeister.com\/1618353381?t=Ie8zMfT5k8\" target=\"_blank\" rel=\"noreferrer noopener\">Mindmeister<\/a> vous propose un moyen de vous souvenir des principes essentiels \u00e0 mettre en \u0153uvre lors d&rsquo;une composition graphique.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c  Rep\u00e9rez dans les illustrations publi\u00e9es dans ce cours la mise en \u0153uvre de compositions CHART\u00c9ES. <strong>Annotez ces images de mani\u00e8re \u00e0 mettre en \u00e9vidence les op\u00e9rations mentionn\u00e9es<\/strong> et partagez-les via Slack.<\/p>\n\n\n\n<p>Je vous proposent deux r\u00e9sum\u00e9s des <strong>op\u00e9rations fondamentales \u00e0 mettre en \u0153uvre pour le TP1<\/strong>. Pr\u00e9sent\u00e9s sous forme de diaporamas ils vous parlent de <a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/11\/compositions_MALINES.pdf\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>compositions MALINES<\/strong><\/a> et de <strong><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/11\/graphisme_ECLAIRE.pdf\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">graphisme \u00c9CLAIR\u00c9<\/a><\/strong>. Le premier correspond \u00e0 des <strong>crit\u00e8res minimum d&rsquo;attendus au niveau 1 de la formation<\/strong>. Le second diaporama pr\u00e9sente des crit\u00e8res plus exigeants (mais toutefois r\u00e9alistes \u00e0 ce niveau de la formation).<\/p>\n\n\n\n<p class=\"has-primary-background-color has-background\">Je termine ce rappel des notions essentielles du niveau 1 de la formation com-cr\u00e9a en vous rappelant que <strong>le premier principe de design est le principe de simplicit\u00e9<\/strong>.<\/p>\n\n\n\n<p>Un petit ouvrage disponible en ligne semble r\u00e9sumer tout cela sur <a rel=\"noreferrer noopener\" href=\"https:\/\/pro-actif.ca\/ebook\/\" target=\"_blank\">pro-actif.ca<\/a>. Enfin&#8230; sur la couleur, c&rsquo;est un peu l\u00e9ger \ud83d\ude09<\/p>\n\n\n\n<p>Jetez un \u0153il sur un des articles d&rsquo;Henri Lotin \u00e0 propos du <a href=\"https:\/\/academy.lotincorp.biz\/kiss-keep-it-simple-stupid-un-principe-de-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">principe de simplicit\u00e9<\/a>, vous apprendrez des trucs int\u00e9ressants&nbsp;! Le site de <a href=\"https:\/\/academy.lotincorp.biz\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lotin Corp Academy<\/a> est plein de p\u00e9pites pour les webdesigners et les graphistes en herbe.<\/p>\n\n\n\n<p>Je recommande les articles du \u201cblogue\u201d de <a href=\"https:\/\/mllerouge.com\/principes-de-base-de-la-communication-visuelle\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mlle Rouge<\/a>&#8230; elle nous y parle clairement de fondamentaux (de son point de vue)&nbsp;! C&rsquo;est plut\u00f4t sens\u00e9 \ud83d\ude00<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Regroupez ces liens pour nourrir votre veille informationnelle.<\/strong> Je vous recommande l&rsquo;utilisation de <a rel=\"noreferrer noopener\" href=\"https:\/\/www.deskyo.com\/\" target=\"_blank\">Deskyo<\/a> pour regrouper vos favoris (l&rsquo;inscription est gratuite).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Check_list_des_operations_a_effectuer\"><\/span>Check list des op\u00e9rations \u00e0 effectuer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>J&rsquo;ai compos\u00e9 une liste de toutes les op\u00e9rations \u00e0 effectuer lors de la mise en \u0153uvre d&rsquo;un produit de communication visuelle. Chaque case mentionne une op\u00e9ration.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>En cochant les 25 cases, vous \u00eates s\u00fbr d&rsquo;avoir pris en compte tous les aspects essentiels du design graphique.<\/strong> La derni\u00e8re case oriente le travail vers une publication imprim\u00e9e mais il suffit de remplacer \u00ab\u00a0imprimeur\u00a0\u00bb par \u00ab\u00a0h\u00e9bergeur\u00a0\u00bb pour modifier l&rsquo;orientation de la publication \ud83d\ude09<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/11\/check-list-comvi.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"935\" height=\"1024\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/11\/check-list-comvi-935x1024.jpg\" alt=\"\" class=\"wp-image-6889\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/11\/check-list-comvi-935x1024.jpg 935w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/11\/check-list-comvi-548x600.jpg 548w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/11\/check-list-comvi-768x841.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/11\/check-list-comvi-1200x1315.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/11\/check-list-comvi.jpg 1362w\" sizes=\"auto, (max-width: 935px) 100vw, 935px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/graphizm.fr\/com-crea\/check-list-comvi\/check-list-comvi.zip\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger le dossier de la CHECK LIST<\/a><\/div>\n<\/div>\n\n\n\n<p>Le dossier que vous \u00eates invit\u00e9s \u00e0 t\u00e9l\u00e9charger est un dossier de page Web. Celui-ci contient deux dossiers, \u00ab\u00a0css\u00a0\u00bb et \u00ab\u00a0js\u00a0\u00bb, avec les fichiers qui vont bien \u00e0 l&rsquo;int\u00e9rieur. Vous trouverez aussi un fichier \u00ab\u00a0index.html\u00a0\u00bb&#8230; <\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Un double clic sur le fichier index et vous voil\u00e0 par\u00e9s pour faire le point \u00e0 la fin des prochains TP \ud83d\ude09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Approfondir_le_sujet\"><\/span>Approfondir le sujet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour <strong>trouver en ligne plus de documentation sur le sujet<\/strong> vous pouvez toujours aller faire un tour sur mes sites Netboard&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/y-goguely.netboard.me\/basescomvi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Les bases de la communication visuelle<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/y-goguely.netboard.me\/lettragetypo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Les fondamentaux de la typographie<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Ce rappel des fondamentaux de la communication visuelle marque la fin du niveau 1 de la formation com-cr\u00e9a. Vous allez mettre en pratique vos nouveaux acquis lors d&rsquo;une premi\u00e8re mise en situation professionnelle (le fameux TP1). Nous allons faire le point sur les enseignements les plus importants \u00e0 retenir et \u00e0 appliquer pour la r\u00e9alisation [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,4],"tags":[],"class_list":["post-767","post","type-post","status-publish","format-standard","hentry","category-cc1-cours","category-com-crea"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Ce rappel des fondamentaux de la communication visuelle marque la fin du niveau 1 de la formation com-cr\u00e9a. Vous allez mettre en pratique vos nouveaux acquis lors d&rsquo;une premi\u00e8re mise en situation professionnelle (le fameux TP1). Nous allons faire le point sur les enseignements les plus importants \u00e0 retenir et \u00e0 appliquer pour la r\u00e9alisation de tout projet de design graphique. Il s&rsquo;agira principalement des r\u00e8gles apprises pour finaliser les aspects suivant d&rsquo;un projet de comvi&nbsp;: la structuration des contenus La couleur et les nuanciers La typographie et les accords typographiques La composition et les styles graphiques Sommaire Toggle\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/com-crea\/cc1-cours\/\" rel=\"category tag\">CC1-cours<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/com-crea\/\" rel=\"category tag\">Com-Cr\u00e9a<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=767"}],"version-history":[{"count":125,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":7594,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/767\/revisions\/7594"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}