С чего начать изучать UX/UI дизайн

Кто такой UX/UI-дизайнер? Почему кроме дизайна ему нужно знать психологию? Какие инструменты ему нужны и как стать хорошим UX/UI-специалистом? Все ответы ждут вас в этой статье.

Пользовательский интерфейс, как анекдот, — если его приходится объяснять, значит он плохой. Хороший дизайн — это не только запоминающаяся картинка, но и удобный интерфейс, который незаметно управляет вниманием и действиями пользователя. Его созданием занимается UX/UI-дизайнер. Предлагаем вам познакомиться поближе с этой профессией ↓

Кто такой UX/UI-дизайнер

UX-дизайнер (от англ. «User Experience Designer» — дизайнер пользовательского опыта) следит за тем, чтобы взаимодействие с интерфейсом цифрового продукта было максимально простым и нативным. Пользователь должен легко находить то, что ищет, и точно знать, к чему приведут его действия. Чтобы обеспечить это, UX-дизайнер играет роль психолога, анализирует потребности целевой аудитории, прорабатывает сценарий взаимодействия с продуктом и на основе этих данных разрабатывает макет.

UI-дизайнер (от англ. «User Interface Designer» — дизайнер пользовательского интерфейса) отвечает за визуальную часть продукта.Он делает интерфейс привлекательным и понятным для пользователя.

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

* Читать подробнее о профессии тут.

Полезные материалы

Что вам может понадобиться ↓

База

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

Дополнительно

• Adobe. Adobe Illustrator (работа с векторной графикой) и Adobe Photoshop (работа с растровой графикой) используются для создания скетчей и разработки элементов.
• Средства коммуникации. Такие сервисы, как Zoom, Teams, Skype, Slack, e-mail необходимы для этапа обучения и последующего общения с коллегами, менеджерами проекта и заказчиком.
• FigJam. Этот сервис Figma представляет собой интерактивную доску для мозгового штурма, составления ментальных карт и последующего переноса элементов в графический редактор.
• Grammarly. Если вы собираетесь работать с иностранными клиентами, используйте этот сервис на основе ИИ, который поможет вам общаться на английском языке. Или улучшите свои знания английского языка, ведь они вам еще пригодятся. О том, как и для чего нужно учить английский в IT читайте тут.

Также придется научиться работать с Customer Journey map и системами аналитики, такими как Яндекс Метрика, Google Analitycs, OWOX BI и Amplitude. Это необходимо для проведения анализа аудитории и последующей разработки макета.

Справочные материалы

• Илья Сидоренко «Дизайнер интерфейсов. Принципы работы и построение карьеры» — сборник полезных советов для начинающих дизайнеров.
• Илья Бирман «Пользовательский интерфейс» — автор учит проектировать удобные и простые интерфейсы.
• Стив Круг «Не заставляйте меня думать. Веб-юзабилити и здравый смысл» — термином «юзабилити» (от англ. «Usability») обозначают степень простоты и удобства использования продукта. В этой книге описано как сделать веб-приложение, мобильное приложение или сайт максимально «юзабилити».
• Сьюзан Уэйншенк «100 главных принципов дизайна. Как удержать внимание» — автор анализирует результаты исследования поведения пользователей и демонстрирует на примерах, как удержать их внимание.
• help.figma.com — здесь вы найдете инструкции для работы с Figma.
• ux-journal.ru — сайт с полезными статьями о веб-дизайне, продуктовой аналитике и UX/UI.
• ux-news.com — англоязычный портал с новостями и анонсами конференций о дизайне.

Ресурсы для вдохновения

Насмотренность — одно из главных качеств хорошего дизайнера. Для поиска свежих идей и анализа ошибок важно изучать чужие работы. Вот несколько источников для их поиска:

• Behance и Dribbble — платформы, где дизайнеры выкладывают свои портфолио
• AWWWARDS, Land-book, Tilda publishing (раздел MADE ON TILDA) — подборки и рейтинги лучших сайтов
• UI8.net — сайт, где дизайнеры продают свои работы.

На кого подписаться

• Further — YouTube-канал UX/UI-дизайнера Игоря Сидоренко. Автор обозревает апдейты программ, показывает, как работают законы UX в реальной жизни, и учит работать с нейросетями
• Design Better Podcast — англоязычный подкаст о новостях дизайна и технологий
• High Resolution — еще один подкаст на английском языке в котором специалисты из крупных компаний, таких как Google, Facebook и Behance, рассказывают о важности дизайна в бизнесе
• Telegram-канал Дизайн-переводчик (@design_translator) — канал с переводами иностранных заметок и лонгридов на тему дизайна
• Telegram-канал UI/UX Designer (@uxidesign) — новости для дизайнеров, а также мобильных и веб-разработчиков
• «Дизайнер будущего» (byiskros) — телеграм-канал нашего хедлайнера Ильи Сидоренко о дизайне.

Какие первые шаги нужно сделать

Для UI-дизайнера

