Длительность

29 минут

Опыт

С нуля

Лена Куликова

Дизайн-директор в «Райффайзен банке»

Бесплатно

Освоить навык

UX/UI-дизайнер. Введение в профессию. Демо

Убедитесь, что начинать — нетрудно

Что здесь происходит

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

Чему научитесь

Узнаете, над какими задачами работает UX/UI-дизайнер

Поймете, подходит ли вам эта профессия

Увидите, куда сможете двигаться по карьерной лестнице

Программа

О лекторе и курсе

Лена Куликова

Дизайн-директор в «Райффайзен банке

Отвечает за внешний вид и удобство всех интерфейсов компании. С нуля построила процессы и единые стандарты работы дизайнеров, наняла команду более 70 человек.

Преподаватель

Интро в блок «Введение в профессию UX/UI-дизайнера»

Что такое дизайн. Сферы дизайна

Что такое UX и UI

Краткая история развития UX/UI-дизайна

С чем работает UX/UI-дизайнер

Задачи и инструменты UX/UI-дизайнера

Рынок профессии UX/UI-дизайнера

Компетенции UX/UI-дизайнера

Список полезных ресурсов от Елены Куликовой

Заполните форму, чтобы начать обучение

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

Уроки

Интро в блок «Введение в профессию UX/UI-дизайнера»

Что такое дизайн. Сферы дизайна

Что такое UX и UI

Краткая история развития UX/UI-дизайна

С чем работает UX/UI-дизайнер

Задачи и инструменты UX/UI-дизайнера

Рынок профессии UX/UI-дизайнера

Компетенции UX/UI-дизайнера

Список полезных ресурсов от Елены Куликовой

Интро в блок «Введение в профессию UX/UI-дизайнера»

Знакомство с преподавателем. Тематический план блока.

Презентация

Что такое дизайн. Сферы дизайна

Если говорить о дизайне как о процессе, то это прежде всего проектирование.

Дизайнер — это конструктор, который создает функциональные и эстетические свойства различных объектов. Это деятельность на стыке творческой составляющей и технической.
Дизайн как готовый результат — это всё, что мы видим вокруг себя.

Рассмотрим основные направления дизайна:

Дизайн физической среды.
Дизайн вещей.
Графический дизайн.
Цифровой дизайн.

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

Презентация

Что такое UX и UI

Аббревиатура UX расшифровывается как User Experience, а UI — как User Interface. Простыми словами, UX — это то, каким образом пользователь взаимодействует с интерфейсом и насколько сайт или приложение для него удобны.

Когда мы говорим о UI, то, как правило, имеем в виду оформление интерфейса — сочетания цветов, шрифты, иконки и кнопки.

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

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

UI одного и того же сайта может быть кардинально разный. UI несет информацию о характере бренда. При этом UI сильно влияет на UX.

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

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

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

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

Презентация

Краткая история развития UX/UI-дизайна

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

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

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

В 90-е компьютерная графика начала мощное развитие. Компьютеры становились всё доступнее, в них начал появляться цвет.

С этого момента разработка дизайна взаимодействия с пользователем стала неотъемлемой частью работы над интерфейсом.

Дональд Норман — первый UX-дизайнер. Он придумал термин «UX-дизайн».
В 90-е активно развивался интернет, появились поисковые системы и создавалось всё больше веб-сайтов. Однако более или менее прилично они начали выглядеть уже после 2000-х годов. Со временем появился фокус на UI как на визуальной составляющей и отдельная профессия UI-дизайнера.

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

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

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

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

Презентация

С чем работает UX/UI-дизайнер

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

Рассмотрим основные интерфейсы, с которыми работает UX/UI-дизайнер:

Самый распространенный интерфейс — это любые страницы в интернете, от лендингов до больших сложных магазинов и облачных программ.
Не менее популярны мобильные приложения. Их количество растет каждый день. Главное отличие от веба — сенсорный экран, который реагирует на разные жесты и нажатия.
Часы. Они сильно отличаются размером от мобильных телефонов, менее популярны, и у них свои особенности.
Десктоп-приложения — это всё, что ставится на компьютер. Например, Photoshop, Excel, Zoom.
Приложения в телевизоре управляются с помощью пульта или голоса. Их не очень много, в основном это онлайн-кинотеатры типа Иви или «Кинопоиска».
Банкоматы и терминалы. Как правило, они имеют сенсорный экран. Обычно это устройства в городской среде, для которых нужно делать интерфейс очень минималистичным.
Когда мы играем в любую игру на компьютере, приставке или телефоне, в ней тоже есть интерфейс. Это особое направление UX/UI-дизайна, где могут потребоваться навыки иллюстрирования.
Приборные панели. Дизайн должен быть моментально понятен, чтобы не отвлекать водителя.

Презентация

Задачи и инструменты UX/UI-дизайнера

Рассмотрим основные этапы работы дизайнера:

