Что из перечисленного относится к ux колодца

Все о профессии UI/UX дизайнера

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

Кто такой UX/UI дизайнер

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

Такая профессия имеет долгую историю. Любую настройку внешнего вида товара (упаковка, эргономичность, наружная реклама) можно назвать UI/UX-дизайном, ведь с его помощью конечный продукт становился удобным для покупателя. Разница только в одном — современные UI/UX дизайнеры используют современные инструменты.

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

UI («User Interface») — «пользовательский интерфейс», а UX («user experience») — это «пользовательский опыт». UI-дизайнер отвечает за визуализацию приложения, делая его удобным и функциональным. Дабы продукт с комфортом воспринимался глазами пользователя, специалист UI отвечает за подбор форм, цветов и других параметров. Что касается UX-дизайнера, он в большей степени ответственен за функциональность дизайна. В итоге: приложением легко и удобно пользоваться.

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

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

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

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

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

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

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

UI-дизайнер “дирижирует” объектами в интерфейсе и проверяет:

• правильно ли работает выпадающее меню
• удобно ли нажимать «Заказать»
• хорошо ли читается текст со смартфона
• легко ли заполнять форму
• верное ли сообщение выдает сайт при действии

UI-дизайнер отвечает за то, как выглядит интерфейс продукта и как пользователь взаимодействует с его элементами. Но нужно понимать, что помимо графического интерфейса есть голосовой, тактильный и звуковой. Ими также занимается ui-специалист, но графический — самый распространенный среди его задач.

Обязанности ui/ux дизайнера

Какую работу делать ui/ux дизайнеру определяют обязанности как ui-, так ux-специалиста. Объединив задачи для каждого направления разработки интерфейса, мы получим комплекс для ui/ux специалиста.

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

Основные обязанности дизайнера в UI:

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

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

Основные обязанности дизайнера в UX:

• проведение пользовательских опросов
• создание портрета ЦА
• разработка рабочего прототипа продукта
• создание логической цепочки использования продукта
• тестирование, внесение правок/изменений по его результатам.
• повторять последовательность «разработка прототипа – тестирование – внесение изменений» пока не удастся добиться оптимального взаимодействия для пользователей.

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

1. Выбрать направления в дизайне

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

• Визуальная часть дизайна — визуальные дизайнеры (UI) .
• Логика работы продукта с пользователем, удобный интерфейс, анализ и тестирование — дизайнеры пользовательского опыта (UX) .
• Микс первого и второго с углубленным изучением продукта — продуктовые дизайнеры (Product Design).
• Верстка журналов, листовок, баннеров; айдентика компаний — графические дизайнеры (Graphic Design).

1. Изучить инструменты для работы

Новичкам следует сразу стартовать со Sketch или Figma. Но рекомендуется владеть базовыми навыками в Adobe Photoshop и Illustrator, так как нередко эти программы улучшают, помогают, выручают.

Если уже определились с UI\UX в дизайне, нужно изучить вакансии по данному направлению. В них четко и по списку указываются инструменты, которыми должен владеть кандидат на должность.
Что нужно знать ui/ux дизайнеру и чем владеть:

• Sketch (дизайн интерфейса)
• Figma (дизайн интерфейса с возможностью коллективной работы)
• Adobe Photoshop и Illustrator (дополнительный функционал)
• Adobe XD (создание прототипов, дизайн интерфейса)
• Invision App (создание прототипов с возможностью коллективной работы)
• Balsamiq (создание макетов)
• RedPen (коллективный задачник)
• Notion (менеджер задач)
• Framer (дизайн интерактивных мобильных интерфейсов)

1. Обращать внимание на дизайн. Окружить себя дизайном

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

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

Черпать вдохновение и опыт — это неотъемлемый фактор успешного ui\ux дизайнера. Вот несколько популярных сервисов:

• Awwwards (платформа-премия)
• Behance (платформа-портфолио)
• Dribbble (платформа-портфолио)

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

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

• Artemiy Lebedev, дизайнер, автор «Ководства» — руководства по веб-дизайну
• Tobias van Schneider, ex-дизайнер Spotify.
• Julie Zhuo — вице-президент продуктового дизайна facebook.

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

Перед будущим ui/ux специалистом стоит выбор: смотреть видео-ролики на ютубе, читать книжки и статьи или пройти профильные курсы. Однозначного ответа нет, но второй вариант займет меньше времени и улучшит резюме UI/UX дизайнера. Примером практичного и эффективного обучения является курс INTERACTION DESIGN (UI/UX) в образовательном центре DAN.IT education.

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

