Прикладная работа с референсами или Как избежать кучи правок?

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

Привет! Я — Максим Ануфриев — фрилансер, основатель наставничества #ownway , ментор и спикер образовательных курсов по UX/UI-дизайну. Моя миссия — передавать опыт через эстетику веб-дизайна.

(всё сказанное является опытом — и не является панацеей)

Прикладная работа с референсами или Как избежать кучи правок?

Итак, начнём.

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

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

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

Именно этому и будет посвящена данная статья.

Вообще существует 2 типа референсов:

стилистические (по стилю)
функциональные (по блокам и его функционалу)

Стилистические референсы необходимы для понимания общего стиля будущего интерфейса.

Рекомендации по подбору референсов по стилю:

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

Функциональные референсы помогают "подсмотреть" тот или иной функционал блока. Например, виды слайдеров, карточек товара и тд.

Очень часто возникает ситуация: в ТЗ прописан определённый функционал, но в голове возникает только шаблонная подача для блока.

Решение: проанализировать кучу сайтов и найти схожие блоки.

Рекомендации по подбору референсов по функционалу блока:

опирайтесь на функциональные возможности блока
стилистика не важна
старайтесь подбирать по 2-3 референса для одного блока
по времени бывает долго, но результат себя оправдывает, поверьте

Но я бы выделил ещё один тип референсов —“как красиво, хочу также”. В процессе поиска всегда появляются очень сильные работы по стилистике, но, к сожалению, неподходящие под контекст проекта.

Совет: сохраняйте их в личную подборку. Когда-нибудь обязательно пригодятся.

Хоть тут и остаются те же самые виды референсов, но меняется специфика работы над ними.

После “брифования” клиента и согласования ТЗ, необходимо подобрать референсы по стилю и отправить их клиенту.

Это нужно для того, чтобы клиент мог визуально выбрать приблизительную стилистику, в которой он бы хотел видеть свой проект. Лучше всего отправить около 5-10 работающих сайтов и предложить клиенту выбрать 1-3 интерфейса наиболее подходящих варианта.

Важно! Объясните клиенту, для чего ему и вам данная работа. Далеко не все заказчики воспринимают это всерьёз, к сожалению.

Далее ваша задача проанализировать выбранные клиентом сайты.

Что необходимо учесть при анализе:

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

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

К сожалению или к счастью, клиенты не всегда понимают свои "хотелки". Благодаря отправленным референсам, клиент и вы сможете сойтись в понимании концепции сайта.
Клиент воспринимает сайт как единое целое, он не понимает композиции и типографики, акцентов и внимания пользователя. У клиента есть 2 вещи: "нравится", "не нравится", но мы всегда можем уточнить: "А что конкретно нравится?"
С помощью работы с референсами вы сможете исключить большое количество последующих визуальных правок. Ох, эти правки..)

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

Постепенно вы сможете начать самостоятельно генерировать идеи и принимать дизайнерские решения.

Если вы разрабатываете сайт на тильде — отлично подойдут референсы из подборки “MОT”
Если вы отрисовывайте только дизайн — подойдут любые источники

Часто пользуюсь этими сервисами:

Работа с референсами — это “взлом” дизайна, но многие, к сожалению, этим либо не пользуются, либо просто об этом не знают.

Хотите научиться создавать качественные эстетичные интерфейсы?

Welcome https://ownwayschool.ru/

Рассказывайте про свой опыт при работе с референсами в комментариях)

Прикладная работа с референсами или Как избежать кучи правок?

01. Референсы для дизайн-концепта

02. Работа с референсами для реального проекта

Почему это важно?

Как не копировать, а переиспользовать?

Как и где находить правильные референсы?