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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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