дизайнер интерфейсов что нужно знать
Кто такие 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.
Стиль с фокусом на определенную эпоху, культуру прошлого.
Грязный, неопрятный, иногда даже стиль. Возник как альтернатива гламуру и фальшивой красоте. Устойчивый тренд, дающий большой простор для самовыражения.
UX/UI-дизайнер: все, что вы хотели знать, но боялись спросить
На связи опять ребята из Hays, и сегодня мы расскажем о профессии UX/UI-дизайнера: кто это такой, чем занимается, сколько зарабатывает и как им стать.
Ок гугл, кто такой UX/UI-дизайнер?
Вовсе не обязательно, что они все стопроцентно будут входить в продуктовую команду: необходимость того или иного team member зависит от конкретных задач, которые нужно закрывать, и безусловно, от масштаба бизнеса и самого продукта.
Сегодня мы поговорим о наиболее распространенной в компаниях на данный момент роли: UX/UI-дизайнера в единственном лице (UX Generalist, будем называть его так). Он решает широкий спектр задач: исследует поведенческие паттерны, проектирует различные варианты пользовательского опыта, прорабатывает те или иные гипотезы совместно с командой, тестирует их, проводит пользовательские интервью и исследования, и с учетом полученных данных создает привлекательный, понятный и удобный интерфейс, который помогает решить предполагаемую задачу пользователя.
Поскольку повседневные и рабочие процессы стремительно перетекают в виртуальное пространство интернета и гаджетов, для дизайнеров появляется все больше возможностей и интересных проектов: web, мобильные приложения, программное обеспечение для бизнеса, умные устройства и даже панели управления в самолете или автомобиле.
Чем занимается UX/UI-дизайнер?
На самом деле UX/UI-дизайнер выполняет множество разных функций — и все ради того, чтобы конечный продукт приносил удовольствие пользователю.
Исследует пользователей: методы исследования могут включать опросы, наблюдения и интервью.
Продумывает информационную архитектуру: определяет, как продукт организован и структурирован, создает скелет, который показывает, как пользователи взаимодействуют с продуктом.
Создает каркас продукта — Wireframing. В основном каркас представляет собой линии и фигуры с небольшим количеством текста. Это можно делать вручную, а также с использованием ПО.
Прототипирует: создает раннюю модель продукта, демонстрирующую его функциональность. Прототипы могут быть в физическом или цифровом формате, а также различаться по сложности. Иногда прототип создается для демонстрации одной конкретной особенности продукта — например, перехода между экранами или того, как продукт физически выглядит и ощущается. На протяжении всего процесса проектирования создается несколько прототипов любого продукта.
Создает визуальный дизайн. Фокусируется на том, как выглядит продукт или технология, — для этого необходима непосредственная отрисовка той части продукта, которой касается пользователь.
Основная цель работы любого дизайнера — сделать продукт, дизайн которого будет повышать уровень удовлетворенности клиента и его лояльность благодаря пользе, простоте и удовольствию от использования.
Как стать дизайнером?
Этому можно научиться. Образование в области дизайна или информационных технологий будет несомненным преимуществом для развития в этой профессии. Сегодня некоторые вузы уже открыли направления бакалавриата и магистратуры, которые дают основу для старта. Также существуют курсы профессиональной переподготовки, где происходит погружение в профессию.
Рынок образовательных услуг наполнен огромным количеством курсов и проектов по данной теме, поэтому выбрать этот путь может любой желающий.
По этой ссылке вы найдете список из 15 книг, которые помогут вам на пути становления в профессии дизайнера.
Следующим важным фактором является портфолио — при отборе канидадата это первое, на что обращают внимание.
Самый комфортный путь развития в профессии: начало на junior-позиции в консалтинге или дизайн-студии, затем переход на уровни middle и senior. Преимущество агентств и студий перед работой в продуктовой компании заключается в том, что на старте работы junior сможет поработать с разными проектами и заказчиками и таким образом набраться опыта.
«В первую очередь необходимо желание докапываться до сути и показывать это в своем решении. Это помогает разобраться в проблеме до того, как ты сел за рисование макетов, и вообще развивать карьеру. Например, многие кандидаты к откликам на вакансии прикладывают ссылки на Google Drive, даже не попытавшись проверить, как это работает. А там ни решаемая проблема, ни роль человека не ясны. Да и макет толком посмотреть невозможно. И в итоге остаешься с ощущением, что человек точно так же не думает о своих пользователях, когда делает продукт», — рассказывает Дмитрий Борисенков, Head of Design at VTB.
Основные требования к UX/UI-дизайнеру.
Свободное владение тулами прототипирования: самый популярный сейчас Figma, чуть менее — Sketch, Illustrator, Adobe XD и др.
Опыт отрисовки UI-элементов, иллюстраций, иконок.
Владение основами типографики и композиции.
Способность к генерации и визуализации интерфейсных решений.
Понимание принципов usability и адаптивности веб-интерфейсов.
Умение пользоваться инструментами Story Map, Customer Journey Map, User Story.
Навыки верстки, знание языков HTML и CSS.
Знание гайдлайнов для мобильной разработки Material Design Human Interface Guidelines.
Понимание технологий frontend-разработки.
При этом среди требований не встречаются профессиональные скиллы в рисунке — куда важнее уметь работать со специальным софтом. Дизайнер должен обладать вкусом, уметь работать с абстракциями и воплощать идеи в реальность, но ему совершенно не обязательно для этого оканчивать художественную школу или училище.
Мотивация и карьерный рост
После прохождения стандартного пути junior — middle — senior у дизайнера есть возможность дорасти:
в продуктовой компании — до Design Lead, а затем и до Head of Design,
а в агентстве или студии — до арт-директора.
Среди мотиваторов выделяют материальные:
высокий доход (от 80 до 340 тысяч в Москве, в среднем — 220 тысяч; от 60 до 300 тысяч в Санкт-Петербурге, в среднем — 190 тысяч),
а также нематериальные:
работа над продуктами с миллионной аудиторией,
работа с международными командами,
возможность переезда за границу,
возможность создания крутого дизайна с нуля,
возможность нести ответственность за весь продукт,
карьерный рост и возможность углубиться в одно из направлений.
«В работе меня мотивируют сложные задачи и возможность влиять на результат. Я могу придумать варианты решения проблемы вместе с командой дизайна. Или сделать так, как хочу, ни с кем не согласуя, показать результат в цифрах и получить еще больше свободы», — отмечает Дмитрий Борисенков, Head of Design at VTB.
Что должен уметь дизайнер интерфейсов
Мы живем в эпоху postdigital, когда аналоговые системы давно в прошлом, а пришедшие им на смену digital-технологии очень быстро эволюционируют.
Кнопочные телефоны сегодня – прошлый век, почти каждый городской житель вне зависимости от возраста и социального положения пользуется смартфоном, заходит в интернет, покупает что-то через приложения или использует их для множества других целей.
Любые интерфейсы должны быть просты, удобны и приятны для использования, будь то автомат по продаже билетов в московском метро или интернет-магазин модной одежды. В нашей индустрии создание навигации сайтов, приложений, ПО и любого другого оборудования стало одним из важнейших направлений работы.
UI/UX дизайнер мобильных приложений
Навыки
Думать: Теоретические навыки
Делать: Профессиональные навыки
Действовать: Личностные качества
Кто такой дизайнер интерфейсов
Михаил Розов (Pinkman) считает, что дизайнер интерфейсов должен уметь:
Так как это сейчас одно из самых популярных направлений на рынке, в Москве такой профессионал может рассчитывать на зарплату от 50 до 170 тысяч рублей, в регионах – от 30 до 90 тысяч.
Бытует мнение, что сегодня очень легко найти дизайнера интерфейсов в любую компанию, поскольку скорость найма такого сотрудника высока как никогда. По факту же это очень рискованно, так как велик шанс нанять человека, который не в состоянии самостоятельно разработать жизнеспособный продукт.
В связи с огромным количеством предложений на рынке, большинство дизайнеров не погружено в профессию, а клиент часто не может отличить по-настоящему хороший результат от среднего по качеству и уровню исполнения.
Действительно, благодаря современным технологиям любого человека можно за час научить создавать интерфейсы. Figma, к примеру, в пять раз проще, чем тот же Word, а сложный Photoshop уже многие подзабыли, поэтому и получается, что практикующих дизайнеров много, а нормальных продуктов – крайне мало.
Что нужно уметь
Дело в том, что, помимо навыка работы с софтом, хороший дизайнер должен обладать тем, что мы называем skill set. Сюда входит целый набор умений и знаний:
Для этого недостаточно быть просто графическим дизайнером, необходимо иметь представление о форме, композиции и уметь рисовать самому, создавать концепцию того продукта, над которым работаешь.
Такой подход подразумевает работу с самым разным софтом – помимо Figma или Sketch, нужно уметь работать в 3D.
Вставить фотографию, сделать цветокоррекцию – все эти небольшие, как кажется, штрихи скрывают за собой множество самых разных навыков.
Безусловно, можно найти нужную картинку на стоках или заказать объект у иллюстраторов и визуализаторов, но, на мой взгляд, это дилетантство, поскольку такой подход снижает качество продукта.
Чтобы прийти к стабильно высоким результатам, необходимо научиться прорабатывать проект на всех уровнях без привлечения сторонних специалистов.
Куда пойти учиться
Дизайн-образование в России сегодня отвечает требованиям индустрии, помимо Школы дизайна НИУ ВШЭ и Британской высшей школы дизайна, существует масса различных курсов, предназначенных для людей, начинающих с нуля. Все они могут сделать из человека перспективного junior-дизайнера.
Но если компания нанимает сотрудника, она не видит смысла в разделении труда. Когда один человек делает 3D, другой – проектирует интерфейс, а третий – занимается коррекцией, – это всегда плохая и дорогая история. Гораздо выгоднее нанять одного, способного делать все сразу, именно поэтому мне интереснее нанимать middle-дизайнеров, работающих и с графическим дизайном, и с анимацией, и с проектированием.
Каждому специалисту, который хочет претендовать на звание профессионала, необходимо пройти определенный путь и иметь целый комплекс навыков, основанных на понимании того, хороший дизайн ты делаешь или плохой, – это почти интуитивное понимание формируется только в процессе работы, оно приходит с опытом.
БВШД предлагает следующую программу
UX/UI дизайн: Передовые методики для создания фундаментального и конструктивного пользовательского опыта
Программа предназначена для повышения квалификации веб-дизайнеров, дизайнеров сервисов и мобильных приложений, проектировщиков интерфейсов, digital-стратегов, стартаперов и венчурных бизнесменов, менеджеров цифровых проектов.
Обучение на программе UX/UI дизайн позволит освоить набор инструментов, приёмов, методик и концепций для создания фундаментального и конструктивного пользовательского опыта. Студенты изучат такие образовательные блоки, как генерация идей, исследования, стратегии UX/UI, прототипирование, аналитика и др.
Базовый фреймворк (Human Centered Design)
Design Sprint — взгляд из Mail.ru
IBM Design Thinking и навыки работы с AR/VR
Jobs to be done
Для обучения на курсе вам необходимо иметь собственные устройства, которые потребуется приносить с собой на занятия: ноутбук (желательно MAC, но возможно и РС) и смартфон на iOS или Android выпуска не ранее 2015 года.
Курсы UX дизайна включают работу в разных программах. Вам может понадобиться дополнительное программное обеспечение, покупку и установку которого необходимо произвести самостоятельно. Перечень, степень обязательности зависит от специфики учебных заданий и того, какими средствами вы решите реализовывать ваши проекты. Одними из самых популярных и основных инструментов для работы с UI на сегодня являются Sketch и Figma. Инструментами анимации могут быть Principle или Flinto. Для работы с VR мы будем использовать Unity.
Дизайнеру интерфейсов нельзя быть интровертом
Считается, что все дизайнеры – не склонные к общению люди, сосредоточенные на своей работе. Они мало разговаривают и еще меньше любят объяснять, в чем преимущество их продукта перед конкурентами.
К сожалению, это так: в начале пути все дизайнеры – интроверты, а если они не встречаются с клиентами, то таковыми и остаются. Но если человек видит свое будущее в этой профессии, ему необходимо научиться взаимодействию с социумом.
Именно поэтому, помимо hard skills, о которых рассказывали выше, нужно учиться правильно презентовать свой субъективный продукт клиенту и общаться с заказчиком. Нужно уметь убеждать, что твоя работа уникальна, поскольку не каждый менеджер сможет сделать это за тебя.
В начале пути многие дизайнеры проходят через заимствование, переработку или даже копирование чужих идей, поскольку существуют в некоем «информационном вакууме», при этом хорошему специалисту нужно научиться создавать абсолютно новый продукт.
Для этого, на мой взгляд, очень полезно постоянно проживать новый опыт как профессиональный, так и личный. Конечно же, нужно скачивать новые приложения и смотреть, как они работают, но важно и изучать что-то новое, читать, смотреть и даже слушать, путешествовать и впитывать впечатления.
Как стать дизайнером интерфейсов – пошаговое руководство
В статье план развития в дизайне интерфейсов. Рассмотрела вопросы: с чего начать, что знать и уметь, к чему стремиться, как оформить портфолио, а также затронула зажигательные моменты профессии дизайнер интерфейсов 👇🏻
Продуктовый дизайнер (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, а затем уже подбирать следующую серию курсов.