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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• https://pagecollective.com/
• https://www.siteinspire.com/
• https://www.lapa.ninja/
• https://admiretheweb.com/
• Dprofile, Behance, Awwwards — musthave

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

Welcome https://ownwayschool.ru/

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