1. Изучите профессию. Определите направление, в котором вы будете работать: веб, мобильные или десктопные приложения, игры. Изучите все задачи и обязанности специалиста этой сферы.
2. Проанализируйте дизайны крупных компаний. Исследуя хорошие примеры дизайна, задайте вопрос: почему этот продукт привлекателен? Попытайтесь найти ответ и применить его в своем проекте.
3. Проанализируйте плохие примеры. Просмотр неудачных кейсов тоже важен для понимания того, как делать не стоит.
4. Изучите гайдлайны Apple и Google. Гайдлайнами называют свод правил для созданий предложений для разных операционных системах. Это рекомендации по использованию элементов, цветов и форм.

Для UX-дизайнера

1. Познакомьтесь с профессией. UX-дизайнеру приходится не только разрабатывать макет, но и исследовать психологию пользователя. Также придется работать в команде. Подумайте, насколько вам это интересно.
2. Научитесь пользоваться инструментарием. Для начала вам понадобится только Figma. Далее, по желанию, вы можете изучить Sketch, Illustrator, Photoshop для работы с графикой. А Framer, InVision, Origami использовать для прототипирования.
3. Освойте правила UX-дизайна. Прочитав несколько книг, блогов и прослушав подкасты, вы сможете сформулировать для себя базовые законы UX-дизайна, на которые будете опираться при работе.
4. Научитесь замечать работу UX. Используя цифровой продукт, обращайте внимание на то, как он сделан и почему дизайнер принял такое решение, а не иное.

Общие советы

• Изучите основы дизайна. Вам потребуется понимание базовых принципов дизайна, таких как композиция, цветовая теория, типографика, иерархия и баланс.
• Изучите базовые инструменты. Не стоит пытаться освоить все возможные инструменты. Изучайте только то, что пригодится в выбранной профессии и универсальную программу — Figma.
• Обзаведитесь ресурсами. Подписывайтесь на полезные блоги, YouTube-каналы и обязательно читайте литературу о создании удобных интерфейсов.
• Повторяйте за другими. Чтобы научиться работать с инструментами, например, с Figma, пробуйте повторить чужой дизайн. Это поможет понять функционал программы и получить базовые навыки.
• Не изучайте все подряд. Учитесь только тому, что нужно для решения актуальной задачи, ведь информации слишком много.
• Найдите ментора. В сообществе дизайнеров принято обмениваться опытом. Многие специалисты с радостью готовы помочь новым коллегам. Главное — не бояться задавать вопросы.
• Делайте упор на практике. Изучение теории должно быть прикладным.
• Изучите нейросети. ИИ — хороший помощник для современного дизайнера.
• Принимайте свои ошибки. Ошибки — это ценный опыт, они не должны вас пугать.
• Не сомневайтесь. Отсутствие некоторых навыков не должно заставлять вас отказываться от проектов. Дизайнеры — вечные студенты, которым постоянно приходится учиться новому.
• Делайте pet-проекты. Сразу после освоения программ следует браться за первые проекты. Не работайте в стол. Берите настоящие заказы и доводите их до конца, чтобы получить готовый результат. Первый завершенный проект — большая победа. Но не стоит расслабляться. Постоянная практика — залог успеха в любом деле
• Получайте обратную связь. Умение принимать и использовать критику очень важно для дизайнера. Выложите свой проект в открытый доступ. Узнайте мнение пользователей и других специалистов о вашей работе.
• Соберите и оформите портфолио. Завершайте все проекты, ваша цель — результат, а не тренировка. Делайте не только реальные, но и выдуманные проекты. Для распространения своих работ используйте Behance, Tilda или Dribbble. Можно оформить портфолио как отдельный сайт и еще раз продемонстрировать свои дизайнерские таланты.

5 полезных привычек для дизайнера

• Задавать много вопросов заказчику, чтобы лучше понять задачу
• Ежедневно анализировать чужие работы
• Составлять список задач на следующий день, выделяя приоритетные
• Тестировать продукт по завершению очередного этапа разработки
• Изучать и пробовать на деле новые инструменты.

Что делать дальше

1. Научитесь составлять гипотезы и метрики. Они обеспечат основу для принятия решений и помогут оценивать их эффективность
2. Учитесь анализировать не только пользователя, но и конкурента. Это поможет выделить ваш дизайн среди аналогов и расширить аудиторию
3. Научитесь составлять мудборды. Они помогут вам создавать единый стиль проекта и согласовывать его с заказчиком
4. Оттачивайте soft-skills. Эмпатия важна для понимания пользователя, а умение коммуницировать — для командной работы и общения с заказчиком. Подборку книг для развития «гибких навыков» вы найдете тут
5. Повысьте квалификацию на курсах. Дизайнеру не обязательно иметь специальное образование. Однако на курсах вы можете разработать свой первый проект, улучшить имеющиеся навыки и получить кейсы для трудоустройства
6. Пробуйте разные форматы работы. Работа в коллективе крупной компании сильно отличается от фриланса. И тот, и другой опыт полезны для вашего развития.