Прикладная работа с референсами или Как избежать кучи правок?
Любой дизайнер знает что такое референсы и какую пользу они несут. Но мало кто понимает как с ними работать в “боевых условиях” при работе с реальным клиентом.
Привет! Я — Максим Ануфриев — фрилансер, основатель наставничества #ownway , ментор и спикер образовательных курсов по UX/UI-дизайну. Моя миссия — передавать опыт через эстетику веб-дизайна.
(всё сказанное является опытом — и не является панацеей)
Итак, начнём.
Ещё несколько лет назад многие дизайнеры ненавидели референсы и вовсе не использовали их в работе. “Дизайнер не должен копировать, дизайнер должен творить!”, думаю, так они и говорили. Да и сейчас говорят.
Но референсы — это не “копировать”, референсы — это вдохновляться и переиспользовать. Любой художник чем-то вдохновляется, не так ли? Почему он не может вдохновляться другими работами?
Правильная работа с референсами — это прежде всего ваш помощник и навык, которому необходимо обучаться. И чтобы “поймать дзен” при работе с референсами, нужно понять их специфику.
Именно этому и будет посвящена данная статья.
01. Референсы для дизайн-концепта
Вообще существует 2 типа референсов:
- стилистические (по стилю)
- функциональные (по блокам и его функционалу)
Стилистические референсы необходимы для понимания общего стиля будущего интерфейса.
Рекомендации по подбору референсов по стилю:
- опирайтесь на общее восприятие интерфейса, его настроение и эмоции которые возникают у вас
- важна колористика, типографика, композиция и работа с пространством
- лучше всего сохранять страницы целиком, чтобы прослеживалась стилистика
Функциональные референсы помогают "подсмотреть" тот или иной функционал блока. Например, виды слайдеров, карточек товара и тд.
Очень часто возникает ситуация: в ТЗ прописан определённый функционал, но в голове возникает только шаблонная подача для блока.
Решение: проанализировать кучу сайтов и найти схожие блоки.
Рекомендации по подбору референсов по функционалу блока:
- опирайтесь на функциональные возможности блока
- стилистика не важна
- старайтесь подбирать по 2-3 референса для одного блока
- по времени бывает долго, но результат себя оправдывает, поверьте
Но я бы выделил ещё один тип референсов —“как красиво, хочу также”. В процессе поиска всегда появляются очень сильные работы по стилистике, но, к сожалению, неподходящие под контекст проекта.
Совет: сохраняйте их в личную подборку. Когда-нибудь обязательно пригодятся.
02. Работа с референсами для реального проекта
Хоть тут и остаются те же самые виды референсов, но меняется специфика работы над ними.
После “брифования” клиента и согласования ТЗ, необходимо подобрать референсы по стилю и отправить их клиенту.
Это нужно для того, чтобы клиент мог визуально выбрать приблизительную стилистику, в которой он бы хотел видеть свой проект. Лучше всего отправить около 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/
Рассказывайте про свой опыт при работе с референсами в комментариях)