Визуальный стиль блога: как собрать узнаваемый образ без дизайнера

50 миллисекунд.

Столько длился показ веб-страницы в опытах Гитте Линдгаард и её коллег из Карлтонского университета (2006). За этот миг люди успевали решить, нравится ли им страница на вид, и оценки почти не расходились с теми, что они ставили, глядя в десять раз дольше.

Твою ленту судят так же. Пост ещё не прочитан, а мнение уже есть: по цвету, шрифту, свету на фото.

Открой свой профиль. Закрой имя пальцем. Узнаёшь, чей это блог?

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

Шаг 1 · 10 минут: посмотри на свою ленту чужими глазами

Зачем? Стиль не придумывают с нуля.

Он у тебя уже есть. Просто случайный.

Задача: отделить своё от попавшего в ленту по инерции.

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

Пять шрифтов на двенадцать публикаций.

Это не стиль. Это пять разных людей, которые по очереди ведут один блог.

Шаг 2 · 20 минут: палитра из того, что уже в кадре

Почему не из подборки красивых картинок?

Подборку ты не повторишь в каждом кадре. Стену кабинета, свои инструменты, ткань на столе повторишь.

Светлого больше всего, это фон. Основной держит характер. Акцент редкий: полоска, плашка, деталь. Тёмный для текста.

Текст обязан читаться. В международном стандарте доступности веб-контента WCAG для обычного текста заложен контраст с фоном не меньше 4,5 к 1. Без измерителя: сделай картинку чёрно-белой. Текст слился с фоном, значит, контраста мало.

«Основной: шалфейный зелёный #8FAF8B. Акцент: жёлтый, как кубики, #E8B04B. Светлый: молочный #F6F2EA. Тёмный: графит #2F3437».

Одежда и образ на фото тоже часть стиля, но это отдельная тема: про неё есть статья об архетипе и персональном стиле.

Шаг 3 · 15 минут: два шрифта, и ни одного больше

Шрифт видно раньше смысла.

Шрифт с завитками на обложке психолога. Вопрос: тебя хотят прочитать или разглядывать?

Пара работает так: заголовок с характером, текст нейтральный. Два шрифта с характером спорят, и проигрывает читатель. Перед выбором три проверки:

1. Кириллица. Многие красивые шрифты сделаны только для латиницы, и русские буквы подменяются чужими.

2. Телефон. Тонкие начертания на маленьком экране исчезают.

3. Лицензия. Блог эксперта приносит деньги, значит, нужна лицензия, которая разрешает коммерческое использование. Открытая лицензия OFL это позволяет.

Из бесплатных шрифтов с кириллицей и лицензией OFL часто берут PT Sans, PT Serif и Montserrat. Это отправная точка, а не рецепт.

«Заголовки: Montserrat, полужирный. Текст: PT Sans. На обложке не больше двух начертаний».

Шаг 4 · 20 минут: три правила для фото

Вечер, лампа, а правило «дневной свет у окна»?

Так и запиши. Значит, снимаешь днём. Правило, которое не выполнить, лучше узнать сегодня, а не в день публикации.

Красивый интерьер не нужен. Нужен повторяемый: один угол с ровной стеной лучше пяти случайных.

«Свет: дневной, у окна в кабинете, до трёх часов. Место: стол с карточками, зелёная стена, коврик для занятий. Кадр: руки и предметы крупно, лица детей не показываю. Обработка: чуть теплее, без виньетки».

Шаг 5 · 15 минут: обложка, которую узнают в ленте

Сколько обложек ты сделал с нуля в этом месяце?

Каждая с нуля означает каждый раз нового человека.

Шаблон это убирает и экономит время. Заголовок на одном месте, цвета из палитры, постоянный элемент там же, где вчера. Меняются только слова и фото.

Проверка заголовка: он читается на превью размером с ноготь. Не читается, сокращай слова, а не шрифт.

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

Шаг 6 · 10 минут: перепиши всё в бланк

ВИЗУАЛЬНЫЙ ПАСПОРТ БЛОГА

Уже моё в ленте: ____________

Палитра
  основной  #______  откуда: ________
  акцент    #______  где живёт: ______
  светлый   #______  фон
  тёмный    #______  текст

Шрифты
  заголовки: ________  начертание: ____
  текст:     ________

Фото
  свет:      ____________
  место:     ____________
  кадр:      ____________
  обработка: ____________

Обложки
  рубрика 1: ______  фон: ______
  рубрика 2: ______  фон: ______
  постоянный элемент: ________

Никогда: ____________

Пригодится трижды: тебе в спешке, помощнику, который делает обложки, и нейросети, если поручаешь ей подбор картинок.

Что у тебя теперь есть

Девяносто минут назад был просто блог. Сейчас на столе:

• список того, что в ленте уже твоё, и того, что попало туда случайно;

• палитра из четырёх цветов с кодами;

• два шрифта с кириллицей и лицензией для работы;

• три правила для фото и одна обработка;

• макеты обложек для двух рубрик;

• бланк, который можно отдать помощнику.

Проверка через две недели. Открой профиль, закрой имя пальцем.

Узнаёшь?

P.S. Хочешь, чтобы палитра и внешний стиль шли от личности, а не только от ленты: в «Персоне» от Искры есть цветовые палитры и внешний стиль, а начать можно бесплатно с Mini Preview.