Привет, это бета. Наш арт-дир Антон Печерица рассказал, как строится реальная работа с референсами. Без ограничений по источнику вдохновения. Без бессмысленного копирования. Без траты сил на «мусорные» макеты.
Это не про копирование
Референсы — материалы, которые помогают найти вдохновение в процессе работы и продемонстрировать идею команде или клиенту. Фанфакт: сбор рефов не ограничивается только цифровыми продуктами. Даже если мы говорим про диджитал.
Рефом может стать что угодно: вывеска на стене, интерфейс в машине, элементы управления на холодильнике. Но для чего они нужны? Пойдём по порядку:
- Определить ощущения от продукта или проекта, его атмосферу и настроение.
- Найти лейаут: по каким принципам верстаем контент, как его располагаем.
- Решить, какая навигация: как взаимодействуем с интерфейсом и переключаемся между блоками, экранами.
- Выбрать визуальный язык: как задизайним проект.
Итак, здесь есть 4 глагола.
Но здесь нет глагола «скопировать». «Стащив» что-то по приколу в свой проект, мы ни к чему не придём. Всегда нужно понимать, зачем используем тот или иной элемент.
Приведу интересный пример про копирование. Есть такой дизайнер и разработчик Дэнис Снелленберг. Несколько лет назад он сделал себе сайт-портфолио. Ничего сверхъестественного тут нет. Всё чисто, просто и аккуратно.
Но знаете, что интересно? Его сайт скопировали. Причём так много раз, что Дэнис сделал из этого проект: устроил выставку «двойников».
Дэнис даже выделил параметры копирования: лэйаут, анимация и контент. Под каждым проектом видно, на сколько процентов тот или иной элемент дизайна «слизан». И этих «двойников» там не несколько. Это десятки копий.
Если спросить любого из исполнителей этих проектов, скорее всего, они скажут старую-добрую фразу: «Не украл, а вдохновился». Глядя на это, возникает вопрос: «И ради этого мы занимаемся дизайном?»
Два типа работы над рефами
Пора забыть про копирование «втупую». Надо собирать и анализировать референсы. Причём делать это нужно по двум типам.
Первый — архитектура. Определяем, на что должен быть похож продукт по ощущениям и какие у него будут принципы. Продумываем, какой опыт он даст пользователю.
Второй — это визуал. Продумываем визуальный язык и дизайн продукта.
Эти два типа могут работать как вместе — друг за другом, — так и параллельно. Разберём каждый по порядку.
Работа над ощущениями
Начнём с архитектуры. Её декомпозируем на 3 составляющие:
- Лейаут и сетка. Определяем, по каким принципам строится контент в проекте.
- Размерности. Решаем, как всё разместим: плотно или воздушно. Это может быть куча маленьких элементов на единицу экрана. Или, наоборот, одна фотография может занимать целый экран.
- Навигация и механики. Продумываем, как работает весь проект: как мы переключаемся между блоками и что видим в процессе переключения.
Но как это обычно работает? Представим ситуацию, когда нужно сделать 3 разных проекта: корпоративный сайт, онлайн-магазин и музыкальный сервис. Как тогда выглядят референсы?
Поработав с множеством дизайнеров, каждый раз натыкался на одну и ту же историю. Открываешь Figma или мудборд и видишь следующее.
Референсы корпоративного сайта выглядят примерно так. Это просто пачка современных проектов. Некоторые из них, возможно, получили награды на диджитал-премиях.
Референсы онлайн-магазина выглядят как… онлайн-магазины.
А референсы для музыкального сервиса — это современные стриминговые платформы: Spotify, Apple Music, Яндекс Музыка. Плюс проекты, у которых в принципе есть плеер.
Теперь нюанс. Примеры сверху — это не референсы, а срез по рынку. Мы можем посмотреть на них и понять, как выглядят классные современные проекты в конкретной нише.
А дальше нужно подумать о продукте будущего. Провести глубокий анализ «среза». Посмотреть, какие проблемы есть в текущих решениях, и подумать, как можно их решить. Ответив на все вопросы, начинаем искать подходящие форм-факторы.
Возможно, нам подойдут вкладки, как в браузере. Или мультиоконность, как в операционных системах. И мы перебираем форм-факторы, пока не соберём пул разнообразных решений.
Дальше нужно пропустить их через ограничения, собственный и командный опыт. А после — приземлить на задачу.
У гипотез могут быть технические ограничения. Например, ресурсы не позволяют реализовать. «Стопорят» и дедлайны. Некоторые решения команда просто не успеет подготовить. Или могут быть проблемы с контентом: хотели использовать фото от клиента, но он их не предоставил.
Идеи будут отсекаться из-за разных факторов. В итоге мы получим определённое количество решений. Но их будет намного меньше, чем гипотез.
Дальше собираем все подошедшие варианты: в Figma из прямоугольников, на бумаге — как удобнее. Здесь нет дизайна, только прототипы. Сейчас цель — найти тот самый форм-фактор проекта.
Из всех вариантов архитектуры выбираем лучший.
Архитектуру проекта выбрали, можно определяться с визуалом. Летс го!
Работа над стилем
Под визуалом подразумевается всё, что связано с дизайном. Типографика, цвета, иконки, иллюстрации, медиа-контент и стилистические приёмы: скругления, отступы и прочие детали, которые определяют характер проекта.
Мы в бете протестировали разные алгоритмы поиска референсов. Один из них — «воронка референсов». Как с ней работать?
Мы начинаем собирать референсы. Сначала ничего с ними не делаем. Увидели пример — подметили, что в нём нравится. Где-то нам подойдёт реф целиком, где-то — только отдельные экраны.
Собирая рефы на экране, начинаем подмечать некоторые сходства. Формируются принципы, по которым можно сгруппировать референсы.
Растаскиваем рефы по разным группам. Они могут быть абстрактными. Например, много воздуха, белый цвет, гротеск. Или максимально конкретными. Например, технический вайб, моноширинные шрифты, отсутствие скруглений.
Соответственно, эти группы собираются в заходы.
Для каждого захода рисуем специальный макет — «разблюр». На него тратим 20% времени, а получаем 80% результата.
Для «разблюра» можно сделать максимально сырой макет: с кривыми отступами и повторяющимися фото. Здесь это неважно. Дальше нужно физически отдалиться от изображения или немного его заблюрить, чтобы понять, как будет выглядеть работа в целом. Это своего рода тест на ощущения от продукта.
Рисуем «разблюры» для каждого захода и анализируем: стоит их прорабатывать дальше или нет. Если макет в этом состоянии выглядит скучно, он не имеет потенциала. Как бы мы ни пытались докрутить визуал, лучше не станет. Если же макет выглядит интересно, потенциал большой. Когда мы его проработаем, вау-эффект кратно усилится.
В рамках одного захода может быть несколько «разблюров». В таком случае макеты будут несильно отличаться, поскольку у них одинаковые принципы визуала.
Но при этом, если сравнить разблюр-макет из первого захода с третьим, они будут максимально разными. Хоть и сделаны в рамках одной архитектуры. Потому что каждый создан по отдельным принципам.
Отобранные варианты прорабатываем ещё на 20–30%. Не на 100%, потому что всё ещё рискуем слить силы впустую и не найти правильного решения. После проработки чекаем, что получилось.
Либо откатываемся назад, потому что ошиблись. Посмотрели на макет свежим взглядом и поняли, что стоит пересобрать рефы или «удариться» в другой визуальный язык. Либо двигаемся дальше и доводим проект до 100%.
Весь алгоритм собирается в воронку. Сверху у нас множество рефов. Далее воронка сужается, формируются заходы. Из заходов рисуем «разблюры» и выбираем лучшие. Получаем фидбэк, докручиваем визуал и приходим к концепции, которая максимально подходит нашей архитектуре.
Важный момент: алгоритм подразумевает откаты. Скорее всего, не получится пройти только сверху-вниз. Например, сделали 4–5 заходов, посмотрели с командой — всё не то.
Зато мы получили опыт, фидбэк и можем сформировать новый заход. Так алгоритм шаг за шагом помогает определить принципы визуала, которые максимально подходят нашей архитектуре.
Его можно пройти полностью за день, а можно за неделю. Во втором случае вы сделаете намного больше заходов и результат будет гораздо интереснее.
Собирайте коллекции всегда и везде
Когда лучше искать референсы? Помимо очевидного «во время работы над проектом», собирать их нужно постоянно. Помните фразу «дизайнер — это образ жизни»? С референсами аналогично, это должно стать ежедневной рутиной.
Сбор должен быть максимально простым и быстрым: 2–3 секунды — и реф в кармане. Поэтому нужно заранее продумать процесс, подготовить инфраструктуру, создать папки, закладки, подключить плагины и сервисы, которые помогут сохранить и рассортировать материалы.
Обязательно нужно создать и более абстрактные папки. Например, «будущие идеи» — когда понравилось решение, но его ещё некуда применить. Так референс будет в быстром доступе, и к нему можно будет вернуться, как только появится подходящий проект.
Можно и без рефов (но не нужно)
Если рассматривать референсы как источник вдохновения, то опытный дизайнер справится без них. В силу насмотренности, он сам нагенерит идеи. А зафиксировать их можно и на листе бумаги.
Но всё сложнее, когда нужно продемонстрировать идею команде или клиенту. Чтобы обойтись без референсов, нужно тщательно проработать макет. Уйдёт на это 1–2 дня, и не факт, что задумку примут. Лучше за пару часов собрать пак рефов, чтобы поймать нужный вижн, и не тратить впустую время и силы команды.
Короче говоря…
Все тейки из статьи собираются в небольшую памятку. Можете обращаться к ней каждый раз, когда будете работать над проектом.
Не копируйте «втупую». Отдавайте себе отчёт, почему «забираете» тот или иной элемент. «Ну, это прикольно и трендово» — не аргумент.
Смотрите шире. Референсом может быть что угодно. Если работаете над сайтом, не ограничивайтесь только цифровыми продуктами. Вдохновиться можно даже навигацией в журнале.
Ищите референсы на архитектуру. Определяйте, какие ощущения будут у проекта. Подбирайте форм-фактор, рисуйте драфты, выбирайте лучшие.
Ищите референсы на визуал. Определяйте, как будет выглядеть проект. Продумывайте его визуальный язык.
Собирайте коллекции. Сделайте этот процесс максимально простым, чтобы нужный реф всегда был под рукой.
При этом нельзя ограничиваться референсами в принципе. Это лишь один из инструментов работы над проектом. Листочек с ручкой ещё никто не отменял.
Больше полезного — в нашем тг-канале.
