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

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

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

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

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

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

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

Посмотрим пару примеров UI/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 — это более узкое понятие. Этот вид дизайна отвечает за удобное взаимодействие пользователя с продуктом с точки зрения структуры и дизайна.

Плюсы и минусы в работе ui/ux-дизайнера

UX и UI дизайн, как и любая другая сфера, имеет многочисленные плюсы, но и некоторые минусы, которые тоже важны при выборе профессии. Мы собрали преимущества и недостатки в таблицу.

Куда расти? Возможные карьерные пути UI/UX дизайнера

Стандартный путь UI/UX-дизайнера известен: junior — middle — senior. Но этим возможности профессионала не ограничиваются. В больших командах дизайнер может занимать руководящие позиции Design Lead и Head of Design. Это не только дополнительная ответственность, но и возможность работать с крупными проектами и существенная прибавка к доходу.

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

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

Читайте также:

Кто такой frontend-разработчик и как им стать

Екатерина Садчикова

16 мин.

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

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

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

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

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

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

Читайте также:

Нейросети для дизайна: топ онлайн-помощников для создания визуала

Инна Романович

11 мин.

Этапы разработки дизайна интерфейса по принципам UX/UI

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

Идея

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

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

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

Карта пути пользователя (User flow)

На этапе создания карты пути пользователя, или User flow, UX-дизайнер прорабатывает сценарии взаимодействия с юзерами. Например, при работе с продающим сайтом заказчику важно, чтобы клиент дошёл до товара и положил его в корзину для дальнейшей покупки. Дизайнеру нужно спрогнозировать и проложить этот путь.

Использование User flow помогает создавать интуитивно понятные интерфейсы с чёткой последовательностью шагов. Для этого дизайнер сначала анализирует целевую аудиторию, её мотивы и потребности, затем схематично визуализирует план действий пользователя: прописывает маршрут от точки А (начала) до точки В (цель). Эту схему делают в формате набросков на бумаге, маркерной доске или в сервисах для создания интеллект-карт.

Простой пример User flow

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

Эскиз (Wireframe)

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

Создание эскиза сайта в Figma

Программы для создания эскизов:

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

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

Дизайн-концепция и разработка компонентов UI

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

Лучшие курсы по айдентике и фирменному стилю

Выбрать курс

8 курсов

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

Дизайн-концепцию создают в несколько шагов.

1. Сбор информации о клиенте и его продукте. На этом этапе очень пригодится так называемый маркетинг-кит — комплект материалов, описывающих историю компании, преимущество бренда, выгоду для клиента от сотрудничества и другое. Дизайнер формирует впечатление о заказчике и о том, что он продаёт и продвигает.
2. Анализ ландшафта. Дизайнер анализирует, какими инструментами пользуются конкуренты и каким образом можно среди них выделиться.
3. Подготовка стиля. Все свои идеи и наброски дизайнер оформляет на мудборде.
4. Визуализация стиля. Дизайнер оформляет первый вариант страницы.
5. Презентация клиенту. На этом этапе можно обсудить дополнительные пожелания и замечания заказчика для дальнейших исправлений.

На этом же этапе UI-дизайнер создаёт User interface элементы — кнопки, пункты меню, полосы прокрутки, чек-боксы и другое. Они делают интерфейс интерактивным и помогают пользователю при навигации.

Прототип

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

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

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

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

Удобнее всего, по нашему опыту, делать прототип именно в Figma: там легко объединить дизайн и разработку. Ниже, для примера UI/UX-дизайна, — интерактивный прототип нашего сайта.

Процесс создания интерактивного прототипа сайта в Figma

Интерактивный прототип сайта в Figma. Синим подсвечены будущие кликабельные зоны.

Когда прототип согласован с заказчиком, его передают разработчикам, которые верстают макет и делают так, чтобы он «‎ожил» и был доступен пользователям.

Инструменты и навыки 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-дизайнеров ограниченный, но объёмный пул задач. Рассмотрим, что должен делать дизайнер интерфейса.

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-дизайнеров в 2020 году

Примеры вакансий UX/UI-дизайнеров в Москве и регионах

А судя по вакансиям на сайте Работа.ру, летом 2022 года UX/UI-дизайнерам предлагают в среднем 106 000 ₽ в месяц.

Статистика зарплат UX/UI-дизайнера на основе вакансий на Работа.ру

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

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

1. Курсы

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

2. Книги

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

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

3. Практика

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

Где искать клиентов?

UI/UX дизайнеры востребованы на рынке, найти клиентов им не составляет труда. Для этого существует множество вариантов.

• Биржи фрилансеров, в том числе международные. Например, fl.ru, freelance.ru, freelancejob.ru, fiverr.com.
• Сайты вакансий: hh.ru, rabota.ru, superjob.ru и другие.
• Сообщества в социальных сетях. Например, Хабр Карьера или тематические группы ВК: Design Hunters — вакансии для дизайнеров, Работа для дизайнеров: вакансии и заказы.
• Телеграм-каналы. Например, UX Work, «Я работаю в digital, детка», «На удалёнке 2.0» и другие.

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