Эта статья была обновлена в ноябре 2018 года, чтобы отразить самые последние цвета и шрифты, используемые социальными сетями, такими как Facebook, Twitter и Instagram. Впервые это не касается Google Plus, который сейчас не существует. Было ли это когда-нибудь действительно живым?
Кнопки входа в систему социальных сетей, ссылки на каналы социальных сетей — в 2018 году это все еще остается в сфере веб-дизайна и дизайна приложений. Я имею в виду, что бизнес не в социальных сетях в эти дни?
Очень удобно иметь коллекцию активов бренда, используемых социальными сетями, чтобы мы могли включить их в наши собственные проекты. Это то, что мы ищем в Google каждый раз, когда создаем приложение или веб-сайт ( какой цвет использует Facebook? Что такое цветовой код Facebook? Или просто Facebook синий ). На самом деле, держу пари, что так ты нашел эту статью!
Ну, я не заставлю тебя ждать. Давайте рассмотрим цвета и шрифты, используемые Facebook , Twitter , Pinterest , Instagram , Snapchat , LinkedIn , Facebook Messenger , YouTube и Google Material Design . Если я что-то пропустил, напишите мне в Twitter .
Просто покажи мне основные цвета (Facebook, Twitter, Instagram, YouTube, Pinterest).
Цветовые коды Facebook Blue
- Hex: # 4267b2
- RGB: 66,103,178
Шрифты Facebook
- Windows: Segoe UI
- macOS: Сан-Франциско
- iOS: Сан-Франциско
- Android: Робото
Facebook использует шрифт Segoe UI для Windows-версии своего настольного веб-сайта и шрифт Apple для Сан-Франциско для MacOS-версии (оба являются системным шрифтом по умолчанию). Для iOS и Android это Сан-Франциско и Робото соответственно (опять же, оба системных шрифта, для удобства чтения и знакомства. Эти шрифты становятся стандартом.
Узнайте больше о правилах брендинга Facebook здесь.
щебет
Цветовые коды Twitter
- Hex: # 38A1F3
- RGB: 56 161 243
В сочетании с вариантами «Twitter Grey» (который содержит сочетание синего, черного и белого тонов), синий Twitter (# 38A1F3) используется в качестве основного цвета бренда.
Узнайте больше о правилах бренда Twitter здесь.
Шрифты Твиттера
- Окна: Helvetica
- macOS: Helvetica Neue
- iOS: Сан-Франциско
- Android: Робото
Хотя Twitter по умолчанию также использует системные шрифты для своих мобильных приложений (как это делают большинство социальных сетей), версия веб-сайта для Windows использует Helvetica, а версия MacOS Helvetica Neue — несколько устаревшая, но я уверен, что у них есть свои причины.
Помните, когда Твиттер случайно испытал Gotham Narrow ?
Цветовые коды Pinterest
- Hex: # BD081C
- RGB: 189,8,28
Классический красный цвет Pinterest никогда не менялся!
Pinterest Шрифты
- Windows: Segoe UI
- macOS: Сан-Франциско
- iOS: Сан-Франциско
- Android: Робото
Забавный факт: хотя Pinterest использует примерно те же шрифты, которые являются стандартными для других социальных сетей, Pinterest использует шрифт Hiragino для японского и других восточных языков, который лучше читается по сравнению со шрифтами, используемыми в римских языках.
Узнайте больше о правилах бренда Pinterest здесь.
«Instagram Grey» Цветовые коды
- Hex: # 231F20
- RGB: 35,31,32
Instagram также использует комбинацию разных градиентов . Трудно понять, каковы отдельные цвета и в каком сценарии они должны использоваться, но вы можете найти все активы бренда Instagram здесь. Честно говоря, редко можно увидеть эти цвета в дикой природе — те, кто ссылается на свои социальные сети, обычно используют «Instagram Grey».
Instagram Шрифты
- Windows: Segoe UI
- macOS: Сан-Франциско
- iOS: Сан-Франциско
- Android: Робото
Здесь нет ничего необычного. Как вы можете, пользовательский интерфейс Segoe, Сан-Франциско и Робото становятся своего рода стандартом для социальных сетей, и Instagram ничем не отличается.
Snapchat
Snapchat Цветовые коды
- Hex: # FFFC00
- RGB: 255,252,0
Snapchat Шрифты
- Windows: Avenir Next
- macOS: Avenir Next
- iOS: Сан-Франциско
- Android: Робото
Как ни странно, шрифт, используемый в веб-версии Snapchat, немного отличается от большинства, так как большинство из них склоняются к системному шрифту. Snapchat, однако, использует Avenir Next.
Facebook Messenger
Цветовые коды Facebook Messenger
Несмотря на то, что приложение Facebook, приложение Messenger немного отличается:
- Hex: # 0084FF
- RGB: 0,132,255
И логотип также использует инфузии этого цвета:
- Hex: # 00C6FF
- RGB: 0,198,255
Facebook Messenger Шрифты
Messenger использует тот же набор шрифтов, что и Facebook:
- Windows: Segoe UI
- macOS: Сан-Франциско
- iOS: Сан-Франциско
- Android: Робото
Цветовые коды LinkedIn
- Hex: # 0077B5
- RGB: 0,119,181
Шрифты LinkedIn
LinkedIn использует исключительно Source Sans (с Arial в качестве резервной копии), особенно с весами от светлого до полужирного. Читайте о Руководстве по брендингу Linkedin здесь.
Примечание: Source Sans не имеет курсивного стиля, поэтому сабжа для Грузии. Я знаю, странно.
YouTube
Цветовые коды YouTube
- Hex: # ED3833
- RGB: 237,56,51
Шрифты YouTube
YouTube, принадлежащий Google, использует только Roboto.
Бонус: Google Material Design
Да, это верно. Все приложения Google и многие сторонние приложения Android (для ознакомления и согласованности) используют систему дизайна Google, известную как Material Design System .
Дизайн материала содержит цветовую систему приемлемых цветов (не обязательно, но рекомендуется) и широко известный по умолчанию шрифт Google Roboto .
Я что-то пропустил? Дайте нам знать в комментариях или чирикать мне .