UX дизайн

Что такое UX/UI дизайн на самом деле?

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

Я хочу раз и навсегда поставить точку и простым понятным языком объяснить, что значит «UX/UI дизайн».

UX/UI дизайн на примере точильных камней
Разные типы интерфейсов для заточки лезвий.

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

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

Что такое UX/UI, прямым текстом

(в этом разделе будут банальные фразы)

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

Что такое UX и UI дизайн, другими словами

Прямая обязанность UX/UI дизайнера — это, например, «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?» Нравится или не нравится. Купить или не купить.

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

Вот первый пример: когда Вильгельм Шиккард в 1623 году изобретал арифмометр, он уже был UX/UI дизайнером.

Арифмометр Шиккарда

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

Ещё один более древний и примитивный пример — точильный камень (колесо). Уже даже в раннем средневековье было много разновидностей и механизмов такого колеса:

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

UX/UI дизайн на примере точильных камней

Так вот, когда изобретатель очередного точильного камня думал:

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

А тот человек, который думал, какой величины будет камень, какого цвета выбрать дерево для подставки и чем скрепить деревянные жерди (гвоздями или кожаными жгутами?) и какой длины будет ручка, был UI дизайнером.

И тот способ, каким бы вы затачивали меч — назывался бы интерфейс.

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

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

UX и UI — это не тренды. Технологи развиваются. Спрос на сайты растёт. Цифровые приложения появляются как грибы. А инструменты дизайна и разработки упрощаются настолько, что уже практически любой человек без знания программирования может «на коленке» сделать сайт-визитку. Вот только этот сайт должен как-то выглядеть. И не просто как абстрактный каркас из текста и кнопок. Тут программистам и нужна помощь UX/UI дизайнера.

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

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

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

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

Содержание

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

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

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

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

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

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

Отличия UX от UI

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

Характеристики UX:

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

Характеристики UI:

● фокус на элементах взаимодействия ― кнопках, меню и т. д.,
● влияет на дизайн ― шрифты, картинки, вёрстку и т. д.,
● цель ― сделать удобный дизайн.

Отличия UX/UI-дизайна от веб-дизайна

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

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

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

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

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

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

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

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

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

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

Идея

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

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

Эскиз

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

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

Прототип

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

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

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

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

Удобнее всего, на наш взгляд, сделать прототип именно в Figma, потому что там легко объединить дизайн и разработку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типографика

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

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

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

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

Бесплатные программы, которые помогут в работе с текстом:

● Fontstorage ― библиотека шрифтов,
● Free Faces ― библиотека акцентных шрифтов,
● Typeface ― инструмент для шрифтов на MacOS,
● Fontbase ― инструмент для шрифтов на MacOS, Windows, Linux,
● Типограф ― сервис для вёрстки,
● Wordmark ― сервис по проверке начертания.

Иконки

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

Где можно взять иконки для проекта:

● iconmonstr ― библиотека с бесплатными иконками,
● thenounproject ― библиотека с 3 млн иконок и возможностью доплатить за расширенные возможности,
● iconify ― библиотека с бесплатными иконками,
● fontawesome ― есть бесплатные иконки и возможность доплатить за расширенные возможности,
● Free Icon Maker ― бесплатный сервис для редактуры иконок,
● IconJar ― органайзер пользовательских иконок с бесплатным пробным 14-дневным периодом.

Задачи UX/UI-дизайнеров

У UX/UI-дизайнеров ограниченный, но объёмный пул задач. Рассмотрим, что должен делать UX/UI-дизайнер.

1. Анализ целевой аудитории

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

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

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

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

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

UX дизайн

Посмотрим на историю развития дизайна – как первые эксперименты и попытки стандартизации привели к возникновению UX/UI.

