Через полгода после запуска: как сайт постепенно теряет целостность

Обсудить
Через полгода после запуска: как сайт постепенно теряет целостность
Реклама. АО «ТаймВэб». erid: 2W5zFGKV4th

Сразу после запуска сайт обычно выглядит наиболее цельным. Все основные страницы сделаны в рамках одной концепции, над ними работала одна команда, и решения еще не успели разойтись в разные стороны. Дизайнеры помнят логику проекта и понимают, почему здесь стоит именно такой заголовок, а там используется определенный цвет. Пока сайт развивается в этих условиях, общая система почти не дает сбоев.

Через полгода всё уже немного иначе. У компании появился новый продукт, для него сделали отдельную страницу. Потом маркетинг запустил кампанию и попросил посадочную. В блоге изменили структуру материалов, на сайте появились новые кейсы, вакансии, формы, специальные предложения. Часть этих задач делал тот же дизайнер, часть – уже другой человек.

Ничего драматичного здесь нет. Более того, почти каждое отдельное решение может выглядеть вполне нормально. Но если открыть сайт целиком, становится заметно, что он постепенно теряет общую интонацию. Один раздел выглядит строже, другой – заметно свободнее. Где-то крупные заголовки, где-то они неожиданно уменьшаются. Появляются новые оттенки, новые варианты карточек, другие принципы работы с изображениями.

Обычно никто не принимает решения «давайте теперь сделаем сайт по-другому». Стиль меняется небольшими шагами, потому что каждый новый материал нужно сделать здесь и сейчас.

И именно в этом состоит одна из сложностей жизни сайта после запуска. Айдентика бренда может отлично работать в рамках первоначального проекта и при этом постепенно терять целостность, когда количество новых задач начинает расти.

Пока все работают над одним проектом, разницы почти не видно

Во время разработки сайта у команды есть редкая возможность постоянно видеть всю картину. Есть карта страниц, прототипы, общие макеты, обсуждения с заказчиком. Дизайнер не просто собирает очередной экран, а понимает, как он связан с остальными.

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

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

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

Вопрос только в том, достаточно ли самой системы для такого самостоятельного использования.

Пока сайт развивается в пределах предусмотренных сценариев, это не очень заметно. Новую страницу можно собрать из существующих компонентов, новый кейс – по знакомой структуре. Но рано или поздно появляется задача, под которую ничего подходящего нет.

И тогда начинается самое интересное.

Новая страница заставляет принимать решения, которых не было в брендбуке

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

Можно переделать существующий шаблон. Можно собрать страницу заново.

На практике дизайнер часто выбирает второй вариант, особенно если задача срочная. Он берет привычные цвета, шрифты и общую стилистику, но композицию делает уже под конкретный контент.

Получается новая страница, которая сама по себе выглядит хорошо. Через некоторое время маркетолог просит сделать похожую страницу для другого продукта и показывает именно этот пример. Новый дизайнер тоже берет его за основу.

Так случайное решение становится частью системы.

Подобные вещи происходят постоянно. В одном разделе появился новый вариант карточки, потому что в старый не помещался текст. На следующей странице его уже используют намеренно. Для спецпроекта понадобился дополнительный цвет – позже он появляется в рекламных баннерах. На одной странице фотографии заменили иллюстрациями, потому что подходящих снимков не оказалось, а затем этот прием понравился команде.

Ни один из этих шагов не выглядит как серьезное изменение бренда. Но за год их может накопиться несколько десятков.

В какой-то момент уже невозможно сказать, какое правило было исходным, а какое появилось просто потому, что однажды так было удобнее.

Обычно сайт не «ломается», а постепенно обрастает исключениями

Это, пожалуй, самый незаметный момент. Целостность редко исчезает после одной плохой страницы.

Скорее происходит другое: у сайта постепенно становится всё больше исключений. Здесь пришлось уменьшить заголовок. Там понадобился дополнительный цвет. На третьей странице не хватило места для стандартной карточки. В четвертом разделе используется старая версия компонента, потому что переделывать его пока некогда.

Каждое решение имеет причину. Поэтому сложно в какой-то момент указать на него и сказать: вот здесь всё пошло не так.

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

Пользователь видит другое. Он не знает, какие страницы появились два года назад, а какие – прошлой весной. Для него это один сайт. Поэтому различия между разделами складываются в общее ощущение от компании.