Плюсы и минусы в работе ui/ux-дизайнера

Плюсы:

1. Востребованная современная профессия.
2. Достойный уровень заработной платы.
3. Возможность проявить творческие способности.
4. Перспективы развития профессиональных навыков и переквалификации в смежные области.
5. Возможность работать удаленно.

1. Большая ответственность за готовый продукт.
2. Постоянные исследования среди пользователей.
3. Наличие знаний и навыков сразу из нескольких областей.
4. Часто нужно подстраиваться под требования заказчика (не всегда оптимальные).
5. Нередко рутинный режим работы.

Насколько востребован UI/UX дизайнер

Востребованность на рынке труда зависит от опыта, навыков, портфолио. Все это должно быть четко и понятно размещаться в резюме. Первое, чем ui/ux дизайнеру необходимо заняться — это наработать портфолио.

Возможные карьерные пути UI/UX дизайнера:

• дойти до позиции Head of Design;
• освоить программирование (дабы стать UI-разработчиком);
• развиваться как Product Manager (для управления продуктом в целом);
• стать Project Manager (для координации деятельности команды);
• совершенствоваться и повышать рейт (если фрилансер);
• заняться версткой (для заинтересованных технической стороной продукта);
• развиваясь как дизайнер продукта (VR дизайнер, VFX дизайнер, Game дизайнер);
• попробовать себя в маркетинге.

Из личных качеств важны:

• перфекционизм;
• упорность и усидчивость;
• креативное мышление;
• желание учиться и развиваться;
• умение воспринимать критику.

Сколько зарабатывает UI/UX дизайнер

Зарплата UI/UX дизайнера в Украине зависит от компании и от заказчиков. Уровень самого специалиста и опыт его работы также играет значительную роль. Middle получает больше Junior’а, но уступает в зарплате дизайнеру уровня Senior. По мере развития специалист может пройти все эти стадии, а также возглавить работу команды.

В среднем «UI/UX дизайнер» в Украине зарабатывает 25000 грн. Это средний показатель заработных плат по данным из более 90 вакансий, размещенных на главных порталах по поиску работы.

UI/UX дизайнер : обучение с нуля

Только начинаете путь в ui/ux дизайне? Курс INTERACTION DESIGN (UI/UX) в DAN.IT education подойдет как для новичков, так и для тех, кто уже имеет опыт работы с интерфейсами.

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

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

Заключение

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

UX и UI: основные понятия дизайна цифрового продукта

В июне 2017 года корреспонденты Теплицы будут подробно рассказывать о двух формах дизайна цифровых продуктов: опыта пользователя (UX – User eXperience) и пользовательских интерфейсов (UI – user interface). Также мы поговорим о дизайн-мышлении, юзабилити сайта, человек-ориентированном дизайне (human-centered design), сервис-дизайне…

• 05 июля 2017
• 5 мин

Контент-директорка «Теплицы социальных технологий».

В июне 2017 года корреспонденты Теплицы будут подробно рассказывать о двух формах дизайна цифровых продуктов: опыта пользователя (UX – User eXperience) и пользовательских интерфейсов (UI – user interface). Также мы поговорим о дизайн-мышлении, юзабилити сайта, человек-ориентированном дизайне (human-centered design), сервис-дизайне (service design) и посоветуем, как улучшить сайт некоммерческой организации. В этой статье мы разберем основные понятия, которые стоит знать при изучении UX и UI дизайна.

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

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

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

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

UI (User interface) дизайн – узкое понятие, которое включает набор графически оформленных инструментов. Например, кнопки, меню, слайдеры. UI дизайн призван помочь пользователю наладить взаимодействие с сайтом или программой.

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

Термины в UX дизайне

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

2. Контекст анализа использования (Context of Use Analysis) – сбор и анализ подробной информации о потенциальных пользователях. Для этого проводятся интервью, семинары, опросы, работа с фокус-группами.

3. Легко обучаемый (Easy to Learn) – аспект удобства использования. Он призван облегчить пользователям взаимодействие с интерфейсом, при этом потратив минимальное время на его изучение.

4. Эффективность, производительность (Efficiency) – своего рода коэффициент полезного действия, важный атрибут юзабилити сайта. Принцип таков: чем меньше пользователь занял времени и чем меньше приложил усилий, чтобы найти какой-либо элемент на сайте, тем эффективнее продукт.

