Фраза «хочу современный красивый сайт» почти ничего не сообщает разработчику. Ее говорят о минималистичных черно-белых страницах и о ярких сайтах с анимацией, о строгих корпоративных каталогах и о легких лендингах. Каждый представляет под этими словами свое, и выясняется это обычно на первом макете, когда переделывать уже дороже.
Сами по себе пожелания здесь ни при чем: они просто сформулированы слишком общо. Несколько примеров сайтов с короткими пояснениями, что именно в них нравится, говорят разработчику больше любого описания словами. Эти примеры и называют референсами.
Что дает референс и чего он не дает
Референс — это пример, на который можно показать пальцем: вот так я хочу, вот так не хочу. Он снимает вопрос перевода с языка вкуса на язык дизайна. Вам не нужно знать, как называется тип шрифта или прием верстки, достаточно показать сайт, где это есть.
Чего референс не дает — готового решения. Сайт другой компании сделан под ее задачи, ее аудиторию и ее материалы. Скопировать его целиком не получится и не нужно: дизайн строится вокруг ваших услуг, ваших фото и ваших текстов. Референс показывает направление, а не конечную точку.
Поэтому сам по себе список ссылок без комментариев помогает мало. Разработчик видит пять разных сайтов и не понимает, что их объединяет: цвет, структура, настроение или одна понравившаяся кнопка.
Сколько референсов выбрать и где их искать
Обычно достаточно нескольких примеров. Если их слишком много, они начинают противоречить друг другу, и выбрать направление становится труднее. Если пример один, непонятно, что в нем главное.
Искать можно где угодно. Сайты конкурентов показывают, как принято в вашей отрасли, а сайты из других отраслей часто подсказывают свежий ход. Подойдут и подборки дизайна, и приложения, которыми вы пользуетесь каждый день, и печатные материалы, если в них есть нужное настроение.
Полезно собрать и антиреференсы — примеры того, что точно не нравится. Иногда они говорят о ваших ожиданиях больше, чем удачные примеры: «не хочу, как здесь, слишком мрачно и много текста» сразу отсекает целое направление.
Что именно отметить в референсе
Главное в работе с примерами — сказать, что именно нравится. Почти всегда это одна или две вещи из нескольких.
- Структура.Как устроена страница: что на первом экране, в каком порядке идут блоки, как организовано меню, как быстро добираешься до цены или формы заявки.
- Типографика.Какие шрифты, крупные или сдержанные заголовки, много воздуха между строками или плотный текст.
- Цветовая палитра.Светлый или темный фон, один акцентный цвет или несколько, яркие или приглушенные оттенки.
- Анимация.Есть ли движение при прокрутке, как появляются блоки, анимированы ли кнопки и карточки. Здесь особенно полезно отметить, где движение помогает, а где уже раздражает.
- Оформление каталога.Как выглядят карточки товаров или услуг, как работают фильтры, что видно в превью.
- Отдельный элемент.Иногда из всего сайта нравится одно: калькулятор, форма записи, галерея, способ показать этапы работы. Это тоже ценный референс, если так и сказать.
Хорошо, когда каждое пояснение занимает одну-две строки. Например: «Нравится первый экран — крупное фото и короткий заголовок, без лишних кнопок. Цвета не нравятся, слишком холодные». Такого комментария достаточно, чтобы понять мысль.
Как не утонуть в словах дизайнера
От заказчика не требуется язык дизайнера. Слова «композиция», «модульная сетка» или «иерархия» не обязательны. Обычных слов достаточно: «тесно», «много всего», «не видно кнопку», «текст трудно читать», «выглядит дешево», «хочется спокойнее».
Такие реплики точнее, чем кажется. Если сказать, что сайт выглядит тесно, это задача для разработчика: больше воздуха, меньше элементов на экране. Если сказать, что не видно кнопку, это вопрос контраста и расположения. Перевести ощущение в решение — моя работа, и для этого нужно именно ощущение, а не готовый рецепт.
Хуже работают рецепты без объяснения: «сделайте кнопку красной», «уберите этот блок». Возможно, решение верное, но если неясно, какую проблему оно решает, легко сделать то, что просили, и не получить того, что хотели. Лучше сказать и то и другое: «кнопку не видно, может быть, сделать ее красной?»
Как формулировать замечания к макету
Когда появляется первый макет, референсы превращаются в точку сверки. Удобно смотреть на макет вместе с ними и задавать себе вопрос: передал ли он то, что мне нравилось в примерах?
Замечания стоит собирать в один список, а не присылать по одному. Каждое замечание лучше привязывать к конкретному месту: «главная, второй экран, заголовок» понятнее, чем «где-то в середине». И стоит разделять, что вам не нравится и что, как вам кажется, не сработает для клиентов. Это разные вещи, и обсуждать их удобнее по-разному.
Если в процессе вы нашли новый референс, это нормально. Но тогда важно сказать, меняет ли он направление или уточняет его. Новое направление после утвержденного макета — это изменение уже принятого решения, и оно влияет на сроки и смету. Уточнение в рамках того же направления обычно вписывается в обычную доработку.
Когда референс требует сложного решения
Иногда в понравившемся примере есть то, чего нет в стандартных инструментах: нестандартная анимация, интерактивная схема, калькулятор с необычной логикой. Сделать такое можно, просто стоимость стоит обсудить отдельно. Такие элементы делаются отдельно, иногда с собственным кодом, и как нестандартная задача оцениваются заранее.
Бывает и обратная ситуация: сложный на вид эффект можно получить простыми средствами, и тогда я скажу об этом. Поэтому стоит показывать референс целиком, даже если кажется, что повторить его невозможно.
Для сайта с большим количеством однотипных страниц референсы полезно смотреть еще и с точки зрения системы. На корпоративном сайте на Тильде я делаю единые шаблоны для повторяющихся страниц, поэтому важно, чтобы понравившийся стиль одинаково хорошо работал и на главной, и на десятой странице услуги.
Как может выглядеть хорошая подборка референсов
Ниже условный пример, не реальный проект. Он показывает формат, а не вкус.
| Пример | Что нравится | Что не нравится |
|---|---|---|
| Сайт A | Первый экран: крупное фото и короткий заголовок | Слишком темные цвета |
| Сайт B | Как показаны этапы работы, по шагам с иконками | Перегруженное меню |
| Сайт C | Карточки услуг с ценой сразу в превью | Мелкий текст |
| Антиреференс D | — | Много анимации, все двигается при прокрутке |
С такой таблицей первый разговор о дизайне начинается с конкретики. Если вы уже собрали примеры или только начинаете, опишите проект в квизе на сайте. Я отвечу лично, посмотрю на референсы и скажу, что из них подходит под вашу задачу.