Хочу стать дизайнером мобильных приложений. Что делать?

Когда мы раньше слышали слово «дизайн», сразу представляли себе создателей одежды, интерьеров, ландшафтов. Сегодня же ассоциации уже совсем другие – веб-дизайнер, иллюстратор, UI/UX, графический, дизайнер коммуникаций.

Чтобы понять, кем именно ты хочешь стать, нужно сперва разобраться, кто чем занимается. Попробуем это сделать вместе с ведущим UI/UX-дизайнером MobileUp и куратором Факультета Дизайна мобильных приложений GeekBrains Аней Матвеевой.

Какие вообще бывают дизайнеры в IT?

Дизайнер коммуникаций

Это тот, кто отвечает за голос бренда и его развитие. Такой дизайнер чаще работает в продукте, а не агентстве. Он занимается не столько созданием нового бренда (скорее всего, когда он приходит на работу, брендбук уже есть), сколько тем, как этот продукт будет коммуницировать с пользователями: через логотип, сайт, лендинги, баннеры, фирстили конференций и событий, оформление стендов для мероприятий, Instagram-аккаунт, иллюстрации, – все составляющие визуального языка.

Графический дизайнер

Это история скорее про брендинг, плакаты, обложки альбомов, мерч. Но разовая: то есть графический дизайнер берёт заказ и делает заказ. Он не живёт с этим брендом, не сопровождает его. У него каждый раз новая интересная история.

Геймдизайнер

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

Если мы создаём приложения, которыми часто пользуются на ходу, ведь в них что-то важное, что нужно срочно посмотреть или проверить, то гейм-дизайнеры разрабатывают приложения, которые требуют от нас максимального внимания. Редко когда мы можем идти на работу (чтобы ни в кого не врезаться и не запнуться), пить кофе и одной рукой полноценно играть.

Это просто невозможно – играть удобно дома, сидя в метро, стоя в очереди, когда нас ничто не отвлекает.А вот заглянуть в банковское приложение или на карту метро мы вполне себе можем на ходу. Поэтому UX (user experience – проектирование опыта взаимодействия человека с приложением) тут совсем разный.

Моушен-дизайнер

Это про движение и анимацию. И, пожалуй, про 3D. Моушен-дизайнер делает крутые ролики, которые выводят бренд на новый уровень. Это могут быть заставки (например, для экрана в офисе или для огромной конференции), могут быть элементы сайта, рекламная кампания, ролик о бренде и его продуктах для клиентов и новых сотрудников. Всё, на что хватит фантазии.

Веб-дизайнер

Тут всё просто – этто про сайты компаний и лендинги. И, пожалуй, это тема для отдельной статьи.

UI/UX

UI – это интерфейс пользователя, а UX – опыт (есть ещё CX, это про клиентский опыт). Получается, что UI/UX-дизайнер делает не только дизайн, который мы видим, но ещё и проектирует опыт взаимодействия, то есть располагает кнопки там, где будет удобнее и понятнее ими пользоваться.

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

Дизайнер мобильных приложений

Это тот же UI/UX-дизайнер, который занимается сначала проектированием опыта пользователя, а потом самого интерфейса, но который при этом знает гайды Android и iOS. И это очень важный пункт. Нужно знать, к каким паттернам привыкли пользователи, чтобы правильно расположить кнопку «назад» или сделать привычный поп-ап, чтобы элементы были удобны пользователю и не заставляли его нервничать. Потому что он не будет разбираться, а скачает более удобное приложение (ведь сейчас почти у всех есть аналоги и конкуренты). А мы не должны терять пользователей. Но расскажем о работе мобильного дизайнера более подробно.

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

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

1. Исследование и формирование гипотез

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

Теперь у нас есть все данные, чтобы сформировать и приоритизировать гипотезы, написать job stories и составить CJM (Customer Journey Map). А это значит, что мы точно знаем, с чего начнём проектирование и каким будет первая версия продукта (или MVP – минимально жизнеспособный продукт).

2. Вайфрейминг

Это когда ты рисуешь экраны, но не сильно детализированные. Нет иконок, есть кружки; нет картинок, есть прямоугольники. Задача в том, чтобы быстро собрать основные экраны в кликабельный (то есть тот, который можно нажимать) прототип и проверить, что всё на месте и всё понятно. Такую «болванку» уже можно показывать коллегам (это называется «коридорное тестирование») и заказчику (чтобы быть с ним на одной волне и он был в курсе того, что происходит с его продуктом).

3. Дизайн-концепция

Это уже про внешний вид и концепцию взаимодействия – про интерфейс и визуальный язык, про приёмы общения с пользователем, про тон общения (дружеский или официальный), про геймификацию (вдруг нам нужно поощрять пользователя и придумывать награды).

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

