img
img
15 июня 2022
22 июня 2022
7 мин
79

UX/UI-дизайн: что это и в чём разница

UX — функционал интерфейса, UI ― его внешний вид

img

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

Разница между UX- и UI-дизайнерами

UX — User Experience, опыт пользователя. UX-дизайнеры делают так, чтобы пользователю было удобно взаимодействовать с сайтом или приложением. То есть занимаются его юзабилити (возможность использования). Они проектируют архитектуру, продумывают расположение элементов: меню, кнопок, иконок. Работу UX-дизайнеров мы ощущаем, когда что-то ищем на сайте, заполняем формы.

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

UX- и UI-дизайн связаны. Общая цель — сделать продукт удобным и привлекательным для пользователя. Поэтому часто UX и UI занимается один человек.

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

Принципы UX/UI-дизайна 

✅ Удобство и простота. Важно, чтобы интерфейс был понятным. Пользователь не должен искать нужную опцию, разбираться в структуре и наполнении сайта. Поэтому дизайнеры используют общепринятые иконки — корзины, стрелки скачивания, пятизвездочные шкалы оценки. Делают так, чтобы элементы читались однозначно. 

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

Стив Круг, «Не заставляйте меня думать» Американский программист

Последовательность. Чем предсказуемее интерфейс, тем легче пользователю с ним взаимодействовать. Когда клиент заходит на сайт, он хочет увидеть название бренда, меню, обложку, блоки с услугами и товарами.

Контраст. Каждый элемент сайта должен быть на своем месте, не сливаться с остальными и не мешать им. Например, фон — яркий, а блоки с товарами — нейтральных оттенков. 

Иерархия. У элементов должен быть приоритет. Наиболее заметны — самые значимые, например кнопки, спецпредложения.

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

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

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

Выравнивание по сетке на сайте Skypro

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

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

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

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

На этом этапе составляют CJM — Customer Journey Map, дорожную карту клиента. Она наглядно показывает путь от входа на сайт до покупки. Помогает увидеть, с какими проблемами клиент может столкнуться при взаимодействии с сайтом. Задача UX/UI-дизайнера — предупредить эти проблемы. 

💻 Создавать прототипы. Это схема сайта или приложения с основными блоками. Она показывает, какой контент, иконки и кнопки будут располагаться на экране. Дизайнер составляет прототипы в программах, например в Figma.

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

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

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

💻 Тестировать. Сверстанный сайт переносят на тестовый домен. Чтобы проверить продукт, набирают фокус-группу из целевой аудитории. 

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

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

💡 Что нужно знать и уметь

Важную роль играет насмотренность. Она помогает понимать и разумно применять визуальные тренды. Необходимы и технические знания. Дизайнеры работают в программах:

Figma — в ней продумывают логику интерфейсов, собирают прототипы.

Adobe Photoshop — отрисовывают элементы.

Adobe After Effects — визуализируют анимацию.

Важно разбираться:

В маркетинге. Уметь формировать портрет ЦА, анализировать конкурентов.

Бизнес-аналитике. Решать бизнес-задачи, составлять дорожную карту клиента.

Психологии. Знать шаблоны поведенческих реакций, предугадывать желания.

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

🤝 Какими навыками нужно обладать

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

🎓 Где учиться

Профессию UX/UI-дизайнера осваивают на курсах или самостоятельно. 

Есть бесплатные интенсивы. На них дают основную теорию, но вам придется разбираться в темах и практиковаться самостоятельно.

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

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

Навыки UX/UI-дизайна с нуля за два месяца освоите на курсе «Профессия веб-дизайнер» Skypro. Научитесь работать в Figma, Photoshop, Tilda и других программах и сервисах. Упор на практику: реальные задания от «Перекрестка», Hoff, Qiwi с разбором и портфолио. Карьерный центр поможет составить резюме, подготовиться и назначить собеседования с будущими работодателями.

преподаватели skypro

У всех преподавателей курса — большой практический опыт в дизайне

📖 Что читать

Книги:

Блоги:

Телеграм-каналы:

Перспективы UX/UI-дизайнеров

Средняя зарплата в мае 2022 года — 124 549 ₽. Больше всего дизайнеры получают в Москве, Новосибирске, Санкт-Петербурге. Зарплата зависит от квалификации: например, в прошлом году специалисты высокого уровня (сеньоры, старшие дизайнеры) получали до 200 000 ₽, в этом — 247 500 ₽.

