6 мая 2019 Digital Skynet 3 386 0 В избр. Сохранено

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

Каждый программист должен знать основы UI/UX дизайна. Нет времени на поиск информации? В новой статье советы и ресурсы, которые помогут прокачать ваши скиллы!

Мнение автора может не совпадать с мнением редакции

Если бы вы спросили меня четыре года назад, в какой области я хочу строить карьеру, я бы выбрал Java back-end разработку. Я никогда не считал себя особо креативным, поэтому и не задумывался о front-end и сфере дизайна.

Во время работы мне удалось попробовать свои силы во front-end разработке и я решил развиваться в этом направлении.

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

Дело не в таланте

Сейчас это кажется очевидным, но раньше я думал, что дизайнеры - это настоящие волшебники.

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

Дизайн - это то, чему можно научиться. Не совершайте ошибку и не ставьте на себе крест, даже не попробовав.

Смотри, думай, воруй

Так же, как чтение хорошего кода поможет стать более опытным разработчиком, так и изучение того, что создали другие, поможет стать более опытным дизайнером.

Когда вы посещаете веб-сайт или используете приложение, посмотрите на него и оцените дизайн. Подумайте, почему он именно такой. Почему кнопка имеет определенный цвет? Почему выполнять действия надо в определенном порядке?

Многие из созданных мною дизайнов - результат вдохновения творчеством других дизайнеров.

Учите теорию

Мои первые работы выглядели, мягко говоря, не очень хорошо. Макеты были непоследовательными, цвета плохо сочетались. Я недоумевал почему.

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

Разработчики знают, как работает сайт, но дизайнеры знают, как он себя ведет и чувствует. Существует большой разрыв, который можно заполнить, только выучив теорию.

Практикуйтесь

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

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

С чего можно начать:

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

Не сдавайтесь

Когда я смотрю свои прошлые работы, трудно не вздрогнуть. Но даже самые именитые дизайнеры и программисты начинали с малого. Когда вы увидите прогресс в работах, будете гордиться собой! Сейчас вы учитесь и не тратите время впустую.

Еще один совет: отслеживайте прогресс каждый месяц. Так вы будете освежать в памяти выученный материал и вдохновляться маленькими победами.

Ресурсы

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

Инструменты

Figma — Проектирование и прототипирование в сотрудничестве

FramerX — Похож на Figma, но с добавлением React и discoverable components

Coolors — Позволяет работать с цветовыми палитрами

WebAIM Contrast Checker — Позволяет убедиться, что цвета доступны

Archetype — Редактор и генератор типографской системы

Статьи

7 Practical Tips for Cheating at Design

10 cheat codes for designing User Interfaces