});
ДИЗАЙН В СРЕДЕ
ДИЗАЙН / 30 июля

Дизайн интерфейсов в 2020 году — интервью с преподавателем и UX/UI-дизайнером IBM Алексеем Комаровым

Пообщались с преподавателем предмета «Дизайн мобильных приложений» Алексеем Комаровым. Алексей рассказал, как подготовиться к собеседованию, за сколько времени можно научиться дизайну (спойлер: неожиданно быстро!) и нужно ли дизайнеру разбираться в коде.

Чем занимается дизайнер интерфейсов в IBM?

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

К сожалению, все мои рабочие проекты под NDA (договор о неразглашении — прим. ред.), но могу поделиться своим портфолио на Behance, которое я оформил, когда подыскивал вакансию после работы в «Сбербанке».
Если ваши проекты под NDA или их просто нет — вы можете публиковать на Behance дизайн вымышленных приложений, выполненных для несуществующих заказчиков. Навыки важнее строчек в резюме.

Что лучше — iOS или Android?

Я работаю с обеими платформами, но приятнее мне с iOS. Зоопарк Android-устройств очень большой. Условный Samsung покупает лицензию на операционную систему и имеет право не только использовать ее в своих устройствах, но и изменять. Чтобы сделать корректно работающее приложение под все оболочки Android от разных производителей, нужен бюджет и время, так как что-то может «полететь», особенно на бюджетных китайских смартфонах. Если Samsung гарантирует корректную работу оболочки, то от неизвестного бренда с AliExpress можно ждать неприятных сюрпризов — добавление какой-нибудь фичи может повлиять на весь интерфейс. В этом плане помогают гайдлайны, если от их принципов сильно не отходить, то интерфейс будет отображаться более-менее одинаково на разных устройствах.
Гайдлайн — руководство для дизайнеров и разработчиков от производителей операционных систем.
Если мы говорим про iPhone, Apple делает и сам смартфон, и операционную систему. Если вы сделали дизайн для iOS-устройства, он с 99-процентной вероятностью будет выглядеть на разных моделях так, как вы его задумали (хотя сбои тоже бывают).

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

Если говорить о платформе для работы — здесь условное преимущество Apple уже позади. Раньше мне приходилось делать интерфейсы в графическом редакторе Sketch, который есть только на macOS, теперь появились кроссплатформенные Figma и Adobe XD, которые скопировали его функции и сделали даже лучше. Figma считается топовым графическим редактором — в нем выполняются практические занятия на моих курсах, также я сам делаю в нем некоторые проекты.
Вы узнаете, что такое гайдлайны, освоите Photoshop, Illustrator, After Effects и Figma, а самое главное — научитесь проектировать интерфейсы, которыми будут пользоваться.
Дизайн цифровых продуктов

Зачем нужно скачивать приложения с рынков разных стран?

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

Каждый день я скачиваю на iPhone по несколько десятков приложений — я раскладываю их по папочкам, но их все равно очень много. Я скачиваю их с разных рынков — переключаюсь на аккаунты разных стран в App Store.
Магазин приложений App Store работает по принципу разделения на региональные рынки — обычным путем в нем можно скачать только те программы, которые представлены в России. Но если поменять страну в настройках аккаунта, то можно скачивать и другие приложения — многие пользователи это делали, например, чтобы скачать игру Pokemon Go до ее российского релиза.
Рабочий стол Алексея Комарова

Нужно ли дизайнеру знать код?

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

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

Как подготовиться к собеседованию?

Два ключевых совета

  • Тщательно изучите вакансию. В ней описано то, с чем вы будете работать, и то, о чем вас точно будут спрашивать на собеседовании. Если какого-то из требуемых навыков у вас нет, погуглите, освоить что-то бывает совсем несложно — главное, чтобы вы поняли, что сможете это быстро изучить при необходимости.
Пример взят из вакансии банка ВТБ на hh.ru
  • Готовьтесь к тестовому заданию заранее. Тестовое задание можно попытаться предсказать: в сфере электронной коммерции часто просят задизайнить форму оплаты, в такси — экран быстрого заказа. Когда-то я проходил собеседование на роль дизайнера в популярный сервис заказа такси, и тестовым заданием было изучить приложение и предложить, как его можно улучшить.

Три вопроса, которые могут задать дизайнеру интерфейсов

— Чем мобильное приложение отличается от мобильной версии сайта?
Допустимый ответ: тем, что сайт везде одинаковый — и на Android, и на iOS. А приложение нативное, в нем предусмотрены элементы разных операционных систем, которые лучше не смешивать, потому что опыт взаимодействия со смартфоном у разных пользователей сильно отличается. Есть еще разница в скорости работы — считается, что нативные приложения отрабатывают быстрее.
— В чем разница между кликами и тапами?
Допустимый ответ: пальцем выполнить действие получается быстрее, потому что между пользователем и интерфейсом нет дополнительного инструмента в виде мышки или тачпада.
Ликбез: клик — нажатие мышью, тап — пальцем.
— Какая минимальная область нажатия кнопки?
Правильный ответ: по гайдлайнам 44 на 44 pt для iOS и 48 на 48 dp для Android. Почему? Есть разные исследования и объяснения, но мне больше всего нравится это: потому что Android и iOS делали разные команды :)
При проектировании интерфейса дизайнер смело может принимать значения 1 pt = 1 dp = 1 px для базовых разрешений экрана.

