26 мая / 2021

UX/UI-дизайн: где и как ему обучиться и сколько можно зарабатывать

Алёна Митрофанова
  • /
  • /
Лучшие онлайн-школы английского языка для для взрослых и детей >>>
Close
По ошибке или незнанию дизайнеры-новички и люди, далёкие от дизайна, путают понятия UX- и UI-дизайна. Хотя эти термины связаны между собой, отличия у них значительные.

Представьте, что вы купили телевизор. У него есть пульт, который состоит из кнопок, пластикового корпуса и микросхем. Если бы пульт был приложением или сайтом, то за всю «начинку» отвечал бы UX-дизайнер. А за дизайн кнопок и корпуса ― UI-дизайнер.

В этой статье мы расскажем, что такое UX/UI-дизайн и как стать UX/UI-дизайнером. Вы узнаете, чем отличается UX- и UI-дизайнер, насколько это востребованные профессии и какие качества нужны специалистам.

Содержание

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

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

UX (user experience) ― «пользовательский опыт». UX — это то, как пользователь взаимодействует с интерфейсом. UX-дизайнер отвечает за удобство использования сайта или приложения.

Например, вы зашли на сайт маркетплейса. При хорошем UX-дизайне вы сразу разберётесь, как открыть каталог, выставить фильтры, сделать заказ и т. д. У вас останется положительное впечатление от взаимодействия с сайтом, потому что вам было просто на нём ориентироваться.
Пример удачного UX/UI-дизайна сайта Lamoda
UI (user interface) ― «пользовательский интерфейс». UI — это то, как выглядит интерфейс и его элементы. UI-дизайнер отвечает за наглядность сайта или приложения: вид меню, кнопок, читаемость шрифта и т. д.

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

Отличия UX от UI

Как вы поняли из примеров выше, между UX- и UI-дизайном есть разница, но одно невозможно без другого. Специалисты UX и UI работают на благо пользователя ― делают его взаимодействие с продуктом удобным с помощью внешнего дизайна и внутренней структуры.

Характеристики UX:

● фокус на удобстве и логичности взаимодействия,
● влияет на структуру приложения или сайта,
● цель ― решать задачи пользователей.

Характеристики UI:

● фокус на элементах взаимодействия ― кнопках, меню и т. д.,
● влияет на дизайн ― шрифты, картинки, вёрстку и т. д.,
● цель ― сделать удобный дизайн.

Отличия UX/UI-дизайна от веб-дизайна

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

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

UX/UI — это более узкое понятие. Этот вид дизайна отвечает за удобное взаимодействие пользователя с продуктом с точки зрения структуры и дизайна.

Инструменты и навыки UX-дизайнера

Вот личностные и профессиональные качества, которые нужны хорошему UX-дизайнеру.

Личностные качества UX-дизайнера:

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

Профессиональные навыки UX-дизайнера:

● исследование данных,
● прототипирование,
● тестирование юзабилити,
● понимание принципов организации дизайн-систем, опыт их сборки,
● владение Figma,
● владение графическими программами: Adobe PhotoShop, Adobe Illustrator и пр.,
● знание веб-трендов,
● знание дизайн-гайдлайнов мобильных интерфейсов,
● понимание особенностей разработки сайтов и мобильных приложений.

Разберёмся, на какие этапы делится работа UX-дизайнера и какие инструменты ему помогут на каждом из них.

Идея

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

Популярные бесплатные сервисы mind-карт:

Draw.io,
Coggle,
MindMaster,
Miro,
Mindomo.

Эскиз

На этом этапе дизайнер создаёт черновой вариант сайта или приложения ― wireframe. В этом цифровом эскизе дизайнер пробует разные сочетания форм изображений, плашек и текста.
Пример создания эскиза сайта в Figma
Программы для создания эскизов:

Adobe Photoshop,
Sketch,
Figma и так далее.

Figma — один из самых популярных редакторов для создания макетов. Если хотите разобраться, как там работать, смотрите наш подробный гайд по Figma для начинающих.

Прототип

Прототипирование — это процесс совместной работы UX- и UI-дизайнеров. На этом этапе специалисты продумывают, что будет на страницах продукта и как расположить важные элементы на них.

В Figma есть возможность сделать прототип интерактивным, чтобы протестировать, как пользователь будет взаимодействовать с ним.

