Некоторое время назад – в вольных рассуждениях на тему стоимости мобильного приложения для разработчика и клиента – мы обещали подробнее обосновать свое смелое заявление, что дизайн это не про рисование и даже не про внешний вид продукта. Помните?
Вот и пришло время скандальных разоблачений. :)
Как это часто бывает, финальным триггером к написанию данной заметки послужило повторение типового случая из наших будней. Потенциальный заказчик, будучи технарем в прошлом и грамотным специалистом в своей области в настоящем, не согласился с обозначенной нами сметой этапа дизайна и взял паузу в переговорах.
Такое бывает часто в силу того, что по первым признакам, лежащим на поверхности, разработка мобильного приложения близка к теме веб-разработки. И клиенты, ранее имевшие опыт в создание сайта, логично переносят свою экспертизу и сюда тоже.
Мы уже обосновывали свое видение основных различий в этих двух родственных направлениях, поэтому здесь не будем останавливаться на этом подробнее. Просто давайте поговорим про дизайн с чистого листа, отбросив груз прежних воспоминаний и начав разбираться с нуля.
Многие считают что под словосочетанием «дизайн мобильного приложения» скрывается простая и механическая работа в фотошопе или иллюстраторе, после того как по-быстрому и от руки были сделаны типовые макеты. Мы же говорим, что дизайн это в первую очередь проектирование опыта взаимодействия с продуктом.
– Это про сценарии процессов, инжиниринг и чертежи.
– Про фазы навигации, про тестирование, про версии.
– Про нестандартные ходы без лишнего изобретательства.
– Про работу головой. Про интеграцию в бизнес-логику заказчика.
Если отбросить лирику, сложную терминологию и пафос, дизайн мобильного приложения – это не картинки, это две основные вещи:
1. UI – user interface – интерфейс пользователя
2. UX – user eXperience – опыт взаимодействия
Обычный, бытовой смысл дизайна – это как раз UI, оболочка, самый последний блок работы. Когда говорят что дизайн красивый или не очень, без хотя бы 5 минут опытного пользования продуктом, знайте, что скорее всего просто картинки не соответствуют вкусу рецензента. Чтобы понять хорош дизайн или нет в полном смысле, нужно нечто большее…
Для живого понимания о чем идет речь, мы расскажем как у нас ведется работа над дизайном проектов по внутренним и внешним шагам. Формула движения следующая:
Точка опоры №1 > Анализ > Проект > Клик-карта > Слепок > Правки > Прием > Точка опоры №2 > Анализ > Стилистика > Прием > Рисовка > Роудмэп > Прототип > Утверждение
Подробнее по каждому шагу:
1. Точки опоры №1-2 – мы просим клиента кратко сформулировать свое видение в письменном виде, обозначить основные цели и задачи проекта, перечислить ограничения и ожидания. Назвать примеры и предпочтения. Бывает, что уже на входе присылают развернутое ТЗ с визуальными референсами. Бывает, мы просим заказчика назвать 3 любых приложения, которые ему нравятся, и 3 приложения, которые не нравятся, а затем по каждому написать 3 причины-обоснования. Уровень подготовки разный.
2. Анализ – предварительная стадия, когда мы перерабатываем и пропускаем через себя вводные от заказчика. Ведь задача сделать не просто классный проект, а классный проект, который точно соответствует представлениям определенного человека или команды клиента.
3. Проект – этап проектирования и разработки чертежей. Создание черновых макетов приложения на основе сценариев использования выявленных при предыдущих шагах. Т.к. это фундаментально важный этап, при проектирование нужно учитывать:
3.1. Возможности и профессионализм команды – бывает нужен нестандартный состав специалистов, например, когда речь идет о продуктах с 3D компонентами, о стартапах или играх.
3.2. Вводные – чтобы не только не запланировать космический корабль, который не может взлететь, потому что его некому собрать, но и для того чтобы собрать нужную модель корабля с учетом всех пожеланий.
3.3. Версионность – входит или не входит версионирование в планы проекта; сразу делаем вещь в себе, единственное и неповторимое приложение, или сначала выпускаем на рынок продукт с минимально необходимым функционалом, например.
4. Клик-карта и роудмэп – единая схема с изображением всех макетов экранов мобильного приложения и взаимосвязей между ними. Все переходы и динамика навигации в одном месте и структурировано. Роудмэп – то же самое, только по чистовому дизайну и с комментариями для программистов (порядок реализации, приоритетность, узкие места).
5. Слепок – демо-версия мобильного приложения по черновику. Чтобы можно было максимально заранее протестировать проект на своем телефоне, посмотреть по-живому, прочувствовать результат.
6. Стилистика – тот момент, когда мы до конца определяемся со вкусом заказчика и формируем чистовой портрет внешнего вида проекта на практике. В точности понимая ожидания по фирменному стилю, фактуре и стандартам: Material, Flat или назад к сквеморфизму, например? :)
7. Рисовка – наконец-то этап раскрашивания уже почти готового концепта! Цвета, картинки, дизайн, ура! Мы так долго этого хотели!
8. Прототип – слово говорит само за себя. Да, еще не запрограммированный технически, но уже внешне точно такой же как в ТЗ продукт. Желанный и живой. Работает на телефоне. Готов для презентации совету директоров, инвесторам или целевым клиентам. Главный практический результат всей работы над дизайном.
9. Правки – то что мы называем результатом тестирования проекта. Правки бывают внутренними и внешними, в зависимости от специфики и момента обнаружения. Условно, тесты можно разделить на три категории. Но это уже совсем другая история…
10. Прием и утверждение – в основе всего процесса разработки лежит постулат взаимно осознанного движения вперед, когда мы согласовываем каждый принципиальный шаг. Избегаем резких рывков вслепую и наощупь, но и не перегружаем заказчика излишним участием. В конце концов это наша работа, наша экспертиза и наша любовь.
В общем и целом, это всё что можно сказать про дизайн, без ухода в дебри вариаций того или иного шага. Но, напоследок, есть один нюанс.
Речь про разность платформ. iOS / Android основные и Windows Phone с претензией. Если делаем версии проекта для разных операционных систем, то рабочий процесс дизайна автоматически удваивается.
Хочу подчеркнуть эту мысль. Именно удваивается (!!!), потому как почти никогда не удается просто дублировать готовый дизайн проекта с одной платформы на другую, если речь идет о качественном решение. Приходится адаптировать всё под законы другой вселенной, зачастую по ходу меняя внешний вид и впечатления от продукта на 50% и более.
Подводя итог, хочется сказать просто – дизайн это совокупность многих-многих факторов и переменных, искусство и наука, а не только визуальная часть. Верхушка скрытого в глубине айсберга.
Удачи в делах, и делайте мобильные приложения! :)
P.S. Еще у нас можно прочитать цикл про монетизации мобильных приложений, или написать нам по индивидуальным вопросам.