Чем занимается дизайнер интерфейсов
UI-дизайнер: подробно о профессии дизайнера интерфейсов
Технологии развиваются — и вместе с этим набирает популярность профессия UI/UX-дизайнера. Разберёмся, почему тут две аббревиатуры и есть ли разница.
Начнём с определения. UI, User Interface, дословно переводится как «пользовательский интерфейс» и подразумевает внешний вид интерфейса и его характеристики: цвет и объём кнопок на сайте, читаемость текста, вид анимации элементов — всё это разрабатывается UI-дизайнером.
UX, User Experience, с английского «пользовательский опыт» — обозначает логику и потребности пользователя, которые должен чувствовать и изучать UX-дизайнер. Он не отрисовывает кнопки и не делает анимацию, а работает над тем, чтобы пользователю было удобно и комфортно взаимодействовать с интерфейсом сайта или приложения.
Вид оценивается наравне с удобством использования, поэтому UI- и UX-дизайн так тесно связаны.
Как стать UI-дизайнером
Сначала определим ключевые навыки этого специалиста.
Работа с графическими и видеоредакторами
Вёрстка адаптивных макетов для разных носителей
Дизайн адаптивных сайтов рассчитан на просмотр с компьютера, планшета и телефона. Задача UI-дизайнера — сохранить гармонию и юзабилити сайта на любом носителе.
Работа с типографикой
Вот некоторые из важных понятий типографики, с которыми должен уметь работать UI-дизайнер:
Проведение исследований и проверка гипотез
Чаще всего цель исследования — улучшить и оптимизировать дизайн интерфейса, чтобы повысить юзабилити сайта. А ещё проанализировать его эффективность по сравнению с предыдущей версией.
Аналитика цифровых продуктов
Аналитика позволяет понять пользовательские пути и реакции на наши дизайн-решения. Соответственно, по результатам грамотной аналитики мы можем определить пользовательскую логику и быстрее привести посетителей сайта к ключевому действию.
Презентация проектов
Этот навык важен во многих профессиях, и UI-дизайн — не исключение. Грамотно и понятно донести ваши идеи и мысли до заказчика или партнёра — залог успеха проекта.
Насмотренность
Насмотренность позволяет быстрее и точнее подобрать решение для продукта. А также расширяет ваш пользовательский опыт и позволяет лучше чувствовать потребителя. Тренировать насмотренность можно на Behance, Dribbble, Awwwards и других ресурсах.
Обязанности UI-дизайнера
Задача UI-дизайнера — визуализировать идеи UX-дизайнера, вдохнуть в них жизнь и эмоции. Это не так просто, учитывая, что не все пользователи одного возраста и пола с вами: то есть вам нужно понять и учесть предпочтения конкретной целевой аудитории.
На протяжении работы над проектами в ваши обязанности будет входить:
Востребованность на рынке
Мы оценили количество вакансий UX/UI-дизайнеров на hh.ru в середине февраля 2021 года:
Вакансия в своей нынешней формулировке возникла относительно недавно и уже набирает обороты. А в связи с популяризацией удалённой работы можно рассматривать предложения со всей страны и даже мира.
Сколько зарабатывает UI-дизайнер
Как и у всех специалистов на рынке, у UI-дизайнеров есть градация оценки их знаний и навыков:
На данным всё того же hh.ru можно сказать, что уровень дохода UI-дизайнера напрямую зависит от его опыта. Ряд компаний предлагает джуниорам оклад 30 000 рублей в месяц, а опытным сеньорам — 250 000. При этом средний оклад по рынку составляет около 80 000 рублей. И здесь мы учитываем лишь работу в штате компании, но и фриланс никто не отменял — а в этом поле вы вольны сами определять стоимость своей работы.
Варианты работы для UI-дизайнера
Раз уж мы заговорили о заработной плате, разберём и возможные места работы.
Основа любой профессии — это знания и практический опыт. Конечно, второе невозможно без первого. Получить необходимые знания вы можете на факультете дизайна интерфейсов GeekBrains.
Технологии развиваются — и вместе с этим набирает популярность профессия UI/UX-дизайнера. Разберёмся, почему тут две аббревиатуры и есть ли разница.
Начнём с определения. UI, User Interface, дословно переводится как «пользовательский интерфейс» и подразумевает внешний вид интерфейса и его характеристики: цвет и объём кнопок на сайте, читаемость текста, вид анимации элементов — всё это разрабатывается UI-дизайнером.
UX, User Experience, с английского «пользовательский опыт» — обозначает логику и потребности пользователя, которые должен чувствовать и изучать UX-дизайнер. Он не отрисовывает кнопки и не делает анимацию, а работает над тем, чтобы пользователю было удобно и комфортно взаимодействовать с интерфейсом сайта или приложения.
Вид оценивается наравне с удобством использования, поэтому UI- и UX-дизайн так тесно связаны.
Как стать UI-дизайнером
Сначала определим ключевые навыки этого специалиста.
Работа с графическими и видеоредакторами
Вёрстка адаптивных макетов для разных носителей
Дизайн адаптивных сайтов рассчитан на просмотр с компьютера, планшета и телефона. Задача UI-дизайнера — сохранить гармонию и юзабилити сайта на любом носителе.
Работа с типографикой
Вот некоторые из важных понятий типографики, с которыми должен уметь работать UI-дизайнер:
Проведение исследований и проверка гипотез
Чаще всего цель исследования — улучшить и оптимизировать дизайн интерфейса, чтобы повысить юзабилити сайта. А ещё проанализировать его эффективность по сравнению с предыдущей версией.
Аналитика цифровых продуктов
Аналитика позволяет понять пользовательские пути и реакции на наши дизайн-решения. Соответственно, по результатам грамотной аналитики мы можем определить пользовательскую логику и быстрее привести посетителей сайта к ключевому действию.
Презентация проектов
Этот навык важен во многих профессиях, и UI-дизайн — не исключение. Грамотно и понятно донести ваши идеи и мысли до заказчика или партнёра — залог успеха проекта.
Насмотренность
Насмотренность позволяет быстрее и точнее подобрать решение для продукта. А также расширяет ваш пользовательский опыт и позволяет лучше чувствовать потребителя. Тренировать насмотренность можно на Behance, Dribbble, Awwwards и других ресурсах.
Обязанности UI-дизайнера
Задача UI-дизайнера — визуализировать идеи UX-дизайнера, вдохнуть в них жизнь и эмоции. Это не так просто, учитывая, что не все пользователи одного возраста и пола с вами: то есть вам нужно понять и учесть предпочтения конкретной целевой аудитории.
На протяжении работы над проектами в ваши обязанности будет входить:
Востребованность на рынке
Мы оценили количество вакансий UX/UI-дизайнеров на hh.ru в середине февраля 2021 года:
Вакансия в своей нынешней формулировке возникла относительно недавно и уже набирает обороты. А в связи с популяризацией удалённой работы можно рассматривать предложения со всей страны и даже мира.
Сколько зарабатывает UI-дизайнер
Как и у всех специалистов на рынке, у UI-дизайнеров есть градация оценки их знаний и навыков:
На данным всё того же hh.ru можно сказать, что уровень дохода UI-дизайнера напрямую зависит от его опыта. Ряд компаний предлагает джуниорам оклад 30 000 рублей в месяц, а опытным сеньорам — 250 000. При этом средний оклад по рынку составляет около 80 000 рублей. И здесь мы учитываем лишь работу в штате компании, но и фриланс никто не отменял — а в этом поле вы вольны сами определять стоимость своей работы.
Варианты работы для UI-дизайнера
Раз уж мы заговорили о заработной плате, разберём и возможные места работы.
Основа любой профессии — это знания и практический опыт. Конечно, второе невозможно без первого. Получить необходимые знания вы можете на факультете дизайна интерфейсов GeekBrains.
Чем занимается дизайнер интерфейсов и как им стать?
Результат его работы — это удобный и понятный интерфейс, который обращается к эмоциям пользователей
Дизайнер анализирует сценарии поведения, чтобы разработать понятный и полезный интерфейс. Он продумывает, как пользователь будет взаимодействовать с продуктом. Мы поговорили с менеджером программы «Дизайнер интерфейсов» в Яндекс.Практикуме Еленой Чуйко о том, что важно в этой профессии.
Какие задачи решает дизайнер интерфейсов
Дизайнер создает новые продукты или поддерживает работу уже запущенных, например, может сделать прототип страницы для сайта или продумать путь пользователя для нового сервиса. Задача дизайнера — разобраться, как человеку будет удобнее взаимодействовать с продуктом, как экраны или страницы будут связаны между собой.
Чаще всего дизайнеры интерфейсов работают в трех форматах: в студии, в команде конкретного продукта или на фрилансе. Каждый вариант имеет свои преимущества и недостатки. Например, работа в студии дает возможность заниматься разнообразными проектами, дизайнер постоянно загружен задачами. Но здесь он ограничен в том, чтобы глубоко погрузиться в задачу или проследить, приносит ли его работа результаты для бизнеса клиента.
Чтобы создать интерфейс, который будет полноценно решать задачи пользователя, дизайнеру нужны данные от других профессионалов. Он работает с менеджером, аналитиками и разработчиками. Например, команда создает приложение для онлайн-магазина. Аналитики изучили рынок и выяснили, что пользователи хорошо реагируют на возможность составлять списки покупок. Если дизайнер узнает об этом на старте проекта, то сможет встроить такое решение в будущий макет. Если нужно посоветоваться, дизайнер интерфейсов идет к арт-директору, который может выступать для него в роли более опытного наставника.
Этапы работы и инструменты
Первый шаг — это всегда понять задачу. Например, компании нужно внедрить новый функционал. Сначала дизайнер интерфейсов разбирается в проблеме пользователя, ищет и изучает похожие продукты. Результат такой работы — четкое понимание, кому и для чего нужны продукт и его возможности. Зная это, можно создать маршрут пользователя — описать шаги, которые человек сделает внутри продукта, чтобы решить свою задачу.
«На этом этапе важно понять, какую проблему мы решаем. Причем нужно погрузиться в бизнес-проблемы, а не ограничиваться поверхностным объяснением. Дальше необходимо убедиться, что эту проблему нужно решать именно средствами дизайна. Пример плохой постановки задачи для дизайнера: «Нужно покрасить кнопку в красный». Более удачный вариант: «Нужно сделать кнопку заметнее». Еще лучше: «Нужно повысить конверсию». Ответственность дизайнера в том, чтобы прояснить задачу и понять, какая проблема за ней стоит, а затем предложить решение», — говорит Елена Чуйко.
Вооруженный всей нужной информацией дизайнер разрабатывает структуру — что и как будет работать в новом сервисе. Это стадия проектирования. Первые грубые наброски устройства продукта создаются именно на этом этапе.
Следующий шаг — прототипирование. Дизайнер использует специальные инструменты, чтобы связать весь функционал единой логикой будущего интерфейса. Сначала он создает вайрфреймы — макеты экранов или страниц, где показаны все элементы интерфейса и основные блоки. Это помогает определиться со структурой.
Когда определена структура, дизайнер начинает поиск стилевого решения. Если он достраивает существующий продукт, то нужно учесть действующую дизайн-систему, например, использовать те же цвета и геометрию, что и для других экранов сервиса. А для продукта, который создается с нуля, вначале формулируют все эти правила, определяют стилевую концепцию.
Прототип нужно подготовить к разработке. На этом этапе дизайнер разрабатывает детализированный и интерактивный прототипы. Результат — готовый макет продукта, который можно передать разработчикам. Это визуализации экранов приложения или страниц сайта, где максимально понятно поведение каждого элемента. Например, определено, в каком случае всплывает подсказка и как кнопка реагирует на нажатие или жест.
«Надо прописать, какой элемент как себя ведет, продумать побочные сценарии, например, что будет, если страница еще не загружена. Пользователь может увидеть скучную плашку, а может — остроумный текст. Это всё работа дизайнера», — говорит Елена Чуйко.
Здесь происходит первое тестирование на реальных пользователях. Это помогает избежать лишних ошибок и вовремя поменять структуру, если понадобится. «Прототипы можно показать пользователям, это обязательно нужно делать, когда проектируешь какой-то новый или измененный сценарий. Тогда удастся заметить ошибки и не тащить их в разработку. Даже очень опытный дизайнер не всегда может предсказать, как поведут себя реальные пользователи. Поэтому уже после прототипирования надо показать им результат и спросить: «Что ты видишь? Как ты тут сделаешь заказ?» То есть нужно провести интервью или коридорное тестирование. Часто после этого этапа становится понятно, что надо переделать логику», — говорит Елена Чуйко.
Готовый интерфейс тоже тестируют. Здесь важно проверить метрики, которые в начале работы прогнозировали аналитики и менеджер. Дизайнер подключается к работе, если результаты тестирования показывают какие-нибудь ошибки или сложности со стороны пользователей. Он дорабатывает решение, меняет или дополняет структуру продукта.
Что нужно знать и уметь на старте
Понимание задачи. Важно, чтобы дизайнер интерфейсов разбирался в потребностях пользователя и правильно оценивал задачу. Когда команда начинает новый проект, дизайнеру нужно оценить аналоги, изучить аудиторию, чтобы предложить решение. Хороший дизайнер может четко ответить на вопрос, кому и зачем нужен новый продукт.
«Дизайнер не должен быть прослойкой между заказчиком и Figma (векторный редактор для дизайнеров интерфейса, работающий в браузере. — Прим. ред.). Задача дизайнера — помогать решать проблемы, а не просто рисовать красивые картинки. Поэтому важно уточнять задачу и докапываться до потребности», — говорит Елена Чуйко.
Графический дизайн. Хороший дизайнер интерфейса знает законы типографики, основы композиции и колористики. Он понимает, зачем соблюдать отступы, как сочетать шрифты и что такое закон близости. Полезно изучать чужие решения, формулировать, что в них сделано удачно, и перенимать это.
«Есть стереотип, что дизайнер должен уметь рисовать. На самом деле это не так. В работе дизайнера есть четкие правила. Новичкам часто кажется, что в дизайне много вкусовщины. Отчасти это так, но с опытом всё становится понятнее.
Дизайнеру нужно видеть закономерности, различать проблемы и пути их решения. Научиться отрисовывать макеты в специализированных инструментах можно самостоятельно, это не так сложно. А вот дизайнерскому мышлению лучше учиться на практике и с обратной связью от опытного наставника», — говорит Елена Чуйко.
Правила удобных интерфейсов. Нужно иметь представление о том, как пользователь ведет себя в интерфейсе. Например, сколько времени он готов ждать отклика приложения на действие и какие элементы помогают управлять его вниманием. Если дизайнер хорошо сделал свою работу, то человеку легко ориентироваться на сайте или в приложении, и он совершает при этом минимум ошибок.
Верстка. Для того, чтобы заниматься версткой, нужно познакомиться с HTML и CSS. Эти знания помогут определить, какие решения можно реализовать, а какие нет. «Работодатели ждут, что дизайнер сможет объяснить решение разработчику, —говорит Елена Чуйко. — Большинство работодателей считают, что дизайнеру не обязательно уметь верстать самому. Но даже начинающий специалист должен понимать, как в целом устроен цикл работы над диджитал-продуктом: какие дизайн-решения реализуются в разработке быстро и дешево, а какие придется долго и дорого программировать. Дизайнер знает, что красивый и аккуратный макет — это не конец работы. Результат — это продукт, поэтому важно убедиться, что разработчики смогут реализовать ваш дизайн в коде».
Инструменты. Стартовать будет проще, если вы быстро и уверенно ориентируетесь в графических редакторах. Неважно, в чём вы привыкли работать. Главное — готовность самостоятельно разобраться в новых инструментах, если понадобится.
Работодатели ценят ответственных и надежных дизайнеров, которые умеют планировать задачи и укладываться в сроки. Важно быть толерантным к критике, спокойно делать работу над ошибками, хорошо адаптироваться в команде.
Дизайнер интерфейсов
Это относительно новая профессия, которая обретает все большую популярность. Специалист, работающий в этой области, должен отличаться прекрасными аналитическими способностями, ведь именно он создает приятные, удобные и работоспособные интерфейсы для ПО, сайтов, приложений, техники, разнообразного оборудования.
Краткое описание
Дизайнер интерфейсов создает видимое пользователям «лицо» ПО цифрового продукта, продумывает пути посетителей и какие действия они могут совершить на каждом шагу.
Интерфейсные дизайнеры – это специалисты, которые создают внешний вид интерфейсов, а также продумывают взаимодействие с ним, то куда пользователь нажимает и что происходит после этого. Их также называют UX/UI дизайнеры.
Специалист должен понимать требования потенциальных клиентов и просчитывать их действия и даже ошибки, максимально облегчая работу с тем или иным продуктом. Именно он определяет, как будет располагаться меню, какие кнопочки будет нажимать пользователь, чтобы перейти на ту или иную страницу, как будет выглядеть курсор, и решает многие другие задачи, поставленные заказчиком.
Предлагаю рассматривать интерфейс как то, что отображается на любом экране. Это может быть экран телефона, компьютера, банкомата, табло в аэропорте или в машине. Поэтому интерфейсный дизайнер создает изображение на экране, для того чтобы пользователь через это изображение смог достигнуть своей цели. Например, заказать такси с телефона, выбрать продукты с компьютера, пополнить счет в банкомате и найти свой рейс в аэропорту. Получается, что интерфейсные дизайнеры решают задачу пользователя и являются UX/UI дизайнерами, где UX – это продумывание путей пользователя, а UI – это то, как будут выглядеть интерфейсы в процессе прохождения пути.
Особенности профессии
Потенциальный работодатель выдвигает к специалисту множество требований, поэтому дизайнер должен уметь выполнять следующие задачи:
Дизайнеры интерфейсов не создают сайты, они работают с цифровыми продуктами, у некоторых из них может быть вид сайта:
Продукт – это законченное функциональное решение, которое помогает пользователям достигнуть цели. HeadHunter – это продукт, где две роли достигают свои цели: рекрутеры находят сотрудников, а кандидаты находят работу. При этом у HeadHunter есть много функционала (создать резюме, сохранить вакансию, посмотреть отклик и т. д.), поэтому в профессиональном сообществе этот сайт назвали бы «сервис», или «продукт».
«Сайтом» называют функционально простые решения, которые предлагают сделать одно или два действия. Такие сайты созданы для информирования и имеют малое количество путей пользователя. Например, проинформировать пользователей о скором мероприятии, о том, когда и что будет. Действие у такого сайта может быть одно – записаться на мероприятие. Интерфейсные дизайнеры в основном занимаются продуктами, а не сайтами (лендингами, промо-страницами, лонгридами), так как там нечего продумывать и нет возможности строить информационную архитектуру. Сайты в таком смысле не уровень интерфейсного дизайнера.
Эта специальность пока не слишком известна, ведь чаще всего дизайн интерфейсов возлагают на плечи профессионального программиста и графического дизайнера. Профессию «дизайнер интерфейсов» в высших учебных заведениях вы не найдете, поэтому специальность могут освоить программисты, веб-дизайнеры, 3D-аниматоры и другие люди, которые имеют IT-образование.
Плюсы и минусы профессии
Плюсы
Минусы
Важные личные качества
Обучение на дизайнера интерфейсов
Если вы хотите в будущем работать дизайнером интерфейсов, то обязательно должны получить специальность, которая напрямую связана со сферой IT-технологий:
Для поступления необходимо сдавать экзамен по русскому языку и математике, а также информатике, литературе. Заметим, что может добавиться творческий конкурс, но его проходят лишь те студенты, которые выбирают дизайнерское направление. Если вы поступаете на факультет, который связан с программированием, то в приоритете физика и информатика. Количество экзаменов и вид творческого конкурса (рисунок, композиция или живопись) зависит от высшего учебного заведения, в которое вы поступаете.
Необходимым навыкам можно научиться в вузах, в колледже или на курсах, но результат будет разный. Как арт-директор я провожу собеседования и замечаю, что кандидаты с высшим образованием имеют больший потенциал, чем те, кто закончил только курсы. В вузе преподают живопись, рисунок, композицию, цветоведение, что развивает у студента чувство пространства, цвета и размера – необходимые навыки для работы с интерфейсами. Ни одни курсы не могут уместить в себе подобный материал из-за их скоротечности. С другой стороны, курсы дают специфическую и целенаправленную информацию, которая будет полезна тем, кто получил высшее образование в смежной области с цифровым дизайном. Например, графические дизайнеры, модельеры, архитекторы, иллюстраторы могут результативно перейти в сферу интерфейсного дизайна через курсы, поскольку базовые навыки они уже получили.
Место работы
Дизайнер, специализирующийся на создании интерфейсов, сможет найти работу в таких компаниях:
Чаще всего эти специалисты – фрилансеры и ищут работу на интернет-досках объявлений и специализированых сайтах.
В профессиональном пути интерфейсного дизайнера могут случиться сложности. После курсов студенты часто не могу найти работу в компании и уходят в фриланс, где достойную оплату получают немногие. В таком случае лучше потратить больше времени на создание качественного портфолио с 4 работами, где будут отражены все ваши знания и навыки. В этом случае качество важнее количества.
Дизайнер интерфейсов — кто это и чем он занимается?
UI-дизайнер работает не только с приложениями и сайтами, как принято считать. Интерфейсы есть в современных панелях автомобилей, информационных киосках и даже вендинговых автоматах, в которых мы покупаем кофе и снеки, поэтому сфера деятельности в этой профессии очень широкая. Все о профессии дизайнер интерфейсов простыми словами и на реальных примерах рассказывает преподаватель курса «UX/UI-дизайнер с нуля до PRO» Денис Ефремов.
Кто такой дизайнер интерфейсов?
UI-дизайнер — это специалист, который создает возможность взаимодействия человека с сервисом, приложением, сайтом или любым другим предметом. Он помогает пользователю решить задачу — например добавить товар в корзину, оставить заявку, начать обучение или зарегистрироваться на сайте, — а также делает это решение эстетичным. Причем цифровые интерфейсы можно встретить не только в привычных ноутбуках или смартфонах, но и, например, в автоиндустрии.
Производители современных автомобилей переходят с аналоговых панелей управления, которые выглядят как набор физических кнопок, тумблеров и стрелок, на интерактивные. В новые интерфейсы помимо сенсорных экранов добавили возможность управления жестами и голосом. Например, в BMW iX для управления используется сенсорная панель iDrive и умный помощник, который реагирует на голосовые команды.
Интерфейс сенсорной панели iDrive в BMW iX. Источник
Что делает дизайнер интерфейсов?
Дизайнер интерфейсов отвечает за то, как выглядит продукт. Это важно, так как по одной визуальной составляющей можно многое о нем узнать.
Для сравнения можно посмотреть, насколько отличается визуал брендов из разных сегментов — ASOS и DIOR:
Помогает реализовать сценарий использования. Сценарий взаимодействия проектирует UX-специалист. Его задача — помочь пользователю совершить определенное действие: найти и посмотреть интересный фильм, оформить доставку товаров или продуктов питания, узнать о сроках выдачи документов.
Например, в приложении Lamoda можно выделить два акцента, которые помогают человеку ориентироваться в интерфейсе:
В то же время создается четкое понимание того, что в категории «Одежда», например, данная возможность еще не работает, поэтому у пользователя не создается неправильного впечатления о возможностях продукта и неудовлетворенности из-за того, почему не работает и на одежде.
Управляет вниманием пользователя. Привлечь внимание пользователя к определенным частям интерфейса можно при помощи цвета, размера, формы объекта или добавления анимации. Достаточно одного из этих способов, чтобы выделить элемент:
Пост в нашем Instagram о приемах, которые дизайнеры используют для привлечения внимания
Профессия
«UX/UI-дизайнер с нуля до PRO»
Научитесь создавать продуманные и эстетичные интерфейсы на основе пользовательских исследований с нуля за 15 месяцев
Основные задачи UI-дизайнера
UI-дизайнер выбирает правильные элементы для решения задачи, которую запроектировал UX-специалист, и организует эти элементы таким образом, чтобы продуктом было легко пользоваться. Есть много компонентов интерфейса, которыми оперирует UI-специалист в своей работе; их важно не только грамотно выбрать, но и правильно сочетать.
Иконки
Иконки используются в интерфейсе в сочетании с текстом, например на кнопках. Текст кнопки должен быть именно в глагольной форме — «Распечатать» или «Сохранить», так как он обозначает действие пользователя, — но кроме него используются еще пиктограммы или значки. Иконки неплохо работают для устоявшихся, распространенных или часто повторяющихся действий, например «звездочка» или «сердечко» для добавления в «Избранное», «лупа» для поиска:
Чтобы сформировать новый шаблон действий, дизайнеры стараются применять сочетание значков и текста. Например, с приходом облачных технологий, помимо стандартного «Сохранить», появилось действие «Сохранить в облако», которое первое время использовалось вместе с текстовой частью. В настоящее время вполне достаточно значка.
Иконки должны быть из одного семейства, то есть из группы, отрисованной в едином стиле. Задача дизайнера — выбрать подходящее для проекта семейство иконок на стоке или отрисовать их самостоятельно, если нужна уникальная стилистика или необычная иконка, которой нет в шаблонах.
Также они могут быть нарисованы в разных стилях:
Брендовые цвета. Продукт часто узнают именно через ассоциации с цветом, поэтому выделяется особая категория брендовых цветов и палитр. Например, у Сбера — зеленый цвет, у Альфа Банка — красный, у Тинькофф — желтый:
Кодирование информации. Еще цвета можно использовать в дизайне для подкрепления разных типов информации. Здесь тоже сформировались определенные шаблоны восприятия:
Наглядно цветовое кодирование используется в тестах, например в шаблонах Tilda, где зеленым или красным помечают правильные и неправильные ответы:
Шаблон теста на Tilda
Шрифт
Важно то, как используется текст в интерфейсе. Здесь перед дизайнером стоит задача по подбору шрифтов, их размера и плотности начертания. Текстовая информация делится на несколько категорий:
Статьи и другие объемные тексты принято оформлять классическим шрифтом с засечками, а заголовки или кнопки — легко читаемыми шрифтами без засечек. Кроме этого, в типографике интерфейсов есть еще несколько правил:
В использовании всех этих элементов важны баланс и консистентность. При проектировании интерфейса UI-дизайнер ориентируется на принципы композиции и рассчитывает пропорции каждого объекта, но иногда этими принципами приходится поступиться. Даже если на главном экране кнопка большего размера выглядела бы лучше, ее придется сделать того же размера, что и кнопки на протяжении всех экранов и продукта в целом. На такие компромиссы приходится идти, чтобы человеку при переходе с экрана на экран было понятно, что это за элемент и как с ним взаимодействовать.
Этапы работы и инструменты
Даже если UI-дизайнер лично не выполняет какие-то этапы разработки проекта самостоятельно, он может быть вовлечен в них как консультант или наблюдатель. Здесь важно понимать функционал и задачи других членов команды и уметь взаимодействовать с ними.
Первый бриф
Ставить задачи команде может заказчик или Product Owner, который выявляет запрос, бизнес-цели, особенности продукта и так далее. Степень вовлечения UI-дизайнера на этом этапе невысокая, а иногда он не вовлечен вообще. Это зависит от уровня дизайн-культуры в компании. Тем не менее опытный дизайнер на стадии брифа может:
Продуктовое исследование
Следующий этап — это первоначальное исследование, в которое входит анализ продукта конкурентов опыта работы их команд: как создавали продукт, на что ориентировались, с какими проблемами уже сталкивались и что не получилось.
Например, команда может задаться вопросом: «Почему никто не сделал шестиколесный велосипед?» И в ходе исследования выяснить, что другая команда уже пыталась сделать его когда-то давно, но по ряду причин такой велосипед оказался невостребованным и нефункциональным.
На этом этапе важно начать взаимодействие с UX-специалистами так как они помогут не тратить время на проверку провальных гипотез. Это могут быть:
Иногда все эти задачи может выполнять один человек.
Снежный ком
Подготовку материалов лучше выделить в самостоятельный этап, хотя некоторые команды начинают ее еще во время исследования. На этой стадии идея проекта обрастает «снежным комом» различной информации о его использовании и внутренних правилах создания. Команда старается ответить на максимальное количество вопросов о продукте. Дизайнер на этом этапе взаимодействует со всеми специалистами, которые в дальнейшем могут облегчить его работу:
У UI-специалиста может возникнуть вопрос — какой ширины поле закладывать под фамилию. Одно из шаблонных решений — создать форму визиток под имя Константин Константинович Константинопольский, так как она предусматривает введение длинных фамилий. Но такое решение не является оптимальным. В этой ситуации лучше сходить к разработчикам, сделать выгрузку из реальной базы клиентов и найти среднее количество символов.
Сам дизайнер на этом этапе собирает папку референсов, примеров визуальных решений и идей, а также набор правил и действий — как делать можно, а как нет. Какой можно и нельзя использовать цвет, сколько будет текста, как в зависимости от этого выбрать шрифт.
Выбор визуала и элементов интерфейса
Это часть работы над проектом проходит параллельно с проектированием сценария использования, который составляет UX-специалист. Здесь UI-дизайнер подбирает:
Решения должны соответствовать его цели и концепции продукта. Для детских продуктов обычно выбирают яркие цвета, анимационных персонажей в качестве маскотов и крупные шрифты. Продукты премиум-класса имеют минималистичный дизайн, сдержанные цвета, а в качестве иллюстраций выступают концептуальные фотосессии.
Здесь от UI-дизайнера требуются два качества, которых у новичка может не быть, но они формируются в ходе профессионального развития.
Системный подход. Нужно быть дотошным, как разработчик, и соблюдать консистентность, то есть на протяжении всего сценария сохранить единообразие элементов, цветов, шрифтов, одинаковую стилистику в иконографике. Важно укротить собственное желание «сделать посимпатичнее» — лучше пусть будет одинаково.
Взаимодействие с UX. Дизайнер помогает формировать положительный опыт. Исходя из этой задачи он выбирает не только цвета и шрифты, но и персонажей для иллюстраций. Это может быть, например, векторная графика или фото. Выбор визуала зависит от нескольких параметров:
Подготовка ассетов для разработки
Требования разработчиков к форматам могут отличаться в зависимости от проекта, например:
Поэтому важно понимать эти отличия и передать все в том виде, в котором просит техническая команда. В ходе разработки также возникают корректировки: например, когда цельную иллюстрацию нужно разложить по слоям, чтобы сделать анимацию, тогда от дизайнера потребуются еще параметры анимации и тайминги.
Контроль реализации продукта
Запланировать время на этот этап часто забывают project-менеджеры, хотя он отнимает большое количество рабочего времени. UI-дизайнеру важно не просто интересоваться ходом работы, а именно контролировать процесс, осуществлять своего рода авторский надзор.
Что нужно знать и уметь на старте
Первый инструмент, с которым стоит начать работу, — это блокнот и ручка. У всех нас есть пользовательский опыт взаимодействия с продуктами — сайтами, приложениями, техникой и так далее. Навигация в магазине — это тоже пользовательский опыт. Нужно быть в первую очередь наблюдательным и отмечать паттерны человеческого поведения, которые могут пригодиться в дальнейшей работе.
Далее можно освоить какой-нибудь инструмент из графики:
После этого можно осваивать инструменты для прототипирования, которые не просто покажут, как будет выглядеть продукт, но и дадут возможность протестировать, как он будет работать:
Навыки хорошего дизайнера интерфейсов
Профессия
«UX/UI-дизайнер
с нуля до PRO»
Создавайте пользовательский опыт мирового уровня
Специалист уровня Senior:
Лучше владеет инструментами и обладает более высокой насмотренностью. Это те навыки, которые можно развить только ежедневной практикой. Чтобы стать хорошим UI-дизайнером, нужно не слепо следовать трендам, а отделять хорошие решения от плохих и понимать, почему другие специалисты в конкретном продукте приняли именно такое решение.
Работает по предиктивной модели. То есть Senior может заранее спрогнозировать ход работы над проектом, опираясь на предыдущий опыт: предсказать, какие могут возникнуть сложности, с какой вероятностью и сколько часов нужно заложить на случай возникновения этих сложностей.
Быстрее выполняет задачи. Благодаря лучшему пониманию процессов и навыкам планирования Senior может пропускать некоторые шаги в последовательности создания продукта или объединять их с другими процессами. Это может быть полезно, когда нет бюджета или требуется быстро проверить гипотезу.
Сколько зарабатывает UI-дизайнер?
Вакансия UI-дизайнера на hh.ru
Где работать?
Диджитал — это первая стадия работы в UI, потому что она довольно простая и здесь не требуется высокий уровень знаний в области психологии поведения, физиологии человека, эргономики и многого другого. UI-дизайнер нужен любому IT-продукту, в котором есть интерфейс: сайт, приложение, сервис, ПО и так далее, — поэтому можно присоединиться к любой команде, которой требуется специалист вашего уровня и которая вам подходит.
Дальше идет сфера IoT (интернет вещей) и электроника, которая управляется через приложение, информационные стенды, турникеты в метро и так далее. Сделать физические интерфейсы сложнее, чем цифровые, так что это уже новый уровень сложности и другой уровень ответственности.
Неудобный выбор эмоджи на клавиатуре смартфона не приведет к серьезным последствиям. Даже если пользователь опечатается, то в любом современном мессенджере отправку сообщения можно отменить. А вот неудобное расположение кнопок на панели управления дроном может привести к поломке аппарата. Например, если кнопка «Отключить» будет настолько крупной, что ее можно случайно нажать во время полета устройства.
Где учиться?
Курсы полезны тем, кто хочет быстро влиться в профессию, понять, как устроено направление, какие есть дисциплины внутри него и как они связаны между собой. Это самый просто способ охватить всё и сразу, сделать это в короткий срок, а также понять, какие знания из тех, что уже имеются, могут пригодиться в новой сфере. На курсе «UX/UI-дизайнер с нуля до PRO» вы наработаете 200+ часов опыта в проектировании интерфейсов, освоите базовые и продвинутые функции Figma, After Effects, Blender, Protopie и соберете портфолио из 15 сильных работ.
UX/UI-дизайнер с нуля до PRO
Научитесь создавать пользовательские интерфейсы
с нуля за 15 месяцев