Упражнения, которые помогут прокачать UI продуктовому дизайнеру

Думаю, что многим продуктовым дизайнерам в какой-то момент приходит мысль о том, что нужно подтянуть UI, так как часто работаешь в рамках дизайн-системы и задачи сводятся в первую очередь к тому, чтобы сделать дизайн удобным, а на UI не всегда остается время или такой возможности вовсе нет. В этой статье хотел бы поделиться несколькими упражнениями в порядке возрастания сложности, которые помогут подтянуть навык UI.

Думаю, самый менее трудозатратный прием для развития UI о котором, я уверен, вы слышали — анализ референсов, но не просто посмотреть на них 5 секунд, а более внимательно изучить композицию, цвета, типографику и визуальные приемы. Попробуйте взять один референс и уделить ему 2-4 минуты и ответить на вопросы:

・Что именно нравится в референсе?

・А что не нравится и можно улучшить?

・Как построена типографика, композиция, цвета и тд?

Ответы на такие вопросы помогут более осознанно изучить референс и пополнят внутреннюю дизайн-библиотеку бОльшим количеством приемов.

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

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

Вместо того, чтобы рисовать концепты целых приложений или сайтов, можно попробовать зайти в эту задачу немного с другой стороны — дизайнить небольшие кусочки интерфейса. Например, это может быть экран приложения для Apple Watch или виджет для смартфона или, например, просто Side Bar.

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

Поскольку это будут небольшие части интерфейса, то это поможет легче приступить к развитию UI, и на один концепт будет уходить меньше времени. К тому же, тут есть возможность уделить внимание мелким деталям в интерфейсе. Короче говоря, что-то приближенное к шотам на Dribbble, но с бОльшим упором на интерфейс.

Вы возможно слышали о том, что недавно проходил UI Widget Challenge и там также многие дизайнеры делали концепты, в том числе и я. Могу отметить, что это оказало неплохое влияние на развитие моего UI скилла. Недавно я написал более подробную статью о том, как я принял участие в челлендже и какие работы у меня получились. Вот ссылка

1. Twitter

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

Или, как вариант, можете смотреть рефы на этом сайте. Он как раз собирает самые клевые дизайны с твиттера. Вы также можете использовать его для настройки своей ленты в твиттере, так как там есть ссылки на оригинальные посты в твиттере от автора работы.

2. Are.na

Я в основном использую в качестве коллекционирования рефренсов Are.na, про которую тоже писал мини-статью. Там, также можно найти каналы, в которых я регулярно смотрю референсы.

Если попробовать чередовать эти упражнения и выполнять их 3-5 раз в неделю утром или вечером в течении 3х месяцев, то можно неплохо подтянуть свой навык UI.