Ux и ui дизайн что это такое как научиться
Что такое UX/UI-дизайн
Термины UX и UI часто объединяют в один или считают их взаимозаменяемыми, но на деле эти направления в дизайне отличаются. Причем как в мелких деталях, так и в фундаментальных аспектах. Профессионалы из этих сфер занимаются разными вещами, хоть и смотрят в одном направлении.
В этой статье разберем обе области дизайна (UX и UI), посмотрим, чем они отличаются друг от друга и в чем оказываются схожи.
Что такое UI-дизайн?
UI – аббревиатура, которая расшифровывается как User Interface, что в переводе означает «Пользовательский интерфейс». Это направление развития цифровых продуктов, включающее в себя работу над визуальным оформлением бренда/сайта/приложения или сервиса.
Пользовательский интерфейс должен быть красивым, соответствовать современным стандартам и при этом оставаться удобным. Причем последний пункт особенно важен, ведь UI-дизайн включает в себя не только создание красивых иконок. Эти иконки должны с ходу давать клиенту понять, какую функцию они выполняют, а прочие части интерфейса иметь понятную иерархию и т.п.
Основные характеристики:
Что такое UX-дизайн?
UX расшифровывается как User Experience, что в переводе означает «Пользовательский опыт». Здесь и кроется ключевое отличие одной профессии от другой. UX-дизайнера заботит не только внешний вид сайта или сервиса, но и то, как с ним будет взаимодействовать клиент.
Такая дисциплина, как UX-дизайн, включает в себя массу смежных наук. В ней можно обнаружить элементы психологии, умение вести бизнес, аналитические навыки, понимание того, как работают современные сервисы, приложения и технологии. От специалистов такого рода ожидают целый спектр навыков, позволяющих создать идеальный опыт для потенциальных пользователей.
Основные характеристики:
Что входит в задачи UX/UI-дизайнеров?
Мы уже выяснили, что специализация UX- и UI-дизайнеров заметно отличается. Они занимаются созданием одного продукта, но круг обязанностей у них сильно варьируется.
UX-дизайнер куда больше внимания уделяет тому, как будет чувствовать себя пользователь при взаимодействии с продуктом. Он гораздо ближе знакомится со структурой приложения, осознает, как оно работает, и улучшает его, ориентируясь на опыт других людей. UI-дизайнер смотрит на продукт с более творческой стороны и пытается сделать продуманный интерфейс красивым.
Далее подробно поговорим о пяти ключевых этапах развития проекта и о том, кто из дизайнеров принимает в них непосредственное участие. На их фоне разница между UX- и UI-дизайном видна еще лучше.
Изучение поведенческих особенностей пользователей
Для UX и UI
Процесс создания UX-дизайна начинается с исследования потенциальных пользователей. Продукт создается для конкретной целевой аудитории, поэтому UX-дизайнер начинает свою работу с анализа.
UX-дизайнер обязан узнать, какие задачи возлагают на ресурс клиенты и как они пользуются предлагаемыми продуктами. Так создается примерный план интерфейса и визуальных решений, связанных конкретно с действиями пользователей.
Необходимо изучить, как посетители сайта или пользователи приложения действуют. Какие ссылки открывают, как привыкли находить нужные материалы, как быстро находят ту или иную информацию и какое поведение ожидают от программы или веб-ресурса.
Из этого строится базовая абстрактная структура продукта, основанная на предпочтениях клиентов и их привычках.
Формирование образа типичного пользователя
Для UX
Процесс, описанный в предыдущем блоке статьи, не заканчивается на изучении поведенческих особенностей потенциального клиента. Как и в случае с определением ЦА, при разработке UX-дизайна нужно сформировать образ типичного пользователя.
Такой подход позволяет сформировать образ типичного пользователя, на которого ориентирован продукт. Например, у нас есть приложение для тех, кто занимается спортом и пытается перейти на здоровое питание с нуля. Идеальный пользователь – молодая девушка, много времени тратящая на работу, при этом следящая за собой и пытающаяся получить максимум от фитнес-приложения.
Обладая таким объемом информации, можно принять решение о том, какой порядок окон будет в программе, какой информацией она будет встречать клиентов на стартовом экране, как будет проходить выбор рецептов и упражнений. Их порядок и прочие аспекты будут зависеть от предпочтений «идеального пользователя».
Разработка интерфейсных решений
Для UI и UX
На этом этапе UX- и UI-дизайнеры работают более тесно. Оба специалиста пытаются сформировать определенное мнение о продукте, настроение и пользовательский опыт.
В ходе работы дизайнеры создают схему, в которой излагается путь человека – от появления намерения запустить приложение (открыть сайт) до совершения покупки или любого другого действия (логического завершения использования программы).
Команде разработчиков предстоит создать каркас для логики. Он включает в себя несколько схем, отображающих возможные варианты поведения пользователя. Впоследствии эти потенциальные сценарии станут основой для разработки интерфейсных решений, добавления функций, формирования общего стиля и прочих аспектов сервиса (сайта, приложения и т.п.).
Создание прототипов и тестирование разработанных функций
Для UX
Когда у команды разработчиков уже есть готовый каркас (схема того, как будет выглядеть приложение или сайт), она переходит к созданию первых прототипов. Важно на этом этапе создать несколько вариантов логики. UX-дизайнеры и тестировщики проверяют, насколько хорошо они работают и подойдут ли для решения стандартных пользовательских задач, описанных в ходе изучения целевой аудитории продукта.
Прототип становится уменьшенной версией приложения/сайта, подходящей для того, чтобы в полной мере оценить возможные сценарии использования. Чем он реалистичнее, тем лучше. Так удастся избежать необходимости в срочных исправлениях после релиза.
В ходе тестирования можно пригласить небольшую группу потенциальных пользователей и предложить им протестировать прототип. UX-дизайнер должен принять во внимание их опыт, отзывы, обнаруженные проблемы и прочие мелочи, связанные с интерфейсом (не только в плане расположения объектов, но и в плане доступных функций).
Создание визуального дизайна продукта
Для UI
UX-дизайнеры иногда участвуют в разработке визуальной составляющей интерфейса, но обычно этим занимается отдельный сотрудник. В его обязанности входит – создание внешнего вида для приложения/сайта, который будет ассоциироваться с брендом, привлекать пользователей и соответствовать современным стандартам дизайна.
UI-дизайнер создает цветовые схемы (основную палитру всех элементов страницы) и иконки, подбирает шрифты, визуальный контент.
Большая часть того, что увидит пользователь, зависит от UI-дизайнера. Он создает оформление для бренда. С этим оформлением его потом будут связывать клиенты. А цветовая гамма, иконки и шрифты станут узнаваемыми объектами, напоминающими о бренде.
Какими навыками должен обладать UX-дизайнер?
Некоторые требования к UX-дизайнерам схожи с таковыми к UI-дизайнерам. Например, умение коммуницировать, работать в команде и воспринимать чужую позицию. Зачастую профессионалы в области UX работают в больших компаниях, поэтому им приходится анализировать чужую точку зрения и уметь выстраивать свои идеи на базе уже существующих решений.
UX-дизайнер обязан постоянно заниматься изучением клиентов сервиса/приложения и обладать здоровым любопытством, которое поможет строить пользовательский опыт, опираясь на привычки и пожелания людей. Также UX-дизайнеры обязаны критически мыслить и адекватно оценивать результат своей работы, чтобы во главе угла всегда оставался опыт пользователей, а не личные предпочтения и взгляды на интерфейс и программную логику.
На ранних этапах работы UX-дизайнер занимается разработкой прототипов интерфейса. По ходе разработки он использует аналитические навыки, чтобы создать удобное пространство для потенциальных пользователей. Он же проводит первые тесты получившегося продукта, чтобы убедиться в его удобстве и эффективности (умение поставить себя на место пользователя в этом случае играет значимую роль). Хорошим подспорьем станут навыки в области менеджмента и общения с людьми.
Какими навыками должен обладать UI-дизайнер?
От UI-, как и от UX-дизайнеров, требуется повышенный уровень эмпатии, то есть возможность ставить себя на место пользователя. И хотя задача первых состоит в визуальном оформлении продукта, все же необходимо ориентироваться на предпочтения аудитории. Эту характеристику дополняет высокий уровень адаптивности и умение подстраиваться под изменения в индустрии. Пользовательский опыт, с точки зрения функциональности, может годами почти не меняться, а вот веяния в визуальном стиле меняются часто.
Также есть ряд профессиональных навыков, которыми должен обладать UI-дизайнер. В их числе:
Общие познания в области графического дизайна, менеджмента (управления проектом и командой) и продвижения приветствуются и нередко фигурируют в соответствующих вакансиях.
Ключевые принципы хорошего UX/UI-дизайна
Требования к дизайну приложений и сервисов меняются относительно часто, хоть и неравномерно. Визуальные новшества появляются в индустрии чаще, чем глобальные корректировки в UX-дизайне, принимаемые как стандарт.
Но есть общие идеи, помогающие создавать хорошие проекты, не следуя трендам. О них и пойдет речь ниже.
Пользователь во главе угла
Интерфейс должен строиться вокруг пожеланий пользователя. Важнейшее правило хорошего интерфейса – он должен быть очевидным. Не должно быть элементов, назначение которых может трактоваться двусмысленно.
К примеру, у вас есть онлайн-магазин. Если вы используете на нем общепринятую иконку с корзиной, то будьте добры предоставить клиенту ожидаемую функциональность при клике по этой иконке. Если там вдруг окажется список избранных товаров или какой-то другой раздел, то клиент окажется в замешательстве.
Также стоит четко объяснить пользователям, на что можно нажимать, а на что нельзя. Никакого блеклого текста вместо полноценных кнопок. Это особенно важно при создании интерфейсов для мобильных устройств.
Создать хороший интерфейс, построенный вокруг пожеланий пользователя, помогает масштабное бета-тестирование с участием живых людей. Изучение их привычек поможет упростить некоторые функции или изменить приоритеты в изначальной структуре интерфейса.
Хороший интерфейс строится на шаблонах
Сразу за очевидностью в списке важных принципов дизайна идет последовательность. Эклектика в интерфейсах воспринимается плохо. Не стоит путать потенциальных клиентов массой разных элементов, за которыми не удается проследить четкой логики.
Допустим, у вас есть онлайн-магазин с определенным подходом к дизайну. Сделайте его понятным без дополнительных пояснений и инструкций. Если кнопка зеленая, то пусть это будет положительное действие, если красная – отрицательное. Крестик что-то закрывает, а три горизонтальных полоски открывают меню. А если страница с каталогом курток содержит фильтры в левой боковой панели, то пусть они будут и в других каталогах. Предсказуемость пойдет интерфейсу на пользу.
Следовать трендам нужно обдуманно
Это больше касается UI-дизайнеров. Если вы следите за тем, как выглядят современные сайты и приложения, то наверняка замечаете, что они приобретают общие черты. Здесь, как и в случае с одеждой, появляются модные веяния, за которыми все спешат следовать.
Нередко это выливается в весьма посредственный вид сайта/приложения. Причиной тому служит схожесть с конкурентами или избыточное влияние современных тенденций. Так, к примеру, сторонники неоморфизма забывают о здравом смысле и превращают свои продукты в «физические объекты», с которыми становится сложно взаимодействовать.
Конечно, игнорировать тренды не получится, но слепо бежать за ними не стоит. Нужно вбирать в свой продукт только лучшее, а каждое решение осмыслять. А стоит ли оно того? А действительно это будет хорошо смотреться? Будет ли новый облик соответствовать общему образу бренда? Всему нужно четкое объяснение.
Важно соблюдать фундаментальные приниципы дизайна
Хороший UI-дизайн не про то, как сделать сайт симпатичным. Есть вещи поважнее. Причем вещи, обоснованные психологией, работой человеческого сознания и мозга. Они могут даже не слишком удачный выбор шрифтов сделать сносным.
Это не такие строгие правила и не религиозный догмат. При создании особо креативных решений частью правил можно пожертвовать. Но только в том случае, если вы точно осознаете, что делаете.
Какую профессию выбрать для себя?
Профессия UI-дизайнера подойдет тем, кто занимается версткой, понимает, как работать с CSS, знает, как выглядят современные сайты, и имеет хотя бы базовое чувство вкуса. Такие люди вполне способны создавать красивые проекты, не жертвуя удобством.
UX-дизайнерам лучше становиться тем, кто хочет создавать крутые интерфейсы и не особо переживает о том, какого уровня насыщенность теней на кнопках в приложении. Это работа для тех, кто больше выступает за практичность и кого заботит восприятие разрабатываемого продукта в целом.
Главное понимать, что это все еще разные специальности, и охватывать сразу обе вовсе необязательно. Вполне реально сделать выбор только в пользу направления, которое резонирует с вашим мировоззрением и восприятием цифровых продуктов.
30 бесплатных онлайн-курсов по UX/UI-дизайну
С нуля до PRO. В 2021 году.
💰 Материал спонсора. «UX-дизайнер с нуля до PRO» от Skillbox 💰
Skillbox предоставляет бесплатный доступ к части уроков своей платной обучающей программы «Профессия UX/UI-дизайнер». Успейте попробовать!
Длительность: 27 уроков.
Формат обучения: видеоуроки + текстовые материалы + домашние задания без проверки + тесты.
Программа обучения:
Чему научитесь:
Кто проводит курс
1. «Figma. Начальный уровень» от GeekBrains
Длительность: 5 уроков, каждый по 30 минут.
Формат: видеоуроки, домашние задания.
Программа обучения:
Чему научитесь: пользоваться графическим редактором Figma на базовом уровне и с его помощью делать несложные макеты сайтов.
Преподаватель: Илья Полянский. Ведущий дизайнер цифровых продуктов в «Почте России». Опыт работы — 7 лет.
2. «Основы Figma» от «Нетологии»
Длительность: 16 лекций общей продолжительностью 17 часов, 7 из них уделено теории, а оставшиеся практике.
Формат: видеолекции и упражнения.
Документ об окончании: отсутствует.
Программа:
Чему научитесь:
💰 На правах рекламы. «Профессия UX/UI-дизайнер» от Contented 💰
Продолжительность курса: 9 месяцев.
Документ об окончании: удостоверение о повышении квалификации установленного образца.
Формат: видеоуроки + домашние задания с проверкой и обратной связью от личного наставника + общение с другими студентами в закрытом комьюнити + удалённая стажировка.
Программа обучения:
Чему научитесь:
3. «Дизайн приложения» от Loftschool
Длительность: 15 лекций (продолжительность каждого 2–15 минут).
Формат: видеоуроки.
Диплом об окончании: не выдаётся.
Программа обучения: разделена на четыре блока:
Чему научитесь:
Лектор: Елена Мойся — дизайнер со стажем работы более 4 лет. Создаёт графические продукты в «МТС».
4. «Как стать дизайнером интерфейсов» от «Яндекс.Практикум»
Курс платный, но есть бесплатная вводная часть, которая позволит попробовать себя в профессии и понять, стоит ли продолжать обучение.
Длительность: 10 часов.
Формат: текстовые материалы, тесты, работа в интерактивном тренажёре.
Программа: слушатели узнают, что включает в себя работа дизайнера интерфейсов и на практике познакомятся с графическими редакторами, в том числе и с Figma.
Что узнаете:
5. «Уроки по UX/UI Design» от DesignLab
Длительность: 9 занятий. Каждое разделено на несколько роликов, включающих в себя теорию и практику. Всего 21 видеоурок. Средняя продолжительность — 1 час, но есть и видеоролики по 2–3 часа.
Формат: видеоматериалы.
План обучения: на курсе рассказывается о UX/UI-дизайне, проектировании страниц «О нас» и «Контакты», создании UI-дизайна мобильной версии сайта. Также затронуты темы поиска клиентов и составления портфолио.
Что узнаете:
Автор: Александр Гайдай. Создаёт обучающие курсы по веб-дизайну более 6 лет.
6. «Principles of UX Design» от InVision
Длительность: 9 занятий.
Формат: текстовые уроки.
Программа:
Чему научитесь:
Автор: Тимоти Эмбретсон — дипломированный графический дизайнер. Помогает крупным компаниям решать сложные проблемы.
7. «Fundamental UI Design» от InVision
Продолжительность: 5 занятий.
Формат: текстовые уроки.
План обучения:
Что узнаете:
Автор: Джейн Портман — консультант по UX/UI из России. Решает бизнес-задачи с помощью умного UI-дизайна.
8. «Создание Landing Page» от Tilda Education
Длительность: 5 лекций.
Формат: видеолекции.
Сертификат: отсутствует.
Программа:
Чему научитесь:
Лектор: Никита Обухов — создатель конструктора сайтов Tilda Publishing и основатель одноимённой компании.
9. «Уроки по UI/UX Design» от Игоря Джазова
Длительность: 72 ролика.
Формат: видеоматериалы.
Документ об окончании: нет.
Программа: на курсе рассказывается об отличиях веб-дизайнера от UX/UI-дизайнера, ошибках начинающих дизайнеров, о дизайне сайтов и мобильных приложений в Figma и Tilda, скетчах, проектировании прототипов сайтов в Axure. Также слушатели узнают много советов для оптимизации рабочих процессов.
Чему научитесь:
10. «Уроки по UX/UI дизайну» от Евгения Кузьмина
Длительность: 35 роликов, каждый идёт в среднем 1 час.
Формат: видеоуроки.
План обучения: в курс включена информация о типографике, сетках и композициях, создании лендингов, нестандартной анимации в Tilda, проектировании мобильных приложений.
Чему научитесь:
11. «Веб-дизайн» от AndyOne
Длительность: 9 занятий, каждое идёт в среднем 3–10 минут.
Формат: видеоматериалы.
Программа: слушатели узнают о UX-дизайне, типографике, цветах, изображениях, модульных сетках. Также в видеороликах затронуты важные правила продуктивной работы и «фишки» мастеров.
Что узнаете:
12. «Уроки Web Design — UI/UX» от G-Starting
Длительность: 11 видеороликов (до 15 минут).
Формат: видеоуроки.
План обучения:
Что узнаете:
13. «UX Design for Mobile Developers» от Udacity
Длительность: 4 лекции.
Формат: видеоуроки, интерактивные викторины.
Документ об окончании: нет.
Программа:
Чему научитесь:
Авторы: команда разработчиков Google.
14. «Пользовательский интерфейс» от Coursera
Длительность: 6 недель (всего на учёбу уйдёт 15 часов).
Формат: видео, текстовые материалы, практические задачи.
План обучения:
Что узнаете:
Преподаватели:
15. «Visual Elements of User Interface Design» от Coursera
Продолжительность: 4 недели (всего на учёбу уйдёт 16 часов).
Формат: видеолекции, текстовые материалы, упражнения.
Сертификат: предусмотрен.
Программа:
Узнаете:
Преподаватель: Майкл Уортингтон. Преподаёт веб-дизайн в Калифорнийском институте искусств. Публиковал свои работы в множестве стран, в том числе в Китае, Японии, Англии, Франции, Италии. Обучил более 600 тысяч человек.
16. «UX Design Fundamentals» от Coursera
Длительность: 4 недели (на учёбу уйдёт 12 часов).
Формат: видео, статьи, тесты.
План обучения:
Чему научитесь:
Автор курса: Майкл Уортингтон.
17. «Web Design: Strategy and Information Architecture» от Coursera
Длительность: 4 недели (на учёбу уйдёт 12 часов).
Формат: видео, текстовые материалы, упражнения.
Программа:
Что узнаете:
Автор курса: Роман Джастер — графический дизайнер из Лос-Анджелеса со стажем работы более 14 лет.
18. «Web Design: Wireframes to Prototypes» от Coursera
Длительность: 4 недели (на учёбу уйдёт 40 часов).
Формат: видео, текстовые материалы, тесты.
Сертификат: выдаётся (платно).
План обучения:
Что узнаете:
Автор курса: Роман Джастер.
19. «Human-Centered Design: an Introduction» от Coursera
Продолжительность: 4 недели = 15 часов на освоение материала.
Формат: видеоуроки + текстовые материалы + тесты.
Программа обучения:
Автор: Скотт Клеммер — профессор когнитивных и компьютерных наук в Калифорнийском университете Сан-Диего.
20. «Design Principles: an Introduction» от Coursera
Длительность: 3 недели = 13 часов на освоение материала.
Формат: видеоролики, текстовые уроки, практические задачи.
План обучения:
Чему научитесь:
Автор: Скотт Клеммер.
21. «Social Computing» от Coursera
Продолжительность: 3 недели = 9 часов на освоение.
Формат: видеолекции, статьи, практические задания.
Программа:
Узнаете:
Автор: Скотт Клеммер.
22. «Input and Interaction» от Coursera
Длительность: 3 недели (9 часов).
Формат: видеоматериалы, текстовые уроки, практические задания.
План обучения:
Узнаете:
Преподаватель: Скотт Клеммер.
23. «Удобство использования: исследования и разработка прототипов» от Coursera
Продолжительность: 4 недели (12 часов).
Формат: видеоматериалы, статьи, практические задания.
Документ об окончании: предусмотрен.
Программа:
Чему научитесь:
Преподаватели:
24. «Информационный дизайн» от Coursera
Длительность: 3 недели (14 часов).
Формат: видеоуроки, статьи, упражнения.
План обучения:
Чему научитесь:
Плюсы:
Преподаватель: Скотт Клеммер.
25. «Разработка, осуществление и анализ экспериментов» от Coursera
Продолжительность: 9 недель (15 часов).
Формат: видеолекции, текстовые уроки, упражнения.
Программа:
Какие навыки приобретёте:
Преподаватели:
26. «Digital Skills: User Experience» от FutureLearn
Длительность: 3 недели.
Формат: видеоролики, статьи, аудио и практические занятия.
Сертификат: выдаётся (платно).
План обучения:
Чему научитесь:
Минусы:
27. «Foundations of User Experience (UX) Design» от Coursera
Продолжительность: 4 недели (25 часов).
Формат: видеолекции, статьи, тесты.
Сертификат: выдаётся (платно).
Программа:
Что узнаете:
Преподаватели: команда Google Career Certificates. Создаёт цифровые продукты, сервисы и программы, которые помогают людям и бизнесу расти.
28. «Start the UX Design Process: Empathize, Define, and Ideate» от Coursera
Длительность: 5 недель (29 часов).
Формат: видеоуроки, статьи, упражнения.
План обучения:
Что узнаете:
Преподаватели: команда Google Career Certificates.
29. «Conduct UX Research and Test Early Concepts» от Coursera
Продолжительность: 4 недели (21 час).
Формат: видеолекции, статьи, упражнения.
Программа:
Чему научитесь:
Преподаватели: команда Google Career Certificates.
30. «Design a User Experience for Social Good & Prepare for Jobs» от Coursera
Длительность: 5 недель (46 часов).
Формат: видеоуроки, статьи, практические задания.
План обучения:
Чему научитесь:
Преподаватели: команда Google Career Certificates.