Какие ошибки совершают начинающие дизайнеры интерфейсов?

  • Ошибка №1: дизайн — это, в первую очередь, красивые картинки. Начинающие дизайнеры часто пытаются сделать «красиво», дополнить дизайн вензелями, веточками и цветочками. Дизайн — процесс, который включает не только визуальную часть, но и продумывание расположения элементов, которое должно быть удобным и функциональным.

  • Ошибка №2: много — хорошо. Если, например, на собеседовании вас просят сделать один экран — делайте один, посмотрят только на него. Некоторые дизайнеры стараются перевыполнить задание и не успевают сделать все качественно.

  • Ошибка №3: собеседование — это кастинг. Собеседование — это свидание, где не только вам задают вопросы, но и вы делаете то же самое. Если вы будете просто кивать головой, работодатель сделает вывод, что вы не заинтересованы в работе и будете делать ее для галочки. Спрашивайте о проектах, продуктах и том, с кем вам придется работать. Советую посмотреть видео от «Яндекса» на эту тему — в нем хорошо объясняется, какие вопросы стоит задать на собеседовании.

Сколько времени может занять обучение профессии?

У кого-то прохождение пути с нуля до уровня суперуверенного дизайнера (которому могут дать проект, и он сделает его в одиночку) может занять всего шесть месяцев. Это возможно, если вы будете учиться днем и ночью, найдете наставника, пройдете какие-нибудь курсы и изучите большое количество уроков на YouTube. Но бывает и обратное — у меня есть знакомый, который прошел кучу курсов за четыре года, и все еще на этапе «джуниора». Все зависит от человека.

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

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

Где лучше работать — в агентстве или компании?

На старте карьеры я работал в агентстве UIDG, потом в продуктовой компании «Сбербанк», а сейчас в IBM — тут что-то среднее, есть и продуктовые задачи, есть и агентские проекты. Когда вы работаете в продуктовой компании, ваша работа размеренна, вы можете сделать 10 версий одной и той же страницы, посмотреть на них с разных сторон, провести A/B-тесты. Но делать одно и то же может стать скучно.

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

Востребованы ли наши дизайнеры за рубежом?

У меня есть знакомые дизайнеры, которые уехали в Америку и Англию. Если вы делаете все хорошо, то везде устроитесь, надо только знать английский.

Дизайн интерфейсов в России не уступает любому другому. Я подобрал два примера, которые мне понравились, и так вышло, что оба спроектировали российские дизайнеры.
Первое приложение — это каршеринг-сервис «Яндекс.Драйв». У него очень классно сделан онбординг-процесс — приветственный экран (или серия экранов) при первом заходе в программу. Когда вы открываете «Драйв», включается видео с человеком, который рассказывает о функциях приложения. И сам интерфейс хороший — лаконичный, все в тему.

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

Какие тренды можно выделить в дизайне интерфейсов?

Таких тренда, как минимум, два:

  • Темная тема. Этот тренд длится уже второй или третий год. Даже нефтедобывающая компания хочет темный интерфейс. Зачем? Потому что модно.
  • Дополненная реальность (AR). С использованием AR работают, например, маски в Instagram. В приложении Lamoda можно «примерить» обувь — вы смотрите на ноги через камеру смартфона, а на них проецируются кроссовки. В Яндекс.Картах через камеру показываются стрелочки по выбранному маршруту.
Примерка обуви в Lamoda. Источник: vc.ru
Навигация в AR-режиме в «Яндекс.Картах». Источник: yandex.ru

Как устроены курсы дизайна мобильных приложений в Среде обучения?

Я веду курсы в рамках дополнительного профессионального образования, и перед моими предметами студенты проходят и другие — например, учатся работать в Figma. Если кто-то плохо работает в редакторе, я кидаю ссылки на уроки на YouTube, с помощью которых ученики могут подтянуть знания самостоятельно.

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

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

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

В закладки: подкасты, книги, сайты и подписки от Алексея Комарова

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

  • «Запуск завтра». Подкаст технического директора Самата Галимова, который приглашает дизайнеров и разработчиков из разных компаний.
Подписаться →

  • «Сушите весла». Подкаст ребят из Redmadrobot. Они считаются самыми крутыми разработчиками приложений в России, которые начали это делать еще с выхода первого iPhone и до сих пор держат планку. Это подкаст про разработку, но про дизайн тоже говорят часто.
Подписаться →

  • Untitled. Ребята из «Тинькофф» рассуждают про жизнь, дизайн и то, куда он может прийти.
Подписаться →

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

  • «Не заставляйте меня думать», Стив Круг
  • «UX-дизайн. Практическое руководство по проектированию опыта взаимодействия», Расс Унгер и Кэролайн Чендлер
  • «UX-стратегия. Чего хотят пользователи и как им это дать», Джейми Леви
  • «Отзывчивый веб-дизайн», Итан Маркотт
  • «Сначала мобильные!», Люк Вроблевски
  • UX Design for Mobile, Пабло Пере и Пау Гинер (Pablo Perea, Pau Giner)
  • Simple and Usable Web, Mobile, and Interaction Design, Джайлс Колборн (Giles Colborne)

И не забудьте про гайды!

Сайты


Подписки

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

Лайфхак: если вам нравится дизайн сайта или приложений какой-то компании, зайдите в раздел «О компании» и постарайтесь найти вкладку «О дизайне». Компании часто о нем рассказывают.

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

  • You can be better.
ПОЛЕЗНЫЕ МАТЕРИАЛЫ