Период Признаки периода Как выглядели сайты Что появилось
Начало 90-х Простейшие инструменты и технологии. Текст одной колонкой, HTML, внутренние ссылки; простое меню, синие ссылки. Веб-сайты, Mosaic. Первые стандарты.
Середина 90-х Появилась примитивная верстка;
Оптимизация страниц под медленный интернет;
Текст в несколько колонок;
Таблицы;
Отделение тела сайта от боковой навигации;
Система навигации.
Фреймовый метод, бесплатные конструкторы сайтов – Angelfire, GeoCities и Expages.
Конец 90-х Flash и графические элементы. Плиточные изображения;
Кислотные цвета;
3D-кнопки;
Мигающий текст.
Flash, анимированный текст, GIF, профессия веб-дизайнера.
Ранние 2000-е Расширились возможности верстки;
Интуитивное размещение контента;
Понятная навигация.
Сайты на CSS – технологии, которая отделила контент веб-страниц от дизайна. Каскадные таблицы стилей (CSS), принципы юзабилити.
Поздние 2000-е Переход от «просто дизайна» к UX/UI; Рост количества сайтов и приложений;
Цифровизация бизнеса.
WEB 2.0;
Широкое использование значков/иконок;
Интерактивный контент.
Мультимедийные приложения, поисковые системы, социальные сети, HTML5, UX/UI.

В конце 2000-х появились UX/UI, ключевыми качествами любого продукта стали удобство и функциональность.

Наши дни

Теперь в дизайне используются Data Driven Design и UX/UI.

Data Driven Design – это дизайн на основе данных: исследований, тестов, гипотез, Big Data. В DDD каждое дизайнерское решение основывается на цифрах и конкретных показателях, а не на субъективном заключении дизайнера.

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

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

UX/UI – что это?

UX и UI – термины родственные и взаимосвязанные, но не тождественные. Между ними есть принципиальная разница.

  1. Путь на сайте
  2. Последовательность действий
  3. Мысли и чувства
  4. Общие впечатления.

UX – это процесс, а UI – это инструмент. UX шире UI и включает в себя это понятие. Но у них одна цель – сделать взаимодействие пользователя с сайтом удобным, приятным и запоминающимся. Пример хорошего UX – Google, у него простой интерфейс и нет ничего лишнего: только логотип, строка поиска и несколько кнопок.

Вводите что-либо в поле поиска и за секунду получаете нужную информацию. Это и есть положительный пользовательский опыт.

UX/UI в цифрах

  • 40% пользователей признались, что не будут пользоваться сайтом, если у него неопрятный вид.
  • 94% посетителей не доверяют сайтам с плохим дизайном.
  • 67% потребителей предпочитают покупать с телефона.
  • 73% топ-менеджеров заявили, что собираются увеличить количество UX-дизайнеров в своей организации в ближайшие пять лет.
  • Средняя зарплата UX-дизайнера в Москве составляет 91 570 рублей в месяц.

Хорошо, когда UX помогает создать визуальную историю, которая ведет пользователя за собой. Такое визуальное повествование со вступлением, основной частью и заключением сделала компания Upstream на главной странице сайта.

Пользователи могут прокручивать сайт до основной части истории, но кратко все три части представлены в первом экране. Визуальные эффекты и текст рассказывают, зачем помогать людям и компании Upstream. Завершается повествование call-to-action – кнопкой Submit. UX здесь ведет пользователя по истории и подводит к логическому действию: просит присоединиться к программе.

Инструменты

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

  • Персонажи
  • Сценарии использования продукта
  • Customer Journey Map
  • Карта эмпатии
  • А/B-тестирование
  • На бумаге
  • В специальных программах — Axure Pro, WireframeSketcher, SketchFlow
  • В графических программах — Photoshop, Illustrator, InDesign
  • Кнопки
  • Иконки
  • Поп-апы
  • Таблицы
  • Чекбоксы
  • Меню
  • Предупреждения (алерты)
  • Ярлыки и лейблы
  • Формы с полями ввода
  • Уведомления
  • Переключатели
  • Галереи
  • Подсказки
  • Пагинация
  • Вкладки и хлебные крошки
  • Прогресс-бары

