Ma bible du design
Manon Neuvillers Infographie 2019-2020
Sommaire Les Fondamentaux La couleur La typographie Le format
p.3 p.14 p.23
Mes Travaux Studio Awaken p.27 Terramoka p.32
La Couleur
3
La couleur La roue Chromatique : elle a pour but de structurer la perception des couleurs. On peut les réunir en trois grands groupes :
Primaire : rouge vert bleu
Secondaire : violet orange vert
Tertiaire : jaune orangé rouge violacé bleu vert
4
La couleur Couleur complémentaire : couleur diamétralement opposées. La couleur complémentaire d’une couleur chaude est une couleur froide et vice versa.
Par exemple, à l’opposé du bleu, on trouve la couleur orange, à l’opposé du rouge on trouve le vert et à l’opposé du jaune on trouve le violet.
5
La couleur Couleur de scission complémentaire : deux couleurs situées de chaque coté, à l’opposé de la complémentaire . Cela permet d’avoir accès à une gamme de couleurs plus large tout en ne déviant pas trop de l’harmonie directe.
6
La couleur Les couleurs complémentaires triadiques sont trois couleurs situées à égale distance les unes des autres sur la roue chromatique. L’une d’entre elles sera utilisée pour l’arrière-plan quand les autres seront réservées au contenu et à la mise en valeur de certaines zones.
7
La couleur L’harmonie tétraédrique : semblable à l’harmonie triadique, à la différence qu’il y a quatre points d’ancrage sur le cercle tous à égale distance. Elle est plus délicate à utiliser correctement puisqu’elle couvre l’ensemble du cercle chromatique. Plus subtilement, les conceptions réussies sur ce modèle utilisent en fait deux ensembles de couleurs complémentaires. En utilisant des couleurs à égale distance sur le cercle chromatique, chaque élément du visuel bénéficie d’une attention égale aux autres.
8
La couleur L’harmonie analogique : cette harmonie est idéale pour une conception tournant autour d’une seule teinte, et dont les couleurs utilisées ne s’éloignent pas trop de la couleur clé. Ces couleurs sont celles que l’on trouve directement à droite et à gauche de la couleur clé. Cela permet de réaliser une conception visuelle sans prendre trop de risques. Bien que cette harmonie peut être agréable à l’œil, elle peut aussi facilement laisser une impression de monotonie et manquer de dynamisme.
9
La couleur Le rouge est une couleur chaude et saillante. Le rouge est symbole d’amour, de chaleur, de sensualité et de passion. Il apporte une sensation de chaleur. C’est la couleur la plus puissante, la plus dynamique et avec le plus fort potentiel d’action. Pour ne pas tomber dans les significations négatives telles que le danger, la révolte et le sang, il est important de l’utiliser de façon contrôlée, avec parcimonie.
10
La couleur Il comprend de nombreuses nuances, soit saturées, comme le bleu outremer, soit désaturées, comme le bleu ciel, soit foncées comme le bleu nuit. C’est la couleur la plus utilisée pour les identités visuelles d’entreprise. Le bleu est la couleur la plus complexe au niveau de sa signification. Le bleu évoque le ciel, l’eau, la mer, l’espace, l’air et les voyages. Dans les tons foncés, il dégage la vérité, la confiance, la loyauté, l’intelligence et la sécurité. Dans les tons plus clairs, il est associé à des idées de merveilleux, de liberté, de rêve et de jeunesse. En contexte négatif, le bleu suggère la mélancolie.
11
La couleur Il y a des jaunes clairs, mêlés de blanc, très désaturés, on dira couleur ivoire. Un jaune mêlé de noir ou de gris est un beige. Fait intéressant : Certains designers de mode utilisent le jaune dans leurs collections pour rehausser le teint des personnes qui portent le vêtement. Le jaune donne une impression de chaleur et de lumière. C’est la couleur de la bonne humeur et de la joie de vivre. Il symbolise la logique, le pouvoir personnel et l’humour. Les connotations négatives associées au jaune sont la traîtrise, le mensonge, la tromperie.
12
La couleur Le violet est une couleur ambiguë, ni chaude, ni froide, et peut aussi être l’un ou l’autre selon la nuance utilisée et ce qui l’entoure. De même, le violet est une couleur fuyante, c’està-dire que des formes violettes sur un fond neutre semblent plus loin que le fond . Mais les violets tirant davantage sur le rouge sont des couleurs qui donnent du relief, c’est-à-dire que les formes sur fond neutre semblent posées au-dessus du fond.
13
La Typographie
La typographie On indique la taille d’une police par son corps, c’est-à-dire sa hauteur. La graisse correspond tout simplement à l’épaisseur du trait d’une police. Chacune d’entre elles comporte généralement plusieurs graisses et pourra être grossie ou affinée selon son utilisation. Une information à mettre en valeur dans un corps de texte sera plutôt écrite dans une graisse importante (bold, ou black). Alors qu’on optera plutôt pour une graisse légère pour donner une impression d’élégance et de raffinement (thin, ou light, par exemple).
15
La typographie Les polices sans empattements sont aussi désignées comme « caractères bâton » ou polices sans Serif. Ces polices sont plus faciles à lire sur écran, même si elles sont de petite taille. Elles sont souvent utilisées pour mettre en valeur les titres et sous-titres. Verdana, Arial, Helvetica et Tahoma sont parmi les polices sans serif les plus utilisées
16
La typographie Les polices à empattements, dites Serif, sont souvent employées dans le corps d’un texte long et sont plus lisibles sur papier que sur écran. C’est ainsi que la quasi-totalité des polices utilisées en imprimerie, et les divers styles qui ont suivi, des origines jusqu’à nos jours, sont à empattements. Parmi les polices serif les plus connues nous avons Georgia, Century ou Times
17
La typographie Les polices scriptes, ou cursives, sont celles qui imitent l’écriture en cursive. Elles sont divisées en deux catégories : formelle et informelle. Ces polices sont immédiatement reconnaissables par leurs boucles et leurs fioritures qui s’étendent à partir de l’empattement.
18
La typographie Les polices manuscrites choisissent plutôt d’imiter la boucle et le flux de l’écriture manuelle naturelle. Elles apportent une touche de créativité et de singularité, ce que presque toutes les petites entreprises veulent afficher. Leur gamme tellement vaste rend les polices manuscrites difficiles à décrire
19
La typographie Plein et délié C’est, respectivement, les parties les plus épaisses et les plus fines du caractère.
Empattement C’est un petit trait ou une forme rectangle ou triangle qui prolonge les extrémités des lettres.
Police de caractère ou fonte C’est le style du dessin de lettre. Les polices sont classées en différentes catégories.
20
La typographie Contreforme C’est l’espace partiellement ou totalement clos à l’intérieur de la panse d’une lettre. Axe droit / Axe oblique C’est l’axe de construction de la lettre. Un axe droit indique un dessin symétrique de la lettre, sans contraste dans les épaisseurs. Un axe oblique a pour effet d’a jouter du plein et du délié dans l’aspect de la lettre. Crénage C’est l’a justement de la distance entre les lettres pour une police de caractère donnée. Idéalement, elle doit être réglée à la main (ou plutôt à l’œil) et être homogène pour toutes les paires de lettres.
21
Le Format
Le format RVB 72 DPI
HD 1920 X 1080 1080p
SD 1024 X 576
HD Ready 1280 X 720 720p
4K 1920 X 2160
24
AI : Adobe Illustrator Format de fichier vectoriel, ne s’ouvre qu’avec et dans Illustrator.
PSD : Document Photoshop FIchier Psd est un format bitmap (pixels). Peuvent être ouvert avec photoshop
Le format
SWG : Scalable Vector Graphics Format de données qui sert à décrire des ensembles de graphiques vectoriels. S’utilise uniquement avec les navigateurs.
INDD : Adobe InDesign TIF : Tagged Image file Format Créé et enregistré dans Adobe Plus couramment utilisé dans INDD. Utilisé pour créer des les environnements pro et pour journeaux, des magazines et l’impression commerciale. des e-books.
JPG: Joint Photographic GIF : Graphics Interchange EPS: Encapsulated Postscript Experts Groupe Format Pour transférer une image /illu JPG est un fichier d’image Fichier de basse résolution d’un fichier vectoriel dans une compressé qui ne supporte pas utilisés sur le web et pour les autre application. un fond transparent. e-mail avec de la transparence.
PDF: Portable Document forRAW : Fichier Brut mat Généré par un appareil photo, Format de fichier universel contient l’ensemble des donqui conserve les polices, les nées générées par le capteur, images, la mise en page du dobrute de traitement. cument source.
PNG : Portable Network Graphic Plus utilisé pour le digital en raison de faible résolution. Ils peuvent contenir un fond transparent.
Le format Twitter
Photo de couverture : 1500 x 500 pixels
Image de couverture pour un profil : 851 x 315 pixels
Photo de profil : 150 x 150 pixels au minimum
Photo de profil : 200 x 200 pixels minimum jusqu’à 400 x 400 pixels Visuel pour le partage d’une image : entre 440 x 220 pixels et 1024 x 512 pixels Visuel pour le partage d’un lien : 520 x 254 pixels
Photo de profil : 180 x 180 pixels (s’affichera au format 160 x 160 pixels sur un ordinateur et au format 140 x 140 pixels sur un smartphone) Image seule dans un post : 1200 x 630 pixels
Image carrée : 1080 x 1080 pixels, mais apparaîtra en 293 x 293 pixels dans le fil d’actualité Image verticale : 1080 x 1350 pixels, mais apparaîtra en 293 x 293 pixels dans le fil d’actualité Image horizontale : 1080 x 566 pixels
Dans cette première partie vous trouverez : - Mon univers graphique - Mes inspirations de logo - Mon logo - Mes recherches
28
J’ai souhaité que mon logo arbore un style «jeux vidéos», avec une typographie sans sérif, en majuscule, avec des lettres assez épaisses.
Mon logo peut être decliné en noir, en blanc, en violet / prune ainsi qu’en bleu nuit. Couleurs : Blanc : #ffffff Noir : # 000000 Violet : #4b3d56 Bleu : # 23234b Cette typographie à été entièrement créée, elle a été inspirée de la typographie Alpha Centauri :
ABCDEFGHIJKL MNOPQRSTUVW XYZ
31
33
