Модульная дизайн-система
Как мы создали визуальный язык для проектов «Самолет Девелопмент» и разработали модульный шаблон-конструктор, который упрощает поддержку и наполнение
В 2017 году «Кельник» создал для компании «Самолет Девелопмент» несколько сайтов, построенных по одному принципу. Мы разрабатывали, внедряли и тестировали эту систему несколько месяцев.
Рассказываем, какие проблемы решает модульная система и как мы к ней пришли.
Предыстория
«Самолет Девелопмент» входит в десятку крупнейших застройщиков России. Компания одновременно строит 7 жилых комплексов, у каждого есть свой сайт. Эту инфраструктуру нужно постоянно поддерживать — держать базу квартир в актуальном состоянии, анонсировать акции, следить за статистикой каждого сайта, внедрять новые стратегии и инструменты продаж.
В конце ноября 2016 года «Самолет» столкнулся с непростой ситуацией: до старта продаж жилого квартала «Спутник» оставалось всего-ничего, а старый сайт плохо работал. Он не индексировался поисковиками, не соответствовал концепции квартала и некорректно отображался на смартфонах и планшетах.
Мы предложили быстро исправить проблемы этого сайта, а потом сделать полноценный редизайн и привести сайты компании к единому виду.
Первый подход
«Самолет» назначил старт проекта на середину декабря. 7 декабря мы начали работу, а 16 декабря выкатили результат первой итерации — работающий адаптивный сайт с параметрическим поиском. Перед Новым Годом появился и визуальный выборщик.
На этом этапе важно было разобраться с проблемами старого сайта, не проводя масштабных изменений. Мы немного причесали вёрстку, успокоили дизайн, добились того, чтобы все функции сайта работали, и привели в порядок адаптив.
Проблемы, которые решает редизайн
Закрыв ключевые «дыры», мы выиграли время на редизайн. Сайт уже приносил прибыль, но, чтобы перейти к следующему этапу, нужно было сформулировать задачи.
Мы отталкивались от проблем, которые появляются у крупных застройщиков в работе над сайтами ЖК.
- У покупателя нет целостного представления о проекте. Типичная главная страница сайта ЖК — это слайдер с шапкой. На слайдер навешаны «продающие» блямбы и плашки, рассеивающие внимание. Нельзя быстро пробежаться взглядом по странице и понять главное.
- Сайт с трудом поддаётся изменениям. У проекта в недвижке долгий цикл жизни — как минимум полтора-два года. За это время стратегия продаж меняется. Всякий раз, отдел продаж хочет внедрить что-то новое, сменить приоритеты или протестировать гипотезу, начинается ад: как отключить отдельные блоки, чтобы дизайн не рассыпался? Чем заполнить дыры и надо ли их заполнять? Агентство, которое разработало сайт, привлекает дизайнера, технолога и программиста, чтобы решить точечные проблемы. Поддержка — это долго и дорого.
- Мобильная версия хуже, чем десктопная. Любые изменения в первым делом вносятся в десктопную версию, а адаптив формируется по остаточному принципу. На что времени хватило, то и сделали.
- Визуально все проекты девелопера разные. У бренда застройщика нет единой платформы, узнаваемого построения сайта. Страдает репутация и медийный образ.
Чтобы решить эти проблемы, нужно было не просто обновить сайт, а придумать неубиваемую систему. Мы начали с главной страницы квартала «Спутник».
Главная страница как витрина
Идея проста: пробежавшись взглядом по сайту ЖК, покупатель должен получить ответы на ключевые вопросы —где находится дом, сколько стоят квартиры, каковы условия ипотеки, что с инфраструктурой, как добраться. Фокус должен сместиться с рекламных слоганов и «продающих текстов» на продукт — дом, квартиру, качество жизни.
В теории этот подход кажется самоочевидным, но по разным причинам его придерживаются далеко не все застройщики. Лучшим в этом деле оказался «ПИК», но у «ПИКа» сайтом занимается команда продуктовых дизайнеров.
В заказной разработке такой подход почти не встречается, потому что требует детального знания отрасли и пользовательских проблем. Сделать типичную главную страницу — слайдер с рендерами, рекламный слоган, шапка, блямбы с акциями, — гораздо проще. Даже если насытить эту конструкцию анимацией, смысл не изменится.
«Спутник» заслуживал лучшего, поэтому мы превратили главную страницу в витрину. Здесь всё разложено по полочкам: контент упакован в аккуратные модули, основные предложения — на первом экране.
Каждый модуль анонсирует отдельный раздел, важный для потенциального покупателя. Мы сразу показываем ключевые факты, отжимая всю лишнюю «воду» — неинформативные тексты, лишние слоганы и украшательства, которые тешат дизайнерское самолюбие, но не помогают клиенту.
Трансформации модулей
Контент в блоках бывает 4 видов: текст, рендер, иконка, ссылка. У блока всегда есть заголовок по делу и ссылка, которая ведёт на подробную информацию. В качестве иллюстрации используется либо рендер на фоне, либо иконка на цветной плашке.
Сами модули бывают 3 конфигураций: большой блок 3x2 для красочных рендеров и галерей, 2x1 для ключевых преимуществ, 1x1 — для сопутствующей информации.
Эти модули собираются в общее полотно автоматически. Система полностью управляется из админки. Если внезапно отдел продаж решит отключить отдельные модули, контенщик поставит в админке пару галочек — и система не порушится. Модули изменят структуру и перестроятся, а сайт останется стилистически цельным, без дыр и ошибок.
Сетка в центре внимания
Главное в модульной системе — сетка. От её конфигурации зависит подача информации и объём контента на экране.
Клиенту было важно, чтобы покупатель видел на первом экране самое важное и чтобы рендеры не обрезались. Поэтому мы привязали сетку к вьюпорту. Система высчитывает видимую область и соотношение сторон экрана, равномерно заполняя страницу модулями. Каждый модуль чётко стыкуется с соседним без дыр и лишнего пространства.
Здесь есть загвоздка: у мониторов разное соотношение сторон — 16:10, 16:9, 4:3, — а у планшетов и смартфонов есть портретная и альбомная ориентация. В зависимости от этого модули меняются: они могут стать квадратными или вытянутыми по горизонтали.
Чтобы избежать вертикального формата, в котором рендеры смотрятся невыигрышно, мы высчитали идеальные значения и написали сложную систему, которая контролирует пропорции блоков. У каждого модуля есть минимальная и максимальная высота. Всякий раз, когда значения подходят к критическим, блоки перестраиваются. Поэтому сайт адекватно ведёт себя на любых устройствах — от широкоформатного десктопа до смартфона.
Сетка регулирует положение элементов, расстояния между блоками, боковую колонку для фактоидов. На создание, тестирование и отлаживание у нас ушло больше 100 часов, но именно сетка задала тон всему сайту. Контентные страницы сайта тоже наследовали модульную структуру, но не «в лоб».
Адаптив
Система включает в себя семь брейкпоинтов —то есть состояний, когда перестраивается макет, меняются размеры шрифтов и элементов.
Верхний брекпоинт — 2540+ (широкоформатный монитор за вычетом скроллбара). Нижний — 320 (самый маленький смартфон). Между брейкпоинтами сайт динамически тянется, сохраняя размеры шрифтов. Благодаря такой сложной структуре на сайте не бывает ситуации, когда что-то не влезло или вышло за границы контейнера.
Почему эта система хороша
- Ясная подача продукта. За счёт «витринной» композиции и сокращения рекламных текстов покупатель быстро усваивает ключевые факты о ЖК.
- Единообразие. Какой бы контент не появлялся при обновлении, дизайн остаётся цельным и консистентным.
- Простота наполнения. Для большинства рядовых операций (анонса акций, замены информации, смены акцентов) дизайнер не нужен — система предусматривает гибкую подачу и управляется из админки.
- Предсказуемый адаптив. Блоки удобно перестраиваются на любых устройствах, не теряя связи с десктопной версией.
Развитие дизайн-системы
После редизайна «Спутника» мы перешли к следующему проекту «Самолета» — ЖК «Пригород Лесное». Он масштабнее, чем «Спутник», и гораздо запутаннее, но к этому моменту у нас уже было представление, что работает, а что нет.
Мы искали решение, которое сроднит «Пригород» со «Спутником», но не просто скопирует существующую систему, а разовьёт её. «Пригород» нацелен на семейную аудиторию из эконом-сегмента, поэтому визуально его дизайн более простой и менее изящный в деталях, однако под капотом он мощнее и функциональнее, чем «Спутник».
Войны за гайд
В процессе мы столкнулись с типичными проблемами агентства на больших проектах: разветвлённой системой работы, процессуальными препятствиями, обилием исполнителей и проблемами коммуникации между ними.
На проекте работало пять дизайнеров и шесть технологов. Чтобы сократить время на разработку, мы сделали процесс параллельным и совместили этап дизайна и вёрстки. Как только дизайнеры создавали макеты, технологи тут же их верстали.
Из-за этого любые изменения на поздних этапах дизайна вносили смуту в процесс вёрстки. Элементы интерфейса, сетка и размеры шрифтов разнились от макета к макету, и каждый дизайнер хоть чуть-чуть, но всё-таки отступал от стилей.
На большом проекте важно добиться максимального переиспользования элементов. В какой-то момент мы поняли, что пора создавать не микрогайд, а обширное руководство, которое описывает поведение блоков и весь адаптив, задаёт логику блоков и чётко документирует типографику, отступы, ховеры.
До этого момента система существовала только в головах у разработчиков, но отныне появилась документация. Документация и чётко сформулированные принципы позволяют масштабировать систему на разных проектах. Теперь она не привязана только к «Спутнику» или только к «Пригороду» — на её основе мы также сделали сайты жилых комплексов «Томилино 2018» и «Химки 2019».
Такой подробный мануал по проекту полезен и технологам, и дизайнерам, и тестировщикам, и контентщикам. Он вносит ясность и порядок в большую и запутанную систему работы, помогает выявить ошибки и баги. После запуска проекта гайд можно передать в поддержку.
Благодарности
Все проекты для компании «Самолет» вела менеджер Екатерина Синицкая. Без её дотошности, щепетильности, трудолюбия и самоотверженности ничего бы не было.
Аккаунт-менеджер проектов — Татьяна Зорьян. Концепцию сайта «Спутник» создал Алексей Шургин, а сайта «Пригород» — Дарья Почекуева. Над дизайном работали Егор Горохов, Анастасия Грабовая, Иван Тишинский и Николай Лисов.
Имиджевую визуализацию и рендеры для 3D-выборщика сделал Михаил Мутовкин со своей командой визуализаторов.
Сайты верстали Николай Шабалин, Евгения Калинина, Георгий Скрипак, Анна Павлова, Илья Мирошниченко и Алексей Балканский.
Систему программировали Александр Попов и Анастасия Верхотурова. Тестировщик — Елена Букрей. Контент-менеджер — Юлия Омельченко.
Та же команда позднее переключилась на «Пригород» и помогла внедрить систему на остальных проектах «Самолета».
И, конечно, разработка дизайн-системы была бы невозможна без соответствующего запроса от клиента. Спасибо «Самолету» за возможность быть полезными, смелость и готовность к плодотворной работе.
Кейс читайте на сайте Кельника. Проект также выложен на Behance.
