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

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

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

7546 просмотров

Чтобы понять, кем именно ты хочешь стать, нужно сперва разобраться, кто чем занимается. Попробуем это сделать вместе с ведущим 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). Будет здорово, если у вас будет свой наставник или получится попасть на стажировку в настоящую команду, которая занимается мобильными приложениями.

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

Распутываем сложные системы и превращаем их в понятные мобильные интерфейсы. Заботимся, чтобы заказчики достигали поставленных целей в бизнесе, а их клиенты — были довольны продуктом.

Мобильное приложение = юзер флоу + приятный дизайн + понятный текст

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

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

Получили WADLINE AWARDS за мобильный банк

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

Бизнесы, которым нужен новый канал продаж или запуск продукта

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

Продуктовые и IT-стартапы с командой разработчиков

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

Компании с живым приложением, которому нужен редизайн

Проводим экспертную оценку и выявляем проблемы. Даем рекомендации и на их основе разрабатываем новый дизайн.

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

Процесс разработки мобильного приложения

Изучаем бизнес клиента

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

Проводим анализ рынка и целевой аудитории

Собираем все лучшие практики и примеры. Это позволяет нам понять конкурентную среду и создать правильный интерфейс. Портреты ЦА помогают команде и представителям бизнеса одинаково понимать потребности пользователей.

Проектируем структуру

Моделируем поведение пользователей внутри будущего приложения и разбиваем его на сценарии. В одном приложении их может быть до 5–7, и для каждого — свой набор экранов. После — составляем план реализации сценариев.

Создаем прототипы приложения

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

Библиотека компонентов единой дизайн-системы мобильного приложения и других продуктов БПС-Сбербанка

Презентуем клиенту на кликабельных прототипах

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

Погуляйте по макетам приложения
Интерактивный макет в InVision

Проводим пользовательское тестирование

Привлекаем респондентов из целевой аудитории продукта.