Скидки на курсы ждут в личном кабинете. Нажмите тут

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

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

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

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

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

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

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

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

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

Cайт Lamoda

Пример удачного UX/UI-дизайна сайта Lamoda

UI (user interface) ― «пользовательский интерфейс». UI — это то, как выглядит интерфейс и его элементы. UI-дизайнер отвечает за наглядность сайта или приложения: вид меню, кнопок, читаемость шрифта и т. д.

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

Cайт Тинькофф

Пример удачного UX/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-стандартам, и если сильно от них отходить, интерфейс будет не таким удобным и понятным для них.

Куда расти? Возможные карьерные пути 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 и пр.,
  • знание веб-трендов,
  • знание дизайн-гайдлайнов мобильных интерфейсов,
  • понимание особенностей разработки сайтов и мобильных приложений.

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

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

Идея

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

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

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

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

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

Пример User flow

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

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

Эскиз (Wireframe)

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

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

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

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

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

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

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

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

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

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

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

Прототип

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

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

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

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

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

Прототипа сайта в Figma

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

Интерактивный прототип сайта в Figma

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подбор цветовой палитры в Copypalette

Пример подбора цветовой палитры в Copypalette

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

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

Типографика

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

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

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

Подбор начертания текста в Wordmark

Пример подбора начертания текста в 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. Анализ целевой аудитории

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

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

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

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

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

Где используют 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-дизайнеров

Примеры вакансий UX/UI-дизайнеров на HH.ru

Часто компании ищут таких специалистов через телеграм-каналы.

Вакансия для UX/UI-дизайнера в Telegram

Вакансия для 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-дизайнером

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

1. Курсы

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

Курс
Школа
Стоимость
Рассрочка
Длительность
Рейтинг
Ссылка
127 740 ₽
Есть
13 месяцев
4.4

2. Книги

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

3. Практика

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

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

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

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

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

Оставьте комментарий

Ваш комментарий:
Имя:
Email: