и
IT 12.08.2020

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

17 мин.
Содержание
  1. Кто такой дизайнер мобильных приложений и чем занимается
  2. Дизайнер и его роль в разработке мобильных приложений
  3. Что должен знать и уметь
  4. Личные качества
  5. Как дизайнер может облегчить жизнь разработчику?
  6. Дизайнер — часть команды
  7. Кто такой дизайнер мобильных приложений?
  8. Плюсы и минусы профессии
  9. Можно учиться в любое время
  10. Разработчик не должен разбираться, в каких программах был нарисован проект. Файлы должны открываться легко
  11. Почему дизайнер мобильных приложений ≠ веб-дизайнер?
  12. Что включено в стоимость дизайна
  13. Создание прототипа
  14. Визуальный дизайн
  15. Сколько стоит дизайн приложения?
  16. Стоимость дизайна приложения в зависимости от страны
  17. Этапы процесса разработки интерфейса мобильного приложения
  18. Создание концепции
  19. Брейнсторминг и эскизы
  20. Диаграмма переходов
  21. Утверждение структуры и диаграммы переходов
  22. Выбор стиля интерфейса
  23. Как стать дизайнером мобильных приложений

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

Что должен знать и уметь дизайнер мобильных приложений
Дизайнер мобильных приложений — это специалист, который разрабатывает оформление приложений для операционных системах Android, iOS. Работа специалиста по дизайну мобильных сервисов состоит из следующих пунктов:

  • Получение задания. Обсуждение с клиентом ключевых моментов, пожеланий, финансовых вопросов;
  • Анализ. Исследование того, что уже есть на рынке, чтобы быть в курсе новинок и знать конкурентов;
  • Планирование. Создание концепции дизайна — оформление экранов, иллюстрации, цвета, шрифты;
  • Составление пользовательских сценариев. Формирование дизайна с учётом пола, возраста, увлечений целевой аудитории приложения;
  • Проработка графических элементов. Разработка логотипов, формирование библиотеки картинок, цветовой гаммы и других визуальных составляющих;
  • Разработка целостного продукта. Рисовка, создание макета приложения на основе готовых данных;
  • Презентация. На этом этапе дизайнер составляет план презентации для клиента и представляет готовую работу;
  • Написание ТЗ. При одобрении заказчиком макета продукта, специалист пишет техническое задание для разработчиков;
  • Тестирование. На этом этапе происходит доработка и настройка дизайна приложения;
  • Корректировка. Специалист вносит правки по ходу работы, прорабатывает обновления.

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

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

Дизайнер очень разнообразная профессия и имеет множество специализаций:

UI-дизайнер

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

Бренд-дизайнер

UX-дизайнер

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

Дизайнер интерьера

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

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

Что должен знать и уметь

Инструменты дизайнера мобильных приложений

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

Дизайнер мобильных приложений применяет следующие знания и умения:

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

Большой плюс если специалист способен решать бизнес-задачи через дизайн. То есть, знает как привлечь пользователей и покупателей с помощью визуализации сервиса.

Личные качества

Личные качества дизайнера мобильных приложений
Вдобавок к профессиональным навыкам, специалисту по дизайну приложений необходимо обладать следующими личностными качествами:

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

У специалиста по дизайну всегда наготове новые идеи. А если их нет — ищет вдохновения: изучает новые приложения, смартфоны, гаджеты.

Как дизайнер может облегчить жизнь разработчику?

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

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

Дизайнер — часть команды

Это не просто пафосные слова. Дизайнер должен быть частью команды до сдачи приложения в магазин, постоянно общаться с коллегами, уточнять вопросы и быстро реагировать на запросы разработчиков. Минимальный срок его нахождения в команде — до первой сдачи MVP.
Как показывает практика, дизайнеры не всегда качественно сдают свои макеты, и при дальнейшей разработке всплывают какие-то недочеты, например, не отрисованные пустые экраны или какие-то состояния элементов, неверно нарезанные блоки элементов, отсутствие каких-то ресурсов. Бывает также, что клиент хочет что-то добавить.
Дизайнеру приходится доделывать свою работу, и хорошо, если он будет в это время в команде, чтобы можно было быстро внести изменения. Или он должен быть на связи для того, чтобы у проекта и команды не было проблем с оперативным изменением UI/UX.

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

