Ситуация 1. Колдунство

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

— Мы использовали шрифт Сан-Франциско с чуть уменьшенным интерлиньяжем для создания кэжуал-эстетики…

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

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

Как не облажаться: не использовать специфические термины из мира дизайнеров. Говорить о пользе продукта, а не о визуальных приёмах. Прокачать навык объяснения (объяснять сложные штуки как можно чаще, в идеале каждый день, разным людям).

Клиенту (если он не дизайнер), в сущности, всё равно, какой у вас там интерлиньяж и какая эстетика. Важно, чтобы дизайн подходил продукту и решал задачу, а какими методами — это уже забота исполнителя, а не заказчика.

Ситуация 2. Тысяча мелочей

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

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

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

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

Ситуация 3. Несовпадение форматов

Антон принёс на встречу джипег по ссылке, которая не открывается в Эксплорере. Когда ссылку всё же удаётся открыть, выясняется, что макет не встаёт на весь экран — у него либо слишком большое разрешение, либо слишком маленькое.

Клиент не понимает, как это будет на его разрешении экрана и просит растянуть картинку, убрать поля или ещё что-то в таком духе. Антон пытается объяснить, что на живом сайте всё будет не так, как на джипеге, но клиент не очень-то верит. Ему страшно согласовывать то, что выглядит забагованным. Одно дело — слова какого-то едва знакомого дизайнера, а другое — собственные глаза. Им клиент верит больше, а потому упорно талдычит, что надо добавить поля, уменьшить или увеличить шрифты.

Что пошло не так: совместились два фактора: клиент, не очень хорошо понимающий техническую часть, и невнимательность Антона к устройству, на котором будут смотреть презентацию. С макетом, может быть, всё и нормально, но из-за косяков в презентации у клиента возникло ощущение, что это не так. Разубеждать на словах сложно — нужна новая демонстрация.

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

Ситуация 4. Слишком много вариантов

Лена делала концепцию полторы недели. За это время нагенерила двадцать черновиков. Половина вариантов отличается друг от друга незначительно: где-то поменялся шрифт, где-то — оттенок цвета или ховеры на кнопках.

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

Но вдруг всё пошло наперекосяк. Клиент обалдел от широты выбора и начал задавать неприятные вопросы:

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

Лена убита: вся работа пошла прахом. Теперь нужно генерить другие решения, а сил и энтузиазма уже нет, и даже непонятно, что править-то. Откуда начать, за что взяться?

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

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

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

Кроме того, полезно заранее обсуждать черновики с арт-директором или (если нет артдира) с менеджером, вовлечённым в бизнес клиента. Они дадут понять, когда дизайнера заносит, и сумеют направить в верное и жизнеспособное русло.

Ситуация 5. Фантик и конфета

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

Наташу беспокоило, что макет получается очень простым с визуальной точки зрения. Захотелось добавить красоты, чтобы больше впечатлить клиента на встрече. У Наташи был срок в пять дней; она потратила три дня на макет и два — на презентацию, стараясь вылизать её до мелочей.

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

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

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

Нормальный баланс для агентства: 80-85% времени на продукт и 15–20% — на презентацию. Если тендер или пресейл, презентации можно выделить и 30%, но не больше.

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

Ситуация 6. Весь дизайн мимо

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

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

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

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

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

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

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

Статья входит в цикл о дизайн-процессах. Другие статьи по теме от «Кельника»:

— Как провести первую встречу с клиентом

— Как перестать бояться переговоров

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

Презентация дизайна: что может пойти не так was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Проблема 1: разнообразие текстовых стилей

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

Обычно такой гайдлайн выглядит примерно так.

В чем тут проблема? Для параграфов дизайнер придумывает имена — bodyText, mainText, smallParagraph, factoidRedCenter, navigationLinks. Со временем количество таких стилей возрастает, следить за ними становится сложнее.

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

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

Решение: базовые текстовые стили

В html по умолчанию прописаны теги для иерархии из 6 заголовков. Для них заведены специальные теги — от <h1> до <h6>. Так было со второй версии html (1995 год), но при этом не была придумана иерархия для параграфов. Для текста есть только один тег — <p>.

Мы решили, что так не годится, и внутри себя придумали базовые стили для текста. Основной текст — p1. Помельче — p2. Еще мельче — p3. Ну вы поняли, да? Количество не ограничено.

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

Любой из этих стилей применяется к разным элементам. Например, стиль р2 ставится и в фактоид, и в узкую колонку, и как ссылка в футере.

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

Проблема 2: шрифты в адаптивном дизайне

Современные сайты адаптивны. Они создаются с расчётом не на одно разрешение экрана, а на брейкпоинты — 1920, 1366, 320. На каждом брейкпоинте происходит «перескок» от одной композиции экрана к другой.

В зависимости от задач мы используем от 3 до 6 таких «перескоков». Текстовые стили меняются от брейкпоинта к брейкпоинту. Уследить за всеми стилями, особенно если они не подведены к базовым, нелегко.

Дизайнерам нужно поддерживать гайд по текстовым стилям в актуальном состоянии в процессе адаптирования макетов под разные брейкпоинты. Любой неопределенный стиль в макете создает проблемы — на одном адаптированном макете он стал 16/24, на другом 14/22 — стили начинают «плясать».

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

Решение: таблица адаптивности текстовых стилей

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

Когда дизайнер рисует адаптивные макеты, встает вопрос о пропорциях в типографике. Например, если на десктопе размер шрифта 20, а интерлиньяж 28, то на мобилке размер шрифта ставится 14, а интерлиньяж выбирается рандомно — может 16, а может и 20.

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

Чтобы оптимизировать этот процесс, мы создали простенький скрипт, который вычисляет ratio — соотношения размера шрифта и интерлиньяжа. С этим инструментом ясно, что десктопный параграф размером 20/28 на мобилке будет 14/20.