5. Фасилитатор (Facilitator) – человек, который обеспечивает коммуникацию в группе разработчиков. Он улаживает конфликтные ситуации, следит за проведением встреч и помогает участникам сконцентрироваться на целях. По сути это проводник, который помогает всей команде достичь наилучшего результата, найти общий язык, сформулировать конечную цель. В процессе работы он создает комфортную атмосферу.

6. Фокус-группа (Focus Group) – группы потенциальных пользователей вашего продукта, которые формируются, чтобы получить от них обратную связь. Мнение фокус-групп важно на этапе планирования продукта, сбора всех требований к нему. Участники высказывают свое мнение о прототипах, задачах, стратегиях, выбранных для создания продукта.

7. Информационная архитектура (Information Architecture) – процесс организации информации, который включает структуру, дизайн, макет и навигацию. Он позволяет сотрудникам и пользователям находить нужную информацию и управлять ею. Например, информационная архитектура определяет размещение элементов на странице, их навигацию, связь самих страниц.

8. Интерфейс (Interface) – неотъемлемая часть любого продукта. Это объект, среда, набор инструментов, с помощью которых пользователь взаимодействует с готовым продуктом. Например, кнопки, галочки, текстовые поля, подсказки, переключатели на сайте. По сути, интерфейс ведет за собой пользователя.

9. Совместная разработка (Participatory Design) – процесс, в который включены разработчики, представители бизнеса и пользователи. Все они работают вместе для создания решения. Например, разработчики активно привлекают пользователей к процессу проектирования, чтобы быть уверенными в востребованности функций продукта.

10. Плюралистический подход к юзабилити (Pluralistic Usability Walkthrough) – метод тестирования юзабилити, который используется для оценки дизайна на ранней стадии. В этом тестировании участвуют пользователи и разработчики интерфейса.

11. Прототип (Prototype) – первоначальный дизайн интерфейса или продукта, который нужен для получения отзывов от пользователей, участников проекта и заинтересованных специалистов.

12. Раскадровка (Storyboard) – способ иллюстрирования взаимодействия человека и продукта в описательном формате. Раскадровка может состоять из серии рисунков, эскизов и описания к ним. Она рассказывает историю о том, как пользователь тестирует и оценивает продукт.

Термины в UI дизайне

1. Аффорданс (Affordance) – элемент, который описывает, куда кликают пользователи. Не всю информацию на сайте можно передать словами, именно аффордансы стрелок помогают пользователю понять, что будет, если он нажмет на какую-либо кнопку. Правильное использование этих элементов поможет улучшить интуитивность интерфейса.

2. Каскадные таблицы стилей (Cascading style sheets, CSS) – так называется формальный язык. Он используется для описания внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML. CSS используется, например, для того, чтобы задать шрифт, цвет и расположения отдельных блоков на веб-страницах.

3. Система управления контентом (Content management system, CMS) – программа, которая позволяет совместно создавать, редактировать и управлять контентом на сайте.

4. Анимация (Animation) – моделирование движения путем быстрого появления изображений в последовательности.

5. Навигация, меню (Navigation) – это форма, система ссылок, которая позволяет пользователю перемещаться по сайту либо приложению.

6. Пустое пространство (Negative Space) – часть страницы, которая не содержит текста или изображения.

7. Метки (Labels) – названия для кнопок и других элементов для навигации по сайту.

8. Путь (Path) – маршрут, который проходит пользователь на веб-сайте.

9. «Что видишь, то и получишь» (What you see is what you get) – это свойство веб-интерфейсов или программ, в которых макет выглядит похожим на конечную продукцию и может быть представлен в виде печатной версии или презентации. Такую функцию выполняют «визуальные редакторы».

Основные термины UX дизайна перечислены в справочнике Usability Body Knowledge, а UI – на образовательном сайте Usability.gov

Что такое UX/UI-дизайн и как попасть в эту профессию

Рассказываем, кто такой UX/UI-дизайнер, чем он занимается и какие ему нужны знания.

Иллюстрация: Оля Ежак для Skillbox Media

Елена Нексман
UX/UI- и веб-дизайнер. Делает сложные вещи простыми и пишет об этом.

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

Из материала вы узнаете:

• что такое UX и UI;
• как строится работа над UX;
• когда начинается работа с UI;
• как стать UX/UI-дизайнером в IT-компании;
• где искать заказчиков.

