Дина Мильштейн, руководитель отдела дизайна, рассказывает об этапах разработки UI/UX мобильных приложений в True Engineering.
Создание дизайна в нашей компании неотделимо от создания всего решения. Мы анализируем функции и задачи, которые решает мобильное приложение, кто будет им пользоваться. Продумываем смысл и логику работы будущего решения.
Также и с инструментами. В разработке дизайна мы подключаем те инструменты, которые позволяют оптимально решать поставленные задачи.
Дина Мильштейн, руководитель отдела дизайна, рассказывает об этапах разработки UI/UX мобильных приложений в True Engineering.
Дизайн начинается с концепции
На старте проекта мы вырабатываем дизайн-концепцию на 5-10 экранов и согласовываем с заказчиком.
И вот мы договорились об основах, как будет выглядеть и работать мобильное приложение. В сказках всё кончается словами «Они поженились и жили долго и счастливо», а на деле тут-то и начинается самая большая и кропотливая работа. Также и у нас.
Прототипирование UI/UX — бумага и Sketch
Чтобы разобраться, как будет работать мобильное приложение, мы делаем первые наброски на бумаге, а потом переносим их в Sketch. Мы прошли путь от Photoshop к Sketch, эргономичной программы, сделанной для разработки интерфейсов. От Photoshop категорично не отказываемся, он идеально подходит для работы с растрами. Выбор инструмента всегда зависит от задачи. Всё должно быть уместным.
Нужен цифровой брендбук. Если его нет — надо создать
К нам обращаются компании, у которых зачастую сформирован визуальный стиль и уже есть решения в web, mobile, полиграфии. Но понятно, что рекламный баннер не подходит для мобильного приложения, поскольку сделан по другим законам. В этом случае мы адаптируем эту визуальную платформу для нашей задачи. В случае, когда цифрового брендбука нет, мы делаем его с нуля.
Иллюстрации в Illustrator
Мы делаем наши приложения «тёплыми», чтобы люди, работая с ними, испытывали не только удобство, но и теплые эмоции. Поэтому в случаях, когда это уместно, мы добавляем иллюстрации в наши приложения. Идеальным инструментом для создания иллюстраций, на наш взгляд, является программа Illustrator.
Интерактивный прототип — Invision
Когда логика и стилистика готовы, мы примеряем этот «костюм» на заказчика и представляем ему решение. Чтобы презентовать задуманное, используем анимированный прототип решения в Invision. Это повышает эффективность коммуникации как с заказчиком, так и с разработчиками.
На первом этапе проектирования не всегда понятно, что можно улучшить. Интерактивный прототип выявляет логические недочёты и поведенческие проблемы.
Интерактивный прототип является важным этапом. Вместо статичных картинок, которые многим сложно представить как работающее приложение, заказчик получает инструмент, который показывает, как приложение будет функционировать. Он мотивирует заказчика рассуждать вслух о своих бизнес-процессах и насколько они ложатся на предложенную схему. Нам же удобнее вносить правки на этапе создания продукта, чем во время финальной вёрстки.
Анимация и поведение — Flinto
Поведенческие нюансы мы демонстрируем разработчикам во Flinto, договариваясь с ними, как будут работать те или иные вещи. Например, о плавности появлении элементов, перехода между экранами, изменении состояний.
Нарезка и передача в разработку — Zeplin
Дальше двигаемся итерациями: отрисовали, согласовали с заказчиком, отдали разработчикам в Zeplin. И так до финального релиза — методично и кропотливо трудимся над разделами в рамках согласованной концепции, сохраняя первоначальное качество.
Качественный результат гарантирован процессом
Мы щепетильно относимся к мелочам и фактам. Всё должно соответствовать задаче и выглядеть достоверным, чтобы заказчик сразу соотносил увиденное со своими рабочими процессами.
На каждом этапе разработки UI/UX от идеи до готового продукта мы последовательно фиксируем понятный, ограниченный и полностью проработанный элемент визуальной платформы. На рынке постоянно дорабатываются существующие и появляются новые инструменты. Главное держать в голове, зачем они нужны именно вам и какой именно результат вы планируете получить.
Оригинал опубликован на сайте apptractor.ru