Необязательно, что человек сформулирует его как «визуальная система непоследовательна». Скорее сайт просто перестает восприниматься как цельное пространство.

И это важный момент: визуальная целостность нужна не ради порядка в макетах. Она помогает человеку воспринимать разные сообщения как части одной компании.

Фирменный стиль «Диалога» на деловой полиграфии, конверте, визитке и карандашах

Хороший брендбук не может предусмотреть все будущие страницы

Здесь часто возникает неправильное ожидание от документации. Кажется, что если достаточно подробно описать правила, команда перестанет отклоняться от системы.

Но сайт всё равно будет сталкиваться с задачами, которых не было в момент разработки брендбука.

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

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

В работе это довольно быстро становится заметно. Человек открывает документ, находит похожий пример, а затем понимает, что его задача всё-таки отличается. Дальше он либо начинает импровизировать, либо пытается буквально повторить чужое решение, даже если оно здесь не подходит.

Гораздо полезнее, когда вместе с примерами объяснены сами основания системы. Какие характеристики нельзя потерять? Где допустима вариативность? Что делает страницу узнаваемой, даже если ее композиция отличается от предыдущих?

Тогда новый дизайнер не обязан угадывать замысел автора по готовому макету.

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

Айдентика «Центринжиниринга» на полиграфии, упаковке и фирменных бутылках

Целостный сайт не обязан быть однообразным

Есть соблазн решить проблему радикально: если страницы начали различаться, нужно просто сделать их более похожими.

На какое-то время это работает. Но потом выясняется, что продуктовая страница, статья, спецпроект и раздел вакансий вообще-то решают разные задачи. Если заставить их собираться по одной схеме, сайт становится предсказуемым и довольно быстро начинает выглядеть как набор повторяющихся шаблонов.

Поэтому целостность – не то же самое, что одинаковость.

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

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

Такие вещи трудно свести к инструкции «использовать элемент А в блоке Б». Но именно они позволяют дизайнеру сделать новый экран самостоятельно и при этом не уйти далеко от бренда.

В этом смысле хорошая система немного похожа на язык. Люди могут составлять разные предложения, но по ним всё равно понятно, что они говорят на одном языке.

Отдельные маркетинговые страницы быстрее всего начинают жить своей жизнью

С посадочными под рекламу обычно происходит особенно интересно. Их делают под конкретную кампанию, у них есть собственная цель и свои сроки. От такой страницы ждут заметности, поэтому она часто становится чуть смелее обычного сайта.

Пока это один спецпроект, ничего страшного. Но если таких страниц становится много, каждая команда начинает искать свой способ выделиться.

Для одной кампании используют очень крупную типографику. Для другой добавляют яркий цвет. В третьей появляется собственная графика. Четвертая вообще строится по другой композиционной логике, потому что так лучше работает конкретное предложение.

Через некоторое время на одном домене оказывается несколько совершенно разных визуальных историй.

При этом претензии к отдельным страницам предъявить сложно. Каждая создавалась под определенную задачу и, возможно, хорошо ее решает.

Проблема обнаруживается только при взгляде на сайт целиком.

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

Старый сайт продолжает влиять на новый

Есть еще одна причина, о которой редко вспоминают во время редизайна. Компания почти никогда не меняет весь сайт за один день.

Даже после запуска новой версии где-то остается старый раздел, где-то – прежний шаблон статьи, а отдельные страницы могут годами жить в промежуточном состоянии. Особенно это характерно для больших компаний, где сайт постоянно развивается и полностью остановить работу над ним невозможно.

Постепенно старые решения начинают смешиваться с новыми.

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

Следующий дизайнер повторяет его уже сознательно. Потом еще один.

Так старый визуальный прием может вернуться в систему спустя несколько лет просто потому, что его приняли за действующее правило.

Поэтому при поддержке сайта важно иногда пересматривать не только документацию, но и сами примеры, на которые ориентируется команда. Если в Figma и на сайте одновременно лежат пять разных версий одного компонента, человек почти неизбежно будет выбирать ту, которая попадется первой.

У каждого нового сотрудника свой момент знакомства с брендом

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

Но команда меняется.

Новый дизайнер не присутствовал на защите концепции. Новый маркетолог не знает, почему определенный цвет используется только в акцентах. Контент-менеджер видит уже не историю создания сайта, а несколько готовых страниц и выбирает из них ту, которая кажется наиболее подходящей.

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