Что такое UX/UI?

Аббревиатура UX расшифровывается как user experience ― «пользовательский опыт». Простыми словами, это то, каким образом пользователь взаимодействует с интерфейсом и насколько сайт или приложение для него удобны. UX/UI-дизайнеры востребованы в IT-сфере, поскольку интерфейсы, которые готовят программисты, должны быть не только красивы, но и понятны.

В UX входит навигация по сайту, функционал меню и результат взаимодействия со страницами. Это не только «костяк» сайта ― его структура, ― но и коммуникация: диалоговые окна, функционал кнопок, настройки поиска и форм. Именно от качества UX зависит то, насколько быстро пользователь сможет получить то, зачем он пришёл на сайт.

UI ― это user interface, пользовательский интерфейс, проще говоря ― оформление сайта: сочетания цветов, шрифты, иконки и кнопки.

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

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

Однако вместе с тем есть некоторые типы проектов, в которых больше важен UX, а в некоторых ― UI:

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

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

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

Само понятие UX впервые было сформулировано только в начале девяностых. Его придумал психолог и проектировщик Дональд Норман, который в то время присоединился к команде Apple. Он описал этот термин в своей книге «Дизайн привычных вещей». Компания Apple с самого начала уделяла большое внимание юзабилити , и её интерфейсы до сих пор считаются одними из лучших.

План разработки продукта по принципам UX/UI-дизайна

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

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

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

В разных командах работа над сайтом или приложением может строиться по-разному. Однако можно выделить общие этапы работы над проектом.

1. Сбор информации

На этом шаге нужно получить как можно больше информации от клиента ― через бриф или интервью.

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

Инструкцию, как правильно составить бриф на разработку дизайна, читайте в этом материале.

Всю эту информацию можно сохранить в обычном текстовом редакторе и уже на этом этапе схематично набросать структуру продукта.

2. Аналитика

Далее следует изучить конкурентов заказчика ― список указанных клиентом компаний затем можно расширить, поискав самостоятельно. Задача:

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

Также на этом этапе определяют и анализируют целевую аудиторию, описывают её поведение и то, как она принимает решения. В крупных компаниях подобную информацию может предоставить отдел маркетинга. Однако если проект небольшой с ограниченным бюджетом, этот труд ложится на плечи заказчика и дизайнера. Для UX/UI важно, как именно аудитория совершает покупки ― рационально или эмоционально ― и на какие триггеры обращает внимание: цена ли это, уникальность, доступность.

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

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

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

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

3. Структура сайта

На этом этапе определяются задачи сайта и разрабатывается карта пользовательских путей Customer Journey Map (CJM) ― в ней прописываются все сценарии взаимодействия пользователя с ресурсом. Обычно у сайта есть одна главная задача ― например, покупка. Однако в CJM нужно предусмотреть и взаимодействие с другими страницами.

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

Карту пользовательских путей можно сформировать:

• в Excel или «Google Таблицах» в виде таблицы;
• в программе XMind или онлайн-сервисе Miro в виде майндмэпа;
• в специальных онлайн-конструкторах карт пользовательских путей ― например, Canvanizer.

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

4. Прототип сайта

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

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

• поведение целевой аудитории;
• сценарии взаимодействия с сайтом;
• разработанная структура сайта;
• удачные «фишки» конкурентов.

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

Работа с прототипами в Figma:

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

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

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

5. Работа с контентом

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

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

О работе с текстом с точки зрения UX читайте в этой статье.

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

6. Дизайн ― UI

После того как прототип готов, начинается работа с UI ― дизайнер переходит к разработке визуальной оболочки сайта. Задачи UI включают:

• Подбор фирменных шрифтов и цветов ― на основе предыдущих исследований аудитории. В некоторых случаях они прописаны у заказчика в брендбуке, но, как правило, чёткие инструкции есть только у крупных компаний. При разработке небольших сайтов или промостраниц дизайнер использует собственные исследования.
• Разработка набора базовых элементов сайта: иконок, кнопок, полей ввода, строки поиска. В случае крупных проектов они могут быть объединены в UI-кит, над которым потом будут работать и другие дизайнеры.
• Визуализация механики взаимодействия пользователя с интерфейсом. На этом этапе прорабатывается необходимая анимация и микровзаимодействия. Например, увеличение баннеров при наведении мышки или анимация кнопок после нажатия.

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