Интерактивный прототип помогает:

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

Удобнее всего, на наш взгляд, сделать прототип именно в Figma, потому что там легко объединить дизайн и разработку.
Скрин примера создания интерактивного прототипа в Figma с ютуб-канала DesignSense

Инструменты и навыки UI-дизайнера

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

Личностные качества UI-дизайнера:

● общительность,
● внимательность к деталям,
● аналитические способности,
● креативность,
● умение работать в команде,
● умение спокойно воспринимать правки.

Профессиональные навыки UI-дизайнера:

● понимание принципов дизайна,
● знание принципов типографики,
● владение на высоком уровне графическими редакторами,
● знание основ брендинга.

Разберёмся, на какие этапы делится работа UI-дизайнера и какие инструменты ему помогут на каждом из них.

Работа с цветом

Цвет ― одна из основных составляющих UI-дизайна. Дизайнеру важно понимать, как тот или иной цвет повлияет на пользователя.

Основные принципы работы с цветом:

● не использовать абсолютный чёрный и белый,
● выбирать акцентные цвета для кнопок,
● использовать привычные цвета для стандартных действий ― например, зелёный при успешном действии, красный при ошибке,
● правило 60-30-10, по которому нужно использовать 3 цвета в дизайне: основной цвет на 60% области, на 30% — вторичный цвет, на 10% — акцентный.

Правило 60-30-10 помогает сделать гармоничный по цвету интерфейс, чтобы работа дизайнера не выглядела аляписто. На скрине ниже — пример использования этого правила: 60% основного чёрного цвета, 30% ― вторичного светло-серого, 10% ― акцентного розового.

Пример подбора цветовой палитры в Copypalette
Существуют специальные бесплатные программы, которые помогают разработать цветовую схему будущего продукта:

ColorHexa — моделирование подробной палитры,
Paletton — построение цветовых схем,
Flat UI Color — подбор цветов для Flat-стиля,
Coolors — инструмент для выбора цвета,
Khroma — генератор цветовых палитр,
Designspiration — поиск изображений на основе цвета по выбору,
Material Color Tool — можно применить цветовые палитры к пользовательскому интерфейсу и узнать сочетаемость цветов,
Palx — можно создать цветовую палитру под основной цвет,
Copypalette — создание своей палитры, которую можно импортировать в Sketch или Figma.

Типографика

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

Основные правила работы со шрифтами:

● разборчивость ― простое и чёткое начертание букв,
● сдержанность ― общий шрифт не должен перетягивать на себя внимание,
● гибкость ― текст должен одинаково хорошо смотреться на разных устройствах,
● буквы должны быть пропорциональны по высоте и ширине,
● должно быть достаточно пространства внутри букв и между ними.
Пример подбора начертания текста в Wordmark
Чтобы подобрать оптимальные шрифты для сайта или приложения, воспользуйтесь специальными программами.

Бесплатные программы, которые помогут в работе с текстом:

Fontstorage ― библиотека шрифтов,
Free Faces ― библиотека акцентных шрифтов,
Typeface ― инструмент для шрифтов на MacOS,
Fontbase ― инструмент для шрифтов на MacOS, Windows, Linux,
Типограф ― сервис для вёрстки,
Wordmark ― сервис по проверке начертания.

Иконки

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

Где можно взять иконки для проекта:

iconmonstr ― библиотека с бесплатными иконками,
thenounproject ― библиотека с 3 млн иконок и возможностью доплатить за расширенные возможности,
iconify ― библиотека с бесплатными иконками,
fontawesome ― есть бесплатные иконки и возможность доплатить за расширенные возможности,
Free Icon Maker ― бесплатный сервис для редактуры иконок,
IconJar ― органайзер пользовательских иконок с бесплатным пробным 14-дневным периодом.
Пример набора бесплатных иконок

Задачи UX/UI-дизайнеров

У UX/UI-дизайнеров ограниченный, но объёмный пул задач. Рассмотрим, что должен делать UX/UI-дизайнер.

1. Анализ целевой аудитории

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

2. Разработка решений интерфейса

UX/UI-дизайнер создаёт схему взаимодействия пользователя с продуктом: от первого клика до завершающего действия. Специалист разрабатывает несколько возможных сценариев поведения пользователя, которые лягут в основу прототипа.

