Дизайн Валерий Алексеев
142

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

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

В закладки

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

Чем больше сила, тем больше ответственность

Дядя Бен

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

Необходимые ограничения

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

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

Чем может управлять заказчик

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

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

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

Чем не должен управлять заказчик

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

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

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

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

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

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

Фиксированный набор шаблонов

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

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

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

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

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

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

Свободный визуальный редактор

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

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

Визуальный редактор King Composer позволяет редактировать сетку и отступы — без дизайнерского чутья лучше за это не браться.

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

Конструктор с ограничениями

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

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

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

На этапе вёрстки (мы делаем такой конструктор на Vue.js) используются полезные контролы для тестирования всех вариаций и блоков.

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

К-к-к-к-комбо

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

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

Пример реализации блока «Отзывы». Карточки в блоке соберутся автоматически на основе данных выбранных отзывов.

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

Рубрика «Эксперименты»

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

Блок «Пошаговая инструкция». Вверху — первоначальный вариант. Внизу — версия от заказчика.

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

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

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

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

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

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

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

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

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

Написать
{ "author_name": "Валерий Алексеев", "author_type": "self", "tags": ["va"], "comments": 0, "likes": 0, "favorites": 8, "is_advertisement": false, "subsite_label": "design", "id": 70917, "is_wide": false, "is_ugc": true, "date": "Mon, 10 Jun 2019 09:25:14 +0300" }
{ "id": 70917, "author_id": 15534, "diff_limit": 1000, "urls": {"diff":"\/comments\/70917\/get","add":"\/comments\/70917\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/70917"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

Комментариев нет 0 комм.

Популярные

По порядку

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
{ "page_type": "default" }