Так мы проходимся по всем стилям и выбираем соотношения для каждого брейкпоинта.

Как со стилями работают фронтендеры

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

Последним значением в строке идет массив с ratio — то самое соотношение кегля и интерлиньяжа. Если ratio не меняется от брейкпоинта к брейкпоинту, то удобно поставить просто число. Зная размер кегля и ratio, которое выбрал дизайнер, мы можем автоматически вычислить line-height.

Потом применяется миксин:

.b-block {
@include font-size(‘p1’);
}

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

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

Как со стилями работают дизайнеры

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

Плюс: легко создать и применять иерархию стилей.

Минусы:

— инструмент для обзора/организации стилей примитивный,

— для любой декорации шрифта (вес, цвет, наклон, выравнивание) нужно создавать свой стиль.

Из-за особенностей Скетча таблица текстовых стилей разрастается.

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

Зато использовать в работе уже настроенные текстовые стили одно удовольствие.

Мы слышали, что в Фигме работать с текстовыми стилями проще. Расскажите в комментариях, если знаете, как устроена работа со стилями в других программах.

Плюсы и минусы базовых стилей и таблицы шрифтов

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

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

Подход далеко не идеальный. Для передачи макетов в вёрстку мы используем связку Скетч-Авокод, и есть большая проблема: в Авокод не передаются названия стилей. Для фронтендеров любой текст в Авокоде — просто набор css, а какой именно стиль — неизвестно. Фронтендер вычисляет нужный стиль из пропорции размера шрифта и интерлиньяжа.

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

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

Шрифты в адаптивном дизайне: как организовать работу was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

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

Справка: что такое брифинг

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

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

Старт проекта

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

На старте проекта назначается вводная встреча. Она проходит очно или по скайпу. С нашей стороны участвуют менеджер, арт-директор, дизайнер, иногда продажник. Со стороны клиента — менеджер, ЛПР (лицо, принимающее решение), маркетолог и иногда руководители отделов.

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

Что спросить у менеджеров, когда приходит новый проект

1. Описание задачи — какого типа проект, какую задачу бизнеса он решает.
2. Тайминги — сколько времени есть на дизайн, проектирование, вёрстку.
3. Объём работ — что именно продано по договору.
4. Вводную о клиенте — новый клиент или постоянный, каковы особенности работы с ним.

Роли на встрече

— менеджер или продажник курируют беседу, представляют участников;

— арт-директор инициирует разговор, задаёт наводящие вопросы, отвечает на вопросы клиента;

— дизайнер задаёт уточняющие вопросы, если что-то непонятно, и объясняет нюансы при необходимости.

Заранее договоритесь с коллегами, кто о чём будет спрашивать и в каком русле вести разговор. Чтобы не противоречить друг другу и не перетягивать одеяло, кто-то из участников встречи должен взять на себя флагманскую роль (обычно это артдир, но может быть и менеджер, и продажник — в зависимости от отношений с клиентом).

Чеклист

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

Что важно сделать на первой встрече

1. Представиться. Познакомиться с ЛПР и менеджерами клиента.
2. Уточнить задачу: подробно обсудить вводные данные, прописанные в договоре, и спросить, почему эти данные именно такие.
3. Собрать информацию о продукте: что за ЖК, какого типа, как строится, какая квартирография, каковы особенности.
4. Собрать информацию о компании: в чём её преимущества, кто целевая аудитория, какова история, в чём особенности бизнес-процессов, кто конкуренты.
5. Узнать, каковы технологии продаж: как будет использоваться сайт, как продвигаться, какие поля в выгрузке в CRM, какие планы на развитие.
6. Рассказать клиенту, какие этапы будут дальше и чего ждать от следующей встречи.
7. Запросить материалы — брендбук, маркетинговые отчёты, референсы.
8. Быть внимательным и вежливым. Больше слушать, чем говорить, не использовать сарказм и пассивную агрессию.
9. Вести конспект в блокноте или записывать встречу на диктофон.

Чего нельзя делать на первой встрече

1. Нельзя приезжать неподготовленным. Выделите хотя бы полчаса, чтобы внимательно просмотреть материалы, составить список вопросов и погуглить компанию, на встречу с которой вы едете. Иначе велик риск нарваться на неприятные неожиданности.
2. Нельзя предлагать решения. Когда обсуждается проблема, часто возникает соблазн сходу предложить клиенту решение — особый функционал, классную анимацию или необычную фичу. Не делайте так. Дождитесь момента, когда встреча закончится — вы сможете обсудить идеи с командой и избежать нереализуемых фич и пустых обещаний.
3. Не стоит пытаться понравиться. Задача дизайнера — не очаровать клиента, а как можно чётче понять его проблемы и боли. Клиенту в целом неважно, каков дизайнер как человек. Ему важно решить проблему. Поэтому вам не нужно пытаться произвести впечатление — достаточно быть спокойным, вежливым и побольше слушать.
4. Не стоит негативно оценивать чужую работу. Бывает так, что клиент спрашивает мнение о работе, которую для него сделал другой подрядчик: о старом сайте, логотипе, уличной рекламе. Воздержитесь от резкой критики, даже если работа неудачная. Честно объясните, что вы не можете критиковать чужой дизайн, не зная задачи и контекста, и спросите, что клиент думает об этой работе. Это самое важное.
5. Не стоит говорить с клиентом на языке дизайнеров. Если проект абстрактный и с высокими ожиданиями, дизайнер на встрече может начать сыпать терминами, объяснять правила композиции и технические тонкости. Это приводит к обидам: клиенту неудобно признаться, что он ничего не понимает, поэтому он либо молчит и злится, либо соглашается, а потом меняет решение. Чтобы избежать обид, забудьте о терминах и говорите с клиентом на его языке.

Что может пойти не так

