Cours de charte graphique PDF

UI Design Création d’une identité visuelle et charte graphique  Objectifs de ce cours Avoir une vision globale de ce qu’est l’UI Design Bases solides de connaissances avant de commencer un projet web Les démarches de la création d’une identité visu...

UI Design Création d’une identité visuelle et charte graphique  Objectifs de ce cours Avoir une vision globale de ce qu’est l’UI Design Bases solides de connaissances avant de commencer un projet web Les démarches de la création d’une identité visuelle impactante Se présenter Qui es-tu ? Pourquoi est ce que tu as (Prénom, âge, ton parcours) choisi cette formation ? Ou te vois-tu dans 5 ans ? DÉROULÉ DU COURS PLUSIEURS PARTIES THÉORIQUE SUIVIES SURTOUT DE PARTIES PRATIQUE AUTOUR DE L’UI DESIGN. TRAVAIL INDIVIDUEL NE PAS HÉSITER À M’INTERROMPRE SI QUELQUE CHOSE N’EST PAS CLAIRE BONUS DE POINTS À LA FIN DU MODULE DE COURS POUR L’INVESTISSEMENT, PARTICIPATION... Qu’est ce que l’UI Design ? User Interface Design Tout ce qui se rapporte aux visuels d’un site (images, couleurs, éléments graphiques…) ≠ UX Design UX Design + UI Design = Interface Introduction à CE QU’EST l’interface “Limite commune à deux domaines unis par des rapports d’ échanges et d’interaction réciproques” IHM (Interactions hommes-machines Les interactions Hommes-Machines définissent les moyens et outils mis en oeuvre afin qu’un humain puisse communiquer avec une machine Les débuts du web vs aujourd’hui 1996 Les débuts du web vs aujourd’hui 2021 Persona design Avant de réaliser une identité visuelle impactante, il faut connaître les valeurs de la marque et son identité et la retranscrire sous formes de personnages fictifs Nom de marque Carte de la personnalité (slide Aperçu (brève présentation activité et valeur ajoutée suivante) de l'entreprise) Voix et exemples de texte Image de la personnalité Méthode d’engagement Traits de la marque (Drôle, Sérieux, Lexique visuel (Moodboard) épuré, simpliste…) Carte de la personnalité Imposer vos interactions Vouvoiement Tutoiement Vendre vos interactions Moodboard  Stratégie > TP Partie du TP à rendre Choisissez une marque (n’importe laquelle mais qui ait au moins un site internet existant) et changez son positionnement Exemple : Fanta devient la nouvelle base de cocktails branchés en soirée. Changez le positionnement de la marque et le justifier Trouver une nouvelle cible (préciser les anciennes et les nouvelles cibles) Établir le persona design de la nouvelle marque  Identité visuelle Ensemble de visuels cohérents qui permettent d’identifier une même entité au travers des différents médias de communications 3 domaines les plus importants Couleurs Typographies Formes Couleurs RVB CMJN Web Print La symbolique des couleurs Psychologie des couleurs Un boost pour la conversion ! +23 millions $ +10 millions de bouteille vendues en plus en 7 mois 62 à 90% Des internautes jugent un produit/service uniquement sur la couleur  23% 57% 14% 35% 14% 9% 2% 5% 1% 1% 5% 3% La symbolique des couleurs Énergique Tenace Aggressive Ambitieuse Provocatrice Puissance Alimentaire Médias High-Tech La symbolique des couleurs Rassurante Passive Autoritaire Honnête Inaccessible Ingénieuse Voyage Banque / Assurance High-Tech La symbolique des couleurs Optimiste Envieuse Égoïste Créative Désordonnée Visionnaire Transports Grande distribution Énergies Psychologie des couleurs 2 logos sur 3 sont bicolors 33 29 28 % % % Top 3 des couleurs les plus utilisées dans les logos Psychologie des couleurs Harmonie à 2 Harmonie à 3 couleurs couleurs Couleurs Triangle équilatéral diamétralement opposées Harmonie à 4 Camaïeu couleurs Différents tons Rectangle de 2 d’une même couples couleur complémentaires Les outils COOLORS https://coolors.co/3b1f2b-db162f-dbdfac-5f758e-383961 ADOBE COLOR https://color.adobe.com/fr/explore COLORCO https://colourco.de/ Ratio pour accessibilité Choix Vérifier contrastes Chercher couleurs alternatives Tanaguru https://contrast-finder.tanaguru.com/?lang=fr BONNES PRATIQUES POUR LES TEXTES ET LES COULEURS Texte sans Serif pour les textes courant En général 2 à 3 typographie max (titres et texte) CTA à mettre en valeur pour générer de l’action Règle du 60-30-10 (slide d’après) Règle des 60 - 30 - 10 60 % COULEUR MAÎTRESSE 10 % COULEUR SECONDAIRE / 30 % AJOUTER CONTRASTES ATTIRER L’ATTENTION COULEUR COMPLÉMENTAIRE / ACCENTUER LES ÉLÉMENTS (CALL TO ACTION)  TP Partie du TP à rendre en fin de semaine - Effectuer des recherches et choisir vos couleurs pour votre refonte. (min 3 en plus du blanc et/ou du noir) Tester que les couleurs soient bien accessibles. Ratio d’accessibilité de 4,5 au minimum Les TYPOGRAPHIES LES TYPOGRAPHIES Bien les choisir et savoir les combiner Différence entre police de caractère et font Police de caractère font GEORGIA GEORGIA Italic Bold 12 px Typographies Typographies 5 familles de polices web standards Sans serif Sérif Monospace Fantasy Cursive Sans serif Arial Tahoma Verdana Mo Mo Mo serif Times New Roman Mo Georgia Mo serif Times New Roman Mo Georgia Mo MOnospace Courier New Mo : CHASSE (Largeur horizontale) Fantasy Burger shade Mo FANTASY Creepster Mo Cursive Caveat Cursive Mo Typographies Serif Sans Serif Moderne, épuré, Classique, minimaliste élégant, traditionnel Fantasy Monospace Décorative, Force, clarté fantaisiste Cursive Créativité, proximité, décontraction… Ou trouver les typographies ? Google Font Urban Font https://www.google.com/fonts http://www.urbanfonts.com/ Dafont 1001 Free Font http://www.dafont.com/fr/ http://www.1001freefonts.com/ Tableau typographique Tableau typographique Extension Font Ninja pour Chrome  TYPOS > TP Partie du TP à rendre en fin de semaine Rechercher et trouver 3 typographies 1 pour les titres, 2 pour les typographies courantes Créer votre tableau typographique en précisant les tailles et les graisses de chaque typographie. Niveaux de titrage et des différents types de textes → H1 / H2 / H3 et les tailles de textes courants pour Desktop ou Mobile 06Le logo Symbole de la marque Logo de marques Permet d’identifier la marque rapidement : Tendances des logos 2021 Le logo représente l’image de la marque et aussi son positionnement sur le marché Minimaliste Rétro Dégradé Police unique Les formes Ligne horizontale Ligne verticale Ligne oblique Les formes et symboliques Carré Rectangle Losange Les formes et symboliques Triangle Polygone Cercle Les formes et symboliques Autocréation Concours de logo Freelance Agence 0 – 30€ 150 – 300€ 1000€ – 1500€ 3000€ – 4000€ 35$ 15$ Rien Rien 200 625 000 $ millions $ Protéger ses idées Droit d’auteur Enveloppe Soleau Compartiment auteur Compartiment INPI  TP Partie du TP à rendre en fin de semaine Effectuer des recherches de logos en fonction de vos choix de couleurs, typos etc.. PAS DE LIMITES DE NOMBRES Créer au moins un nouveau logo (voir plus si vous êtes inspirés) Sites d’inspiration : DRIBBBLE - BEHANCE - PINTEREST - UPLABS Charte 07 Graphique Document contenant les caractéristiques des différents éléments graphiques utilisés sur les supports de communication d’une marque. Différences entre charte graphique et identité visuelle L'identité visuelle est l'ensemble des éléments visuels qui représentent l'identité de marque au travers des divers points de contact. La charte graphique ou livre de norme est un document regroupant l'ensemble des directives pour son utilisation Les éléments piliers de la charte PALETTE DE TYPOGRAPHIES LOGO COULEURS ICONES / IMAGES / PICTOS / PHOTOS BOUTONS Que permet la charte graphique ?  Boutons Logo Images Typographies Couleurs Pyramide des attentes utilisateurs Exemple de charte graphique Exemple de charte graphique 04Icônes / Pictos Organiser le site et attirer l’oeil Un pictogramme est un dessin figuratif. Une icône est un petit pictogramme représentant une action, un objet… Quelque chose qui ressemble à la réalité Aide à catégoriser le contenu Rend l’expérience ludique Favorise la lecture du site Avoir des icônes cohérentes Trouver les icônes ThenounProject Icons8 https://thenounproject.com https://icones8.fr/ Freepik https://fr.freepik.com/ Les boutons OU CTA ( call to action ) Interaction des personnes avec le site Variétés au niveau du design Les rendre visibles et attractifs 05Images et photos Importance assez sous estimée Illustrer son site Attire l’attention et donner envie Créer une émotion Ressources pour trouver des images gratuites (Contrairement aux images avec licence creative commons) Pexels Pixabay https://www.pexels.com/fr-fr/ https://pixabay.com/fr/ Unsplash https://unsplash.com/ TP Boutons à créer (3 boutons) → Formes et couleurs différentes avec du texte Icônes (6 minimum) → 3 icônes à créer soit même Trouver au minimum 10 images en rapport avec celles trouvées pour le Moodboard mais DIFFÉRENTES