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

Ник Паркер, UI/UX дизайнер, в блоге «Дизайн Кабак» на Medium объяснил, что не так страшен дизайн мобильных приложений, как его малюют.

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

О проекте

Последние несколько месяцев в компании Bradbury Lab я был сильно погружен в работу над крупным проектом для одного из операторов связи. И так получилось, что с этой задачей нашей команде удавалось справляться достаточно быстро, не в последнюю очередь благодаря используемому в компании подходу к проектированию и дизайну. На проектирование и дизайн экранов приложений всегда отводится недостаточно времени, но в этот раз сроки оказались катастрофически малы. И я хочу поделиться с вами рецептами, объединив которые вы получите уникальную способность, которую я назвал Design Speedforce (дизайнерская сила скорости).

Концепция

Что же делать, если у вас на начальном этапе есть бриф и брендовые гайдлайны, а на выходе вам нужно получить готовый кроссплатформенный (iOS и Android) продукт для смартфонов и планшетов? С чего начать?

Крадите. Genius steals. Не успеваете украсть — копируйте.

Во-первых, вам нужен рабочий продукт в сжатые сроки. Лучше всего использовать те решения, которые уже есть на рынке у конкурентов. Во-вторых у вас есть возможность избежать их ошибок. Здесь очень помогут отзывы приложений в AppStore и Google Play. У них нет возможности откатиться назад, а вы делаете с нуля. Проанализируйте конкурентов, возьмите у них самое лучшее.

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

Проектирование

Итак. Нам необходимо сделать прототипы приложений для смартфонов и планшетов на iOS и Android. И у нас очень мало времени. Пробегаемся по типовым экранам, если необходимо то рисуем дополнительные. Ваша задача — определить какие контролы и элементы вы будете использовать в приложении (чекбоксы, инпуты, кнопки, списки, гриды и так далее).

• Проектируйте параллельно под все платформы.
• Используйте те элементы, которые легко внедрить разработчикам.
• Руководствуйтесь гайдлайнами платформ, стандартными паттернами и UI.

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

Используйте связку Sketch + Craft

Для отрисовки прототипов я использую Sketch. Приступайте к созданию UI Kit, учитывая платформы, форм-фактор и созданный вами список элементов. Вот пример элементов UI Kit для одной платформы:

• Типографика (заголовки разных уровней, контент)
• Чекбоксы
• Инпуты
• Кнопки
• Списки
• Навбары
• Навигация
• Сетки расположения элементов для типовых экранов
• Иконки

После создания UI Kit приступайте к отрисовке всех экранов.

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

Если предполагается работа в команде, то UI Kit должен собирать и апдейтить один человек. Потом его можно распространить на команду, в которой, например, каждый участник будет отвечать за конкретную платформу. Для реализации командной работы в Sketch хорошо подойдет плагин Craft от Invision. Используйте его возможности на полную катушку:

• подстановка данных из разных источников (пользователи, изображения, текст, работа c json)

• работа с повторяющимися элементами

• общая библиотека (для стилей текста, цветовой палитры и элементов интерфейса)

Не забывайте о символах. Они упростят работу над прототипом и помогут на следующем этапе — дизайн приложения. Используйте функцию Resize.

Она поможет вам применить один и тот же элемент на смартфонах и планшетах.

Используйте реальные данные

Забудьте про Lorem Ipsum. Создавайте прототип максимально близко к итоговому дизайну с реальными данными. Учитывая, что вы используете платформенные гайдлайны, то это выполнимо. Потратьте время сейчас, чтобы потом дизайн приложения превратился в обычную раскраску.

Прототип — это черно-белый дизайн-макет

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

Реальные данные (текста, изображения) подготовьте заранее и настройте их подстановку в плагине Craft. Это можно сделать, указав путь до папки с картинками, например. Также есть возможность подставлять данные через JSON. Конечно, красиво показывать модный баннер и обложку для фильма «Мстители». А вот с фильмом «Операция Ы и другие приключения Шурика» возникнет проблема как с красивым баннером, так и с названием. Не забывайте про слишком короткие и длинные строки, списки из одного пункта. Учитывайте каждую мелочь.

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

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

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

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

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

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

Разработка параллельно дизайну

В случае, если процессы запараллелить, то мы получим следующие преимущества:

• Быстрое решение проблем. При разработке по прототипам проблемы быстрее дадут о себе знать. Их можно решить на этапе дизайна или собрав встречу.
• Рабочий продукт. Благодаря прототипу вы не будете тратить время на написание ТЗ, но сможете начать разработку параллельно дизайну.
• Команда. Раннее привлечение разработчиков добавит в продукт ясности. Они будут в курсе абсолютно всех изменений.

Разбейте процесс создания продукта на несколько независимых этапов

Это очень сильно ускоряет процесс дизайна и разработки. Очень важно, чтобы эти этапы не пересекались. В первом этапе могут быть сервисные части приложения — меню, настройки. А во втором этапе — контентные части — лента новостей, страница новости. Это дает возможность привлекать разработчиков даже после первого согласованного этапа проектирования. Так как прототипы близки к дизайну и выполнены по гайдлайнам платформ, вы можете уже выгрузить разработчикам спецификации и они начнут разработку. Для подготовки спецификаций мы используем Zeplin.io или бесплатный плагин Measure для Sketch.

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

НЕ начинайте согласовывать следующий этап, пока не согласован нынешний.

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

Меньше сроки — больше общения

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

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

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

Заключение

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

• Крадите. Не успеваете украсть — копируйте.
• Проектируйте параллельно под все платформы.
• Используйте те элементы, которые легко внедрить разработчикам.
• Используйте гайдлайны платформ.
• Используйте связку Sketch + Craft.
• Используйте символы и Resize для повторного применения элементов и быстрого изменения размеров
• Используйте реальные данные.
• Делайте прототип максимально близко к дизайну.
• Разбейте процесс создания продукта на независимые части.
• Ведите разработку параллельно дизайну.
• Больше общайтесь в команде.