1. Дизайнер затронет щекотливую тему. Например, прозвучит вопрос, почему не растут продажи, и за столом наступит нехорошая пауза. Не паникуйте: это нормально. Извинитесь за то, что вопрос неудобный, и объясните, что спрашиваете не из праздного любопытства: вам важно понять ретроспективу проекта — что уже сделано, какие решения сработали, а какие нет, — чтобы не повторять ошибок.
2. Клиент начнёт требовать решение здесь и сейчас. Тревожная ситуация: собеседник хочет лишить вас возможности думать, и манипулирует ситуацией так, чтобы вы приняли решение на эмоциях. Не поддавайтесь. Дизайн — это не Формула-1: нет таких решений, которые нужно принять за считанные секунды. Если на встрече на вас наседают с требованием немедленно согласиться или отказаться, спокойно скажите, что вам нужно подумать, и пообещайте ответить письмом после встречи.
3. У дизайнера спросят чего-то, что он не знает. Клиент не обязан знать, кто и за что отвечает в агентстве. Он может спросить у дизайнера о технических тонкостях фронтэнда или бэкенда, нюансах процесса наполнения или тестирования. В таких случаях не стесняйтесь напрямую сказать, что вы не знаете ответа. Переведите вопрос нужному специалисту, либо запишите его и уточните ответ после встречи.

Почему важно всё записывать

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

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

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

После встречи

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

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

В митинг-репорте нужно указать:

— Дату встречи (или дату составления документа)

— Всех участников (поименно, с должностями)

— Цель встречи

— Проблемы, которые были озвучены

— Всю информацию, которую клиент рассказал о проекте и своём бизнесе (тезисно)

— Достигнутые договорённости

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

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

Брифинг с клиентом: как провести и что спрашивать was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Привет, мы — агентство «Кельник», и мы часто работаем с крупными проектами — корпоративными сайтами, девелоперскими проектами и навороченными интерфейсами тач-столов. Чтобы ускорить разработку, мы придумываем системы, которые помогают навести порядок. Одна из таких систем — работа с отступами между блоками.

Проблема: отступы в вёрстке не соответствуют дизайну

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

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

Так происходит по разным причинам. И они не всегда находятся в зоне контроля дизайнера или фронтендера.

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

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

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

Как мы боролись с этой проблемой

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

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

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

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

Стало ясно, что нужен одинаково понятный инструмент и для дизайнеров, и для фронтендеров.

Решение: система вертикальных отступов

Если разобрать макет или страницу сайта по элементам и посмотреть на вертикальные отступы между ними, вырисовываются закономерности. Разных по высоте вертикальных отступов не так уж и много на отдельно взятом сайте. Например, на главной Яндекса их всего 4. На странице продукта Apple — 8.

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

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

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

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

Все элементы страницы группируются в блоки. Блоки выстраиваются по правилам, которые придумал дизайнер.

Условно мы разделили вертикальные отступы по уровням. Первый уровень — самый невысокий отступ. Например, его ставят между заголовком h4 и параграфом или иллюстрацией и подписью. Отступ второго уровня отбивает два таких блока. И так далее.

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

Как дизайнеры работают с системой

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

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

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

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

Как фронтендеры работают с этой системой

Слово нашему тимлиду-фронтендеру Коле Шабалину:

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

С дизайнерами есть договоренность, что в макетах они разделяют все отступы цветом. Допустим, зеленый прямоугольник между заголовком и текстом — это 72px, а красный — 80px.

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

Каждый цвет — это ряд в таблице, а проще говоря, один набор отступов. Другой цвет — другой набор отступов.

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

Например:

@include margin-level(bottom, green); — это отступ снизу «зеленого« цвета. Сколько это пикселей мне уже не важно, за меня миксин всё подставит».

Результат

По оценке наших фронтендеров, время на работу с отступами сокращается на 90%. Фронтендер тратит 5–10 минут на заведение настроек в SASS и больше не переживает об отступах. Ему не нужно ничего замерять линейками — он своими глазами видит, какой отступ у блока.

Видишь отступ первого уровня — применяешь отступ первого уровня.

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

Польза и вред системы

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

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

Статью подготовил дизайнер Егор Горохов.

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

Отступы в дизайне: системный подход was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

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

Предыстория

«Самолет Девелопмент» входит в десятку крупнейших застройщиков России. Компания одновременно строит 7 жилых комплексов, у каждого есть свой сайт. Эту инфраструктуру нужно постоянно поддерживать — держать базу квартир в актуальном состоянии, анонсировать акции, следить за статистикой каждого сайта, внедрять новые стратегии и инструменты продаж.

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

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

Первый подход

«Самолет» назначил старт проекта на середину декабря. 7 декабря мы начали работу, а 16 декабря выкатили результат первой итерации — работающий адаптивный сайт с параметрическим поиском. Перед Новым Годом появился и визуальный выборщик.

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

Проблемы, которые решает редизайн

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

Мы отталкивались от проблем, которые появляются у крупных застройщиков в работе над сайтами ЖК.

1. У покупателя нет целостного представления о проекте. Типичная главная страница сайта ЖК — это слайдер с шапкой. На слайдер навешаны «продающие» блямбы и плашки, рассеивающие внимание. Нельзя быстро пробежаться взглядом по странице и понять главное.
2. Сайт с трудом поддаётся изменениям. У проекта в недвижке долгий цикл жизни — как минимум полтора-два года. За это время стратегия продаж меняется. Всякий раз, отдел продаж хочет внедрить что-то новое, сменить приоритеты или протестировать гипотезу, начинается ад: как отключить отдельные блоки, чтобы дизайн не рассыпался? Чем заполнить дыры и надо ли их заполнять? Агентство, которое разработало сайт, привлекает дизайнера, технолога и программиста, чтобы решить точечные проблемы. Поддержка — это долго и дорого.
3. Мобильная версия хуже, чем десктопная. Любые изменения в первым делом вносятся в десктопную версию, а адаптив формируется по остаточному принципу. На что времени хватило, то и сделали.
4. Визуально все проекты девелопера разные. У бренда застройщика нет единой платформы, узнаваемого построения сайта. Страдает репутация и медийный образ.

