41 термин в дизайне, полезный для ux-исследователя

Нужно знать

UI —

если простым языком, это то, как интерфейсы выглядят

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

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

1. Текстовая иерархия;
2. Правила внутреннего и внешнего;
3. Композиции;
4. Визуальный баланс;
5. Консистентность и отсутствие дыр;
6. Ассоциации и образы вместо шума;
7. Шрифты и шрифтовые пары;
8. Правила типографики;
9. Сетки;
10. Подготовка к верстке (UI-kits и компоненты);

UX —

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

1. Cбор информации с ответственных лиц;
2. Изучение бизнес процессов и задачи;
3. Генерация гипотез;
4. Проведение проблемного интервью;
5. Метод персон;
6. Построение пути пользователя через CJM, Storyboard, Userflow;
7. Прототипирование в Figma;
8. Анимация прототипирования для user testing;
9. Написание функциональных требований. Ниже мой пример.

https://docs.google.com/document/d/15OiyqZMonS6BoywLvFJCfOKteZI07Pf5fo8FJEEJtH8/edit#

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

Нужно ли знать верстку (html и css)

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

1. Сайт верстается по сетке из вертикальных колонок, условных горизонтальных, и квадратной пиксельной сетке (лучше 8px).
2. Верстальщики думают блоками и эти блоки не могут наслаиваться друг на друга.
3. Верстальщики все строят в системе цифр, это значит, что кнопка всегда должна быть одного и того же размера, так же, как и текст внутри нее должен всегда иметь одинаковые отступы по бокам внутри кнопки. Все обобщается в смысловые блоки и отступы этих блоков друг от друга всегда одинаковые.
4. Нужно уметь создавать UI-kits с системой отступов (описанной выше).

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

Разница между Веб-дизайном и UI/UX дизайном

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

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

Веб-дизайн, в свою очередь, ориентирован ИСКЛЮЧИТЕЛЬНО на Веб, то есть на сайты. Также к веб-дизайну можно отнести разработку рекламных баннеров, креативных промо-материалов и так далее. UX/UI дизайн может выходить далеко за пределы веб пространства, поскольку интерфейсы есть не только у сайтов, а например, у банкоматов, телевизоров, панелей приборов и так далее. В этом и есть основное различие между веб-дизайном и UX/UI дизайном.

Помимо этого, UX/UI дизайн всегда опирается на анализ и работу с целевой аудиторий. Нельзя просто так взять и нарисовать «красивый» интерфейс. Интерфейс должен быть в первую очередь УДОБНЫМ. А для этого нужны определенные исходные данные, на основе которых будет разрабатываться дизайн интерфейса.

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

Разделение понятий «веб-дизайн» и «UX/UI дизайн» имеет огромный смысл для работодателя, поскольку он ищет себе в штат тех, кто на 100% мог бы закрыть потребности бизнеса. По этой причине, на сайтах по поиску работы вы практически не встретите вакансий «Веб-дизайнер», зато вакансий «UX/UI дизайнер» будет предостаточно.

Если же вы хотите работать на себя (фриланс) и разрабатывать дизайн сайтов для обычных людей, то в этом случае лучше называть себя по-простому — «Веб-дизайнер». Дело в том, что название «Веб-дизайнер» на слуху практически у всех людей и каждый может понять кто вы и чем занимаетесь.

Если же вы назоветесь UX/UI дизайнером, то у обычных людей скорей всего возникнут вопросы: «Кто вы такой и чем занимаетесь?». Просто потому, что выражение «UX/UI дизайн» знакомо лишь тем, кто так или иначе связан с IT.

Лично мне не нравится название UX/UI дизайнер, потому что эти аббревиатуры несут очень мало смысловой нагрузки. По мне куда более выигрышней звучит «Дизайнер интерфейсов».

Зачем придумали это различие UI от UX?

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

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

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

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

Как тренировать UI

Повышайте уровень насмотренности. Но не просто смотреть и старайтесь запомнить, а именно повторяйте, копируйте. Т.е. план действия примерно такой:

1. Завести файл в Figma.
2. Положить работу с dribbble, которая нравится.
3. Начинать повторять на глаз аналоговый интерфейс. Нельзя накладывать текст и объекты сверху на аналог. Стараться попадать самим через глазомер.
4. Анализировать как ваши знания по UI работают в этом аналоге.

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

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

Сначала определим ключевые навыки этого специалиста.

Работа с графическими и видеоредакторами

• Figma — онлайн-сервис для разработки макетов и прототипирования.
• Adobe After Effects — программное обеспечение для работы с видео и анимацией.
• Invision — платформа для разработки макетов интерфейсов.
• Adobe Illustrator — графический редактор.
• Keynote — программа для подготовки презентаций.
• Tilda — конструктор сайтов, не требующий навыков программирования.

Вёрстка адаптивных макетов для разных носителей

Дизайн адаптивных сайтов рассчитан на просмотр с компьютера, планшета и телефона. Задача UI-дизайнера — сохранить гармонию и юзабилити сайта на любом носителе.

Работа с типографикой

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

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

Проведение исследований и проверка гипотез

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

Аналитика цифровых продуктов

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

Презентация проектов

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

Насмотренность 

Насмотренность позволяет быстрее и точнее подобрать решение для продукта. А также расширяет ваш пользовательский опыт и позволяет лучше чувствовать потребителя. Тренировать насмотренность можно на Behance, Dribbble, Awwwards и других ресурсах.

Бесконтактное взаимодействие

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

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

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

В августе 2020 года Apple получила патент, в котором описаны достаточно интересные возможности для будущих моделей AirPods Pro. Среди них и возможность управления беспроводными наушниками с помощью «жестов в воздухе». 

Кому стоит пройти обучение по UX дизайну

• Графическим и веб-дизайнерам – изучите сервисный UX-дизайн и сможете воплощать красивые, мягкие, продуманные и результативные интерфейсы. На практике увидите силу Data-driven подхода, в итоге сможете повысить качество своих решений.
• Арт-директорам – Освоите Data Driven Design на практике, сможете системно выстраивать и развивать весь CJM и апргейдить его с помощью A/B-тестов. А еще повысите скорость разработки продуктов с помощью дизайн-систем.
• Product-менеджерам – прокачаетесь в сервисном и UX-дизайне. Научитесь ресечить пользовательский опыт и разберетесь, как решать задачи бизнеса с помощью UX и связывать результаты с метриками. Сможете повысить продуктивность работы команды.
• UX-дизайнерам – прокачаете навыки в создании CJM и сможете проектировать сложные дизайн-системы для сайтов и приложений. Научитесь проводить исследования, копирайтить понятные интерфейсные тексты, эффектно презентовать работу заказчику. Станете более востребованным специалистом.

Продуктовый дизайнер от Тинькофф + Skillbox – почувствуй себя дизайнером в продуктовой компании

Здесь вы научитесь продумывать бизнес-стратегию, работать с digital-командой, проводить исследования и проектировать дизайн-системы. Сможете создавать классные продукты и зарабатывать от 80 000 рублей.

Автор курса: Команда продуктовых дизайнеров Тинькофф при поддержке учебного центра Skillbox

Для кого: желающих прокачаться в создании и развитии продуктов: от идеи до выхода на рынок

Объем курса: 4 месяца, 17 тематических модулей, диплом

Стоимость: 70 000 ₽

Фишка: боевой опыт серьезной работы в команде с опытными продуктовыми дизайнерами

Изучить курс: https://skillbox.ru/course/product-designer/

Где найти UI дизайнера на проект?

• Посмотрите резюме специалистов в каталоге дизайнеров интерфейсов на сайте Кадроф.ру.
• Добавьте проект или вакансию на биржу сайта Kadrof.ru. Это бесплатный сервис для работодателей, где можно разместить заказы для фрилансеров, в том числе дизайнеров.

• Добавьте вакансии на сайты для дизайнеров. Таких проектов много в интернете.

Рекомендуем

Профессия инженер слаботочных сетей и автоматизации

Компьютерные, телефонные, телевизионные сети; охранные и пожарные системы.

Суть профессии инженера слаботочных сетей и …

Профессия веб-дизайнер

Создатель дизайна сайта – это «художник с техническим уклоном» или «программист с эстетическим чутьем». Как «технарь», он удерживает в голове …

Какие рабочие инструменты изучить

Если вы планируете работать в России, то нужно изучить:

1. Figma — максимально
2. Sketch — на начальном уровне (многие на российском рынке перешли на Figmа, но редкие запросы встречаются)
3. Любой векторный редактор на начальном уровне (illustrator или CorelDraw)
4. Любую программу для анимирования прототипов (InVision, Figmotion, Principle, Marvel.
5. Photoshop — на среднем уровне, чтобы вырезать, редактировать картинку, замазывать ненужные элементы.
6. Советую изучить After Effect для конкурентного преимущества и, чтобы делать себе эффектные презентации в Behance. Уверенных начальных знаний для этого достаточно, а дальше смотреть видеоуроки, когда требуется что-то конкретное сделать.
7. 3D программы (3ds Max и Cinema 4D могут стать дополнительным плюсом в вашу сторону. Даже Сбербанк оценил этот навык, хотя в их вакансии такого запроса не было).
8. Zeplin также желательно знать, но не в первую очередь.

Если вы планируете работать с иностранцами, то нужно изучить:

1. Figma — максимально
2. Sketch — уверенно
3. InVision или Principle — уверенно
4. Miro — для прототипирования, создания схем, дизайн спринтов и многих других нужд.
5. Будьте готовы знать, что такое Slack, Asana, Notion.

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

Какие требования к UX-дизайнеру

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

• понимание и умение описать пользователей;
• желание вникать в бизнес-процессы заказчика;
• проведение опросов, интервью, юзабилити-тестов и обработка их результатов;
• проработка пользовательских сценариев;
• анализ конкурентов;
• аудит текущих проблем в интерфейсе и предложение решений; 
• проектирование структуры и навигации сайта/приложения;
• подготовка низкодетализированных прототипов (вайрфреймов), иллюстрирующих основные сценарии и переходы между экранами;
• умение работать с готовыми элементами дизайн-системы, UI-kit’ом;
• разработка интерактивных прототипов.

Если вы претендуете на позицию UX/UI-дизайнера к этим требованиям добавятся:

• подготовка детализированного прототипа;
• анимация интерфейсов;
• описание макетов для передачи в разработку;
• создание и поддержка библиотеки компонентов для UI-kit и дизайн-систем;
• контроль за реализацией интерфейсов разработчиками.

И, конечно, важно отметить личные качества, которыми должен обладать UX-дизайнер. Мы вместе с HR среди них выделяем:

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

аналитическое и критическое мышление. Как вы уже убедились выше, вам предстоит работать с большим объемом информации

Кроме того, важно уметь ее обрабатывать и структурировать таким образом, чтобы с ней было легко работать не только вам, но и другим участникам команды; 

креативное мышление. Оно должно помогать вам в поиске решения, не останавливаться на одном варианте в самом начале;

эмпатия

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

wee dezign/shutterstock.com

Что дальше изучать по UI-дизайну: о развитии вкуса, красоте и эстетике

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

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

Графический дизайн – инструмент для реализации бренд-дизайна

Бренд-дизайн – создание единого чувственного образа компании во всех точках контакта (сайт, мобильное приложение, плакат на остановке), воплощение ценностей компании в уникальной графике с характером с помощью инструментов графического дизайна. 

Вот несколько полезных книг и курсов:

Книга «Пользовательский интерфейс» Поможет начать видеть систему за экраном любой диджитал системы. А еще книгой удобно пользоваться как справочником и шпаргалкой, когда возникают конкретные вопросы во время работы над проектом по UI. Подробнее о материале →

Controforma. Брендинг. Смелость, основанная на понимании. Курс от брендингово агенства Шишки. Курс создан для людей, которые хотят более свободно чувствовать себя в мире брендинга

Уделим немалое внимание всем этапам создания фирменного стиля — от стратегии до визуала. Подробнее о курсе →

• Controforma. Слово дизайнера. Для всех кто сталкивается с барьером при коммуникации в работе. Курс объясняет как грамотно объяснять свою позицию, убеждать в правильности своих идей или рассказать о себе и своей работе. Подробнее о курсе →
• Изучите книгу Загмайстер и Уолш: О Красоте. Книгу создали известные дизайнеры Стефан Загмайстер и Джессика Уолш. В книге со смаком раскрыта сущность красоты и продемонстрирована сила эстетически красивого дизайна. Подробнее о курсе →

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

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

1. Интерактивный дизайн

Интерактивный дизайн, или IxD – подраздел UX-дизайна, определяющий взаимодействие между пользователем и продуктом; цель этих взаимодействий – хороший пользовательский опыт.

2. Визуальный дизайн

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

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

3. Пользовательское исследование

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

4. Информационная архитектура

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

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

Сила и ценность UX-дизайна для бизнеса

В чем ценность UX-дизайна для бизнеса

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

Чем на самом деле занимается UX-дизайнер

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

UX-дизайнер проектирует образ системы с учетом того как ее будет воспринимать пользователь и как именно он будет с ней взаимодействовать.

Кстати, UX-дизайн уже научились измерять по конкретным критериям. Питер Морвилл собрал их в формате сот, их 7. Мы подробно разбирали .

Нюанс: Отличие UI от UX. UI≠UX

UX и UI все еще часто путают или считают чем-то похожим. Давайте разберем различия на примере.

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

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

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

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

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

На тему отличий UX и UI есть тоже отдельная статья, вы можете нырнуть и поглядеть еще детали на границе UX и UI.

А что изучать дальше: мой личный список источников вдохновения (Figma, After Effects и другие)

Пробегитесь еще раз по курсам, которые мы обсудили. Там самый смак, свежачок, практика и годнота. А теперь несколько источников вдохновения по каналам, которые могут пригодится тем, кто ищет бесконечность. В подборке два английских курса и Youtube-каналы.

Youtube-каналы по UX-дизайну

Крайне рекомендую подписаться на канал Школа мобильного дизайна от Яндекс – канал хорош, чтобы узнать, как подходят к развитию цифровых продуктов ребята из Яндекc, снять магию и страхи и прокачать смелость:

https://youtube.com/watch?v=videoseries

Курсы по UX-дизайну на английском: следующий уровень

Если вы решили постичь дзен в UI, то After Effects вам точно поможет прокачать поведенческие аспекты в дизайне: переходы и микровзаимодействия.

After Effects поможет пробить потолок в моушн-дизайне интерфейсов. Да, вы не создадите в нем анимации и поведение, которые можно пощупать и реализовать шустро в ближайшем будущем (для этого идеальны Principle и InVision Studio), зато он снимет все блоки в сознании и прокачает вашу фантазию в интерактивном дизайне.

1. UI Animation Essentials от Motion Design School – курс по базовым возможностям в After Effects для UI-дизайна от Украинской школы дизайна. Обучение у ребят прошли уже 120 000 учащихся. Здесь вы сможете познакомиться с популярными возможностями для After Effects в моушн-дизайне для сайтов и микро-взаимодействий: https://motiondesign.school/products/ui-animation-essentials
2. UI Animation Certification от Ux in Motion – три курса по UI-анимации в After Effects, которые прошли ребята и Facebook, Airbnb, Uber, Google, Dropbox, Paypal и другие известные бренды. Подробная траектория по ключевым моментам UX-анимации: основы, микро-взаимодействия и анимация дашбордов. Курс заточен на After Effects, а значит призван помочь UX/UI & Product-дизайнерам прокачать навыки воплощения любых дизайн-концепций: https://www.uxinmotion.com/

Как стать

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

Если вас не пугает длинный путь к цели, тогда предлагаю начать обучение с литературы:

Нир Эяль, Райан Хувер “На крючке”
Сьюзан Уэйншенк “100 главных принципов дизайна

Как удержать внимание”
Кимберли Элам “Графический дизайн. Принцип сетки”
Стив Круг “Не заставляйте меня думать

Веб-юзабилити и здравый смысл”
Тим Браун “Дизайн-мышление в бизнесе”
Томич Мартин, Ахмадпур Насим “Придумай. Сделай. Сломай. Повтори”
Дональд Норман “Дизайн привычных вещей”

С полным списком книг по UI-дизайну можно ознакомиться на блоге iklife.ru.

После прочтения книг можно начинать изучение программ для UI-дизайнеров. Например, обучиться работе в программе Figma. В интернете можно найти бесплатные уроки. Я предлагаю выбрать обучающие видео на YouTube.

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

Если же вам сложно учиться самостоятельно, тогда предлагаю пройти онлайн-обучение. Платформы Skillbox, Нетология, Breezzly, GeekBrains, Среда обучения, Contented помогут вам в этом.

Вот перечень основных онлайн-курсов:

• Профессия UX/UI-дизайнер
• Профессия Веб-дизайнер
• UI-дизайнер
• Web design

Полный перечень онлайн-курсов по UI-дизайну можно найти на блоге iklife.ru.

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

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

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

Знания и навыки для работы UX/UI-дизайнером

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

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

К техническим навыкам относятся:

• графические редакторы — это Adobe Photoshop, Adobe Illustrator, а также Sketch, Figma;
• инструменты прототипирования — Mockplus, Axure;
• теория дизайна и цвета;
• основы программирования;
• принципы типографики;
• юзабилити сайтов;
• знание языков программирования;
• основные правила разработки сайтов.

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