3. Создание прототипа, его тест и дизайн

Специалист разрабатывает прототипы ― выстраивает логику взаимодействия с продуктом и создаёт его дизайн. Дизайнер тестирует приложение или сайт, чтобы заранее выявить ошибки и проблемы, с которыми столкнутся пользователи.

Где используют UX и UI в digital

В начале статьи мы подробно рассказывали, что такое UX. Этот термин применим только к сфере digital, потому что касается логики создания цифрового продукта.

А термин UI используют в отношении интерфейса любого продукта, например, панели управления на микроволновке.

В digital-сфере понятия UX/UI обычно используют вместе, потому что специалисты UX-дизайна и UI-дизайна тесно связаны в работе.

Использование UX/UI-дизайна в digital:

● сайты,
● приложения,
● программы.

Требования к качественному UX/UI-дизайну

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

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

Востребованность UX/UI-дизайнеров

На момент написания статьи на портале hh.ru — около 1000 вакансий для UX/UI-дизайнеров и почти 6000 вакансий, где требовались навыки UX/UI-дизайна.
Примеры вакансий UX/UI-дизайнеров на HH.ru
Часто компании ищут таких специалистов через телеграм-каналы.
Вакансия для UX/UI-дизайнера в телеграм-канале «Норм работа»
Надо признать, что UX/UI-дизайнеры не так востребованы, как веб-дизайнеры. Часто работодатели ожидают, что веб-дизайнеры, маркетологи, разработчики и т. д. и так будут разбираться в UX/UI-дизайне. И всё же, вакансии есть, и работу найти вполне реально. То, что вы станете узким специалистом, станет вашим преимуществом перед другими соискателями, а значит, вы сможете претендовать на должность с комфортной для вас оплатой. Об этом ниже.

Сколько платят UX/UI-дизайнерам

По данным исследовательского центра портала Superjob.ru, минимальная зарплата дизайнера-новичка без портфолио составила 50 000 ₽ в городах Кемерово и Набережные Челны. В Москве ― 80 000 ₽, в Санкт-Петербурге ― 70 000 ₽.

Зарплата дизайнеров с опытом работы более 3 лет и навыками управления проектами может достигать 250 000 ₽.
Примеры вакансий UX/UI-дизайнеров в Москве и регионах

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

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

1. Курсы

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

Курсы по профессии UX/UI-дизайнер:

«Профессия UX/UI-дизайнер» от Skillbox,
«UX/UI дизайнер» от Нетологии,
«UX/UI-дизайнер» от GeekBrains.

Специализированные курсы:

«UX-Design» совместный курс Майкла Джанды и Skillbox,
«UX-дизайнер с нуля до PRO» совместный курс Skillbox и дизайн-студии AIC,
«UI-дизайнер» от Нетологии,
«Профессия UI designer с нуля» от онлайн-академии Groward.

2. Книги

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

Дон Норман, «Дизайн привычных вещей» — UX на примере бытовых вещей,
Артемий Лебедев, «Ководство» — развивает дизайнерскую интуицию,
Стив Круг, «Не заставляйте меня думать. Веб-юзабилити и здравый смысл» — рассказ о том, как надо и не надо делать сайты,
Расс Унгер, Кэролайн Чендлер, «UX-дизайн. Практическое руководство по проектированию опыта взаимодействия» — учебник с подробным описанием методик.

3. Практика

Ещё один способ получить знания в сфере дизайна интерфейсов и пользовательского опыта ― практика. Чтобы хорошо освоить все инструменты, вам нужно много практиковаться. Попробуйте создать свой сайт или приложение самостоятельно. На это может уйти много времени и сил, зато вы пройдёте сразу все этапы работы над проектом.
UX/UI-дизайнер отвечает за то, насколько пользователю будет удобно и приятно взаимодействовать с цифровым продуктом. Вы можете заниматься только UX-дизайном или UI-дизайном, а можете стать комплексным специалистом, чтобы быть более востребованным на рынке. В любом случае, чтобы стать хорошим дизайнером сайтов и приложений, вам понадобятся знания, навыки и практика. Об это мы подробно рассказали в этой статье.
Нравится наш блог?
Подпишитесь и будьте в курсе новых статей, обучающих курсов и бесплатных мероприятий