Identité Visuelle Partie 1: Théorie POULET Vincent IUT Champs-sur-marne UPEM
table des matières historique, nom,contexte 3 l historique 4 le nom 4 le concept 4 analyse de l identité visuelle actuelle 6 le logo 7 les couleurs 7 conclusion 8 historique, nom,contexte 2 /8 3 /8
l historique historique, nom, contexte Twitter a été lancé par Jack Dorsey, Evan Williams, Biz Stone et Noah Glass en juillet 2006. Ce réseau social est rapidement devenu populaire. En effet, en février 2012, il réunissait plus de 500 millions d utilisateurs dans le monde. La société comptait 29 employés en février 2009, 300 en octobre 2010 et 900 en avril 2012. le nom historique, nom, contexte Voici quelques chiffres concernant les utilisateurs pour aider a créer l identité visuelle en fonction du public visé : 61% ont moins de 35 ans 55% sont des hommes 19% sont des cadres supérieurs âge moyen: 22 ans 53% sont des adolescents 68% accèdent à Twitter via leur mobile À partir de cela, je déduis que les cibles sont des jeunes dynamiques de 15 à 35 ans. De plus, le futur design devra s adapter aux mobiles. La première version s appelait Stat.us en lien avec l objectif qui était d y déposer des statuts. Le nom actuel a été trouvé par Noah Glass qui le trouve en feuilletant les pages d un dictionnaire. En tombant sur «Twit : le léger chant émis par certains oiseaux», en connotation avec «excitation, agitation» il décide de le modifier légèrement pour aboutir à Twittr en référence au site de partage de photos Flickr. Enfin, il arrive à Twitter, son nom actuel. le concept Le concept de Twitter est novateur pour l époque. Il n y avait qu un réseau social majeur : Facebook. Pour se démarquer, l équipe a choisi de proposer à l utilisateur de poster des statuts de 140 caractères au maximum. C est cette idée qui va faire de Twitter un réseau très populaire et unique. Aujourd hui, ce réseau social au concept fort est utilisé pour raconter des moments de vie, servir de fil d actualité pour les informations, recruter des futurs employés, ou bien suivre l actualité de ses célébrités favorites. Les principaux concurrents sont Facebook, Instagram et Tumblr. Ces réseaux sont destinés au même public mais ont un concept légèrement différent. Chacun de ces réseaux sociaux a une couleur dominante bleue dans leur graphisme. Il faut donc que dans la future identité visuelle on s écarte du bleu pour se différencier. J ai choisi les adjectifs suivants pour qualifier ce réseau social et donc m aider à créer l identité visuelle : Rapidité Réactivité Partage Vie quotidienne Diversité 4 /8 5 /8
le logo analyse de l identité visuelle actuelle Inspiré directement par le nom du réseau social, l oiseau est le logo de Twitter. Sur leur site internet on peut retrouver les différentes versions: négative, positive, noir et blanc... Ce logo très évocateur est utilisé sans le nom du réseau. Sa simplicité et sa forme reconnaissable suffisent. Cependant, je le trouve trop rond. Le ventre de l oiseau est pour moi trop gros. Cela est le seul défaut que je trouve au logo de cette marque. analyse de l identité visuelle actuelle les couleurs Marge nécessaire lors de l utilisation du logo. La gamme de couleurs utilisées par Twitter est simple. Il n y a que deux couleurs utilisées: le bleu et le gris. Je trouve cela peut évolutif dans le temps et trop simple. Je pense qu il aurait fallu des nuances de bleu pour permettre une utilisation plus importante de cette couleur. 6 /8 7 /8
conclusion analyse de l identité visuelle actuelle Twitter a une identité visuelle et une charte graphique très précise et très bien réalisé. C est ce qui lui donne une identité si marquée et rend le réseau social si reconnaissable. Il y a eu un très gros travail sur la partie graphique du réseau social ce qui lui permet de se démarquer de ses concurrents. Cependant, le logo qui est légèrement trop arrondi et l usage de deux couleurs uniquement me dérange légèrement. En effet, cela provoque une utilisation trop importante de la même nuance de bleu et ce qui rend le site trop plat. Cela correspond à la tendance actuelle qu est le flat design mais fait perdre de l humanité au site et le rend froid. La simplicité dans le design que veut mettre en place Twitter est globalement réussi mais comportant tout de même quelques défauts. 8 /8
Identité Visuelle Partie 2: Création POULET Vincent IUT Champs-sur-marne UPEM
table des matières le concept 3 le logotype 4 le nom 4 le logotype 5 les recherches 6 le typogramme 7 la finalisation 7 9 la taille 10 le logotype en positif et négatif 10 les couleurs 11 la typographie 12 les marges 13 le placement 14 l application 15 le concept 2 /15 3 /15
le logotype le concept Pour le logotype j ai voulu revenir à l essence même du nom du réseau social: twitter. Faisant référence au bruit de l oiseau, j ai donc dessiné un bec. Je l ai stylisé pour lui donner un côté moderne et léger, évoquant une caractéristique très importante du réseau: la rapidité. Je l ai donc ouvert en deux, créant une contre-forme en forme de flèche. On peut aussi voir les deux parties supérieures et inférieures comme étant deux flèches convergeant vers un même point. La couleur est liée au bec de l oiseau: orange. J ai décidé de ne pas prendre un orange vif pour éviter de donner un coter «cheap» et pour rendre le logo plus sobre. J ai utilisé des nuances de cette couleur pour donner un effet de matière. le nom Concernant le nom et sa stylisation, je me suis basé sur la rapidité. Twitter est un mot qui se dit rapidement, d où la nécessité d évoquer cela graphiquement. J ai donc choisi la police d écriture «Walkway» que j ai modifiée. De plus, j ai réduit l approche entre les lettres pour créer des ligatures. Je me suis servi de la forme particulière du W pour jouer sur les matières et donc créer une superposition. le logotype 4 /15 5 /15
les recherches le logotype J ai d abord commencé mes recherches en noir et blanc pour me concentrer sur la forme. J ai réalisé deux essais différents en me basant sur l idée du bec d oiseau. le logotype Le logo est composé de façon géométrique. Il est basé sur une grille de 4*4. Sa hauteur et sa largeur sont de 4 unités. Chaque élément du bec mesure 1 unité de hauteur. Essai #1: J ai créé la forme ci-dessus en rélféchissant à propos de la vitesse et de la modernité. Cependant, le rendu faisait plus penser à un avion qu à un bec. Essai #2: La forme ci-dessus reprend l idée du triangle et de la vitesse mais j ai essayé d y integrer un «t» minuscule. Le rendu n était pas assez moderne à mon gout et était brouillon. À partir de ce moment, j ai choisi de me baser sur une couleur ambre, moins vive que le orange et plus sobre. J ai aussi créé le typogramme. Ensuite, j ai repris la forme que je trouvais la plus appropriée, et j ai fait des essais en couleur. Au départ, je partais sur l idée du bleu qui rappelle la légèreté et la jeunesse. Ensuite, le orange est parru évident. le typogramme Pour pouvoir habillé le logo, j ai créé un typogramme à partir du nom de la marque. Je l ai habillé en suivant les couleurs du signe, et joué sur les ligatures pour montrer la rapidité et la vitesse. Nous retrouvons l effet de matière grâce au W et sa forme pariculière. Essai #2: J ai essayé d intégrer la lettre «t» signifiant twitter dans la forme choisie auparavant. Le résultat n est pas très lisible et fait l effet d un trait sans intérêt. Essai #3: En reprenant l idée de l insertion du «t», j ai essayé de le rendre plus lisible en l agrandissant et en augmentant sa graisse. Le rendu ne me convenait toujours pas. Essai #4: J ai réutilisé la même forme qu avant en essayant avec des nuances de orange vif. Le résultat avait les mêmes défauts mais la couleur était plus agréable et logique par rapport au concept de la forme. 6 /15 7 /15
la finalisation le logotype Après avoir créé mes deux objets graphiques, je les ai joint pour former un ensemble. Le logo et le typogramme seront, dans la majorité des cas, utilisés ensemble. Les deux éléments seront dissociés seulement sur les documents papier0 Essai #5: J ai changé la couleur du logotype pour passer a l orange. L espace entre le typogramme et le logo me semblait trop grand. Essai #6: J ai réduit l écart entre le logotype et le typogramme ainsi que la taille du logo. Cependant, le résultat ne me convenait pas sans trop savoir pourquoi. J ai alors essayé d autres variantes. Après avoir réalisé ces tests, je me suis occupé des détails. Le dernier essai est la version finale. J ai une nouvelle fois augmenté l écart entre le typogramme et le logo et réduit la taille du logo pour créer une harmonie. 8 /15 9 /15
la taille les couleurs 2x 4x #ffecb3 C=1 M=6 J=38 N=0 #ffe082 C=1 M=11 J=58 N=0 #ffd54f C=0 M=16 J=76 N=0 #fdd835 C=0 M=18 J=84 N=0 Pantone 14-8 C 30% Pantone 14-8 C 50% Pantone 14-8 C 60% Pantone 14-8 C 70% 2x Taille minimum utilisable Hauteur: 15mm #ffbc02d C=0 M=27 J=87 N=0 #f9a825 C=0 M=40 J=89 N=0 #f2f2f2 C=0 M=0 J=0 N=5 #e6e6e6 C=0 M=0 J=0 N=9 Pantone 14-8 C 83% Pantone 14-8 C 100% Pantone P Process Black C 8% Pantone P Process Black C 14% le logotype en positif et négatif #cccccc C=0 M=0 J=0 N=20 #b3b3b3 C=0 M=0 J=0 N=30 #999999 C=0 M=0 J=0 N=40 #666666 C=0 M=0 J=0 N=60 Pantone P Process Black C 27% Pantone P Process Black C 74% Pantone P Process Black C 84% Pantone P Process Black C 93% 10 /15 11 /15
la typographie les marges Police utilisée pour le titrage: Walkway SemiBold: Bold: UltraBold: Black: Tailles: 60 pt 30 pt 1/4 Police utilisée pour le contenu: Questrial Light: Classic: SemiBold: Bold: 1/2 1/4 Taille: 13 pt 10pt 1/4 1/4 1/4 1/2 1/4 12 /15 13 /15
le placement l application Voici l application de à l application mobile de Twitter. A4 A4 Version originale: Version normale de l application, avec de Twitter. Version modifiée: Version avec la nouvelle charte graphique. A4 14 /15 15 /15