Человек переходит из соцсетей на сайт и решает за 3-5 секунд, туда ли он попал: если палитра, шрифт и фотографии другие, часть людей уходит на этом переходе. Связку держат 5 элементов, и ни один из них не требует ребрендинга - базовый набор собирается за 1-2 недели, а сайт на React у нас стоит от 80 000 ₽.
Мы смотрим на это утилитарно: мы не отдаём сайт, который не будет приносить прибыль, поэтому единый стиль для нас - не про красоту, а про то, чтобы переход «увидел пост - открыл сайт - написал» не рвался посередине. Ниже разберём, где именно он рвётся.
I. Короткий ответ и 5 элементов
Единый стиль - это не одинаковые картинки везде. Это узнаваемость: человек должен понять, что перед ним тот же бизнес, не читая название. Держат её пять вещей, и они работают только вместе.
- Палитра. Один основной цвет, один акцент, нейтральный фон. Три цвета, не семь.
- Шрифт. Одна пара: заголовочный и текстовый. На картинках для соцсетей - те же.
- Фотографии и видео. Один источник, одна обработка, одни ракурсы. Это самый заметный маркер связки.
- Тон. Как вы обращаетесь к человеку, что обещаете, какими словами называете услуги.
- Путь заявки. Из поста человек попадает туда, где написано ровно про то, что было в посте.
Пятый пункт ломается чаще всех: ссылка из поста про конкретную услугу ведёт на главную, человек не находит то, что видел, и закрывает вкладку. Это не вопрос дизайна, а вопрос структуры сайта - и именно поэтому стиль и сайт делаются вместе.
Прототип главной страницы делаем бесплатно. До договора и без предоплаты вы видите, как будет выглядеть ваш сайт: первый экран, блоки, их порядок и логика заявки - включая то, куда попадает человек из соцсетей. Нравится - работаем дальше, не нравится - расходимся, вы ничего не должны. Бесплатен прототип главной, а не весь дизайн, вёрстка и оформление аккаунтов.
II. Палитра и шрифт: минимальная база
Палитру собирают не по вкусу, а по функции. Основной цвет занимает большую часть поверхностей, акцент используется только на действиях - кнопка, ссылка, важная цифра. Если акцентом покрашено пол-страницы, акцента нет. Нейтральный фон нужен, чтобы контент читался и в ленте, и на сайте.
| Элемент | Сколько | Где применяется |
|---|---|---|
| Основной цвет | 1 | шапка, крупные блоки, обложки постов |
| Акцент | 1 | кнопки, ссылки, цифры - только действия |
| Нейтральный фон | 1-2 | фон страницы и карточек |
| Заголовочный шрифт | 1 | заголовки на сайте и в обложках |
| Текстовый шрифт | 1 | тексты, подписи, интерфейс |
| Толщины шрифта | 2-3 | обычный, полужирный, изредка светлый |
Практический момент про шрифты: тот, что стоит на сайте, должен быть доступен и для оформления постов. Иначе через месяц дизайнер возьмёт похожий, потом ещё чуть более похожий, и связка размоется без единого сознательного решения. Проверяется это одним действием - положите скриншот сайта и скриншот ленты рядом. Так мы собирали редизайн сайта SkyFarm - агротех с системами выращивания на искусственном интеллекте: одна пара шрифтов и один акцент держат и первый экран с контейнерной фермой, и карусель продуктов, и экран приложения, поэтому любой кадр оттуда узнаётся как тот же бренд.
III. Фотографии и видео: главный маркер
Фотографии узнаются раньше цвета. Если на сайте студийные снимки со стока, а в соцсетях - живые кадры с телефона, связка не держится, каким бы точным ни был подбор цветов. Обратное тоже верно: живые кадры на сайте и в ленте связывают бренд лучше любой палитры.
- Один источник. Одна съёмка в квартал даёт материал и на сайт, и в ленту - это дешевле двух разрозненных.
- Одна обработка. Единые свет, контраст и теплота важнее композиции: именно по обработке фото и узнают.
- Реальные люди и работы. Стоковые лица - самый быстрый способ сделать бренд неотличимым от соседнего.
- Вертикаль и горизонталь сразу. Снимайте с запасом по краям, чтобы один кадр подошёл и в шапку сайта, и в ленту.
- Видео короткими кусками. Один ролик со съёмки режется на фрагменты для сайта и отдельно для соцсетей.
Как это выглядит на практике: ayvazzovsky.com - сайт салона сложного окрашивания в Москве с двумя адресами, где видео работ мастеров, портфолио и команда - тот же материал, который живёт в соцсетях салона. Человек, пришедший из ленты, видит на сайте те же работы и тех же мастеров, и переход не ощущается как смена площадки.
IV. Тон и формулировки
Тон - это элемент стиля, который забывают включить в бриф, а потом получают сайт на официальном языке и соцсети на дружеском. Человек чувствует разрыв, даже если не может его сформулировать. Договориться достаточно о трёх вещах: как обращаетесь (на «вы» или на «ты»), что обещаете, какими словами называете услуги.
Последний пункт имеет прямое отношение к деньгам. Если в постах услуга называется одним словом, а на сайте другим, человек не находит нужную страницу и уходит. Заведите короткий словарь: официальное название услуги, как её называют клиенты, как называем мы. Названия из колонки «как называют клиенты» обычно и работают лучше всего - и в текстах, и в заголовках страниц.
Тон не должен обещать больше, чем делает бизнес. Мы не гарантируем позиции, трафик и количество обращений - и в текстах клиентов не советуем писать «гарантируем результат». Обещание, которое не подтверждается на первом же контакте, стоит дороже любой недосказанности: человек приходит с завышенным ожиданием, менеджер объясняется, сделка не случается.
V. Общий путь заявки: где теряют людей
Разберём типичную цепочку. Пост про одну конкретную услугу - переход по ссылке - главная страница со всеми услугами сразу - человек ищет то, что видел - не находит за 5-7 секунд - уходит. Здесь теряется заметная часть трафика из соцсетей, и никакая палитра это не лечит.
| Точка перехода | Частая ошибка | Как правильно |
|---|---|---|
| Ссылка в профиле | ведёт только на главную | набор ссылок по услугам плюс мессенджер |
| Ссылка из поста | ведёт на главную | ведёт на страницу той самой услуги |
| Первый экран после перехода | общий слоган | то же обещание, что было в посте |
| Форма | 5-7 полей | 2-3 поля плюс мессенджер и телефон |
| Мессенджер | только в подвале | в шапке и в каждом экране прокрутки |
| Ответ на обращение | обычно несколько часов | обычно в течение 15-30 минут в рабочее время |
Последняя строка не про дизайн, но про те же деньги: скорость первого ответа влияет на конверсию в сделку сильнее, чем оформление страницы. Как оценивать, что приходит по этим каналам, разобрано в материале про оценку качества лидов. Если поток из соцсетей нерегулярный и зависит от того, успели ли вы выложить пост, параллельно подключают лиды с оплатой за результат - цена зависит от ниши и региона.
VI. Сколько это стоит и в каком порядке делать
Порядок важнее бюджета. Сначала сайт и посадочные страницы услуг - потому что именно туда ведут все ссылки. Потом оформление соцсетей под тот же стиль. Наоборот делать дороже: оформили ленту, потом собрали сайт, и оформление пришлось переделывать.
| Работа | Цена | Срок |
|---|---|---|
| Прототип главной | 0 ₽ | 2-4 дня, до договора и без предоплаты |
| Сайт на React | от 80 000 ₽ | 1-2 недели от материалов |
| Перенос с конструктора | от 80 000 ₽ | 1-2 недели от материалов |
| SEO-статья | от 500 ₽ | по мере выпуска |
| Прокачка блога | от 75 000 ₽ в месяц | ежемесячно |
| 200 статей в месяц | 100 000 ₽ | ежемесячно |
| Съёмка под сайт и ленту | обычно 20 000-80 000 ₽ | 1 съёмочный день |
| Заявки | оплата за результат | зависит от ниши и региона |
Чужие расходы даём вилками со словом «обычно» - цены съёмки и подрядчиков по контенту сильно расходятся по регионам. Наши цены точные и не меняются от настроения: сайт от 80 000 ₽, прототип главной - бесплатно. Примеры проектов, где стиль сайта и внешних каналов собран как одно целое: ayvazzovsky.academy - онлайн-академия видеоуроков колористики с каталогом курсов, посадочными страницами уроков, личным кабинетом и промокодами, и Monkey Market - витрина магазина кроссовок с каталогом, трендами, видео и заказом в Telegram.
VII. Чек-лист на один вечер
Сделайте пять проверок подряд, на это уйдёт около часа. Первая: положите рядом скриншот главной и скриншот ленты - один это бизнес или два. Вторая: перейдите по ссылке из последнего поста и засеките, за сколько секунд вы находите то, о чём был пост. Третья: сосчитайте цвета на сайте, если больше четырёх - лишние убираем.
Четвёртая: проверьте, называется ли ваша основная услуга одинаково в постах и в заголовке страницы. Пятая: отправьте заявку с телефона и посмотрите, дошла ли она и за сколько вам ответили. Любая из пяти проверок, показавшая разрыв, дороже целого набора новых логотипов.
Итог. Единый стиль держится на палитре, шрифте, фотографиях, тоне и общем пути заявки - и последний элемент важнее первых четырёх. Начинать стоит с сайта и посадочных страниц, потому что туда ведут все ссылки, а оформление внешних каналов подтягивать следом. Что входит в нашу работу и как выглядят готовые проекты - на странице разработка сайтов и SEO. Ещё пример собранной связки - navsegda-event.ru: агентство корпоративных мероприятий с услугами, кейсами, этапами работы и расчётом мероприятия.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Соцсети живут отдельно, а сайт отдельно?
Соберём сайт под ваш стиль и покажем прототип главной бесплатно - до договора и без предоплаты.
Частые вопросы
Сколько цветов должно быть в едином стиле?
Три-четыре: один основной, один акцентный и один-два нейтральных фоновых. Акцент используется только на действиях - кнопках, ссылках, важных цифрах. Если цветов больше четырёх, узнаваемость размывается.
Что делать сначала - сайт или оформление соцсетей?
Сначала сайт и посадочные страницы услуг, потому что туда ведут все ссылки, а оформление внешних каналов подтягивается следом. Обратный порядок обычно означает переделку оформления после запуска сайта. Сайт на React у нас от 80 000 ₽, срок 1-2 недели от материалов.
Куда должна вести ссылка из поста?
На страницу той самой услуги, о которой был пост, а не на главную. На главной человек ищет то, что видел, в среднем 5-7 секунд и уходит, если не находит. В профиле лучше держать набор ссылок по услугам плюс мессенджер.
Нужна ли отдельная съёмка для сайта и для соцсетей?
Нет, выгоднее одна съёмка с запасом по краям кадра: один материал расходится и в шапку сайта, и в вертикальные форматы. Съёмка обычно стоит 20 000-80 000 ₽ за день в зависимости от региона и состава команды.
Можно ли увидеть будущий сайт до оплаты?
Да. Прототип главной страницы мы делаем бесплатно - до договора и без предоплаты: первый экран, блоки, их порядок и логика заявки, включая то, куда попадает человек из соцсетей. Не понравится - расходимся, вы ничего не должны.
Свяжем сайт и внешние каналы в один бренд
Оставьте заявку - посмотрим ваши каналы, найдём разрывы на пути заявки и покажем прототип главной страницы.
Получить целевые заявки → Telegram