В UX все определяют аналитика и прототипы, а в UI – базовые правила юзабилити и UX. В аналитике и сборе данных UX сходен с DDD.

Тренды

Увлечение UX/UI породило несколько трендов, которые влияют и на дизайн, и на дизайнеров:

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

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

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

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

Появление множества специализированных инструментов для веб-дизайна: Sketch, Figma, Readymag, Framer и другие. Это облегчило и ускорило работу дизайнерам.

Figma в действии

Вывод

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

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

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

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

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

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

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

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

что такое ux-ui

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

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

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

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

Пример хорошего 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-дизайнера не так уж долог. Профессия предполагает постоянное развитие своих навыков, даже после трудоустройства. И в этом её главный плюс: это по-настоящему вдохновляющая и увлекательная работа для тех, кто привык быть в движении и хочет работать на стыке высоких технологий и человеческой психологии.

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

UX-дизайнер

UX, или User Experience дизайнер, несмотря на название своей профессии, занимается не столько непосредственно дизайном, сколько проектированием. Его задача – сделать так, чтобы тот или иной продукт стал максимально удобен для конечного пользователя. Этим продуктом может быть, например, сайт, декстопное, мобильное приложение. Именно UX-дизайнер отвечает за то, насколько привлекательным будет этот продукт для пользователей, и, соответственно, насколько многие из них захотят совершить целевое действие (например, купить приложение, скачать его, сделать заказ на сайте). Кстати, в 2021 году центр профориентации ПрофГид разработал точный тест на профориентацию. Он сам расскажет вам, какие профессии вам подходят, даст заключение о вашем типе личности и интеллекте.

Экспертные комментарии в статье:

Наталья Кулагина, консультант направления «ИТ&Телеком» международной рекрутинговой компании Hays. Больше о карьере и трудоустройстве UX/UI-дизайнеров – в интервью с Натальей.

Kris Anfalova, UI/UX дизайнер с 12-летним опытом. Работала с такими компаниями, как Tinkoff, ASICS, VK, KFC, Русатом.

Краткое описание: кто такой UX-дизайнер

Хотя термин «UX-дизайнер» появился относительно недавно и применяется чаще всего по отношению к специалистам, которые работают над улучшением пользовательского интерфейса IT-продуктов, примерно такая же по своей сути профессия существовала с незапамятных времен. Любую «настройку» внешнего вида товара, делающую его более удобным для потенциальных покупателей, можно назвать своеобразным UX-дизайном. Разница лишь в том, что современные UX-дизайнеры задействуют в своей работе цифровые инструменты и работают с digital-продуктами.

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

Наталья Кулагина

Особенности профессии UX-дизайнера

User Experience дизайнер, как правило, обладает рядом смежных или надпрофессиональных навыков: разбирается в графическом дизайне, разработке программного обеспечения, проведении социальных исследований. В своей работе он может совмещать обязанности UX- и UI- (User Interface) дизайнера. При этом UX-дизайн связан больше со структурой продукта и комфортом при его использовании, а UI – с внешним видом продукта и удобством его применения (например, приятные глазу сочетания цветов, рациональное и логичное расположение элементов интерфейса, приемлемый размер кнопок и т. п.).

В основные обязанности UX-дизайнера обычно входит:

  • Анализ пользовательских сценариев (изучение того, как ведут себя пользователи, пользуясь продуктом).
  • Создание портрета целевой аудитории.
  • Проведение опросов пользователей.
  • Продумывание логики использования продукта.
  • Разработка кликабельного прототипа продукта.
  • Тестирование прототипа на пользователях, внесение изменений по его результатам.
  • Повторение итераций «разработка прототипа – тестирование – внесение изменений» до тех пор, пока не удастся добиться оптимального для пользователей взаимодействия с продуктом.

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

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

Kris Anfalova

0 0 голоса
Рейтинг статьи

смотреть онлайн дьявольские возлюбленные 3 сезон

новый фильм о гарри поттере проклятое дитя

киноляпы в советских

Ссылка на основную публикацию