Как мы делаем проекты: дизайн

Если вы пропустили

Знакомство

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

Участники со стороны Лайв Тайпинг:

• проектировщик интерфейсов;
• дизайнер;
• руководитель проекта.

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

Задача дизайна

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

Что вам нужно понимать

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

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

Проект ИЛЬ ДЕ БОТЭ — наглядный пример того, как красота приносится в жертву удобству. Фирменный шрифт бренда — Carisma. У него куча проблем, но основная выражается в том, что линии шрифта теряют чёткость при маленьком размере, поэтому буквы плохо читаются. По желанию клиента все тексты должны быть написаны шрифтом Carisma, но после долгих обсуждений мы пришли к тому, что до 17 кегля мы будем использовать Carisma, а на всем, что меньше 17 кегля — San Francisco.

Гайдлайны

Самое важное в создании дизайна приложений — соблюдать гайдлайны Apple и Material Design. Гайдлайны Apple — это рекомендации по тому, как сделать дизайн пользовательского интерфейса таким же красивым и удобным, как и у других продуктов бренда. Но с гайдами для Android-устройств немного сложнее. Здесь следование гайдлайнам Material Design помогает не только делать продукт удобным, но и экономить время на его разработку.

Почему так?

Согласно данным, размещённым в Google Play Developer Console, на момент написания этой статьи операционную систему Android поддерживает 15 105 уникальных моделей устройств. Все эти устройства отличаются разным набором кнопок, разными разрешениями экранов и другим.

Ещё для Android-устройств характерен феномен фрагментации. В чём он заключается? При выходе новой официальной версии операционной системы вся огромная армия Android-пользователей не спешит дружно на неё переехать, как это происходит с пользователями Apple. Получается, что разные версии операционной системы сосуществуют параллельно. Все эти вещи сильно усложняют жизнь Android-разработчику, ведь приложение должно выглядеть и работать так, как задумано дизайнером, на максимальном количестве устройств и операционных систем. А на это нужно потратить много часов работы.

Но Google всех спас и разработал Material Design — инструмент для дизайна и разработки Android-продуктов. Если дизайнер соблюдает правила Material Design, дизайн выглядит единообразным для всего этого бестиария устройств. А разработчик может сэкономить время на то, чтобы встроить графический дизайн в интерфейс приложения. Поэтому дизайнерам важно соблюдать гайдлайны при разработке приложений для Android.

Accessibility

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

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

• Contrastchecker. Он подбирает такие цветовые сочетания шрифта и фона, чтобы читать текст с экрана мониторов и мобильных устройств было легче. Эти сочетания одобрены руководством по обеспечению доступности web-контента (WCAG). Они оцениваются по шести критериям, учитывающим размер кегля, уровень контрастности и некорректное восприятие цветов.

• Stark. Это плагин для Sketch. Он открывается в виде окна, через которое просвечивается уже готовый дизайн, и проверяет элементы по тому же принципу, что и Contrastchecker.

Итоги этапа

На основе проектирования и с учётом гайдлайнов дизайнеры рисуют в Sketch дизайн-макеты для приложений и сайтов, а иллюстрации и анимации создают в продуктах Adobe.

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

Дизайн-концепт проекта MyTech

Дизайн-концепт проекта KidyView

Дизайн-концепт проекта Mandu

Согласованные макеты и контент переходят в отдел разработки.