«Тоталитарный» веб-дизайн: почему излишняя свобода вредит интернет-проектам

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

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

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

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

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

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

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

• Текстовый контент — всё, что связано с текстовым содержимым страниц. Важно ограничить перечень доступных сущностей, например: параграф, заголовки (H1-H6), списки, таблицы.
• Графический и медийный контент — фотографии, фотогалереи, встраиваемые видео.
• Отдельные настройки сайта — например, номера телефонов на всём сайте можно вынести в отдельную настройку. Опять же, изменять можно исключительно контент, а не стилистику.
• Фиксированные наборы параметров — одно поле / одна настройка, которые применяют сразу несколько изменений. Например, заказчик хочет видеть на сайте два варианта шапки, чтобы выбор подходящего осуществлялся всего через одно поле.

Исходя из списка выше, всё, что связано с дизайном и представлением контента, ложится на плечи студии-разработчика. Заказчик не должен иметь доступ к изменению следующих параметров:

• Отступы и сетка — чувство композиции и ритма в дизайне и вёрстке отсутствует у 95% заказчиков.
• Шрифты. «А можно нам сделать выбор из 10 шрифтов для страниц?» — ответ всегда один — «Нет». Шрифт является неотъемлемой частью дизайн-концепции проекта.
• Цвета — тут ситуация в точности, как и со шрифтами. Недаром заказчики так любят «играться» с цветами. Иногда возможен компромисс: ограниченная цветовая палитра.
• Иконки и пиктограммы — будет лучше, если дизайнер на этапе отрисовки макетов заготовит большой сет иконок, из которых можно выбрать необходимые.

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

Какие имеются варианты? Если кратко:

• Без редактирования. Тут надолго задерживаться нет смысла. Однако, не упомянуть данный вариант нельзя: например, лендинг, контент которого на 100% прописывается на этапе аналитики и дизайна и в будущем изменяться не будет.
  
• Работа с кодом напрямую. Данный вариант, на наш взгляд, является бомбой замедленного действия. Заказчик, имеющий доступ к коду сайта, рано или поздно всё сломает.
• Фиксированный набор шаблонов страниц, для кажого из которых имеется свой набор полей. Заказчик может влиять на контент, заполняя поля необходимыми данными.
• Конструктор страниц. Заказчику на выбор предлагается перечень блоков, из которых можно собирать страницы.

Остановимся подробнее на некоторых вариантах.

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

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

• Главная страница. Уникальный дизайн и структура.
• Страница «О компании». Также имеет уникальный внешний вид.
• Типовые текстовые страницы. Любое количество внутренних страниц, выполненных по единой структуре и шаблону. Изменяется в данном случае только текстово-медийный контент.
• Страница «Контакты». Как и первые две — использует свой уникальный шаблон.

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

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

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

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

Очень часто мы встречаем на сайтах визуальные редакторы, вроде Visual Composer или Beaver Builder. Они позволяют использовать понятный интерфейс для перетаскивания блоков и «кусков» сайта прямо в браузере, как если бы вы собирали сайт в Word.

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

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

Так как речь идет о длинных страницах с чётким разделением контента на блоки, мы разрабатываем для каждого блока три цветовых вариации: светлую, тёмную и промежуточную. Это как создавать тёмную тему для приложения — важно не просто инвертировать цвета, а грамотно продумать поведение каждого элемента.

Ещё один отличный пример реализации конструктора с ограничениями — редактор материалов на VC.ru. Нажмите кнопку «Написать» в шапке и поиграйтесь с конструктором. В нём всё продумано так, чтобы вы не смогли собрать «кривую» статью.

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

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

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

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

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

• Шрифт в заголовке. В первоначальном дизайне, как и на всём сайте для заголовков используется антиква Playfair. Заказчик выбрал «просто шрифт с засечками».
• Высота строки в текстах. Заказчик не стал обращать внимание на этот параметр и оставил стандартные настройки. В результате тексту под заголовком и в описании пунктов стало тесно.
• Золотой орнамент «улетел» далеко от заголовка потому что загружен картинкой без привязки к стилям заголовка. Дополнительные золотые элементы оформления из заголовка вообще исчезли.
• Кнопка «выпала» из единой концепции и стала скучной.

Второй блок был более простым в реализации, однако и в нём имеется несколько мелочей, которые выбивают его из общей стилистики:

• Высота строки и оформление текста отличаются от первоначального варианта.
• Шрифт также заменён на Georgia. Радует, что в обоих блоках используется один и тот же шрифт.
• Оформление заголовков упрощено, отступы уменьшены. Сам блок стал более «высоким», хотя изначально задумывался как компактный и сквозной.

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

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

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

Спасибо за внимание!