Как прокачать UI скилл

Вступление

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

Итак, я постараюсь вкратце описать как это было у меня и как я и до сих пор работаю над тем, чтобы мой UI скилл рос. В самом начале своей карьеры, от своих менторов я получил самый полезный совет — копируй все, что тебе нравится. Понравился шот на дриббле? Смело копируй. Понравился проект на бихансе? Копируй его полностью до последнего пикселя. Понравилась шрифтовая пара? Смело берись и повторяй! Но в самом начале, у меня был огромный ступор, я не мог просто брать и тупо срисовывать, так как хотелось добавить свою изюминку, но чаще всего, эта изюминка была мягко говоря ”гнилой”. Кстати, эту проблему я решил прочтением книги : «Кради как художник» Остин Клеон.

«Кради как художник» Остин Клеон

Итак, весь процесс прокачки я поделю на 3 составляющие, а затем опишу их детально.

  1. Наглядность
  2. Копирование
  3. Своя идея

Наглядность

О наглядности я напишу отдельную статью, так как это очень важная составляющая — научиться замечать мелочи. Однажды, мой ментор сказал мне:

“Дизайнер — это существо, которое замечает все вокруг, он свой взор растлевает абсолютно на все элементы на странице и анализирует их в совокупности.”

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

Типографика — попытайся понять, почему именно такой шрифт выбрал автор проекта. Посмотри на интерлиньяж, попытайся прочувствовать, приятно ли тебе читать текст с таким интерлиньяжем или все таки можно что-то улучшить? Возможно шрифты слишком большие или слишком маленькие. Пусть внутри тебя будет разговор с самим собой.
Расстояние между блоками — посмотри на то, каким образом автор расставил промежутки на блоках. Одинаковы ли они в каждом блоке? Возникает ли в голове мысль о том, что расстояния разные?
Цветовые решения — соответствует ли один цвет с другим? Возможно ли изменить цветовую гамму и тогда проект будет выглядеть чуть-чуть лучше.
Расположенность контента — проставлены ли акценты в композиции? Обрати внимание на что ты обращаешь внимание по ходу того, как просматриваешь интерфейс. Куда ты посмотрел в первую очередь, а зачем? А правильно ли сделал автор, поставив акценты именно таким образом?
Со временем, твое дизайнерское мастерство будет расти и ты научишься отличать хорошую работу от не очень хорошей, в этом как раз и суть насмотренности, будешь уже обращать внимания на такие детали, на которые и в жизни бы не задумывался разглядеть. У тебя в голове будут миллионы просмотренных работ и ты как библиотекарь будешь доставать нужную карточку и вставлять ее в свою работу со своим дополнением. Вот как это работает. Даже, если ты на первых порах не будешь придавать особого внимания тем вещам, которые я описал выше, спустя некоторое время, ты волей неволей будешь их замечать.

Копирование

Оглавление этого блока говорит само за себя. Поставь для себя определенную цель — сделать 100 копий за месяц. Повторяй только самые лучшие работы. Подели 100 копий на 3 направления. 33 на веб, 33 на мобайл, 33 на отрисовку иконок. Не думай, просто копируй. Уверяю тебя, когда сделаешь 100 копий, тебе будет намного легче. Ты просто будешь доставать нужный референс из своей головы и вставлять его в макет.

НО есть одно НО! Эти работы нельзя добавлять себе в портфолио, как бы тебе ни хотелось вывести на дрибл или биханс эту работу, этого делать ни в коем случае нельзя! Если уже прямо не в моготу, о своей идее и как ее развить, я напишу ниже.

И да, для начала советую выбрать одну тематику (E-commerce, Food или Medical), и (Web, App или Icons) это даст кумулятивный эффект для твоего будущего проекта.

Своя идея

Это самая интересная часть. Итак, после того, как ты уже скопировал хотя бы 10–20 работ, ты можешь попробовать сделать свою работу. Вдохновись красивыми работами, посмотри интересные референсы на https://codepen.io и смело создавай свой уникальный дизайн.

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

Не бойся пробовать внедрять что-то такое, чего нет, но прежде подумай, нужен ли этот элемент или он здесь никоим местом не пляшет, а ты его пытаешься вставить туда, как лишний бантик на кобылу. Изначально, я конечно не советовал бы создавать свои паттерны, так как это не самый лучший способ разнообразить интерфейс (об этом в моей статье «UX/UI паттерны и их огромная значимость в интерфейсах»), но в будущих проектах можешь смело попытаться внедрить что-то свое.

Пытайся сделать просто, а не усложнить. Удачи тебе в прокачке, надеюсь моя статья поможет тебе в будущем!

Подборка сайтов

Тебе нужно просматривать тонны дизайнов. Каждый день минимум по 20 сайтов из этой подборки:

  • https://www.behance.net/
  • https://www.pinterest.com/
  • https://www.awwwards.com/
  • https://www.cssdesignawards.com/
  • https://aic.ru/3/
  • https://cpeople.ru/portfolio/
  • https://cetis.ru/projects
  • https://castle.co/portfolio
  • http://www.justbenice.ru/works
  • https://nimax.ru/web/
  • https://brander.ua/portfolio
  • http://www.webdesign-inspiration.com/
  • https://www.siteinspire.com/
  • https://onepagelove.com/
  • http://www.designmadeingermany.de/sites-we-like/
  • https://topdesigninspiration.com/
  • https://cssnectar.com/
  • https://www.uplabs.com/
  • http://freebbble.com/
  • https://ui8.net/

С уважением, автор: Павло Жидких UX/UI Дизайнер