Cet article a été mis à jour en novembre 2018 pour refléter les couleurs et les polices les plus récentes utilisées par les réseaux sociaux tels que Facebook, Twitter et Instagram. Pour la première fois, cela n’inclut pas Google Plus, qui est maintenant disparu.
Boutons de connexion à des réseaux sociaux, liens vers des canaux de médias sociaux – en 2018, le design web et le design d'applications en étaient toujours autant. Je veux dire, quelles affaires ne se trouvent pas sur les médias sociaux ces jours-ci?
Il est très utile de disposer d’une collection d’actifs de marque utilisés sur les réseaux sociaux, de sorte que nous puissions les intégrer à nos propres conceptions. C'est quelque chose que nous Google chaque fois que nous construisons une application ou un site web ( Quelle est la couleur utilisée par Facebook? Quel est le code de couleur de Facebook? ou tout simplement, Facebook bleu ). En fait, je parie que vous avez trouvé cet article!
Regardez Créer de meilleurs graphismes plus rapidement avec Canva
Créez des conceptions Web professionnelles et imprimez des conceptions avec Canva
Je ne vous ferai pas attendre. Jetons un coup d'œil aux couleurs et aux polices utilisées par Facebook Twitter Pinterest Instagram Snapchat , LinkedIn Facebook Messenger YouTube et de Google Material Design . Si j'ai manqué quelque chose, lancez-moi sur Twitter .
Montre-moi juste les couleurs principales (Facebook, Twitter, Instagram, YouTube, Pinterest).
Codes de couleur «Facebook bleu»
- Hex: # 4267b2
- RGB: 66.103.178
Polices Facebook
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Facebook utilise la police Segoe UI pour la version Windows de leur site Web et la police San Francisco créée par Apple pour la version macOS (les deux sont la police système par défaut). ). Pour iOS et Android, il s'agit respectivement de San Francisco et de Roboto (encore une fois, les deux polices système, pour des raisons de lisibilité et de familiarité. Ces polices sont en train de devenir un standard.
En savoir plus sur Les directives de marque de marque de Facebook ici.
Codes de couleur Twitter
- Hex: # 38A1F3
- RGB: 56 161 243
Combiné avec des variantes de «Twitter Grey» (qui contient un mélange de bleu, de noir et de les tons blancs), le bleu Twitter (# 38A1F3) est la couleur principale utilisée dans la marque.
Cliquez ici pour en savoir plus sur Les principes de marque de Twitter ici.
Police de Twitter
- Windows: Helvetica
- macOS: Helvetica Neue
- iOS: San Francisco
- Android: Roboto
Tandis que Twitter utilise également les polices système de ses applications mobiles (comme le font la plupart des réseaux sociaux), la version Windows du site utilise Helvetica. la version macOS Helvetica Neue – quelque peu dépassée mais Je suis sûr qu'ils ont leurs raisons.
N'oubliez pas que Twitter a testé Gotham Narrow au hasard ?
] Codes de couleur Pinterest
- Hex: # BD081C
- RGB: 189,8,28
La couleur rouge classique de Pinterest n’a jamais changé!
Polices Pinterest
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Fait amusant: alors que Pinterest utilise à peu près les mêmes polices que les autres réseaux sociaux, Pinterest utilise la police Hiragino pour le japonais et les langues orientales, qui se lit mieux par rapport aux polices utilisées avec les langues romaines.
En savoir plus sur Principes directeurs de Pinterest ici
“Instagram Grey” Codes de couleur
- Hex: # 231F20
- RGB: 35,31,32
Instagra m utilise également une combinaison de différents gradients . Il est difficile de comprendre quelles sont les couleurs individuelles et dans quel scénario elles doivent être utilisées, mais vous pouvez trouver ici tous les actifs de de la marque Instagram . Pour être honnête, il est rare de voir ces couleurs à l'état sauvage – ceux qui font référence à leurs canaux de médias sociaux ont tendance à utiliser «Instagram Grey».
Instagram Fonts
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Rien d'extraordinaire ici. Comme vous le pouvez, Segoe UI, San Francisco et Roboto sont en quelque sorte en train de devenir un standard avec les réseaux sociaux, avec Instagram non plus.
Snapchat
Codes de couleur Snapchat
- Hex: # FFFC00
- RGB: 255,252,0
Polices de Snapchat
- Windows: Avenir Next
- macOS: Avenir Suivant
- iOS: San Francisco
- Android: Roboto
Curieusement, la police utilisée sur la version Web de Snapchat est un peu différente de la plupart des utilisateurs, car la plupart ont tendance à revenir à la police système. Cependant, Snapchat utilise Avenir Next.
Facebook Messenger
Codes de couleur Facebook Messenger
Bien qu’une application Facebook, le bleu utilisé par Messenger soit légèrement différent:
- Hex: # 0084FF
- RGB: 0,132,255
Le logo utilise également infuse cette couleur:
- Hex: # 00C6FF
- RGB: 0,198,255
Facebook Messenger Fonts
Messenger utilise le même jeu de polices que Facebook:
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Codes de couleur LinkedIn
- Hex: # 0077B5
- RGB: 0,119,181
Police de LinkedIn sur LinkedIn
LinkedIn utilise de source sans exclusivement (avec Arial comme sauvegarde), en particulier avec des droits entre léger et semi-gras. Lisez à propos de Les directives de la marque de Linkedin ici.
Remarque: Source Sans n’a pas de style italique, donc substitut pour la Géorgie. Je sais, bizarre.
YouTube
Codes de couleur YouTube
- Hex: # ED3833
- RGB: 237,56,51
Polices YouTube
] YouTube, propriété de Google, utilise uniquement Roboto
Bonus: la conception matérielle de Google
Oui, c'est vrai. Toutes Les applications Google et de nombreuses applications Android tierces (par souci de cohérence et de cohérence) utilisent le système de conception de Google appelé Système de conception de matériel .
La conception de matière contient un système de couleurs de couleurs acceptables (non requis, mais recommandé) et police par défaut largement reconnue de Google, Roboto .
Ai-je oublié quelque chose? Faites-nous savoir dans les commentaires ou tweet moi .
Source link