Это специалист, который создаёт интерфейсы для платформ iOS и Android. Его задача — сделать интерфейс мобильного приложения удобным и интуитивно понятным пользователям.

Чтобы добиться этого, дизайнер мобильных приложений:

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

Плюсы и минусы профессии

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

  •  высокая оплата труда;
  • востребованная профессия;
  • работа с различными тематиками (игры, спортивные, развлекательные, финансовые и еще сотни тематик);
  • возможность работать из дома;
  • совмещение с другими делами (учёба, декрет, основная работа).

Неприятные моменты:

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

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

Можно учиться в любое время

Обучение онлайн — вы смотрите видеоуроки и делаете домашние задания, когда удобно. Преподаватель проверяет работу и отвечает на вопросы. Для обучения достаточно 3–5 часов в неделю.

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

Как уже было сказано выше, разработчику сейчас приходится столько всего изучать, что времени разбираться в графических редакторах просто нет. Поэтому дизайнер не должен отрисовывать элементы в Photoshop / Illustrator и сдавать макет в *.psd / *.ai файлах. Такие файлы довольно много весят и требуют установки пакета Adobe. Даже если это не играет особой роли, на изучение этих редакторов просто нет времени.

Разработчик хочет просто выбирать элементы и видеть, как их верстать, а не разбираться в структуре слоев одного огромного файла. Сейчас существует много графических редакторов для отрисовки мобильных приложений: Sketch, Figma и другие. В общем, есть из чего выбрать. От выбранного редактора будет зависеть то, как дизайнер представит кликабельный прототип и “живые экраны” для фронтенда.

Если дизайнер выбрал Figma, то “живые” экраны, кликабельный прототип, юзер стори, переходы экранов, семейства шрифтов и колористика, ресурсы можно скачивать самостоятельно — все находится в одном месте. Изменения дизайна видны сразу. Как и у многих сервисов, у Figma есть свои минусы. Но это довольно удачный выбор, хотя бы потому, что данный редактор не требует установки специального ПО. Нужен просто переход по ссылке на проект. Главное, чтобы был интернет.
Sketch — тоже неплохой выбор. Дизайнер в пару к этому редактору может использовать такие инструменты прототипирования как Zeplin или InVision, если с ними уже работает команда разработчиков. Это программы не требуют углубленного изучения инструментария.

Почему дизайнер мобильных приложений ≠ веб-дизайнер?

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

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

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

Чтобы создавать мобильные приложения, дизайнер должен уметь работать в Figma и Sketch, анимировать иконки и другие статичные элементы, исследовать пользовательский опыт и разрабатывать интерфейсы с оглядкой на психологию. А ещё мобильный дизайнер должен разбираться в пользовательском опыте и даже анализировать рынок.

Так выглядит Figma — инструмент для прототипирования. Этой программой владеют все мобильные дизайнеры — и вы тоже научитесь.

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

Что включено в стоимость дизайна

Любой хороший дизайн напрямую связан с решением проблем. Создаёте вы новый продукт или улучшаете уже существующее приложение, сделать дизайн — значит решить проблему.

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

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

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

Создание прототипа

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

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

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

  • Приблизительное время на создание прототипов: от 40 до 170 часов.
  • Результаты: макеты экранов приложения, пользовательские сценарии использования приложения, интерактивные прототипы.
  • Используемые инструменты: Sketch, Marvel, Principle, Overflow.

Визуальный дизайн

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

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

Дизайн-концепция «Киноголика»

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

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

Создание дизайна мобильного приложения
Приложение Yodel. Чем удобнее место для кнопки, тем качественнее дизайн

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

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

  • Приблизительное время на визуальный дизайн приложения: примерно 60–220 часов.
  • Результаты: финальный дизайн продукта, в том числе логотип приложения, иконки и скриншоты для магазинов приложений.
  • Используемые инструменты: Sketch, Adobe, Principle.

Сколько стоит дизайн приложения?

Закончив с определениями дизайна приложения и рассмотрев его стадии, мы можем перейти к самому насущному вопросу. Стоимость дизайна приложения обычно рассчитывается в зависимости от его сложности, уровня навыков дизайнера и того, на каком количестве платформ будет доступно приложение. Мы создаём мобильные приложения для Apple iPhone и iPad, всех Android-устройств, Apple Watch и аксессуаров Android, а также для Apple TV и Android Smart TV.

