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

Кто такой модельер?

Модельер – квалифицированный специалист, который занимается разработкой эскизов и выкройки/лекал новых моделей одежды (прорисовка деталей и подбор вариантов отделки), а также поиском оптимальных способов изготовления вещи.

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

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

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

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

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

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

Видение цельной картины

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

менеджер UX-студии системы создания сайтов Wix

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

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

Как видеть картину целиком:

Знания, умения и личные качества

А теперь перейдем к вопросу, что должен уметь и понимать UX-дизайнер. Прежде всего это:

1. Наличие желания постоянно развиваться, следить и адаптироваться к изменениям и новостям, изучать специализированные книги и статьи.
2. Умение работать в команде.
3. Знание и применение принципов UX.
4. Владение средствами автоматизации и управления.
5. Умение оптимизировать и систематизировать каждый шаг во время выполнения профессиональных задач, а также планировать свое рабочее время.
6. Наличие навыков программирования и алгоритмизации.
7. Умение проектировать.
8. Владение графическими программами и редакторами, сервисами для построения интеллектуальных карт и другими приложениями для дизайнеров.
9. Умение создавать технический рисунок.
10. Наличие знаний в области веб-дизайна.
11. Умение создавать макеты сайтов.
12. Знание процесса тестирования готового продукта.
13. Умение проводить UX-исследования.
14. Знание HTML и CSS.
15. Понимание инженерной и компьютерной графики.
16. Знание клиент-серверной архитектуры.
17. Умение проводить диагностику автоматизированных систем.
18. Знание систем управления тестами.

Стоит обратить внимание и на личностные характеристики:

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

В чем сила UI-дизайна

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

Как правило, UX-дизайнера клонит либо в исследования и аналитку — и тогда он создает грубые концепты (они неприятны потребителю, но могут решать задачу), либо UX-дизайнер вместо исследований занимается вытачиванием продукта — и перевешивает в UI-дизайн. Поэтому для сохранения скорости работу выполняет пара: UX-дизайнер (исследования, прототипы и страгетия) и UI-дизайнер (дизайн интерфейсов, эсетика, анимация). В продуктовых командах один спец может сочетать в себе оба направления работ, но все-таки я склонна считать, что такая продуктовая команда делает меньше, чем могла бы, в плане интенсивного развития продуктов. Вы можете легко проверить мои слова, изучив книгу Аарон Уолтера «Эмоциональный веб-дизайн» (книга из под руки того, кто был у истоков создания брендинга Mailchimp, а сейчас развивает идеи на практике в команде InVision Studio).

Способность к обучению

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

менеджер по инновациям eBay

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

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

Невозможно самому думать обо всём сразу.

Как не переставать учиться:

Правила и принципы разработки хорошего интерфейса

Базовые принципы можно проследить сквозь 24 года исследований в сфере интерфейсов: c 1987 до 2009 года. Эти принципы работают и сейчас.

Рекомендации по проектированию интерфейсов. Шнайдерман (1987 год) и Плейзент (2009 год):

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

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

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

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

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

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

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

Пусть пользователи чувствуют, что контроль в их руках: интуитивный пользовательский интерфейс — как ложка. Всегда знаешь, чего ждать

Пользователи понимают, что интерфейс — это машина и поэтому ожидают полной управляемости.

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

Кто среди признанных UX-дизайнеров

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

1. Стив Круг — эксперт по юзабилити, написавший книгу-бестселлер «Не заставляй меня думать!». Он активно ведет страницу в twitter @skrug и не так давно принял участие в записи подкаста, в котором рассказал о жизни во время пандемии, истории появления своей книги, эволюции UX-дизайна.
2. Дон Норман — когнитивист, дизайнер, преподаватель и соучредитель Nielsen Norman Group (консалтинговой фирмы в области исследований пользовательского опыта). На сайте компании начинающий дизайнер может найти статьи по разным аспектам UX-дизайна. Дон Норман также является автором «Дизайна привычных вещей» и «Эмоционального дизайна», входит в совет директоров международной образовательной платформы для UX-дизайнеров Interaction Design Foundation.
3. Якоб Нильсен — консультант по веб-юзабилити и исследователь человеко-компьютерного взаимодействия, основатель Nielsen Norman Group. В 90-х он выделил 10 эвристик, которые используются в разработке любого продукта. Данный список позволяет проводить проверку юзабилити интерфейсов дизайнерам уже на протяжении 30-ти лет.
4. Лаура Клейн — инженер, дизайнер, менеджер по продукту, более 20-ти лет помогает компаниям узнавать больше о своих пользователях, чтобы они могли создавать продукты, которые нравятся людям. Лаура — автор книг UX for Lean Startups: Faster, Smarter User Experience Research and Design и Build Better Products: A Modern Approach to Building Successful User-Centered Products (на русском не издавались).
5. Скотт Дженсон — руководитель проекта Physical Web для Chrome, а в прошлом он был UX-директором в Google, Symbian и Apple. На своем персональном сайте он размещает статьи и выступления по теме UX.

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

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

Также рекомендуем присмотреться к достижениям признанных UX-дизайнеров. Некоторые из них изложили свой опыт в книгах, кто-то ведет Twitter или персональную страницу. На русском можно почитать Стива Круга «Не заставляй меня думать!», Дона Нормана «Дизайн привычных вещей», «Эмоциональный дизайн».  

При поиске вакансии важно понять, какое направление наиболее интересно вам, и начать собирать портфолио в этой сфере

Большинство компаний обращает внимание не только на резюме, но и смотрят на портфолио, а также предлагают выполнить тестовое задание

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

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

Кто он — UI/UX-дизайнер?

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

User Interface является инструментом User Experience. Так что эти понятия по факту зависят друг от друга и отдельно в принципе не работают — это не эффективно.

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

Можно ставить эти понятия рядом, но ни в коем случае не объединять: UI- и UX-дизайнеры фокусируются на разном. И зачастую желание «быть универсальным» может на деле означать «быть везде бесполезным».

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

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

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

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

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

Модель и Интерфейс тесно взаимосвязаны. Чтобы понять разницу между Моделью и Интерфейсом, задайте вопрос: откуда вообще взялась корзина? Разве клиенты добавляют автомобили в тележку пачками, как в супермаркете? Или все-таки нужна модель не корзины/тележки из супермаркета, а тест-драйва в автосалоне?

Т.е. мы в приложении можем вместо корзины сразу при выборе автомобиля предлагать записаться на тест-драйв или начать оформление покупки (в том числе в кредит). А теперь задайте вопрос: как часто покупатели дорогого автомобиля готовы менять авто и вписывается ли мобильное приложение в их жизненный контекст?

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

Бесплатные библиотеки для ускорения дизайна и разработки

React JS

ReactJS — это библиотека JavaScript, исходный код которой был открыт Facebook в 2013 году. Этот фреймворк отлично подходит для создания огромных веб-приложений, где данные могут меняться на регулярной основе.

Компании, которые используют ReactJS: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft.

Попробовать ReactJS →

Ant Design — это React JS завернутый в определенную дизайн-культуру

Ant Design — это полноценная дизайн-система, визуальный язык. Со своими принципами, стайлгайдами и библиотекой компонентов. Проект поддерживается разработчиками из Alibaba Group. Те же люди поддерживают и dva — фреймворк на основе популярного стека React, Redux, React-Router, активно использующийся в проектах Alibaba.

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

Попробовать Ant →

Vue JS

Vue.js – это фреймворк, который был создан в 2014 году, вторая версия вышла в 2016 году. Некоторые разработчики называют его библиотекой за малый размер и простоту использования.

Разработчики Vue учли плюсы и минусы React и Angular и создали такой себе гибрид, который вобрал в себя все лучшее из этих фреймворков и не повторял их ошибки. 

Почему рекомендуют Vue? Философия Vue – простота, элегантность, доступность.

Компании, которые используют Vue.js: Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab and Laracasts, Adobe, Behance, Codeship, Reuters.

Попробовать Vue JS →

1. Vuesax — новый компонентный фреймворк для Vue.js

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

Попробовать Vuesax →

Vuesax — новый компонентный фреймворк для Vue.js

2. Buefy: Lightweight UI components for Vue.js based on Bulma

Клевый функциональный чистый дизайн. Стиль напоминает компоненты Яндекса.

Попробовать Buefy →

3. Vuetify — Material Design Framework

Vuetify считают библиотекой #1 для Vue.js. Она активно разрабатывается с 2016 года. Цель проекта — предоставить пользователям все, что необходимо для создания богатых и интересных веб-приложений, используя спецификацию Material Design.

Попробовать Vuetify →

jQuery UI

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

Попробовать jQuery UI →

1. Foundation

Foundation создается и поддерживается ZURB, компанией, стоящей за многими проектами с открытым исходным кодом Javascript и CSS.

Foundation — это не просто CSS-фреймворк, а семейство инструментов разработки внешнего интерфейса.

Попробовать Foundation →

2. jQuery UI Bootstrap и BootstrapVue

Bootstrap или Twitter Bootstrap – это фреймворк, созданный разработчиками twitter’a. Bootstrap — один из самых популярных инструментов, который используется при создании сайтов и веб-приложений. Bootstrap включает в себя множество разных компонентов для веб-сайтов: типографику, веб-формы, кнопки, блоки навигации и другое.

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

Попробовать jQuery UI Bootstrap →

Кратко

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

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

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

Курсы GeekBrains по самым востребованным профессиям в дизайне:

1. Факультет дизайна с гарантированным трудоустройством.
2. Профессия «Веб-дизайнер». Обширный онлайн-курс с возможностью пройти онлайн-стажировку в Mail.ru Group.
3. Профессия «Графический дизайнер». Онлайн-курс для самых творческих людей в мире дизайна.
4. Дизайнер интерфейсов (UI/UX). В этом онлайн-курсе навыки интерфейсного дизайна отрабатываются на реальных задачах от крупных компаний.
5. Гейм-дизайнер. Курс для тех, кто хочет войти в игровую индустрию и начать зарабатывать в ней.

Обязанности UI-дизайнера

Задача UI-дизайнера — визуализировать идеи UX-дизайнера, вдохнуть в них жизнь и эмоции. Это не так просто, учитывая, что не все пользователи одного возраста и пола с вами: то есть вам нужно понять и учесть предпочтения конкретной целевой аудитории.

На протяжении работы над проектами в ваши обязанности будет входить:

погружение в задачу и изучение ТЗ — важно понимать, что в итоге хочет получить заказчик;

анализ — необходимо проанализировать целевую аудиторию и визуальные материалы конкурентов;

проектирование дизайн-концепции — создание прототипов, кнопок, форм и т. д.;

визуализация пользовательских сценариев; 

тестирование — необходимо протестировать юзабилити проекта;

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

Полезные блоги, сайты

Для погружения в UX недостаточно просто выучить софт и развить soft-skills. Нужно следить за отраслью, UX как дисциплина не стоит на месте.

   http://uxchecklist.github.io/ — полезный список действий по UX. Поможет       пройти через весь процесс и успешно завершить каждый шаг.

   https://www.uxbooth.com/ — статьи по UX: исследования, анализ,        юзабилити, психология, кейсы.

   https://www.uxpin.com/studio/ebooks/ — бесплатные книги о UX,        информационной архитектуре, юзабилити-тестировании, адаптивном        дизайне, мобильной типографике.

   https://uxmastery.com/ — сайт полностью посвящен UX.

   http://uxmag.com/ — UX Magazine, список самых важных международных        событий и вакансий в сфере. Также много статей по UX.

  https://www.dtelepathy.com/blog/ — блог DT Telepathy, команда из Сан-Диего       публикует статьи на тему UX.

Навык 5. Сборка макетов (Wireframe) и сценариев взаимодействия (User-Flow)

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

Как сказал Форд:

Итак. Макет (Wireframe) — это каркас интерфейса. Он собирается с помощью черно-белых линий, прямоугольников и фигур. Wireframe – это простой способ рассказать о своей идее. А «сценарий взаимодействия» (User-Flow) представляет собой последовательность макетов, которые проходит пользователь, пока не дойдет до цели.

К делу: в следующий раз, когда вы будете создавать дизайн, сначала зарисуйте свои идеи на бумаге! Неважно, насколько грубоваты ваши рисунки — просто попробуйте сделать это с парой идей;

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

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

Бесплатный онлайн-курс по UI дизайну от Яндекс.Практикум «Каково это – быть дизайнером интерфейсов» (в продуктовой компании)

Курс Яндекс хорош для развития как продуктовый дизайнер. Здесь вы еще раз бегло вспомните, что изучали на предыдущих курсах по UI-дизайну и продолжите набивать руку на множестве кейсов продуктового дизайна.

Этот курс – финальная точка в изучении професии UI-дизайнер с выходом на продуктовый дизайн (UX/UI).

Автор курса: Команда дизайнеров Яндекс при поддержке их центра подготовки специалистов.

Для кого: для тех, кто хочет признания от бренда Yandex на российском рынке

Объем курса: 7 месяцев, 310 часов

Стоимость (платное продолжение): 91 000 ₽

Фишка: профессиональная траектория, диплом, помощь в трудоустройстве;

Портфолио из 5 проектов, поддержка наставника, сертификат

Изучить курс: https://praktikum.yandex.ru/interface-designer/

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

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

UI — User Interface, «пользовательский интерфейс». Этот интерфейс может быть графическим (это привычные нам элементы: меню, баннеры, кнопки и др.), голосовым (вспоминаем голосовых помощников: «Алису», Siri), тактильным (например, отклик в виде вибраций на экране смартфона). 

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

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

Чем занимается

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

Пошаговая инструкция работы UX-дизайнера выглядит таким образом:

1. Получить техническое задание от заказчика. В случае недостатка информации уточнить у клиента некоторые вопросы.
2. Провести подготовительную работу: определить и исследовать целевую аудиторию и конкурентов.
3. Провести анализ взаимодействия пользователя с сайтом, в том числе составить карту путешествия посетителя.
4. На основе результатов анализа пользовательского опыта и пожеланий заказчика разработать несколько макетов веб-ресурса.
5. Отправить заказчику готовый проект.
6. Провести тестирования, проанализировать результаты, при необходимости внести правки.

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

Если же представить все списком, то в обязанности UX-дизайнера может входить:

1. Проведение UX-исследований.
2. Создание прототипов сайта.
3. Тестирование готового продукта на целевой аудитории, внесение изменений на основе полученных результатов.
4. Определение и исследование целевой аудитории.
5. Продумывание связей между элементами интерфейса и их расположением.
6. Подготовка технического задания для UI-дизайнеров.
7. Анализирование пользовательских сценариев.
8. Разработка кликабельного макета веб-сервиса.
9. Продумывание логики использования продукта.
10. Подборка UX-инструментов для создания дизайна.
11. Изучение потребностей пользователей.
12. Проведение опросов посетителей веб-ресурса.
13. Работа в команде с проект-менеджером, веб-разработчиками, UI-дизайнерами.
14. Построение логических схем работы интерфейса.

Специалист должен следить, чтобы работа соответствовала таким требованиям, как:

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

А что изучать дальше: мой личный список источников вдохновения (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/

С чего начать обучение в UI дизайне

Перед тем как начинать курс по UI-дизайну, еще раз проверьте себя по трем параметрам.

1. Какие виды проектов (сайты, мобильные приложения или веб-приложения) будем делать на курсе, а не какие кнопки нажмем за X уроков;
2. Сколько стоит получить первый опыт в новом проекте. Т.е поделите стоимость курса на количество уникальных проектов;
3. Свежесть дизайн-задачи в ТЗ. Вы наверняка видели, куда движется глобальный рынок, видели эти сочные и продвинутые по Front-end части приложения с выточенными анимациями, брендингом и выразительными композициями, к примеру, cruuunchify.com.Поэтому приглядывайтесь трепетно, и если чуете, что дизайн вам не заходит, то помните, что идете учить не топчик UI-дизайна, а просто за статусом в резюме.

Что общего между UI-kit и походом в магазин

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

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

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

Тоже самое и с UI-kit. Если каждый раз при создании дизайна вы рисуете все компоненты с нуля, то на это тратите много времени. А если используете UI-kit, то экономите время на рутинной работе и оптимизируете свой рабочий процесс.

UI дизайнер

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

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

«Концепция и реализация визуального языка Airbnb.com. Создание расширенного стайлгайда.»

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

Инструменты: Photoshop, Sketch, Illustrator, Fireworks

Вы скорее всего слышали от него: «Поля „войти и „зарегистрироваться нужно переместить в правый верхний угол».

Бесплатный курс «Веб-дизайн и создание сайтов с нуля»

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

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

Автор курса: Rafal Tomal, Креативный директор в Authentik Studio, в дизайн-проектах с 2005 года

Для кого: для тех, кто жаждет ТОП-материалов с международного рынка от практиков

Объем курса: 7 глав

Стоимость: Бесплатно

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

Изучить курс: https://ux-journal.ru/tag/cl-intro-webdesign

Навык 7. Визуальный дизайн

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

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

• К делу: визуальный дизайн лучше всего изучается на практику, поэтому попробуйте один из этих онлайн-курсов: Alison, Udemy, Canva или Skillshare;
• А еще, попробуйте онлайн-курс с преподавателем, например, Design Lab. (Признаюсь, я здесь преподавал!)