Чтобы решить эти проблемы, нужно было не просто обновить сайт, а придумать неубиваемую систему. Мы начали с главной страницы квартала «Спутник».

Главная страница как витрина

Идея проста: пробежавшись взглядом по сайту ЖК, покупатель должен получить ответы на ключевые вопросы —где находится дом, сколько стоят квартиры, каковы условия ипотеки, что с инфраструктурой, как добраться. Фокус должен сместиться с рекламных слоганов и «продающих текстов» на продукт — дом, квартиру, качество жизни.

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

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

«Спутник» заслуживал лучшего, поэтому мы превратили главную страницу в витрину. Здесь всё разложено по полочкам: контент упакован в аккуратные модули, основные предложения — на первом экране.

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

Трансформации модулей

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

Сами модули бывают 3 конфигураций: большой блок 3x2 для красочных рендеров и галерей, 2x1 для ключевых преимуществ, 1x1 — для сопутствующей информации.

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

Сетка в центре внимания

Главное в модульной системе — сетка. От её конфигурации зависит подача информации и объём контента на экране.

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

Здесь есть загвоздка: у мониторов разное соотношение сторон — 16:10, 16:9, 4:3, — а у планшетов и смартфонов есть портретная и альбомная ориентация. В зависимости от этого модули меняются: они могут стать квадратными или вытянутыми по горизонтали.

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

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

Адаптив

Система включает в себя семь брейкпоинтов —то есть состояний, когда перестраивается макет, меняются размеры шрифтов и элементов.

Верхний брекпоинт — 2540+ (широкоформатный монитор за вычетом скроллбара). Нижний — 320 (самый маленький смартфон). Между брейкпоинтами сайт динамически тянется, сохраняя размеры шрифтов. Благодаря такой сложной структуре на сайте не бывает ситуации, когда что-то не влезло или вышло за границы контейнера.

Почему эта система хороша

1. Ясная подача продукта. За счёт «витринной» композиции и сокращения рекламных текстов покупатель быстро усваивает ключевые факты о ЖК.
2. Единообразие. Какой бы контент не появлялся при обновлении, дизайн остаётся цельным и консистентным.
3. Простота наполнения. Для большинства рядовых операций (анонса акций, замены информации, смены акцентов) дизайнер не нужен — система предусматривает гибкую подачу и управляется из админки.
4. Предсказуемый адаптив. Блоки удобно перестраиваются на любых устройствах, не теряя связи с десктопной версией.

Развитие дизайн-системы

После редизайна «Спутника» мы перешли к следующему проекту «Самолета» — ЖК «Пригород Лесное». Он масштабнее, чем «Спутник», и гораздо запутаннее, но к этому моменту у нас уже было представление, что работает, а что нет.

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

Войны за гайд

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

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

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

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

До этого момента система существовала только в головах у разработчиков, но отныне появилась документация. Документация и чётко сформулированные принципы позволяют масштабировать систему на разных проектах. Теперь она не привязана только к «Спутнику» или только к «Пригороду» — на её основе мы также сделали сайты жилых комплексов «Томилино 2018» и «Химки 2019».

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

Благодарности

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

Аккаунт-менеджер проектов — Татьяна Зорьян. Концепцию сайта «Спутник» создал Алексей Шургин, а сайта «Пригород» — Дарья Почекуева. Над дизайном работали Егор Горохов, Анастасия Грабовая, Иван Тишинский и Николай Лисов.

Имиджевую визуализацию и рендеры для 3D-выборщика сделал Михаил Мутовкин со своей командой визуализаторов.

Сайты верстали Николай Шабалин, Евгения Калинина, Георгий Скрипак, Анна Павлова, Илья Мирошниченко и Алексей Балканский.

Систему программировали Александр Попов и Анастасия Верхотурова. Тестировщик — Елена Букрей. Контент-менеджер — Юлия Омельченко.

Та же команда позднее переключилась на «Пригород» и помогла внедрить систему на остальных проектах «Самолета».

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

Кейс читайте на сайте Кельника. Проект также выложен на Behance.

Модульная дизайн-система was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Зачем застройщику сайт

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

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

Сайт — далеко не единственная точка контакта застройщика с клиентом. Но без сайта никак. На него пригоняют рекламный трафик: клиент узнаёт о комплексе из контекстной и уличной рекламы, а затем идёт по ссылке, чтобы вникнуть в детали. Если сайт не зацепил клиента, пострадают дальнейшие каналы продаж: контакты с менеджерами, раздача буклетов, экскурсии на объект. Уличная и контекстная реклама генерирует трафик, а сайт превращает этот трафик в заявки.

Три вида сайтов для недвижки

У каждого жилого комплекса в Москве и Питере есть как минимум три представительства в сети:

1. Корпоративный сайт девелопера
2. Официальный сайт ЖК
3. Побочные сайты риэлторов и посредников

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

Официальный сайт ЖК — наоборот, кастомизированный продукт. Он заточен под конкретный дом — его айдентику, лайфстайл, уникальные торговые предложения. Упор на эмоциональное вовлечение: выделите конкретный ЖК из среды конкурентов, создайте индивидуальный дизайн, акцентируйте внимание на том, каково жить в этом доме.

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

Что главное на сайте ЖК

В недвижке работают два главных критерия: расположение и цена. Рекламные слоганы и маркетинговый креатив вторичны по отношению к этим двум факторам.

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

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

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

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

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

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

Ожидания и страхи покупателя

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

В среднем покупателю в эконом-сегменте 25–40 лет, он ипотечник, ищет квартиру для небольшой семьи, часто заходит на сайт с айфона и выбирает среди десятка предложений. Доля ипотечников составляет 60–65% (чем выше класс недвижки, тем меньше доля ипотеки). Ипотека сопряжена с головной болью, сборов документов, участием посредников, финансовыми обязательствами на 10–15 лет.

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

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

