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

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

Если объяснять простыми словами, то UX/UI-дизайн нужен, чтобы сделать взаимодействие с сайтами и приложениями комфортным. Хотя эти направления тесно связаны, все же UX- и UI-дизайнеры отвечают за разные аспекты. Вместе с Кристиной Мартыновской, UX Researcher международного стартапа и преподавателем Contented, рассказываем и показываем на примерах, чем занимаются такие специалисты.

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

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

Первым термин UX использовал Дональд Норман, архитектор пользовательского опыта в Apple, в 1995 году. Он считал, что для интерфейса удобство пользования — слишком узкое понятие. Нужен был термин, который охватил бы все аспекты опыта человека с системой: промышленный дизайн, графику, интерфейс, физические взаимодействия. 

Поэтому UX-специалист — это и дизайнер, и архитектор, и психолог. Он вникает в проблемы аудитории, разрабатывает решения и внедряет их на сайт, в приложение или программу. 

Чем занимается UX-дизайнер?

Разрабатывает структуру продукта

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

Разрабатывает прототипы

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

Пример прототипа. Источник

Анализирует

Аналитика помогает улучшить сервис, учесть то, о чем не было известно на старте проекта. Если в компании нет аналитика, то бывает, что UX-специалист сам исследует, насколько успешно пользователь взаимодействует с интерфейсом. 

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

User Interface — это пользовательский интерфейс. Соответственно, UI-design — это процесс визуализации прототипа, который разработали, изучив пользовательский опыт. Здесь прорабатывается графическая часть интерфейса: кнопки, меню, иллюстрации, анимации, слайдеры, шрифты и фотографии. 

Классический пример одного из первых UI-дизайнов — первый «Макинтош». Привычные окна, которые возникают на экране, когда мы открываем папки или файлы, появились именно на нем. До 1984 года на ПК все открывалось с помощью командной строки. Именно Apple сделали интерфейс окон удобным и доступным. 

Так выглядел рабочий стол первого «Макинтоша»

Чем занимается UI-дизайнер?

Создает анимации

Иногда статичной картинки недостаточно, чтобы передать особенности продукта. Тогда UI-дизайнер использует анимации, которые покажут товар с выгодной стороны.

Пример анимации на сайте

Отвечает за интерактивность

Мы нажимаем на кнопку, она меняет цвет, и мы понимаем, что взаимодействие между нами и продуктом произошло. Именно интерактивность UI-дизайна отражает обратную связь: смена цвета, ободок вокруг кнопки и другие графические элементы помогают нам понять, что действие совершено.

Пример обратной связи: кнопка меняет цвет, когда мы на нее нажимаем

Добавляет подсказки

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

Кнопка Order Now подсказывает нам, что с ее помощью можно оформить заказ. Источник

Сходства и различия UX- и UI-дизайна

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

Сходства

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

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

Различия

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

Профессия
«UX/UI-дизайнер с нуля до PRO»

Научитесь создавать продуманные и эстетичные интерфейсы на основе пользовательских исследований с нуля за 15 месяцев

Подробнее

Ключевые принципы UI/UX-дизайна

Ясность

Элементы дизайна не должны нести в себе двойной смысл. Хороший интерфейс понятен на интуитивном уровне. Текст, графические элементы, структура — все это ведет пользователя от точки А к точке В. 

На сайте Nike пользователю интуитивно понятно, как перейти в нужный раздел или оформить покупку

Удобство

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

 Тут очень большое меню, нельзя установить фильтры и нет кнопки поиска. Источник

Эффективность

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

В приложении Welltory можно следить за своим здоровьем. Есть разные форматы подписки, как платные, так и бесплатные

Современность

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

Яркий и минималистичный сайт для любителей танцев. Источник

Забота о пользователе

Минимизируйте нагрузку на юзеров вашего продукта. Они должны плавно и легко взаимодействовать с интерфейсом. 

Программы для UX/UI-дизайна

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

Figma

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

Интерфейс Figma

Adobe Illustrator

Здесь удобно создавать векторные иконки и иллюстрации. Инструментарий шире, чем в Figma, к тому же поддерживает много разных форматов. Также удобно работать с текстами: их можно превратить в векторную фигуру и редактировать как графический объект.

Интерфейс Adobe Illustrator

Axure RP

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

Интерфейс Axure

Fontjoy и ColorHexa

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

Интерфейс ColorHexa
Интерфейс Fontjoy

Adobe After Effects

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

Интерфейс Adobe After Effects

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

Профессия
«UX/UI-дизайнер
с нуля до PRO»

Создавайте пользовательский опыт мирового уровня

10 000 ₽/меc.
6 000 ₽/мес.

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

1. Много практиковаться

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

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

2. Подучить теорию

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

Здесь лучше всего начать со статей на Medium. Потом переходить к отцам основателям UX — Якобу Нильсену и Дональду Норману. Их материалы можно найти в блоге NNGroup. Ну и конечно, книги:

3. Освоить теорию и практику

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

У нас в Contented новичкам помогают UX/UI-дизайнеры, ресерчеры и аналитики из крупных комапний — VK Group, OZON, Райффайзенбанк. В течение девяти месяцев мы пошагово обучаем, как создавать интерфейс в Figma, какие принципы лежат в основе любого изображения и макета, как проводить исследования и искать работу. 

Профессия

UX/UI-дизайнер с нуля до PRO

Научитесь создавать пользовательские интерфейсы
с нуля за 15 месяцев

15 работ в портфолио

200+ часов практики

cтажировка в крупной компании

опыт экспертов из Cuberto, Ozon и VK Group

Подробнее о курсе

15 работ в портфолио

200+ часов практики

cтажировка в крупной компании

опыт экспертов из Cuberto, Ozon и VK Group

Медиа Contented