Что такое UX/UI-дизайн – отличие от web-дизайна

UX/UIВеб-дизайн 29.08.2020

Что такое UX/UI-дизайн – отличие от web-дизайна

Чем быстрее растет цифровая индустрия, тем более востребованной становится профессия UI/UX дизайнера. Но что на самом деле значит эта аббревиатура и в чем ее отличие от Web-дизайна?

Что это, UX- и UI-дизайн — расшифровка основных понятий

UX- и UI-дизайн — это проектирование любых пользовательских интерфейсов, в которых важны как внешний вид, так и удобство использования. Под интерфейсами чаще всего понимают мобильные приложения и сайты.
UX — это User Experience («опыт пользователя»). Это то, как пользователь взаимодействует с продуктом. Достижима ли его цель (например, приобрести товар в онлайн-магазине), насколько просто или сложно это сделать. UX-дизайнер отвечает на ряд вопросов: сколько шагов должен сделать человек для регистрации на сайте? А сколько, чтобы купить товар? И как показать, что операция прошла успешно?

что такое ux-ui

Пример хорошего UX- дизайна. Все продумано и организовано, сайт интуитивно понятен, и пользователь легко достигнет своей цели: покупки в онлайн-магазине.

пример плохого ux-ui

Плохой пример UX- дизайна. Много визуального шума. 

UI это User Interface (т.е. «пользовательский интерфейс»). Это все, с чем человек взаимодействует при использовании цифрового продукта: от цвета иконок до звукового сопровождения или анимации. Дизайнер интерфейсов заботится о внешнем виде продукта и его интерактивном дизайне.

пример ux-ui дизайна

Пример хорошего UI-дизайна: анимация жидкого меню выглядит интересно и ярко.  

Говоря простыми словами, UX отличается от UI тем, что UX – это общее ощущение опыта, а UI – то, как выглядит продукт.

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

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

пример хорошего ux-ui

Хороший пример дизайна — начальная страница Google. У неё простой интерфейс и нет ничего лишнего: логотип, строка поиска и несколько кнопок. Вы пришли за информаций — и понимаете, куда ввести слова, что нажать. 

История UX/UI-дизайна

В 70-ые годы XX века графические интерфейсы, используемые сегодня, не существовали. Общение с компьютером требовало навыков программирования и происходило через интерфейс командной строки.

И только в 80-ые годы программисты из Xerox PARC разработали GUI первый графический интерфейс пользователя. Благодаря этому люди смогли общаться с компьютером не через строку кода, а с помощью иконок, меню и кнопок.

история ux-ui дизайна

Уже в 1984 году Apple Computer выпустила Macintosh — первый коммерчески успешный домашний компьютер, в котором была мышь «наведи и нажми». Началась революция в области персональных компьютеров, а в 1993 году Дональд Норман, работая в Apple, придумал термин «User Experience»:

«Пользовательский опыт охватывает все аспекты взаимодействия конечного пользователя с компанией, ее услугами и продуктами»

примеры ux-ui в истории

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

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

пример ux-ui норман

Пример из книги Д. Нормана “Дизайн привычных вещей”. Вы понимаете, как открыть эти двери? Нужно толкать или тянуть? Такой дизайн двери, по словам Нормана, является плохим примером UX. Взаимодействие с пользователем не продумано, вещь в применении неудобная.

Технологии развивались, в жизнь обычного человека входила более дешевая компьютерная техника. Появилась необходимость в проектировании доступных и простых для понимания интерфейсов. Вы помните уродливые интернет-сайты? А дизайн первых Windows? Техника казалась чуждой, поэтому компании поняли: устройства должны быть приятны, а не сложны и неуклюжи в использовании.

Быть веб-дизайнером, делающим сайты, стало недостаточно.

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

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

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

Пример хорошего UX. Изображение показывает, какие данные нужно ввести и как это будет выглядеть. Всё просто и понятно. 

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

Нет четкого определения веб-дизайна.

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

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

Веб-дизайнер создает макеты сайтов (дизайн лендингов, сайтов-визиток, дизайн типовых шаблонов) и не проводит аналитической работы, как если бы это сделал UX/UI-дизайнер.

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

Или могут стать UX/UI-дизайнерами (на наших курсах мы обучаем UX/UI, подробности тут), что сейчас более востребовано.

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

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

Основные задачи UX-дизайна:

  • Разработка стратегии и структуры. Сбор и анализ информации о пользователях и основных конкурентах продукта, определение цели и пожеланий клиентов. Анализ похожих предложений на рынке. UX-дизайнер в команде с другими специалистами всё это анализирует и находит наиболее подходящий способ решения проблемы.
  • Создание варфреймов и прототипирование. В ходе тестирования и разработки прототипов можно определить, а затем исправить проблемные места взаимодействия пользователя с интерфейсом.
  • Разработка и анализ.

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

разработка ux-ui

Вайрфрейм — это низко детализированное представление дизайна.


Прототип — это детализированное представление конечного продукта, которое имитирует взаимодействие человека с интерфейсом.

Основные задачи UI-дизайна:

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

Как стать UX/UI? С чего начать?

Начнем с курсов

Это наиболее оптимальный по времени и объёму материала способ получить профессию UX/UI-дизайнера.

Ранее мы уже подробно разбирали, как следует выбирать курсы по дизайну тут, но, если кратко, вот моменты, на которые следует обратить внимание:

  • Практическое обучение.
  • Акцент на создание портфолио.
  • Обратная связь с преподавателями.
  • Преподаватели — опытные дизайнеры.
  • Советы и помощь в поиске работы.

ux-ui пример работы

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

Самостоятельное обучение

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

В навыки UX/UI-дизайнера входят:

  • эмпатия (понимать, что нужно пользователям);
  • дизайн-мышление;
  • насмотренность (стимулы для вдохновения можно искать на Dribbble, Uplabs, Behance, Pinterest);
  • знание инструментов (например, Figma, Sketch, Illustrator).

Найти себе наставника

Лично написать или, как вариант, следить за дизайнером, чьи работы вам очень нравятся. Анализировать их, пытаться понять, почему они сделаны именно так. Если не знаете, где найти ментора, можно связаться с одним из наших преподавателей: они всегда готовы помочь! Так, в нашей школе есть общий чат выпускников, в котором преподаватели дают советы, а выпускники активно поддерживают друг друга: кидают доступные вакансии или поддерживают друг друга в тех или иных проектах.

Практика, практика и еще раз практика!

Лучший способ научиться – это делать.

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

Если есть сомнения в выборе дизайн-направления, на нашем сайте можно пройти тест “Подойдет ли тебе работа дизайнером?” 😉

Удачи!

Хотите быть в курсе событий?

Подпишись на e-mail рассылку! Там всё только по делу-)

    Email