Круговые надписи, градиенты и неоновый отсыл к девяностым ― яркие тренды этого года. Читайте полный обзор трендов UX/UI в этом материале.

7. Тестирование

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

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

Тестирование может происходить в двух форматах:

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

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

Некоторые распространённые ошибки в проектировании интерфейсов мы показываем в этой статье.

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

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

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

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

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

Можно ли стать UX/UI-дизайнером с нуля?

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

Если же вы ещё не занимались дизайном, то параллельно с теорией дизайна нужно будет освоить графические программы. Главные из них:

• Figma ― основной инструмент для создания прототипов и дизайна;
• Adobe Photoshop ― нужна для отрисовки сложных растровых изображений;
• Adobe Photoshop Lightroom ― потребуется для обработки фото, которые вы потом поставите в макет;
• Adobe After Effects ― редактор для визуализации анимации сайта.

Какие знания нужны для UX/UI?

• Маркетинг. Необходимо уметь составить портрет целевой аудитории, оформить уникальное торговое предложение, сделать анализ конкурентов.
• Аналитика. Важно владеть методологиями анализа бизнес-задач и знать, как составить карту пользовательских путей для достижения целей этих задач.
• Психология. Поможет использовать паттерны поведения пользователей и принципы визуального восприятия.
• Технические знания. Вся работа производится в компьютерных программах, без них ― ничего не получится.
• Насмотренность. Позволит отслеживать современные визуальные тренды и применять их на практике.
• Принципы вёрстки. Необходимы для взаимодействия с верстальщиком во время передачи ему макета сайта.

Мы спросили у действующих UX/UI-дизайнеров, как они попали в профессию, и вот что они нам рассказали.

Как научиться UX/UI?

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

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

Главное (и единственное) достоинство бесплатных уроков ― цена. Среди них сложно выбрать качественный контент, они не предполагают ни консультаций по материалу, ни обратной связи по выполненным заданиям.

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

Что почитать по UX/UI?

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

Одна из наиболее авторитетных книг по работе с интерфейсами ― «Дизайн привычных вещей» Дональда Нормана. Мы бы советовали начать с неё ― она заложит фундамент для понимания UX-процессов.

Обзор книги «Дизайн привычных вещей» и главные принципы проектирования Дональда Нормана читайте в нашей статье.

Есть и менее очевидные издания. Так, например, исследование Иоханнеса Иттена «Искусство цвета» было написано более полувека назад. Однако именно эти принципы могут дать основу для хорошего UI.

Основы теории цвета из книги Иоханнеса Иттена мы описали в этом материале.

Когда Артемий Лебедев писал своё «Ководство», термины UX и UI ещё не были широко распространены. В своих небольших статьях, собранных под одной обложкой, Лебедев разбирает и принципы проектирования интерфейсов, и визуальные приёмы дизайна, и типографику. Книга пережила несколько переизданий и до сих пор остаётся актуальной.

Также мы рекомендуем эти книги:

• Алан Купер, «Психбольница в руках пациентов»;
• Стив Круг, «Не заставляйте меня думать»;
• Аарон Уолтер, «Эмоциональный веб-дизайн»;
• Люк Вроблевски, «Сначала мобильные!»;
• Брэдли Хизер, «Дизайнь. Современный креатифф»;
• Джанда Майкл «Сожги своё портфолио».

Кроме изданий о дизайне, будет полезно почитать книги по логическому мышлению, статистике, маркетингу ― в общем те, которые раскрывают особенности человеческой логики, развивают мышление и способность анализировать.

В интернете есть журналы, целиком посвящённые UX/UI. Кроме нашего сайта, мы рекомендуем «Дизайн-кабак», UX Journal и «Дайджест продуктового дизайна».

Где искать клиентов?

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

• на сайтах вакансий ― например, HeadHunter;
• в профильных группах соцсетей;
• в разделах вакансий различных интернет-изданий ― например, VC.ru, «Хабр Фриланс»;
• в нашем еженедельном дайджесте вакансий всегда есть предложения для UX/UI-дизайнеров, в том числе и начинающих. Проверяйте главную страницу нашего журнала по понедельникам.

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

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

Больше интересного про дизайн — в нашем телеграм-канале. Подписывайтесь!

Термин, от английского слова use ― «использовать». Юзабилити называют удобство использования продукта.

Юзабилити напрямую связано с UX ― без чёткой проработки пользовательского опыта продукт не будет удобен. В промышленном дизайне аналог этого термина ― эргономичность.