Анатомия хорошего дизайна
Почему среди потока приложений пользователь должен выбрать именно ваше? С точки зрения юзера главную роль в общем впечатлении играет дизайн — это первое, что видит пользователь, когда открывает приложение. Важно ли вам, чтобы юзер зашел в приложение и захотел им пользоваться? Ради этой цели мы здесь.
Нужно сделать так, чтобы юзер не только сам пользовался приложением, но и рекомендовал его другим. Если вы развивающаяся компания, то хороший дизайн произведет приятное первое впечатление на пользователей, а следовательно привлечет аудиторию. В свою очередь, чем больше фичей вы хотите, тем выше стоимость дизайна мобильного приложения.
Есть несколько способов произвести приятное первое впечатление на пользователя.
Простота и четкость
Сделать приложение простым это значит, сделать его удобным для пользования. Дизайн здесь совсем не про то, как приложение выглядит, а как оно работает, насколько логично располагаются элементы. Используйте знакомые пользователям символы и формулировки, чтобы им было проще ориентироваться.
Иконки существуют для того, чтобы давать пользователю новую информацию о действии — задача не в том чтобы это было красиво и ново, а чтобы это было понятно и приводило туда, куда нужно. Здесь важно не изобретать велосипед, а использовать привычные, а главное логичные элементы. Посмотрите, какие иконки используются в приложении ниже. Сразу понятно, куда вас приведет та или иная кнопка — домой, уведомления и так далее.
Комфортность
Цвета, иллюстрации и анимация должны сочетаться, подходить под тематику приложения. Редко кому нравятся хаотичные, кричащие дизайны — это может отпугнуть пользователя. Сравните эти два дизайна. В первом нарушено правило количества цветов, оно выглядит аляповато. Наш же дизайн хоть и включает в себя несколько цветовых акцентов, не выглядит хаотично, все цвета подходят друг к другу.
Минимализм
Не нужно перегружать интерфейс лишними элементами, текста не должно быть много, а формат должен быть оптимизирован под экран смартфона. Интерфейс должен быть легким — на первом плане расположите главные функции, в центре внимания должен быть контент.
Подсказки и обучение
Если приложение сложное, необходимо ввести подсказки, которые сопровождают пользователя не только когда он в затруднении, а в целом на протяжении всего знакомства с приложением. Онбординг поможет пользователю понять, как работает приложение — на этом этапе подсказки просто необходимы. Предоставьте возможность пропустить обучение, так как некоторые пользователи скачивают приложение повторно и онбординг уже не нужен.
Простая навигация
Каким бы прекрасным ни был ваш дизайн, любое приложение — ничто без простой навигации. Чтобы юзеру было проще ориентироваться в приложении, используйте привычные всем паттерны. Ведь чем привычнее, тем легче пользоваться. Например, гамбургер меню — устаревшая фича, а tab bar — нативный и понятный. С одной стороны это приводит к унификации всех приложений, но с другой очень важно, чтобы пользователь прошел свой маршрут без преград.
Еще один совет: делайте кнопки достаточного размера, чтобы на них можно было нажать пальцем. Если целевая аудитория — женщины, кнопки можно делать меньше, если мужчины — то больше. Учитывайте зону большого пальца: чаще всего мы держим смартфон одной рукой. Нужно следить, чтобы все основные элементы были в этой зоне, так пользователю не нужно будет перехватывать смартфон другой рукой, менять хват и так далее. Чем больше дисплей, тем меньше зона большого пальца.
Подбор цветовой гаммы
Цвета, используемые в дизайне, могут вызвать у пользователя ассоциации. Например, красный цвет продающий, но в то же время связан с какой-либо ошибкой. Но дизайнеры стараются уходить от ассоциаций с цветом — никогда выбор цвета не обосновывается одной только ассоциацией. Выбор цвета будет воздействовать на чувства и отношение юзера к вашему приложению. Не нужно смешивать кучу разных цветов — от этого только заболит голова. Иногда цветовые решения заранее предрешены, например когда дизайн заказывает известная компания — в таком случае уже есть брендбук с определенной цветовой гаммой и шрифтами, подобранными другими людьми.
Здоровая конкуренция
Приложение с посредственным UI не поможет вам поддерживать конкуренцию и привлекать юзеров. Не стоит копировать интерфейсы приложений конкурентов, так вы не будете ничем отличаться от ряда однотипных дизайнов — придумайте что-то свое.
Визуальная иерархия
Чтобы пользователю было легче ориентироваться, визуальная иерархия должна быть понятной. Юзер должен четко понимать, какие задачи решает интерфейс. Визуальная иерархия может строиться контрастом: главные элементы выделяются либо цветом, либо размером, либо жирностью шрифта. Менее важные элементы — меньше по размеру. Также иерархия может создаваться горизонтальными отступами. Элементы, которые плотно взаимосвязаны, располагаются ближе друг к другу. Блоки разделяются большими расстояниями, а элементы внутри блока — меньшими, чтобы они не спорили друг с другом.
Общее время дизайна × почасовая оплата = стоимость дизайна
Стоимость мобильного приложения напрямую зависит от двух величин: времени, которое требуется для разработки дизайна приложения, и цены работы за час. Стоимость дизайна изменяется в зависимости от того, насколько он сложный, кто его выполняет и также немаловажная деталь — в какой стране дизайнится приложение. Из чего же еще складывается стоимость дизайна приложения? Давайте рассмотрим стадии создания дизайна и как они влияют на стоимость.
Подготовительная работа
На этапе подготовки дизайнеры используют майндмэп. Это структурная схема, которая показывает визуальные взаимосвязи и взаимоотношения страниц или действий. Это своеобразный скелет приложения со всей основной логикой. Майндмэп создают по-разному: кто-то делает целенаправленно по каждой странице, а кто-то — логически, не привязывая пункты к конкретным экранам, а выстраивая логику всего приложения. Главная задача UX-дизайнера — продумать, как именно будет работать приложение. На этом этапе нет красивой графики, а лишь логика приложения, связь между экранами.
UX-дизайн
Дизайнеры переходят к созданию вайрфрейма — грубого макета приложения. Различают low-fidelity и high-fidelity вайрфрейм — high-fidelity вайрфрейм детализирован, там возможно наличие какого-то контента уже на этапе макета. В low-fidelity вайрфрейме текст может быть заменен базовыми прямоугольниками, обозначающими, что в этом месте будет какой-то контент. UX-дизайн создается для того, чтобы в целом понимать, какой опыт получит пользователь, используя ваш продукт. Вайрфрейм показывает, как будут располагаться элементы интерфейса.
В проектировании интерфейса есть некоторые нюансы:
- Все элементы управления приложением должны располагаться внизу. Коварные дизайнеры размещают кнопку «назад» в левом верхнем углу, чтобы до нее было трудно достать.
- Управление может осуществляться не только с помощью кнопок, но и смахиванием или удержанием определенных элементов интерфейса.
В среднем UX-дизайн занимает две недели рабочего времени. Точная длительность зависит от сложности дизайна приложения. Стоимость дизайна стартует от 277 тыс.рыб.
Мудборд
Перед этапом UI дизайна создается мудборд. С помощью мудборда заказчику дают понять, в каком направление мыслит дизайнер. Мы собираем понравившиеся образы, иллюстрации, паттерны и задаем вектор всего проекта. Дальше заказчик может выразить свое мнение — нравится ему общая идея или нет, и высказать свои пожелания. Мудборд помогает заказчику и дизайнеру легче понять друг друга. Плюс, дизайнеры спрашивают негативные референсы у заказчика. Хорошо, когда у заказчика есть четкое представление, что конкретно ему не нравится и что ему не хочется видеть в своем будущем приложении. Если у заказчика есть положительные референсы, их тоже берут во внимание, но только некоторые составляющие — цвета, шрифты, но не всю структуру референса.
UI-дизайн
Вдохнуть жизнь в прототип помогает UI-дизайн. Дизайнеры выбирают цветовую гамму, шрифты, значки — все это составляет внешний вид будущего приложения. Этот вид дизайна связан в первую очередь с эстетикой — насколько элементы сочетаются друг с другом, приятно ли юзеру пользоваться приложением, соответствует ли приложение тематике, целям и задачам.
Чтобы создать приятный UI-дизайн, нужно соблюдать некоторые правила: количество шрифтов в приложении не должно превышать 5-6 типов одного шрифта. Что касается цветов — в интерфейсе допускается только 4-5 видов. Цвета приложения должны нативно подсказывать юзеру, какие элементы кликабельны, а какие — нет.
Ключевой принцип хорошего UI-дизайна это расположение составляющих в порядке их важности:
— информация должна быть разделена по смыслу, блоков внутри блоков быть не должно;
— важная информация должна быть легко доступной, в один свайп;
— необходимо свести к минимуму количество элементов интерфейса и оставить только необходимое.
UI-kit
После того, как концепт согласовывается с заказчиком, дизайнер составляет UI kit на основе визуальных и логических шаблонов приложения. Под визуальными шаблонами понимается какого цвета и размера должны быть кнопки, шрифты, а под логическими — как расположены элементы интерфейса. UI kit — это файлы с элементами в одном стиле, которые часто используются в приложении. Он нужен чтобы облегчить процесс разработки: можно просто запрограммировать одну кнопку, а после скопировать ее на другие экраны. После того, как заказчик все одобрил, дизайнеры начинают прорабатывать состояния интерфейса. Есть идеальное состояние, а есть состояния, когда вы в первый раз заходите в приложение или когда возникает какая-то ошибка, то есть множество разных сценариев.
Что же насчет анимаций и иллюстраций?
Изображения помогают понять главную концепцию приложения. Они могут быть в разном стиле, но, тем не менее, должны отражать суть приложения. Длительность создания графического сопровождения зависит от сложности иллюстрации, ее стиля. Эта работа занимает около 16 часов. Если требуется иллюстрировать уникальных персонажей, то время на дизайн увеличивается, а вместе с ним и стоимость дизайна.
Анимации создавать сложнее, чем иллюстрации. Они выполняют важные функции: удерживают внимание пользователя, повышают юзабилити или делают приложение удобнее. Раньше понятия «добротный UI» и «анимация» были абсолютными антонимами — анимированные картинки тормозили загрузку приложений или же их просто вставляли не к месту. Но сейчас устройства становятся мощнее, а анимации — уже не те безвкусные вставки, какими они были раньше. Анимация дополняет приложение и дает новые возможности: допустим, вы продаете мебель — клиент может повертеть, покрутить продукт, поменять цвет, в общем, вволю поиграться.
UI-дизайн в целом занимает от нескольких недель до нескольких месяцев, это зависит от сложности дизайна, количества экранов анимаций и иллюстраций. Нижняя граница стоимости дизайна UI — 270 тыс.руб.
Пост поддержка
Некоторые компании оказывают пост-поддержку, но чаще всего в дизайне она не требуется. На этапе разработки могут понадобиться небольшие правки, тогда хорошо, если дизайнер на связи и знает детали проекта. Если заказчик замечает какие-то ошибки или просит внести изменения, то дизайнеры идут навстречу.
Стоимость дизайна мобильного приложения можно выразить простой формулой «Общее время дизайна × почасовая оплата = стоимость дизайна». Рассчитать сумму, требуемую на выполнение каждого этапа, не очень сложно, нужно просто знать расценки дизайнеров.
Цена за один дизайнерский проект стартует от 270 тыс.руб Стоимость финальной версии дизайна зависит от многих факторов: выбранный стиль, общая сложность дизайна, необходимость иллюстраций и анимаций, а также страны, если вы решили аутсорсить.
Наши бизнес аналитики проводят оценку проекта с ведущим дизайнером — составляют таблицу с фичами приложения, а опытный дизайнер оценивает, сколько это займет по времени. Так мы избегаем ошибок, а заказчики знают о сроках и бюджете на старте.
Как снизить стоимость дизайна
Есть несколько советов, как можно уменьшить стоимость дизайна без потери качества:
Все распланировать. Хороший план — полдела. Спланированная работа помогает не только уменьшить стоимость дизайна, но и четко представить себе конечный результат работы дизайнеров.
Нанимать профессионалов. У опытной команды дизайнеров уйдет меньше времени на работу над проектом. Мало того, что вы быстрее получите дизайн, так это еще и положительно отразится на ваших расходах!
Фокусироваться на базовых функциях. Чем больше вам нужно функций, тем дольше дизайнеры будут работать — рекомендуется отодвинуть вторичные функции на задний план и сфокусироваться на базовых.
Что влияет на стоимость
Кроссплатформенность приложения. Есть 2 распространенные платформы для мобильных приложений — Android и iOS. Вы можете разработать приложение только для одной из платформ, все зависит от вашей целевой аудитории. Если же вы, как Битлз, решили покорить мир, то акцентируйте внимание на обеих платформах. Несмотря на то, что андроидом пользуется в основном средний сегмент, дизайн будет стоить дороже, чем для iOS. Это объясняется тем, что у Android много версий, а следовательно сложное тестирование. Чаще всего дизайн разрабатывается сначала для iOS, а после адаптируется под Android. В Purrweb мы специализируемся на кроссплатформенных приложениях, поэтому дизайн создается на обе платформы.
География. Разработка дизайна — неплохой повод воспользоваться аутсорсингом. Тогда стоимость дизайна мобильного приложения будет зависеть от страны, которую вы выберете. Например, цены на аутсорсинг в Азии гораздо ниже, чем в США или Канаде. Но не гонитесь за низкой ценой, иначе может случиться казус. В любом случае, перед наймом просматривайте портфолио, читайте отзывы — так легче найти специалиста, отвечающего всем вашим требованиям.
Функциональность. Чем больше функциональности, тем больше дизайнеру потребуется времени, тем выше стоимость дизайна. Для первой версии приложения лучше выбрать простой и лаконичный дизайн с минимальным набором функций. Кастомизация приложения стоит дороже. Плюсом кастомного дизайна считается то, что это будет уникальное приложение, которое отличается от остальных. Минусом же является высокая стоимость дизайна.
Кастомизация — это всегда интересно, но главное, чтобы она не спорила с привычными паттернами. Если приложение концептуально выглядит отлично, но совершенно не юзабельно, это уже плохо. В любом случае задача дизайнера — создавать вещи уникальные, но не в ущерб полезности
Как выбрать того самого?
Выбирайте UI/UX дизайнера как если бы вы выбирали отца вашему будущему ребенку — серьезно и ответственно.
Портфолио
Первый совет здесь очевиден — просмотрите портфолио кандидатов. Портфолио не только отражает скиллы дизайнера, но и указывает на его специализацию. Посмотрите, над какими проектами работал дизайнер и поймете, сможет ли он сделать крутой дизайн для вашей бизнес-ниши.
Большое количество работ профессионалов можно увидеть на разных площадках. Например, на Facebook или в Instagram фрилансеры выкладывают свои работы, которые можно находить по хэштегам. Существуют даже целые группы, посвященные UI/UX дизайну.
Еще одна платформа для творческих людей — Behance. Специалисты по всему миру выкладывают там свои работы, которые можно просматривать и обсуждать. Сервис предлагает удобную систему фильтров, возможность комментирования и отправки личных сообщений. На Behance можно найти все — от простых дизайнов до новаторских работ.
И как можно обойти стороной Dribbble? Этот сервис позиционирует себя как креативное мировое сообщество и отлично оправдывает это звание. Эта платформа просто ломится от количества выкладываемых работ по дизайну. Да, немного не хватает фильтров по категориям, но зато есть поиск по тэгам.
Личные качества
Прежде чем нанимать специалиста, пообщайтесь с ним и проверьте его софт скиллы. Оцените гибкость дизайнера и его умение критически мыслить, а особенно ценится дальновидность — ведь вы не хотите вносить много правок по части дизайна. Дизайнер должен адекватно реагировать на критику, конечно, если она аргументированная. Важно понимать, что критикуют лишь работу, а не самого человека.
Софт скиллы это такие навыки, которые необходимы в работе не только дизайнерам. Они делятся на 4 группы:
— Коммуникативные. Логично предположить, что сюда входит умение общаться, но не только. Также в эту группу входят лидерские качества и чувство эмпатии.
— Самоорганизационные. Сюда входит умение распределять собственное время, чтобы эффективно выполнять любую работу.
— Креативные. Это в первую очередь умение нестандартно мыслить и делать вещи не по шаблону, конечно, где это требуется.
— Навыки стрессоустойчивости. Для любого работника важно сохранять трезвый рассудок и не паниковать при решении проблем — от мини-затыков вроде не подходящей приложению иллюстрации до разногласий с заказчиком.
Лучший способ найти дизайнера, не тыкая пальцем в небо — обратиться в студию веб-дизайна с целым штатом профессионалов. Также можно нанять специалиста-фрилансера — этот вариант подойдет, если у вас есть несколько микро-задач. Фриланс это вполне рабочий вариант, можно подобрать работника на любой вкус. Плюс, обычно у фрилансеров расценки ниже, чем у студий, поэтому так можно уменьшить стоимость дизайна.
Если хочется выйти за границы собственной страны, оффшорный аутсорсинг для вас. Подобрать специалиста из Индии или Китая — значит сэкономить на стоимости дизайна.
Если вы крутитесь в ИТ-сфере, то у вас наверняка есть знакомые UI/UX дизайнеры. Или знакомые знакомых — в любом случае, попросите пару номерков и будет вам счастье.
Легко нельзя сложно — одна запятая выразит ваши желания
Мы уже определили, что стоимость дизайна приложения зависит от цены работы за час, количества площадок, где будет выпускаться приложение, и от его сложности. По сложности дизайна приложения могут быть разделены на базовые, средней сложности и сложные.
Дизайн простых приложений занимает около 60-100 часов и его средняя стоимость 270-450 тыс. руб. Это приложение состоит из базовых UI-элементов — парочка экранов, мало данных и действий, которые могут осуществлять пользователи.
Дизайн средней сложности занимает 100-200 часов и стоимость дизайна составляет 450-920 тыс. руб. У приложения средней сложности много дополнительных экранов и хорошо анимированные переходы.
Сложные приложения встречаются не так часто — изысканные и уникальные элементы делают свое дело: здесь тебе и волшебная анимация, и кастомные иллюстрации. Проработка дизайна такого приложения занимает больше 200 часов и стоит от 920 тыс. руб.
Как можно заметить, стоимость дизайна приложений составляет от 270 тыс.руб. до очень больших цифр, все зависит от расценок за час. Конечно, цены примерные, все компании устанавливают разные цены на дизайн.
Если у вас возник логичный вопрос: «Purrweb, сколько же будет стоить моя идея?», то просто напишите нам!