Как же это делается? Берутся ключевые экраны или небольшие сценарии, которые лучше всего отражают нашу идею и прорабатываются уже так, как это будет выглядеть в готовом приложении.

4. Передача в разработку

Чтобы передать дизайн в разработку, в макетах должен быть порядок, экраны должны быть пронумерованы и разложены по сценариям. Также должна быть создана дизайн-система (или UI-Kit), где показаны все элементы во всех состояниях (например, кнопка в обычном состоянии, при наведении, при тапе, неактивная кнопка). Должен быть настроен экспорт, чтобы разработчик мог скачать любую иконку в нужном формате.

Что нужно знать, чтобы быть дизайнером мобильных приложений

Конечно, тут нужна база и инструменты, начнём со второго. Нужно освоить Figma. Это можно сделать прямо на сайте сервиса (только все материалы там на английском), либо найти обучающие ролики на YouTube. Важно научиться не только рисовать все фигуры и настраивать текст, но и пользоваться стилями, компонентами, фреймами и авто-лэйаутами (да, много незнакомых слов).

А чтобы рисовать иконки и готовить векторную графику, придется разобраться с Adobe Illustrator, а для подготовки растровых картинок – с Adobe Photoshop. Также вам придется изучить гайды Google (Material Design) и Apple (Human Interface Guidelines).

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

Йоханнес Иттен «Искусство цвета»

Йоханнес Иттен «Искусство формы»

Ян Чихольд «Новая типографика»

Александра Королькова «Живая типографика»

Ольга Голубева «Основы композиции»

Юрий Гордон «О языке композиции»

Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне. Пособие для графиков, типографов и оформителей выставок»

Readymag School. Grid

Readymag School. Typography

Бюро Горбунова «Типографика и вёрстка»


А также:

Видео лекций от школы дизайна Яндекса

Сайт сообщества Jobs to be done

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

Но процесс обучения не будет полным и максимально продуктивным без практики. Сейчас есть огромный выбор разных курсов, которые можно пройти не выходя из дома (в том числе наш Факультет Дизайна мобильных приложений, который мы сделали вместе с Geekbrains). Будет здорово, если у вас будет свой наставник или получится попасть на стажировку в настоящую команду, которая занимается мобильными приложениями.

0
19 комментариев
Написать комментарий...
Олег Степанчиков

Гикбрэйнс...с моей точки зрения далеко не авторитет в сфере обучения дизайну. Это типо предостережение)((

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Георгий Кварацхелия

Британка тоже то ещё заведение судя по рассказам выпускников.

Ответить
Развернуть ветку
elizabeth davydova

Подскажи, а куда идти или лучший вариант это самообучение (книги, видео и т.д.) ? 

Ответить
Развернуть ветку
Олег Степанчиков

Ну мое мнение чисто это курс от апрока, но там тоже есть нюансы. Лучше пока не видел курса, если кто то подскажет, буду благодарен

Ответить
Развернуть ветку
Василий

Прошёл все курсы?

Ответить
Развернуть ветку
Олег Степанчиков

нет.

Ответить
Развернуть ветку
Алексей Медведев

Что за хрень я прочёл? Ui/UX, WEB-дизайнер, дизайнер мобильных приложений... Как вы их поделили??? Кто вас учил? Гикбрайнс? Тогда все ясно...
Люди, не ходите в нетологию, гикбрайнс, ибо не хуй там делать!!

Ответить
Развернуть ветку
Михаил Гаугаш

Книга «добавь воздуха!» топ, база для новичка.

Ответить
Развернуть ветку
Огурец Молодец

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

Ответить
Развернуть ветку
Иван Хуртин

Как тогда научиться то???

Ответить
Развернуть ветку
голубцы по акции

Спасибо, очень полезная статья. Я всегда в этих видах дизайна постоянно путалась. 

Ответить
Развернуть ветку
Yes, Your Grace

И после статьи не разберешься, потому что написан здесь какой-то бред.

Ответить
Развернуть ветку
Karina Ivanova

Лаконичная и понятная статья, спасибо 😊 и материалы для изучения очень кстати! А некоторым надо бы замечать заголовки, чтобы внимательнее комментировать текст.

Ответить
Развернуть ветку
Анастасия Саутина

Мне понравилось, что подробно описан процесс создания: откуда берутся идеи и как они структурируются дизайнером. 

Ответить
Развернуть ветку
Ji Nox

Нормальная статья, чтобы новичку понять что к чему. У меня немного прояснилось.

Ответить
Развернуть ветку
Георгий Кварацхелия

После того как представили только одну фигму отпало желание читать дальше.

Ответить
Развернуть ветку
Eugene Yuryev

Не одну. Там у них ещё Иллюстратор обязателен для рисования иконок. 😂

Ответить
Развернуть ветку
Алексей Долгих - CVO Scout VC

Мобильные приложения!

Ответить
Развернуть ветку
16 комментариев
Раскрывать всегда