Без визуализации никуда

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

Из-за этого рынком правят 3D-визуализаторы: хорошая картинка в недвижке — половина успеха. Продвинутые девелоперы ищут дополнительные способы завлечь потребителя эмоционально: например, с помощью виртуальной реальности, туров, онлайн-трансляций и других демонстраций, которые позволят человеку «примерить» ещё не существующий продукт.

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

Виар справляется с этим лучшим образом: он не только рассказывает о продукте, а формирует среду вокруг человека. Пройдёт ещё три-четыре года, и ни один сайт ЖК в Москве и Питере не обойдётся без виара.

Этапы работы над сайтом

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

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

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

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

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

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

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

Тонкости и рутина

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

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

Резюме

1. Сайт — главная точка контакта застройщика с клиентом. Над сайтом стоит поработать, потому что именно он превращает рекламный трафик в заявки.
2. Каждый ЖК представлен как минимум на трёх площадках в сети. У площадок своя специфика: корпорат для имиджа и функциональности, официальный сайт — для эмоционального вовлечения, сайт посредника — для поискового продвижения.
3. У продукта в недвижке два главных критерия: расположение и цена. Остальное вторично.
4. Сайт девелопера снимает тревожность, внятно отвечая на главные вопросы: где, сколько стоит, как купить, когда достроят, есть ли рядом магазины и детские сады. На каждый вопрос нужна страница или соответствующий модуль на сайте.
5. Сайт ЖК создаёт в голове покупателя модель будущей жизни. Поэтому не обойтись без визуализации, а в перспективе и виара.
6. Сайт ЖК — долгоиграющий проект, который разбивается на итерации. База — к старту продаж, сложный интерактив потом.
7. Работа над сайтом для недвижки сопряжена с созданием технической графики в больших объёмах и синхронизацией баз. Автоматизируйте этот процесс заранее, чтобы вписаться в дедлайн.

Сайты для недвижимости: специфика, ошибки, тонкости was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ликбез для дизайнера сайтов ЖК: для кого ваш продукт и как люди с ним работают

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

Мы объединили эти знания в обобщённые сценарии. Материал будет полезен вам, если вы приступаете к сайту ЖК и не знаете, для кого это всё и зачем.

Сценарии в клиентской разработке? Серьёзно?

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

И что, это работает?

Для сегмента эконом/комфорт в Москве и Питере — да. Но пруфов, увы, не будет. Вы же знаете это NDA.

1. Жора — прогрессивный, молодой, задорный

Вводные данные

Цели: купить отдельную квартиру, где Жора будет жить вместе с женой несколько лет до появления ребёнка. Потом пара начнёт рассматривать варианты расширения. Брать будут в ипотеку, готов совместно с женой платить до 60 000 ₽ в месяц. Студия или однушка.

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

Потребности. В шаговой доступности от метро. Сдача в этом году, отделка под чистовую, но не чистовая (хотят европейский дизайн, а не коричневый линолеум). Комфортная среда и благоустройство, не совковая архитектура. Приемлемые условия ипотеки — важно расплатиться в ближайшие 5 лет.

На сайте Жора хочет красоту, быстроту и хороший адаптив.

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

Сценарий

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

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

Переходит в поиск квартир по параметрам, задаёт: цена, срок сдачи. Если квартир в выдаче много, так же задаёт этаж (повыше, но не последний). Пользуется сортировкой по цене. Просматривает первые пару десятков вариантов.

Заходит на карточки наиболее релевантных квартир. Смотрит весь медиаконтент по квартире — планировка, 3D-тур. На карточке квартиры считает ипотеку — прикидывает свои возможности и заодно смотрит, какие банки представлены. Обращает внимание, что в компании есть свой кредитный отдел, где всё сделают за него. Если квартира нравится, делится с женой ссылкой в мессенджере. Изучает текущие акции — вдруг стоимость квартиры можно снизить.

Далее вместе с женой сравнивает разных застройщиков, читает отзывы на форумах и агрегаторах, изучает ипотечные условия разных банков. Если компания попала в финальный список, пара детальнее изучает сайт застройщика. Ещё Жора читает в интернете, как выбрать надёжного застройщика, узнаёт про ФЗ-214.

Повторные посещения. Жора ищет, работает ли компания по ФЗ-214. Использует избранное, чтобы отобрать наиболее интересные квартиры. Если не успевает посмотреть все интересные варианты дома, перекидывает ссылку на избранное на телефон через мессенджер и продолжает изучение в транспорте. Звонит в офис продаж, уточняет наличие квартир. Там его приглашают посетить объект. Он заходит на страницу контактов, выбирает офис продаж на объекте и едет на следующий день.

2. Лена — душевная мамочка

Вводные данные

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

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

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

Сдача — готовы ждать 1–2 года, лишь бы застройщик попался надёжный. Отделка — сразу. Не хотят заморачиваться с ремонтом. Хотят добротную, комфортную квартиру в крепком доме. Во дворе — детские площадки и парковка для мужа, охраняемая территория. Лена пока не планирует выходить на работу, поэтому будет проводить во дворе много времени — гулять с детьми и общаться с соседями.

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

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

Сценарий

Заходит на сайт из поисковика по запросу «Название ЖК» — увидела в наружке. Убеждается, что цена соответствует ожиданиям. Ищет расположение, на карте изучает объекты инфраструктуры, прокладывает маршрут на машине, чтобы прикинуть, сколько муж будет добираться до работы.

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

Лена мысленно обставляет квартиру, примеряет на себя. Заходит в визуальный поиск квартир, задаёт параметры: трёшка. Выбирает понравившийся корпус (ближе к двору, не на отшибе), затем этаж (не очень высоко, 2–5). На этаже отдаёт предпочтение квартирам с видом во двор, чтобы удобно было следить за детьми.

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