Поэтому со временем реальным источником правил становится не только брендбук. Им становится сам сайт и те рабочие материалы, которыми пользуется команда каждый день.

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

В какой-то момент может оказаться, что официальный документ говорит одно, а пять последних страниц показывают другое. Новый сотрудник, скорее всего, будет ориентироваться на страницы. Для него именно они выглядят актуальными.

Отсюда довольно простой вывод: документация должна соответствовать реальной жизни бренда. Если система изменилась, это нужно отразить в правилах, а не рассчитывать, что команда будет каждый раз вспоминать первоначальный замысел.

Самые сложные проверки начинаются там, где контент неудобный

В презентации бренда всё обычно выглядит аккуратно. Есть хорошая фотография, короткий заголовок, подходящий объем текста. Но сайт редко получает контент в таком удобном виде.

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

И вот тут становится понятно, насколько система действительно гибкая.

Если каждый сложный случай заставляет придумывать новое решение, сайт довольно быстро начинает накапливать отличия. Один раз уменьшили шрифт, второй – изменили сетку, третий – добавили еще один тип блока. Вроде бы ничего серьезного, но через некоторое время эти решения начинают повторяться.

Поэтому при разработке сайта и айдентики полезно проверять не только красивые сценарии. Стоит специально брать неудобные материалы и смотреть, насколько далеко придется отойти от исходной системы, чтобы их нормально разместить.

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

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

Чем больше правил, тем не обязательно становится проще

Когда сайт начинает расходиться, хочется усилить контроль. Дописать брендбук, запретить дополнительные цвета, утвердить размеры всех элементов, заставить новые страницы проходить через несколько этапов согласования.

Иногда без этого действительно не обойтись. Но если сайт постоянно меняется, контролировать каждое решение вручную довольно быстро становится отдельной работой.

Кроме того, большое количество запретов не отвечает на главный вопрос: что делать, если возникла новая ситуация?

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

Такие принципы сложнее сформулировать, чем список фиксированных параметров. Зато они не устаревают при каждом изменении сайта.

Именно поэтому иногда проблема заключается не в том, что команда слишком часто нарушает правила. Возможно, правила просто описывают слишком маленькую часть реальной работы.

Через полгода уже видно, где системе чего-то не хватает

Через несколько месяцев после запуска имеет смысл посмотреть на сайт не глазами заказчика и не глазами дизайнера, который помнит весь проект, а глазами человека, впервые открывшего несколько страниц подряд.

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

Заодно начинают проявляться вещи, которые сразу после запуска было трудно заметить. Например, несколько дизайнеров независимо друг от друга делают один и тот же элемент по-разному – значит, готового компонента им, скорее всего, не хватает. На новых страницах постоянно появляется еще один цвет, потому что существующих вариантов не хватает под конкретные задачи. С длинными заголовками происходит то же самое: каждый раз приходится заново решать, как их разместить и оформить. Такие повторения обычно говорят уже не об отдельных дизайнерских решениях, а о пробелах в самой системе.

Система дизайна упаковки автохимии Sotsnab для разных видов продукции

Это уже другой разговор, чем «кто-то не соблюдает брендбук».

Когда одна и та же сложность возникает у разных людей, дело, скорее всего, не в конкретном исполнителе. Значит, команде действительно не хватает инструмента или понятного решения.

В этом случае полезнее доработать систему, чем просто напомнить всем о правилах.

Сайт продолжает меняться, и это нормально

После запуска компания не перестает развиваться. Появляются новые продукты, меняются предложения, запускаются рекламные кампании, приходят новые сотрудники. Сайт реагирует на всё это и постепенно становится гораздо сложнее того проекта, который когда-то лежал в Figma.

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

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

В этом и заключается одна из самых важных проверок айдентики в digital. Не в том, насколько эффектно она выглядит на защите и даже не в том, насколько аккуратно собран первый релиз. Важно, что произойдет, когда проект перестанет быть новым.

Через полгода никто уже не будет каждый раз открывать презентацию бренда перед тем, как сделать очередной баннер или страницу. Люди будут работать быстро, решать конкретные задачи и опираться на то, что уже есть перед глазами.

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

Подборки, инструкции и советы от дизайнеров для дизайнеров.

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
С помощью соцсетей
У меня уже есть аккаунт Войти
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте