Смотреть все продукты
Палитры в духе продуктов · Платформа для публикаций - статьи и лонгриды

Блог-платформа

Шаблон «Блог-платформа» (в духе Medium) - спокойный, ориентированный на текст светлый интерфейс: почти белый фон, почти чёрный текст и один акцентный цвет для ссылок и мелких интерактивных элементов, построенный вокруг долгого чтения, а не дашбордов и данных.

Посмотрите, как палитра в духе Блог-платформа выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.

Живой предпросмотрБлог-платформа
Blog
Search⌘ K
✎ WriteS
For youFollowing
42 stories
WEDNESDAY, MAR 15Stories for your morning
Latest
EElena Marsh· Mar 14Featured
The quiet case for boring technologyWhy the most resilient teams ship less-exciting stacks - and how that discipline compounds over years, not sprints.
Technology8 min read 2.4K 84
M
DDevon Okafor· Mar 12
What a color palette can tell you about a productA short field guide to reading intent, confidence, and taste straight off a hex code.
Design5 min read 891 31
M
SSergei Fediukov· Mar 10
Notes from a year of writing every single dayNo streak apps, no gimmicks - just what actually changed in the sentences and in me.
Writing11 min read 5.1K 176
M
MMarco Ferreira· Mar 7
Shipping the feature nobody asked forSometimes the backlog is wrong. A story about trusting a hunch over a roadmap.
Product6 min read 432 22
M
SSofia Lindqvist· Mar 3
The typography choices nobody notices - on purposeGood type is invisible until it is missing. A close look at the details that hold a page together.
Design7 min read 1.2K 57
M
JJon Bell· Feb 28
A small guide to making room for better ideasWhat happens when you deliberately remove noise from the way you read, work, and make decisions.
Self Improvement9 min read 763 41
M
Показаны фирменные цвета этого архетипа.

Как выглядит палитра в духе Блог-платформа?

Публикационные платформы живут за счёт того, сколько времени человек готов провести за чтением, а это подталкивает визуальный язык к сдержанности: почти белый фон, один хорошо читаемый цвет текста и ровно столько акцентного цвета, сколько нужно, чтобы отметить ссылку, тег или счётчик «хлопков», не споря при этом с самим текстом.

Этот мокап - лента статей в один столбец с подписями авторов, тегами тем и колонкой рекомендаций - заимствует этот текстоцентричный подход, чтобы показать, как палитра держится в интерфейсе, ориентированном на чтение, а не в цветастом дашборде. Это оригинальный макет в этом духе, а не копия дизайн-системы какого-либо реального продукта или защищённого товарным знаком UI.

Ключевые визуальные характеристики

  • Почти белый фон с щедрыми полями вокруг единственной центрированной колонки для чтения
  • Узкая левая боковая панель для основной навигации и отслеживаемых тем
  • Правая колонка с подборкой редакции, рекомендуемыми темами и людьми, на которых можно подписаться
  • Небольшие круглые аватары авторов рядом с подписью и датой публикации
  • Постоянная кнопка «Написать» в шапке в виде простой пилюли

Цветовые характеристики

  • Почти чёрный цвет текста на белом или почти белом фоне для максимального контраста при чтении
  • Один акцентный цвет - часто зелёный - зарезервированный для ссылок, кнопки «Написать» и мелких интерактивных отметок вроде «хлопков»
  • Приглушённый серый для второстепенных метаданных (даты, время чтения, теги тем), чтобы они отступали на второй план перед заголовком
#FFFFFF
#F7F5F2
#1A8917
#1A8917
#242424
#6B6B6B

Типографика

  • Шрифт с засечками или похожий на него контрастный шрифт для заголовков, отличный от простого шрифта без засечек в остальном интерфейсе
  • Простой системный шрифт без засечек для навигации, метаданных и кнопок
  • Комфортная высота строки и ограниченная длина строки в колонке статьи, настроенные под долгое чтение

UI-паттерны

  • Лента статей в один столбец, у каждой - заголовок, короткий отрывок и небольшая квадратная миниатюра
  • Боковая панель с отслеживаемыми темами в виде компактных тег-чипов
  • Правая колонка с подборкой редакции, рекомендуемыми темами и предлагаемыми людьми для подписки
  • Прилипающая верхняя панель с поиском, кнопкой «Написать» и меню аватара

Частые вопросы

Какие цвета обычно используются в интерфейсе в духе Medium?

Почти белый фон с почти чёрным текстом для контраста при чтении, плюс один акцентный цвет - часто зелёный - зарезервированный для ссылок, кнопки «Написать» и мелких интерактивных элементов вроде «хлопков» или закладок.

Это официальные цвета бренда Medium?

Нет - это оригинальный макет, вдохновлённый общим видом публикационных платформ вроде Medium, а не копия его официальной цветовой палитры или защищённого товарным знаком дизайна.

Подходит ли такой текстоцентричный палитре любой акцентный цвет?

Здесь хорошо работает большинство акцентных цветов, поскольку палитра опирается на один акцент для ссылок и мелких действий, а не на крупные цветные поверхности - главное, чтобы он давал достаточный контраст на белом фоне, и ссылки оставались читаемыми.

Можно ли посмотреть свои цвета в этом интерфейсе в духе Блог-платформа, а не только палитру по умолчанию?

Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе в духе Блог-платформа вместо цветов по умолчанию.

Экспорт