Переходит на поиск по параметрам — здесь цепляют фильтры по особенностям: вид из окон, высокий потолок, еврогостиная, камин, терраса/огородик. Ей осточертела тесная совковая хрущёвка, поэтому с интересом изучает необычные квартиры.

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

Распечатывает планировки/рендеры особенно приглянувшихся комплексов и квартир, собирает на стене коллаж. В течение дня высылает понравившиеся квартиры/объекты мужу на почту. Вечером показывает ему сайты и описывает преимущества и недостатки каждого ЖК.

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

3. Владимир — рациональный сыч

Вводные данные

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

Контекст. Первичный выбор отдаёт на откуп жене, потому что большую часть времени дома будет проводить именно она — пусть ей будет комфортно.

Потребности. Крепкая конструкция дома — кирпич или хотя бы монолит. Толстые стены (Владимир любит тишину). По той же причине желательно, чтобы окна спальни выходили не на улицу.

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

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

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

На сайте Владимир хочет минимум маркетингового булшита, прозрачную навигацию, соответствие закону (ФЗ-214, о персональных данных и т.п.)

Страхи. Дом сдадут не в срок. Будет много изменений в проектной декларации. Результат не будет соответствоать заявленному качеству. При сдаче выявится много нарушений — придётся долго судиться. Не хватит парковочных мест или застройщик задерёт цену на них. Дорога на работу будет занимать много времени.

Сценарий

Жена предоставила список из нескольких ЖК. Владимир заходит на каждый сайт. На странице объекта ищет информацию о технологии строительства. Затем читает про отделку — состав и названия материалов. Гуглит производителей.

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

В поиске по параметрам ищет квартиры по фильтру: трёшка, этаж средний, 3–7. Если в доме плохая инженерия, нижние этажи будет затапливать, а до верхних не дойдёт вода. Тщательно изучает планировки — чтобы не было нерационального использования пространства, узких и тесных комнат. Сравнивает по сроку сдачи и цене — насколько дешевле квартиры, которые построят нескоро, сколько он сэкономит. Также прикидывает, насколько меняется стоимость в зависимости от этажа. Для этого сортирует по цене, этажу и сроку сдачи.

В карточке квартиры обращает внимание на положение в корпусе — не темно ли там будет (сторона света), куда выходят окна, не угловая ли квартира (открыта всем ветрам). Ему нравится не так много вариантов, подходящие он отправляет себе на почту, чтобы на работе распечатать и сравнить.

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

Изучает документы — проектную декларацию, бланки ДДУ. Смотрит, сколько изменений и за какой период к ПД было.

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

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

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

Менеджер показывает семье миниатюры ЖК в офисе, 3D-тур и дарит VR-очки. Дети в восторге, Лена в восторге, а Владимир допрашивает менеджера об условиях заключения сделки, этапах покупки, стадиях приёмки квартиры и заселения.

4. Анатолий Иванович — пенсионер, который смог

Вводные данные

Цели: купить квартиру дочери, которая заканчивает ВУЗ. Лучше однушка, потому что студиям Владимир не доверяет (но если убедится, что в этом ничего страшного — согласится). Бюджет — до 3 млн ₽.

Контекст. Ищет со старенького компа в IE. Подслеповат — видит расплывчато, носит на носу очки от дальнозоркости. С интернетом на «ваше величество» — восхищается его колоссальными возможностями, но боится что-то сделать не так. Печатает медленно.

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

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

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

Сценарий

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

Жмёт на самую яркую кнопку — найти квартиру. Долго настраивает все подряд параметры. Анатолий нажимает на плашки квартир/ЖК. Негодует, когда страница обновляется и появляется новый контент — он этого боялся, но не ожидал. Изучает то, что сейчас перед ним, потому что не очень понимает, как найти, что надо. Видит баннер «Позвоним и всё расскажем». Видит фото милой девушки-менеджера и телефон. Звонит и спрашивает.

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

5. Ульяна — инвестор-физлицо

Вводные данные

Цели. Купить квартиру для сдачи. У Ульяны уже есть две квартиры — в одной живёт, одну сдаёт. Лишние деньги тоже хочет вложить в недвижимость.

Контекст. Ищет на работе с ноутбука. Времени мало, поэтому ищет быстро, обращает внимание на основные факторы.

Потребности. Ликвидный район, в котором есть спрос. Обычно решающий фактор — близость к метро. Эконом-класс — Ульяне не важны технологии строительства, благоустройство, ведь ей здесь не жить. Надёжный застройщик. Важно, чтобы сдали в срок. Готовая отделка — Ульяна просто докупит мебель из ДСП и начнёт сдавать. Дешевизна.

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

Страхи. Цена сдачи окажется нерентабельной. Сдачу задержат. Построят некачественно, и случится что-то плохое — дом развалится, квартиру затопит. Потребуется дорогой ремонт за её счёт.

Сценарий

Ульяна ищет на агрегаторе ЖК по цене и расположению. По минимальной цене есть только районы массовой застройки, но её это не смущает — лишь бы был спрос у арендаторов.

Переходит на сайт застройщика. Ищёт объект по цене и сроку сдачи. Выбирает из результатов с максимально удачной локацией и отделкой (заметные фразы «10 минут пешком до метро» и «чистовая отделка включена в стоимость» — то что надо).

Переходит в поиск по параметрам для этого ЖК. Сортирует по цене, просматривает несколько самых дешёвых. Ищет акции, чтобы получить квартиру ещё дешевле. Звонит в офис продаж и узнаёт, есть ли ещё акции, доступны ли дешёвые квартиры, когда повышение цен.

Просматривает отзывы о застройщике на стороннем ресурсе. Читает бэкграунд — сколько построили, сдают ли в срок. Смотрит отзывы непосредственно о ЖК от людей, которые уже заселились.

Если всё устраивает, снова заходит на сайт, находит телефон, звонит в отдел продаж. Дальше решает всё с менеджером.

6. Иван — дольщик

Вводные данные

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

Контекст. Заходит на сайт с ПК, и со смартфона.

Потребности. Иван хочет быть в курсе любых событий, связанных с домом. А ещё он хочет иметь удобный и быстрый канал коммуникации с клиентским отделом.

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

Сценарий

Иван оформил ДДУ, а вечером зашёл на сайт из поиска по запросу «Имя ЖК». Сразу перешёл на ход строительства и нашёл онлайн-трансляцию. Выбрал свой дом и уселся наблюдать.
Закрыл трансляцию. Проверил, что срок сдачи в графике не изменился. Почитал пару последних отчётов по своему дому. Увидел блок подписки — она гласила, что Ивану не нужно больше проверять сайт, а если появится новый отчёт, компания уведомит его по почте. Ещё там сразу предложили подписаться на новости по ЖК. Иван обрадовался, выбрал дом и ввёл почту.

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

7. Руслан — подозрительный фрай

Вводные данные

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

Контекст. Заходит на сайт с ПК или с ноутбука.

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

Страхи. Сайт компании разочарует, компания покажется ненадёжной.

Сценарий

Руслан переходит на сайт из органического поиска. Оценивает внешний вид сайта — вызывает ли цветовая гамма и стилистика доверие. «Всё на подсознании», конечно.

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

Ещё ему рассказали про единственный закон, который защитит от рисков — ФЗ-214. Он проверяет, работает ли застройщик по нему. В разделе «Ход строительства» по отчётам и трансляции оценивает, насколько профессионально ведётся стройка — Руслан работал в строительном бизнесе и знает толк.

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

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

7 сценариев в недвижке was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

В целом о конференции

Typetersburg проводится второй раз. В Питер приезжают лекторы из Москвы, Берлина, Копенгагена, Амстердама и Вены. Лекции на английском языке читаются с синхронным переводом. Всех участников конференции объединяет тема шрифта и типографической культуры, но интерактива на удивление много.

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

Избранное

Мы в «Кельнике» ждали конференцию несколько недель. Больше всего нас интересовали лекции Гаянэ Багдасарян, Владимира Кричевского и Дмитрия Карпова, выступления агентства PLAYTYPE и каллиграфа Винсента де Бора. В этом отчёте мы оставляем за кадром воркшопы и другие события, но зато собираем личные впечатления: о чём был разговор, что запомнилось, что вдохновило.

Гаянэ Багдасарян

Brownfox — маленькая шрифтовая студия, состоящая из двух человек: Гаянэ Багдасарян живёт в Германии, а Вячеслав Кириленко — в Казахстане. Они создают узнаваемые и очень качественные шрифты с характером: Gerbera, Brutal, Aeroport, Geometria.

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

Гаянэ рассказала о методе микширования: шрифт собирается из ингредиентов, как кулинарное блюдо.

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

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

Как всегда, было много вопросов о кириллице: почему кириллические шрифты такие плохие и почему их так мало.

Гаянэ объясняет, что, во-первых, с точки зрения формы кириллица — вторичная система, и шрифтовики, как правило, начинают работу над шрифтом с латиницы.

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

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

Люди продолжают делают новое, потому что человек так устроен. Шрифтовики делают новые шрифты, потому что им это нравится.

Мы все хотим играть, а не только решать задачи.

PLAYTYPE

PLAYTYPE — это шрифтовая студия, дизайн-бюро и бутик (!) из Копенгагена. Интересно, как эта лекция состыковалась с предыдущей: Гаянэ рассказала о желании играть, а шрифтовики из Копенгагена непосредственно сыграли.

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

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

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

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

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

Весь PLAYTYPE — это про игру в самом искреннем и детском значении слова, но игру, наполненную смыслом и требующую огромной работоспособности. Эти ребята по-настоящему любят буквы.

Винсент де Бор

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

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

При всей простоте и непосредственности рассказ получился проникновенным и меланхоличным (в хорошем смысле слова).

Де Бор называет каллиграфию «путешествием интроверта». Размышляет, как к творцу приходят мысли. Раскрывает свою кухню: делать варианты ради вариантов, чтобы создавать новые каллиграфические стили; начинать с буквы а; искать вдохновение во всём, а не только в искусстве. Вдохновение таится даже в уродливом.

Дмитрий Карпов

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

Год от года он не теряет очарования. И вроде всё как всегда: «дизайн — совмещение искусства и технологий». Динамический текст, автоматически генерируемая типографика, объёмные буквы, человек в трехмерном пространстве. Но энергия невероятная, слушать бы и слушать.

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

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

Владимир Кричевский

Закрывал конференцию настоящий мэтр — искусствовед, художественный критик, автор многочисленных книг и статей о типографике Владимир Кричевский.

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

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

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

Из любопытных черт стиля оттепели: существовало особое начертание — юмористическое. В стилистике появился не только верх и низ, а правое и левое, их контраст. Шрифты отличались гипертрофированной узостью и устремлённостью вверх по вертикали.

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

Бонус: два слова о нас. В тексте выше постоянно фигурирует слово «мы». А кто, собственно, мы? Четыре дизайнера из агентства «Кельник» (кстати, сейчас ищем ещё одного — стажёра в отдел поддержки). Спасибо компании за то, что она оплатила нам билеты и позаботилась обо всех головняках. Нельзя промолчать: коллеги, вы лучшие.

Typetersburg: шрифтовая конференция в фотографиях и гифках was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Задача

Оформить подборку акционных квартир к 14 февраля для сайта «СПБ Реновация». Сделать анонс на главной.

Предыстория

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

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

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

Рассказывает Анастасия Грабовая, дизайнер отдела разработки

14 февраля без купидонов

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

Идея: Тиндер с квартирами

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

Короче, мы предложили сделать Tinder c квартирами. Посыл был такой: идеальные квартиры выстроились в очередь, чтобы ты выбрал лучшую. Ты влюбился в квартиру, квартира влюбилась в тебя. Как бонус— её цена стала ниже.