Если вашему iOS- или Android-приложению не нужны всяческие ухищрения типа анимации, то времени (а значит, и денег) понадобится меньше. Но главным фактором, влияющим на ценник дизайна приложений является география. Сколько стоит дизайн приложения в разных частях света?

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

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

  • В России, согласно исследованию агентства «Тэглайн» 2015 года, средняя стоимость часа работы дизайнера составляет 1770 рублей. В 2019 году таких исследований пока не проводилось, но, по нашему экспертному мнению, стоимость выросла не сильно: если вы заказываете проект у региональных студий, в сметах будет фигурировать ставка от 1600 до 2000 рублей в час, у столичных компаний и крупных региональных игроков — от 2000 до 3000 рублей.
  • В Украине и Беларуси, где тоже много классных специалистов по дизайну приложений (в основном работающих на Запад), вы заплатите 20–30 $ за час.
  • В Индии тысячи компаний-аутсорсеров, многие из них борются с конкурентами с помощью демпинга и могут себе позволить продавать час работы профессионала до 25 $.
  • Американские и европейские дизайн-команды в среднем берут 50–150 $ в час. Скорее всего, заплатить придётся от пары тысяч долларов до нескольких десятков тысяч за особо навороченное приложение.
  • Британские студии берут 40–80 £ (65–130 $) в час. Дизайн приложений для iOS, к примеру, стоит 1000–5000 £. Реальная цена зависит от графики, объёма работы и поддержки платформ (приложения на iPad, скажем, дороже, чем iPhone).

Этапы процесса разработки интерфейса мобильного приложения

Создание концепции

Самый первый этап — это когда идея уже есть, а разработчик имеет все необходимые инструменты для ее реализации. Но с чего нужно начинать? Мы начинаем с изучения ниши, целевой аудитории и кейсов продукта. Это неплохо помогает понять будущих клиентов сервиса и создать пользовательский интерфейс, который оптимален для каждого из них.
На этом этапе могут быть затронуты и такие аспекты, как размеры и расположение кнопок и форм, шрифты и многие другие аспекты структуры интерфейса. Давайте сравним финтех-приложение и сервис такси-компании.

Финтех-приложение. Много иконок, они не слишком крупные, но работать с ними удобно. Обилие разнообразных функций.

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

Брейнсторминг и эскизы

Как только концепция проекта ясна, двигаемся к следующему этапу — брейнстормингу. Он нужен, чтобы превратить идею интерфейса в реальность. Мы в Django Stars берем ручку и лист бумаги — это быстрее, чем использование таких продвинутых инструментов, как Balsamiq Mockups, Sketch, Photoshop и InVision.

Диаграмма переходов

Создание эскиза дает нам структуру интерфейса. Но как пользователь должен взаимодействовать с ним? Здесь поможет User Flow Diagram. Она проиллюстрирует логику продукта, показав всевозможные способы взаимодействия с интерфейсом, дорожную карту этих взаимодействий и состояние интерфейса на каждом этапе.

Утверждение структуры и диаграммы переходов

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

Выбор стиля интерфейса

Когда клиент все утверждает — можно двигаться дальше. Что будем делать? Выберем стиль интерфейса. Есть множество вариантов: от минимализма и Metro до material design и скевоморфизма. На этом этапе мы просим клиентов прислать несколько ссылок на примеры стиля интерфейса, который им нравится, а также спрашиваем об их планах на ближайшее будущее продукта. Мы уделяем внимание текущим трендам, масштабированию интерфейса, определяем время, которое необходимо на разработку и внедрение дизайна.

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

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

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

Источники

  • https://checkroi.ru/blog/profession-mobile-apps-designer/
  • https://habr.com/ru/post/461751/
  • https://zen.yandex.ru/media/skillbox/kak-stat-dizainerom-mobilnyh-prilojenii-i-zarabatyvat-120-000-rublei-5e9f0b504365d108b6cf93e5
  • https://livetyping.com/ru/blog/skolko-stoit-dizain-mobilnogo-prilozhenija
  • https://habr.com/ru/company/skillbox/blog/416641/
[свернуть]
Оцените статью
Понравилась статья?
Комментарии (0)
Комментариев нет, будьте первым кто его оставит

Комментарии закрыты.