Этап 1. Анализ и исследование Работа UX/UI-дизайнера всегда начинается с понимания пользователя и его потребностей. Даже если это бизнес-задача, продукт любой компании несет для клиента какую-то ценность. Дизайнер должен понимать какую. Нужно четко знать, для кого он проектирует интерфейс и какие потребности есть у пользователя.
Этап 2. Построение пути пользователя Когда дизайнер понимает целевую аудиторию, ему нужно построить путь пользователя в виде схемы, чтобы представлять, какие будут макеты приложения в дальнейшем.
Этап 3. Создание макетов и интерактивных прототипов Большой и важный шаг в работе UX/UI-дизайнера — это проектирование макетов. Макет — это визуальный образец будущего экрана. Они бывают разной сложности. После того как макеты готовы, UX/UI-дизайнер делает прототип. Это интерактивный макет, который имитирует реальное взаимодействие человека с будущим интерфейсом. Прототип нужен для того, чтобы протестировать решение на пользователях, убедиться в том, что всё удобно и понятно. Желательно делать их максимально приближенными к реальности. На этом этапе можно добавлять анимацию.
Этап 4. Тестирование интерфейса Это процесс проверки макетов на удобство использования и простоту восприятия. Дизайнер участвует в проверках своего решения вместе с исследователем и проводит небольшие тесты сам. Нужно, чтобы пользователь мог выполнить свой сценарий без ошибок.
Этап 5. Ревью разработки UX/UI-дизайнер, как правило, не может превратить прототип в живую программу, которой можно пользоваться. После того как экраны протестированы на людях, они передаются в разработку. Разработчик получает макеты дизайнера и должен собрать их в коде. Не всегда получается реализовать макеты в соответствии с задумкой дизайнера в силу некоторых нюансов. Поэтому дизайнер должен всегда проверять соответствие разработанных экранов дизайн-макетам. Этот процесс называется дизайн-ревью или ревью разработки.

Инструменты UX/UI-дизайнера:

Figma — инструмент проектирования. Без него сложно представить работу дизайнера. В нем макеты создаются и затем передаются разработчикам. А еще можно делать анимированные прототипы.
Miro и FigJam — рабочие доски для обсуждений, на которых очень легко собирать схемы пользовательского пути. Можно выбрать один из них для командной работы.
Tilda — конструктор, который позволяет собирать сайты без знания кода. Он полезен дизайнеру, чтобы собрать собственный сайт-портфолио, а также многие бизнесы выбирают для себя это решение, чтобы не тратить время и деньги на разработку.

Презентация

Рынок профессии UX/UI-дизайнера

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

Одинаковые профессии, но разные названия

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

2. Узкоспециализированные профессии
UX- и UI-дизайнеры могут существовать по отдельности и заниматься только проектированием или только визуалом. Это узкоспециализированные профессии с упором на какую-то конкретную составляющую.
UX-дизайнер также может называться UX-архитектором.
К узкоспециализированным профессиям относятся также направления дизайна интерфейса для конкретных носителей и платформ. Например, дизайнер может заниматься только веб-сайтами и сервисами, в таком случае он будет называться веб-дизайнер.
А также отдельное направление — дизайн мобильных приложений, где все задачи касаются только этого типа носителей.

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

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

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

Презентация

Компетенции UX/UI-дизайнера

В этом уроке вы узнаете какими главными компетенциями и навыками должен обладать UX/UI-дизайнер. Компетенций и навыков UX/UI-дизайнера довольно много. Условно их можно разделить на пять групп:

Проектирование.
Визуальный дизайн.
Редактура.
Пользовательские исследования.
Коммуникации в команде.

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

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

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

Для этого дизайнер описывает принципы и использует одинаковые элементы. Эта библиотека элементов называется UI-kit. Нужно уметь пользоваться готовыми библиотеками и уметь создавать собственные.

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

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

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

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

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

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

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

Презентация

Список полезных ресурсов от Елены Куликовой

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

Дизайн-директор. Канал Лены Куликовой о визуальном дизайне и управлении им.
SMPTMS.VTM. Канал с визуальными витаминами. Повышает насмотренность во всех сферах дизайна.
Редач. Канал о тексте для UX-редакторов и дизайнеров.
Дайджест продуктового дизайна. Юрий Ветров собирает свежие статьи, инструменты, паттерны и тренды с 2009 года.
Адовый UX. Канал с примерами плохого UX и нецензурной лексикой.

Книги

Максим Ильяхов, Людмила Сарычева «Пиши, сокращай: Как создавать сильный текст». Книга о том, что такое хорошо и что такое плохо в информационных, рекламных, журналистских и публицистических текстах.

Сериалы

The Playlist / Против гигантов. Мини-сериал про то, как появился Spotify. Не про дизайн, но про то, какую важную роль он играет в продукте, и про то, что для хорошего продукта нужен не только дизайн.

Сайты

Nielsen Norman Group. Сайт исследовательской и консалтинговой компании в области UX. Есть много статей про исследования пользовательского опыта, на которые можно опираться при разработке решений.
Behance. Сайт с работами по дизайну всех направлений. Здесь можно смотреть примеры хорошего дизайна, развивать насмотренность и вдохновляться.