сколько зарабатывает ux/ui дизайнер

Источник: Хабр Карьера

Спрос на UX/UI-дизайнеров растет, потому что компании внедряют диджитал-инструменты. На Хабр Карьере 19 мая 2022 года — 447 вакансий, на хедхантере по России, с упоминанием навыков UX/UI, — 512. 

Лидеры по количеству вакансий: Москва, Санкт-Петербург, Екатеринбург, Новосибирск, Казань.

Главное про UX/UI-дизайн

  • Разница UX и UI в том, что первое — про работу интерфейса, второе — про внешний вид. Вместе дизайнеры делают так, чтобы продуктом было удобно пользоваться. Так как задачи связаны, часто ими занимается один человек. 
  • Принципы UX-дизайна: удобство и простота, последовательность, контраст, иерархия, дистанцирование, выравнивание.
  • Чтобы создать удачный интерфейс, дизайнеры изучают целевую аудиторию, составляют карту путешествия клиента, а затем — прототип сайта. Полагаются на требования заказчика, желания клиентов и свой опыт. Проводят тесты, опрашивают пользователей, чтобы выявить неудобства. 
  • Дизайнеры получают в среднем 124 549 ₽. Профессию относят к перспективным, потому что многим компаниям нужны сайты, приложения и другие продукты. 
  • Основы UX- и UI-дизайна осваивают самостоятельно по видео и бесплатным интенсивам, читают книги, блоги и сообщества, телеграм-каналы. Желательно пройти курсы, чтобы не только изучить теорию, но и попрактиковаться, собрать портфолио. 
img
Подпишитесь на рассылку, чтобы Не упустить что-нибудь новое
Просто и понятно о том, как получить новую профессию


    Дадим нужные знания и поможем получить работу!
    Регистрируйтесь на курс и учитесь у экспертов-практиков.
    Профессия
    за 3 месяца
    Веб-дизайнер

    Курс для новичков, которые хотят с нуля освоить востребованную и творческую профессию, собрать портфолио и потренироваться на реальных проектах.

    3 085 ₽/мес.
    4 059 ₽/мес.
    Ещё по теме
    Как выбрать графический планшет

    Решите, зачем вам нужен планшет. От этого зависят вид устройства, размер и цена.

    15 июня 2022
    12 мин
    На какой платформе создать сайт: обзор лучших конструкторов

    Разбираем плюсы и минусы Wix, Site123 и еще четырех платформ.

    Что такое мудборд, для чего он дизайнеру и как его создать

    Мудборд помогает определить и визуализировать концепцию, уточнить ТЗ.

    18 апреля 2022
    9 мин
    Кто такой веб-дизайнер, чем занимается и как им стать

    Средняя зарплата веб-дизайнера — 86 341 ₽. На доход влияют опыт и регион.

    18 апреля 2022
    7 мин
    Что такое Figma и как с ней работать

    В Figma делают прототипы, интерфейсы, векторную графику, презентации.

    16 апреля 2022
    9 мин
    Как оформить красивую презентацию

    Презентации оформляют не только в PowerPoint: подойдут сервисы Canva, Prezi и другие.

    16 апреля 2022
    8 мин
    Как сделать красивый дизайн сайта

    Типичные ошибки: перегрузить сайт, использовать устаревшие эффекты.

    16 апреля 2022
    8 мин
    Графический дизайнер: кто это, чем занимается и как им стать

    Графический дизайнер передает цели и задачи бизнеса через визуальные элементы.

    13 апреля 2022
    9 мин
    Это реально: из философа — в дизайнера интерфейсов

    История о том, как решиться освоить профессию с нуля и справиться с трудностями.

    Что такое портфолио и как его правильно заполнить

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

    24 февраля 2022
    8 мин
    Что такое Trello и как им пользоваться

    Trello подойдет малому бизнесу, стартапам и фрилансерам с небольшими проектами.

    24 февраля 2022
    7 мин
    Что такое референсы и где их искать

    Референсы нужны, чтобы на примерах чужих работ продумать и согласовать идею.

    24 февраля 2022
    6 мин
    kralbetbetturkeyikimislibahis1xbetm.infohipas.infohttps://www.wiibet.com/restbetcdn.com
    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить