ui дизайнер практические навыки дизайнера интерфейсов тгу
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.
Кто такие UI-дизайнеры и чем они занимаются
Мы каждый день пользуемся интерфейсами, не думая, кто их придумал. Давайте это исправим — поговорим о работе, навыках, инструментах UI-дизайнера.
Арт-директор ITSOFT, СEO & Founder студии дизайна Snow Fjord, автор блога на Medium о работе с иностранцами.
Графические интерфейсы, которые вы видите на компьютере, планшете, мобильном телефоне или любом другом экране, созданы UI-дизайнерами (англ. user interface — пользовательский интерфейс). Эти специалисты разрабатывают внешний вид любой программы, сайта или приложения. Они рисуют все элементы (кнопки, иконки, формы) в разных состояниях (например, до и после клика мышкой).
Есть ещё другое понятие — UX (англ. user experience — пользовательский опыт), с которым часто возникает путаница. UX-дизайнер не рисует кнопки, он проектирует интерфейс: изучает потребности пользователей, продумывает логику, анализирует и тестирует. Впрочем, эти направления дизайна тесно связаны и ими может заниматься один специалист.
Основные задачи UI-дизайнера
Разбираемся подробнее, какие задачи и цели преследует UI-дизайнер, когда работает над внешним видом любого ресурса.
Интерактивность
Создание интерактивности (англ. interaction — взаимодействие) — главная задача UI-дизайнера.Допустим, вы нажимаете на кнопку и она изменяет состояние — показывает своим внешним видом, что её функция (например отправка сообщения) запущена. При клике у элемента может появиться тень или обводка, измениться цвет или размер. Эти и многие другие интерактивные изменения обеспечивает именно UI-дизайнер.
Брендинг
UI-дизайнер также помогает передать эмоции бренда и его продуктов. Разберём, что это такое, на примере продажи велосипедов.
Допустим, мы хотим донести до клиента образы скорости, новаторства, устремлённости в будущее. Эту задачу можно решить даже без текста — только за счёт дизайна.
Если нужно продать ретровелосипеды, то это уже другие эмоции, потребности и выгоды, поэтому UI-дизайнер меняет формы, цвета и графические приёмы.
UI-дизайнера и художника роднит умение визуализировать эмоции, внутренние переживания и чувства.
Адаптивность
UI-дизайнер решает, как интерфейс цифрового продукта будет выглядеть на разных носителях, — то есть обеспечивает адаптивность.
Наверняка вы замечали, что сайт, открытый на настольном компьютере, выглядит иначе, чем на планшете или мобильном телефоне. Потому что на разных устройствах вы видите разные адаптивные решения интерфейса.
Все элементы, нарисованные для каждого сценария взаимодействия и размера экрана, дизайнер складывает в UI-кит. Этот файл затем используется программистами, верстальщиками и другими дизайнерами.
Цель UI-дизайнера — сделать приятный, удобный, понятный интерфейс. Чтобы текст не слипался, иконки облегчали чтение, а кнопка была заметна (и находилась там, где удобно на неё нажимать).
Работа UI-дизайнера в подробностях
Теперь рассказываем, с помощью чего UI-дизайнер решает свои задачи и достигает поставленных целей.
1. Текстовая иерархия
UI-дизайнер работает над текстовой иерархией. Например, делает заголовки заметнее, чем обычный текст. Это экономит время: пользователь может пройти текст по диагонали и понять структуру, остановиться там, где ему нужно, а не читать всё от начала до конца.
2. Цвет и форма
UI-дизайнер хорошо разбирается с формами и цветами. Например, делает кнопку легко отличаемой от окружающих элементов — очищает пространство вокруг неё от графики и цвета. Тогда кнопка становится заметной и на неё хочется нажать.
3. Сетки
UI-дизайнеры используют в работе сетки — это могут быть колонки, линии или лист, который выглядит как школьная тетрадь в клетку. Сетки помогают рисовать интерфейсы и систематизировать расположение объектов.
Навыки хорошего дизайнера интерфейсов
1. Насмотренность
UI-дизайнер накапливает визуальный опыт, «банк идей» в голове. Он любопытный и внимательный к деталям, умеет их анализировать. На одну задачу у него есть разные варианты решений.
Насмотренность значительно расширяет горизонты и сокращает творческие муки при работе с любым проектом.
2. Развитое чувство стиля и целостность дизайна
3. Типографика
Размер шрифта, подбор шрифтовых пар, сочетание с другими элементами сайта — имеет значение абсолютно всё. Типографика помогает создавать читабельный текст и делать ресурс в целом удобнее и понятнее.
4. Передача уникальности, эмоций продукта
У каждого продукта, который продаётся на рынке, есть конкурентное преимущество. UI-дизайнер понимает это преимущество, чувствует его характер, эмоцию, идею, способен донести это до пользователя.
5. Владение современными инструментами
Самые базовые и необходимые графические программы:
Инструменты для создания прототипов:
6. Презентация своей работы
Весомый плюс для UI-дизайнера — хороший навык презентации работы, чтобы всё было просто и понятно, заказчик или партнёр вовлекался и погружался в решение. Такой soft skill повышает ценность специалиста на рынке.
Самостоятельное освоение профессии UI-дизайнера — довольно интересный, но длительный процесс. Сложно самому быстро и глубоко разобраться в необходимых программах, наработать навыки и начать понимать пользователя. Гораздо проще и эффективнее пройти онлайн-курсы, где удобный формат обучения и понятный структурированный материал, а эксперты помогают с любыми вопросами. Именно так будет, если пойти учиться на UX/UI-дизайнера в Skillbox.
Где работать UI-дизайнеру
Без мобильных приложений и веб-сайтов в наше время не обходится почти ни одна компания. Поэтому на рынке множество IT-компаний, которые занимаются разработкой интерфейсов.
Есть несколько вариантов, где может работать UI-дизайнер.
1. Продуктовая компания
Чаще всего работа будет связана с какой-то узкой сферой (например играми или банковскими сервисами). UI-дизайнеру предстоит вникнуть во все нюансы работы компании, но это даст новые навыки. В этом случае он достаточно быстро растёт как специалист.
2. Аутсорсинговые компании
Специфика работы на аутсорсе зависит от её направленности. Компания может заниматься чистым дизайном или оказывать полный спектр маркетинговых услуг.
Разнообразие проектов — хорошая возможность «набить руку» и найти направление, которое наиболее интересно.
3. Фриланс
Главное отличие — UI-дизайнер выбирает только те проекты, которые ему интересны. Здесь заработок напрямую зависит от продуктивности, репутации и «мягких навыков».
Сколько получают UI-дизайнеры
Доход зависит от уровня специалиста или компании, в которой он работает, и того, что именно он делает. Если, например, обязанности также включают UX-дизайн, то доход будет выше.
У UI-дизайнеров есть стандартная градация:
По данным hh.ru на начало июля 2020 года, зарплата UI-дизайнеров колеблется от 30 до 250 000 рублей.
Важно: стаж не гарантирует обладание необходимыми навыками. Можно несколько лет выполнять одну и ту же работу и так и не стать высококлассным специалистом. А можно прокачивать скилы, браться за серьёзные задачи и через короткое время с нуля достичь уровня Middle.
Что я думаю о Практикуме и курсе «Дизайнер интерфейсов»
Честная статья о том, что ждет дизайнера на курсе, стоит ли идти сюда с опытом и почему я сделал выбор в пользу Практикума.
Решение об изучении интерфейсов я принял где-то в июле 2020 и сразу пошел в Geek Brains, потому что слышал что-то про них. Созвонился, запросил программу и, конечно, обратил внимание на гигантские скидки. Skillbox был где-то очень рядом по уровню скидок. Какой-то супергорячий сейл. Чуть было не попался, но именно скидки меня и насторожили. Уверен, если зайти сейчас на их сайты, то, вероятно, скидки еще действуют – ага, – 40%.
Какая-то часть работы была выполнена плохо и ей можно пожертвовать, предоставив скидку
Я выбрал несколько людей на сайте П, уже закончивших курсы, и написал им в личные сообщения. Из 5 мне ответили 4. Отзывы были хорошие, но неубедительные. Не хватало ложки дегтя. Потом я увидел статью на VC.ru, где объяснялось почему у П нет скидок как у остальных игроков рынка. Автором был кто-то из сотрудников Яндекса. Я зацепился за слова о том, что у качественного продукта не может быть скидок, потому что в ином случае это означает, что какая-то часть работы была выполнена плохо и ей можно пожертвовать, предоставив скидку. Не дословно, но смысл передал.
На каждом курсе есть бесплатная часть. Она дает возможность пощупать курс и, честно говоря, позволяет составить практически полное впечатление. Ты видишь как устроен личный кабинет, понимаешь вовлекает ли тебя форма изложения материала. Огромный плюс бесплатной части в том, что она не просто знакомит тебя с частью курса, а позволяет выполнить вполне реальную задачу, т. е понять хочешь ли ты решать такие задачи на постоянной основе или нет.
Тэги, ветки, реакции, тут преподаватель отвечает, а тут нет… Аааааа!
Коммуникация в Slack Если принимаешь решение идти дальше, то после оплаты тебя ждут остальные части курса. Надо заметить, что они глобально мало чем отличаются от вводной части. Существенное различие в количестве информации – ее становится больше. Добавляется коммуникация с когортой, кураторами и преподавателями в Slack.
Первое время от системы коммуникации пухнет голова. Тэги, ветки, реакции, тут преподаватель отвечает, а тут нет… Аааааа! В общем, упростить систему коммуникации с учениками — задача команде Практикума на будущее. Потом конечно привыкаешь, как мне кажется… но я не привык. Плюс такой системы в том, что есть очень четкая структура, в которой спустя время становится просто ориентироваться и особенно просто искать нужный материал. Все сообщения от участников сохраняются и прежде чем задавать новый, можно посмотреть историю. С вероятность 99% такой вопрос уже кто-то задавал.
Система дедлайнов Отдельно хочется похвалить команду за систему дедлайнов. Мотивирует и избавляет от тупого перфекционизма, который живет со мной по соседству. Есть два типа дедлайна: мягкий и жесткий. Не уложился в мягкий, есть еще две недели, чтобы уложиться в жесткий. Не справился, пошел «отпуск». Обидно и чувствуешь себя лузером, поэтому стараешься быть дисциплинированным и все успевать.
Задачник и мини-проекты В курсе есть отдельный задачник, где можно оттачивать технические навыки. Это важно для ребят без опыта. Также в каждом блоке есть мини-проекты, которые нужно сделать перед финальным заданием. «Нужно» не значит обязательно. Их можно пропускать, но тут снова включается перфекционизм и когда ты видишь на карточке «Пройден», то хочется видеть такой статус на всех карточках, а для этого нужно выполнять мини-проекты. Я часто делаю их уже после сдачи финального проекта на ревью.
По основам визуального дизайна есть следующие блоки: основы композиции, сетки, типографика, цвет. Пройдемся кратко по каждому.
Основы композиции Разобраны основные принципы создания гармоничной композиции, но в урезанном формате. Кажется, у начинающего дизайнера после этого блока вопросов будет больше, чем ответов. В целом достаточно чтобы понять суть, но лучше сдобрить книжкой и практическими упражнениями.
Работа с сетками Очень урезанный блок, дающий самое базовое понимание. В основном упор делается на сетку Bootstrap, потому что она наиболее простая и понятная. Все кратно 5, подробные инструкции, просто считать и проверять.
Курс рассчитан на веб, поэтому глупо будет обвинять его в отсутствии фундаментальных знаний по сеткам. Эти знания приобретаются в дизайне многостраничных изданий или, как минимум, в рекламной полиграфии. Мои знания о сетках объемнее представленных на курсе, но знания Барбанеля о сетках, раз в 10 объемнее моих. Блок можно дополнить книгой Аллена Херлберта «Сетка».
Цвет Цвет достаточно субъективная субстанция, несмотря на прекрасную книгу Иттена «Искусство цвета». У него даже есть термин «Субъективная цветовая гармония», смысл которого в том, что ощущения от восприятия цвета разнятся от человека к человеку.
В блоке уделено достаточно внимания основам, большая часть посвящена именно ощущениям от восприятия, что безусловно важнее, чем пресловутые схемы. Меня отдельно порадовала информация про работу с количественным соотношением цветов в макете. Встречались неточности, но команда уже все устранила 100%.
Начинающим советую проходить этот блок в паре с книгой Иттена. Так и книгу прочитаете быстро и знания будете применять на практике.
Типографика Как человеку с достаточно глубокими знаниями в типографике и опытом в каллиграфии, мне было нелегко смотреть на сильно поверхностное изложение материала. С одной стороны, хотелось согласится с такой подачей, потому что перегружать людей без опыта глубокими знаниями кажется лишним, но с другой стороны бунтовал внутренний профессионал.
Все курсы, позиционируют обучение как достаточное для поиска работы и в этом их основная ценность для потенциальных слушателей, но последним всегда нужно держать в голове, что одного курса недостаточно для полноценного профессионального развития. И честно говоря, если вы решили быть дизайнером, то лучше сначала освойте на практике композицию, цвет и типографику, а потом уже идите на курс.
Аргумент «полоса будет очень широкой, шире, чем у всех предыдущих шрифтов» – сомнительный, потому что лонгрид не шириной определяется, а длинной текста. Ширина, как правило, фиксирована. Да, он будет немного длиннее, чем Proxima с более узкими пропорциями. Глобально Proxima от Euclid Flex в плане восприятия текста ничем не отличается — геометрические гротески и конкретно в этом тесте Euclid будет выигрывать из-за бОльшей насыщенности, что улучшит читаемость. В общем, спорно. Очень спорно.
Дизайн – тонкая материя, а потому неизбежно вокруг него возникают споры. Выше тому доказательство. Профессионалы могут долго рассуждать о расстояниях между буквами и композиции. У каждого есть свое мнение и я не исключение. Решая тесты в рамках блока, встречаются вопросы из разряда «Сбалансирована ли эта композиция», предполагающие субъективные ответы. Ты отвечаешь, а результаты говорят, что в Яндексе считают по-другому. Все может быть, но тогда в результатах стоит написать, что может быть так, а может и по-другому.
Я ответил на все вопросы, обозначенные в преамбуле статьи и надеюсь, она оказалась полезной. Напоследок признаюсь, что это первые онлайн-курсы, которые просто не оставляют тебе шанса бросить их на полпути или забить.. Сейчас у нас примерно экватор, а это значит что меня уже заждалась домашка и жесткий дедлайн не дремлет! Удачи!
Как стать дизайнером интерфейсов – пошаговое руководство
В статье план развития в дизайне интерфейсов. Рассмотрела вопросы: с чего начать, что знать и уметь, к чему стремиться, как оформить портфолио, а также затронула зажигательные моменты профессии дизайнер интерфейсов 👇🏻
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Авг 3, 2020 · 21 мин читать
Дизайнер интерфейсов – это начальный уровень в траектории развития Дизайнера цифровых продуктов или Продуктового дизайнера (UX/UI). Такой спец работает в продуктовой компании, а не в агентстве. Он адепт одной компании в которой работает, фанат продуктов, для которых он создает интерфейсы и развивает дизайн-систему. В работе он применяет готовую дизайн-систему и собирает из нее интерфейсы под новые функции, которые (чаще всего) уже в каком-то виде заточили инженеры. А также вносит правки в существующую дизайн-систему, развивает ее. Помогает инженерам развивать инфраструктуру, проводит небольшие исследования, периодически изобретает новые элементы управления. Такая работа притягательна для тех, кто любит, как инженер, точить большие сооружения, долго и планомерно.
UI-дизайнер – это другой термин и другая профессия. UI-дизайнер чаще работает в международном диджитал-агентстве и на фрилансе. Он не фанат какого-то одного бренда, он фанат творчества в диджитал пространстве. Ему нравится делать новое на вкус, цвет, по ощущением, отгружать ценность по всем фронтам заметным способом, помогать прорабатывать видение и поднимать бренды в диджитал. Работать с множеством разнообразных клиентов поднимать новые уникальные продукты, которые выделятся из толпы. Из таких разнообразных трофеев он и собирает портфолио. К нему часто приходят, когда программировать еще даже не начали. В продуктовых компаниях таких ребят по пальцам пересчитать, в отличие от дизайнеров интерфейсов, которых много.
Есть еще термин UX-дизайнер, но в рунете чистых UX-дизайнеров не ищут, так как сложно однозначно описать их должностную инструкцию. В рунете вместо термина UX-дизайнер применяют такие термины как: CX/UX-исследователь, Аналитик данных, Дизайнер интерфейсов, UI-дизайнер, Продуктовый дизайнер (UX/UI) – все, что покрывает процесс дизайна-пользовательского опыта (процесс UX-дизайна). Чтобы работать UX-дизайнером в полном объеме требуются все эти навыки. Вы можете познакомиться с полным списком здесь.
Под профессией UI-дизайнер и Дизайнер интерфейсов стоит совершенно разный комплект навыков. Это значит, что если вы планируете работать именно по профессии Дизайнер интерфейсов, а не UI-дизайнер, то нужно нарабатывать другие компетенции. Поэтому рекомендую изучить статью максимально подробно, чтобы цель совпала с ожиданиями.
Содержание:
Сила и ценность дизайна интерфейсов для бизнеса
В чем ценность дизайна интерфейсов для бизнеса
Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя.
Дизайн интерфейсов – это про представление информации с учетом ее природы, особенностей цифрового носителя, принципов восприятия и решаемой задачи. Дизайн интерфейсов также призван сэкономить время инженеров, так как еще на фазе прототип понятно, как все должно работать. Это значит, что новая функция раньше окажется на живом у клиентов и сделает платформу, экосистему, инфраструктуру крепче и сильнее конкурентов.
Чем полезен дизайнер интерфейсов
Дизайнер интерфейсов создает элементы управления, через которые мы можем получить доступ к полезностями и ценностям приложения. Именно под интерфейсом находится программный движок и вертятся данные понятные только машинам.
Если вглядеться в современные приложения, такие как карты Google, будильник iPhone, модуль бронирования на сайте отеля или калькулятор кредитов на сайте зеленого банка, можно заметить универсальные принципы дизайна интерфейсов, которые не зависят от стандартов операционной системы, среды или устройства. Тот, кто знает эти законы, может улучшить существующую систему или создать с нуля свою собственную.
Поглядите девайс, он много чего умеет, но без интерфейса доступа к этому не получить. В данном случае дизайнер помог создать функциональную оболочку вокруг контента. По стилю она близка к стандартному UI-киту платформы, на которой работает и стилизована по гайдлайнам бренда. Это пример приложения Craft. Кстати, такую штуку можно запрототипировать в InVision Studio.
Когда мы говорим о дизайне интерфейсов – речь частенько идет о дизайне в стиле минимализм, с минимальным характером, такой дизайн как правило у крупных продуктовы компаний на рынке, они стараются как можно быстрее заполнить пространство рынка новыми функциями-фичами и предполагается, что все эти функции нужны и ценны. В книге “Загмайстер и Уолш: О Красоте”, автор сравнивает такой дизайн с панельками повышенного комфорта.
Как бы мы не ругали «хрущевки», но для людей из коммуналок и бараков в 1960-е они были чуть ли не дворцами. Фото: ТАСС
Загмайстер и Уолш, конечно, хотели бы видеть больше чувств у брендов в интерфейсах и приводят слайды зданий в пример. Но тут важно понимать, что картинки слева строились дольше в большом количестве, поэтому и пришлось для обеспечения множества людей жильем и выполнения политических планов делать так, как на картинках справа. Такие дела.
В этом и есть, кстати, соль отличия от работы в агентстве и гигантской продуктовой компании. Все продуктовые компании делают как справа, а в агентства всегда приходят за уникальными проектами, как слева, чтобы выделиться, запомниться, откликнуться в сердцах своей аудитории и разжечь желание повторить опыт взаимодействия.
Китай с особенной культурой (слева) и Китай как весь мир вокруг (справа).
В статье про боевые практики минималистичного дизайна приложений в действии: Instagram, Airbnb, Apple Music вы можете поглядеть, вот такую картинку про уникальность и выразительность. Тот самый Content-First работает во всей красе. Все как писали ребята Загмайстер и Уолш: “О Красоте”.
По-сути тут уже и видно, что профессия Дизайнер интерфейсов – одна из стартовых точек, а расти ему дальше можно в UI-дизайнера и развиваться в бренд-дизайне или в Продуктового дизайнера (UX/UI) и развиваться в исследования и аналитику.
Дизайнер интерфейсов – игрок в продуктовой команде, а в ней много инженеров и они все время что-то точат, кодят. Ресурсов на продуманный интерфейс для пользователя у них не хватает, в итоге использовать продукт без инструкции не удобно. Дизайнер интерфейсов помогает это исправить и сделать продукт удобный для людей.
Кстати, откуда вообще взялась норма с инструкциями у инженеров? На мой взгляд все просто. Программисты сами часами с удовольствием лазят по всяким библиотекам, разделам документаций различных API, вот им и кажется, что лазить по документациям – это очень кайфово. В обычном мире люди такого не ждут. Если перед нами дверь, то тяни или толкай, если ложка, то хватай-черпай и в рот клади. А не инструкции всякие, а конструкции то тоже инженерные. Только сделаны они с учетом реального мира, вместе с дизайнерами. Вот и в интерфейсах также надо делать: бери и пользуйся. Без инструкций.
Задача дизайнера интерфейсов в продуктовой компании – снижать нагрузку на сознание пользователя и ускорять достижение значимых целей. Визуального творчества здесь поменьше, чем в агентстве, зато есть горы творчества на конструкторском уровне и исследования с целью разобраться в задаче.
За выразительность интерфейса в продуктовой компании отвечает бренд-менеджер с бренд-дизайнером в паре (потому что бренд должен быть продуман во всех точках контакта), дизайн-система уже тоже построена и продумана и вертится на обширной продуктовой линейке, поэтому в первую очередь требуется решать входящий поток новых задач с помощью готовой обширной дизайн-системы, а также проводить небольшие исследования. Серьезные исследования проводят команды аналитиков данных, cx-исследователей, продакт-менеджеры и маркетологи. В общем большая команда рядом. Для тех, кому нравится глубина проработки и фанатичность – это сюда.
Нюанс: Отличие Дизайна интерфейсов от UI-дизайна. Дизайн интерфейсов ≠ UI-дизайн
В рунете термины встречаются в разных контекстах, а между тем, эти термины принципиально разные.
Дизайнер интерфейсов – работает в компании с большим количеством сервисов (продуктовая экосистема): Apple, Google, Uber. Я привела компании-первопроходцы с самыми известными на весь мир дизайн-системами. Другие компании пока последователи, их разберем позднее. Работа с интерфейсами подходит ребятам с инженерным складом ума. Это ребята-инфраструктура и план, на таких держится сельское хозяйство, заводы, оборонка, строительство. Например, с культурой работы в дизайн-системе Uber вы можете познакомиться здесь.
Style Guide Uber, позволяет дизайнерам тестировать разные конфигурации компонентов.
Продуктовый дизайнер (UX/UI) – работает в активно растущих игроках, которые фанатично развивают один продукт и экосистему вокруг него, например Stripe, Spotify, Intercom, Mailchimp, Telegram. В отличие от дизайнера интерфейсов он больше исследует, предлагает концепции, работает над воплощением, затем вместе с аналитиками корректирует курс. Продуктовый дизайнер выдает больше смелых решений проблем в жизни клиентов, а не просто работает над интерфейсом по готовому ТЗ. Он исследует настоящую жизнь клиентов и находит способы как сделать ее лучше.
UI-дизайнер – работает в диджитал агенствах (в том числе полного цикла) с разработчиками, дизайнерами, исследователями в штате или на фрилансе. Например Outcrowd, Focuslab, Ueno. Идеальная работа для творческих ребят, увлекающихся экспериментами, конструированием и рисунком. С такими можно внезапно подорваться в приключения и прийти с внезапными трофеями. Ребята жаждут открытий и новых ощущений. Их зажигает создание концептов, прототипов будущих продуктов. Именно такие ребята сподвигают общество к переменам, осмыслению и пересмотру взглядов. К ним приходят за свежим уникальным решением.
Кто такой дизайнер интерфейсов и чем на самом деле он занимается
Дизайнер интерфейсов изучает сценарии поведения пользователей, чтобы создать понятный и полезный интерфейс. Он проектирует то, как пользователь будет взаимодействовать с продуктом.
Дизайнер интерфейсов — это спец, который помогает команде разработчиков делать интерфейс удобнее для пользователей. Чтобы определить, что такое «удобнее» для самих себя, коллег-разработчиков и пользователей, они используют принципы проектирования. «Удобно» можно сформулировать так: большинство пользователей решает задачу максимально быстро.
«Удобно» – слишком абстрактная формулировка, и её сложно применять на практике. Поэтому проще использовать конкретные принципы, которые можно измерить и которые в сумме обеспечивают то же самое. Эти принципы:
В списке нет таких понятий как «соответствие целям и сценариям пользователя», «теория близости» или «скорость работы приложения» — всё это должно работать по умолчанию.
Подробнее про каждый принцип проектирования интерфейсов можно изучить в статье от команды дизайнеров IntelliJ IDEA.
Какие задачи решает дизайнер интерфейсов и чем зажигает эта профессия
Дизайнер интерфейсов помогает создать новый продукт или реализовать новый сценарий и поддерживает развитие уже раскрученных приложений (прорабатывает новые сценарии). А еще он может залезть в аналитику и найти точки для улучшения полезного сценария в продукте и предложить прототип.
Профессия дизайнер-интерфейсов хороша для старта. Это идеальная работа для перфекционистов тем, что здесь можно всю жизнь посвятить полировке функциональных элементов (кнопок, меню, ссылок) и микроанимаций, совершенствованию интерфейса продукта и опыта взаимодействия. Но с точки зрения творческой составляющей, для ребят, которые хотят быть заметными, творить разнообразные выразительные системы, делать новые выделяющиеся на международном рынке решения, жечь креативом и наглядными результатами, здесь конечно пространство для роста резко ограничено.
Основные этапы работы в дизайне интерфейса
ТЗ дизайнеру интерфейсов, как правило, приходит невероятно проработанное. А дизайн-система уже собрана, да и бренд-дизайн весь тоже готов и отлажен по коммерческим показателям. Фактически остается совсем немного работы, чтобы довести все до результата. Вся неопределенность в проекте уже снята, остается вписаться с интерфейсом в потребности.
Первый шаг — это всегда понять задачу. Если в продуктовой компании четко поставлена работа по продакт-менеджменту, то продакт-менеджер уже расчертил вектор развития продукта, вместе с аналитиками маркетологами разобрал сильные и слабые стороны игроков, пощупал их руками, покатался на них и четко знает, какой интерфейс нужен, а какой нет.
От дизайнера на этом этапе требуется вникнуть в бизнес-цели, изучить собранный контекст исследований и не потерять детали.
Следующий шаг — концептуальное прототипирование. Дизайнер использует стандартные инструменты, к примеру Figma или InVision Studio. В нее можно закинуть эскизы, накинуть сверху готовых компонентов, настроить микроанимации и уже получиться продукт как живой. Дальше это все дело можно отправить всем участникам команды и собрать обратную связь.
Чтобы набросать концепцию или протестировать идею лучше выбрать InVision Studio, в нем можно быстро собрать концепт со всеми эффектами и микроанимациями: дать команде возможность прочувствовать экспериенс на своем устройстве.
Проектирование экранов и состояний
Когда концепт утвержден, в Figma прорабатываем все экраны и состояния до предела со всеми нюансами навигации, используем компоненты существующей дизайн системы и дополняем новыми компонентами которых не хватает.
Прототип нужно подготовить к разработке. Это самая простая работа, потому что InVision Studio сделает все автоматически. InVision Studio + InVision Inspect и разработчики счастливы. Единственное, что вам как дизайнеру нужно делать – это поддерживать дизайн-систему в актуальном состоянии (новые компоненты, их состояния, примеры работы в контексте), называть новые дизайн-объекты осмысленно и применять принципы по организации дизайн-проекта. Но это все нарабатывается и развивается по мере работы буквально парой советов и маленьким документом правилами.
Следующий шаг — тестирование. В продуктовых командах развита культуру тестирования на пользователях. А InVision Studio хороша тем, что она помогает тестировать прототипы уже в поле и собирать обратную связь. В связке с InVision Inspect она помоагет передать все это дело в разработку просто реактивными темпами, ну а дальше разработчики с аналитиками выполнят всю ключевую работу по запуску и постановке задачи на корректировку.
Особенности работы в компании, агентстве и на фрилансе
Дизайнер интерфейсов – это чаще новичок в продуктовой компании. На фрилансе в одиночку ему может не хватить сил сделать смелый по выразительности проект.
А среди агентств нужно искать агентства с разработчиками в штате и несколькими крупными постоянными клиентами. Такие агентства еще называют агентства полного цикла и диджитал-интеграторы. В таких компаниях для дизайнера-интерфейсов может найтись работа схожая с работой в продуктовой компании. Так как такая компания оказывает услуги сервис-дизайна крупным игрокам, у которых свой штат диджитал-спецов не справляется или пока вовсе отсутствует (такие компании, к примеру, только шагнули в эпоху диджитализации). Другие агентства берут UI-дизайнеров с прокачанными художественными навыками, готовых к творческим смелым экспериментам над дизайн-концепциями.
С кем в команде работает дизайнер интерфейсов
Чтобы создать интерфейс, который будет комплексно решать задачи пользователя, дизайнеру нужно добыть данные от других спецов. Он работает с менеджером проекта, стратегами, аналитиками данных, cx-пользователями и разработчиками.
Например, команда развивает приложение для приема заказов такси. Стратеги изучили обстановку на рынке и выяснили, что таксисты нашли способ применения чата в Telegram или WhatsApp, чтобы совместно влиять на спрос и цену. Теперь продакты могут собрать механику развития продукта, передать эти данные дизайнеру и он сможет учесть этот нюанс в интерфейсе продукта.
Обязанности дизайнера интерфейсов
Дизайнер интерфейсов вникает в результаты исследований, механику бизнес-модели, анализирует сценарии поведения, протопирует варианты, чтобы разработать понятный и полезный интерфейс. Он прорабатывает детали того, как пользователь будет взаимодействовать с продуктом. В основные обязанности дизайнера интерфейсов обычно входит:
Какими знаниями, личными качествами и навыками обладает дизайнер интерфейсов
Здесь чек-лист концепций, которые ежедневно помогают мне в работе над UI-дизайном. По каждому пункту в Google есть много информации на русском. Рекомендую использовать именно Google, потому что ребята стараются помогать с поиском, на первом листе выдачи уже будет много ценного.
Личные качества
Знания
Навыки
Какие инструменты использует в работе дизайнер интерфейсов
Для погружения в задачу. Результаты опросов, интервью, Customer Journey map (CJM), BPMN-диаграммы, отчеты от аналитиков из систем аналитики (Google Firebase, Amplitude, OWOX BI, Google Analitycs 360)
Для дизайн-мышления. Пробковая доска, листы A4, принтер, блокнот, стикеры разных цветов, карандаши, маркеры. Все это пригодится для понимания задачи, создания первых схем, концептов, подбора компоновок.
Дизайн интерфейса. Если вы находитесь в смелой продуктовой компании, то Figma вам не хватит, потому что с ней вы всегда думаете “а смогу ли я это реализовать, поддерживает ли Figma”. А вот с InVision Studio вы можете реализовать любую задумку и проверить идею без ограничений в поведении. Поэтому Figma часто дополняют связкой: Figma + Principle, Figma + ProtoPie.
Для интерактивных прототипов. Для создания интерактивных прототипов годятся InVision Studio, Principle.
Я считаю, что инструментов много не бывает. Они же как краски, помогают прокачать ваш дизайн-процесс и сделать результат насыщеннее или быстрее, как требует задача. В этой статье я разобрала свежий комплект инструментов для дизайна, которые помогут сделать блестяще все: от вайрфреймов до интерактивных дизайн-систем.
С чего начать изучение дизайна интерфейсов – первые 10 шагов в дизайне интерфейсов
1. Изучите устройство дизайн-систем международных брендов
Загляните в интерфейсы Airbnb, Mailchimp, Google Material Design, Apple Human Design Guidelines. Черпаните культуру ТОП-экосистем. Пощупайте на разных устройствах. Изучите досконально предысторию, принципы на которых держится дизайн-система. Почувствуйте культуру и особенный подход. Гуглите по запросам ‘uber design system’, ‘airbnb design system’ и т.д.
2. Возьмитесь за первый проект по дизайну интерфейсов и сделайте его вместе с наставником
Подыщите курс с легким стартом и ассортиментом интересных и жизненных проектов. К примеру курсы UX/UI на Breezzly. Задизайните веб-сервис, приложение для смарт-часов или мобильное приложения для бронирования кафе, а затем уже погружайтесь дальше через очные курсы с командной работой (поможет сильнее прочувствовать весь дух профессии).
3. Зарегистрируйте в международных сервисах и найдите в них элементы дизайн-системы
Для этой задачи отлично подходят Airbnb (b2c) и Mailchimp (b2b).
К примеру, зарегистрируйтесь в Airbnb, забронируйте местечко и съездите в путешествие, вернитесь и оставьте отзыв. Почувствуйте роль интерфейса во всем процессе и в вашей жизни и в вашем путешествии. Поразмышляйте, что вы бы улучшили?
Затем, зарегистрируйтесь в Mailchimp. Соберите единомышленников список и отправляйте им в течение пары недель интересные и полезные письма. Изучите историю развития бренда Mailchimp, как вы думаете, как ему удалось завоевать весь мир?
4. Отрисуйте ключевой сценарий во всех деталях и прочувствуйте дизайн-систему в работе
Определитесь для какого устройства/размера экрана вы собираете прототип. Расчехлите Figma или InVision Studio.
Возьмите готовую дизайн систему, например material design или ios ui kit и используя готовые компоненты соберите первую версию экранов для всего сценария.
Доработайте компоненты которых не хватает и наполните экраны живым контентом. Не используйте генераторы текста
Сравнивайте экраны со скетчами, до/после.
5. Проработайте анимации во всех нюансах и добейтесь того же качества исполнения, что и оригинал
Начните с повтора готовых анимаций, найдите ту, которая вас зажигает. Действуйте так: снимите анимацию на видео и покадрово изучите ее тайминги. Затем возьмите Figma + Principle или InVision Studio и повторите ее вовсех нюансах. Почувтсвуйте движение и текучесть интерфейса.
6. Изучите ТОП-3 книги по дизайну интерфейсов (международный ТОП)
Сейчас я рекомендую всем следующую подборку книг для старта:
Эти книги хороши живой подачей, обилием иллюстраций, алгоритмами, схемами, кейсами и проверенными боем на международном рынке советами.
7. Прокачайтесь в инструментах прототипирования и анимации, чтобы стать смелее в реализации идей
Не стоит бояться новых инструментов и программ, подойдите к их изучению с исследовательской точкой зрения. Чаще всего у каждого инструмента есть свои сильные стороны и какие то задачи в них делаются быстрее. Полную подборку инструментов берите здесь.
Я в своей работе применяю: Figma, Principle, InVision Studio, After Effects, Photoshop, ProCreate. Зависит от задачи. По-сути я стараюсь расширять свой творческий арсенал, а не ищу один лучший инструмент.
8. Вступите в самые популярные дизайнерские сообщества и задайте самый волнующий вопрос
Есть три самых насыщенных информацией сообщества в рунете на тему продуктового дизайна. И задайте самый волнующий вопрос. Вступайте же:
9. Пройдите практику по дизайну интерфейсов на боевом продукте
Для выполнений упражнений подойдет Figma и InVision Studio.
10. Опубликуйте портфолио
В портфолио больше внимания уделяйте аналитической составляющей. Если подаете дизайн-систему, то расскажите о том, почему она такая и чем хороша, поделитесь культурой работы с ней и пользой для применения на практике. Если собираете новую функцию с нуля, то расскажите об аудитории, которой ценна эта функция, продемонстрируйте схемы взаимодействия: User Flow, Wireframes, Flowcharts и интерактивный прототип. В вашей работе должен чувствоваться аналитический подход к погружению в задачу, декомпозиция
Примеры оформления портфолио: Изучите кейсы компании MetaLab. Ребята с 2006 года помогают известным международным диджитал брендам создавать интерфейсы для продуктов.
Вы также можете делиться своими работами или кусочками процесса прямо в dribbble: https://dribbble.com/NewWingsAsya.
Очень важно. В портфолио фокусируйтесь на презентации элементов культуры работы, навыков, умений и подхода, тогда и подача придет в интересном визуале.
Что дальше изучать по дизайну интерфейсов
Развивайте творческие навыки, тренируйтесь в эстетике и погрузитесь в культуру развития продукта на основе данных.
Где начать работать, чтобы раскрыться на полную
Начните с продуктовой компании, если у вас мало практики в иллюстрации и веб-дизайне. Со временем прокачаетесь по UX. Художникам в душе, я рекомендую агентство. И вот почему. В агентстве вы быстрее соберете разноплановое портфолио. И это очень важный момент, когда вы только начинаете и хотите ощутимо расти. Начните собирать портфолио как можно раньше. Если по итогу года работы вам вам все еще нечего показать, то почитайте книгу «Покажи свою работу! 10 способов сделать так, чтобы тебя заметили». Портфолио и навыки – ваше все. И это все должно быть видно!
Вывод и рекомендация
Направление дизайна интерфейсов годится для старта, как только освоитесь в нем, то сразу продолжайте расти в UI-дизайнера, UX-дизайнера и Продуктового дизайнера.
Если вас интересует системный и быстрый старт в дизайне интерфейсов, то вы можете пройти сначала практику в проектах на курсах Breezzly, затем изучить копирайтинг и основы работы с клиентом у Ильяхова, основы типографики, бренд-дизайна в Contoforoma, а затем уже подбирать следующую серию курсов.