Процесс: структура, анимация, задачи

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

Анкета. Подбор идеально подходящей квартиры с помощью анкеты. Заполняется от лица кота.

Свидание. Предлагается набор квартир, подходящих по анкете. Сцена: в центре экрана карточка квартиры с минимальными данными (метраж, этаж, наличие балкона и т.п.), остальные плюсы квартиры показаны как прямая речь. Например: «Любишь приглашать друзей в гости? У меня большая гостиная :)» Можно ответить «Да» или «Нет».

Идеальная квартира найдена. Большая планировка, данные о ней, резюмирующий текст. Пользователю предлагается скидка, точный размер в рублях, итоговая стоимость. Поле для телефона и конверсионная кнопка, позволяющая узнать подробности о квартире, как её забронировать и приобрести. Кнопки шеринга.

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

Поиск персонажа

Сделали предварительные эскизы, показали клиенту, детализировали. Клиент отклонил вариант с круглыми глазами и попросил остановиться на варианте с очками like a boss.

Детали для задротов

Кот изначально анимировался в Adobe Animate. Это довольно простая для новичков программа, позволяющая делать не просто анимации в гиф, но и экспортировать в HTML Canvas. Гифка много весит, мылится и не масштабируется, а Кэнвас векторный. Так решается проблема с весом и скейлом.

Анимейт похож на Флэш. Анимация объекта делается преимущественно в одном ключевом кадре, не нужны дополнительные расширения для экспорта в Кэнвас. Есть сглаживание анимации Easy Ease (хоть и не такое гладенькое, как в AE). Есть даже приличная Bone Animation, позволяющая настраивать ограничения гибкости скелета персонажа. Плюс Animate — это не бета-проект (как Adobe Character Animator). И не мёртвый, как Edge.

Переход на After Effects

Это был наш первый кот на «Реновации». С течением времени он эволюционировал. Самым большим скачком был переход на AE. В сравнении с AE Анимейт более урезан по функционалу. После АЕ анимация стала более естественной, плюс графон похорошел. К тому времени кот успел пересесть на ракету к 12 апреля.

Главная проблема перехода с AA на AE: АЕ не умеет в Кэнвас. Поэтому стали искать плагин, которым пользуются селебы моушн-дизайна, с наименьшим списком проблемных мест.

В итоге выбрали плагин Bodymovin. Судя по всему, его поддерживает один (!) товарищ, проект полон issues, но в целом, если знать, на что плагин не способен, можно угореть по каждой мелочи. Автор плагина обмазал интерфейс анимациями, чтобы сразу продемонстрировать, что в нём можно делать.

Еще один плагин, который мы использовали — Dojo Ease. Он помогает настроить плавность анимации.

Распределение задач

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

Собрали макеты, утвердили с мелкими правками. Верстальщики сверстали верстания и вывалили в продакшн ровно 14 февраля. Вжух.

Результат

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

Посмотреть вживую

С февраля по апрель кот эволюционировал из героя-любовника в солдата, поздравлятора и космонавта.

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

Иногда шумелки и перделки не работают

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

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

Отсюда вывод: все анимационные шумелки и перделки работают, если презентуют хорошее предложение.

Анимация персонажа вместо баннеров was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

«Кельник» специализируется на интерактиве для недвижки. Всё, что мы делаем для жилых кварталов — сайты, тач-столы, интерактивные туры, — опирается на 3D-визуализацию. Поэтому мы создали собственный 3D-отдел и работаем в коллаборации с ним.

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

Имидж vs Выборщик

Девелоперы используют два типа рендеров: имиджевая визуализация и визуализация для выборщика.

Имидж отвечает за эмоцию. Он формирует ответ вопрос «Каково жить в этом доме». Нужен, чтобы передать ценности проекта и его сильные стороны, визуализировать комфорт и качество жизни.

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

Базовые ракурсы

Обычно мы используем шесть ракурсов. Каждый ракурс преследует свою цель и решает конкретную задачу.

1. Квартал с высоты птичьего полёта. Общий вид комплекса, чтобы показать локацию.
2. Дом с земли. Общий вид фасада, чтобы показать архитектуру.
3. Фасад и элементы. Крупный план, чтобы показать материалы и архитектурные особенности.
4. Двор и входные группы. Общественные пространства, двери в подъезд, озеленение.
5. Коммерческие помещения. Общий вид коммерции — кафе, магазины, парикмахерские.
6. Инфраструктура для детей. Вид на детский сад или школу, если проект их предусматривает.

1. Квартал с высоты птичьего полёта

Рендер с высоты птичьего полёта показывает локацию. На нём отмечают дороги, направления, дома и объекты инфраструктуры по соседству.

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

Совет: если вы дизайнер, выбирайте ракурс так, чтобы комплекс занимал пространство посередине рендера, оставляя с каждого края 20–30% зелени или окружения. Их можно будет безболезненно обрезать при масштабировании, но они пригодятся для здоровенных экранов и наружки.

2. Дом с земли

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

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

3. Фасад и элементы

Крупный план фасада, балконов, отдельных архитектурных элементов (арок, декора, колонн, портиков). Нужен, чтобы показать материалы и технологии строительства. Если в проекте предусмотрены террасы, веранды, широкие балконы или общественные пространства, их тоже лучше показать крупно, в идеале с меблировкой и отделкой.

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

4. Двор и входные группы

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

Совет: если объектов инфраструктуры много, то лучше не смешивать двор с подъездами, а создать 2 рендера. Один рендер — один объект внимания.

5. Коммерческие помещения

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

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

6. Детский сад или школа

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

Вид желательно тоже с земли: недостаточно просто показать школу на птичке или плане — надо показать воочию спортивные и детские площадки, фасад школы и озеленение.

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

Имиджевые рендеры: шесть базовых ракурсов was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.