За несколько недель до релиза уже разработанного приложения руководство проекта решило, что необходимо полностью переделать интерфейс. Это не первый наш проект с компанией Meinestadt, и они обратились за помощью к нам.
Stadtmeister — один из проектов медиакомпании Meinestadt. Он спроектирован подразделением, которое отвечает за тестирование новых идей полезных продуктов для многомиллионной аудитории компании.
В кратчайшие сроки нужно было:
- полностью переделать UI и интегрировать его в готовый продукт;
- разработать иконку-логотип;
- разработать лендинг;
- собрать промовидео;
- создать веб-страницу шаринга публикаций.
Задача приложения — предоставить пользователям возможность получать информацию о том, что происходит вокруг них прямо сейчас: погода, события, новости, контент из социальных сетей и даже сообщения полиции.
1. Цвета, шрифты и стиль
Чтобы не делать лишних движений, мы двигаемся от общего к частному и на первом этапе утверждаем язык визуальной коммуникации — цвета, шрифты, стиль пиктограмм, отбивок и кнопок.
![Шрифтовая семья и стиль, заданный пиктограммами, формами и толщинами.](/i/galleries/30/3x_o_453d56f00450c7d279b911cf3ec15737.jpg)
![За основу цветовой гаммы взят брендбук головной компании Meinestadt. Это позволяет нам моментально попасть в ожидания клиента. Переходим к стадии дизайна.](/i/galleries/31/3x_o_a8eb54d48e8365ab24693c453f1c0ea6.jpg)
2. Новый дизайн приложения
![](/i/galleries/127/3x_o_26706537276e6562ffdcf487fe345ea4.jpg)
Виджет погоды
В каждый продукт мы стараемся привнести что-то новое и особенное. И для Stadtmeister решили нестандартно реализовать отображение погоды.
Каждому состоянию ставим в соответствие, помимо привычной пиктограммы, цвет и градиент. Таким образом, постоянным пользователям будет понятен прогноз погоды и без деталей.
![](/i/galleries/29/3x_o_b346ae1f1b9ca326a50b6c5bd9cfc109.jpg)
![](/i/galleries/29/3x_o_02704aaea575191c40cec3fb5aee9cfa.jpg)
редизайн iOS-приложения
Чистый, строгий дизайн, который становится паспарту для контента. Но при этом с яркими акцентами и пиктограммами, приятными мелочами и полным соответствием iOS Human Interface Guidelines.
![](/i/galleries/128/3x_o_edb79b2d8bee1f836fe64be0abaeaf29.jpg)
Редизайн ANDROID-приложения
Параллельно с работой над интерфейсами iPhone второй дизайнер ведёт работу над Android. Тот же визуальный язык, но по Google Material Design. Несмотря на то, что UI у приложения уже был, пришлось перепроектировать навигацию продукта, чтобы она соответствовала стандартам Google.
![](/i/galleries/129/3x_o_405018b71d212003c0ced7c6c1ca7772.jpg)
Внутри приложения четыре типа карточек: "событие", "новость", "сообщение полиции" и "достопримечательности". Скоро появится Twitter и другие социальные сети, а также спорт, радио, городские службы и транспорт.
Работа над иконкой приложения.
3. Оформление страниц в App Store и Google Play
Шаг, про который многие забывают до подачи приложения в сторы, — подготовка скриншотов и превращение их в промоматериалы посредством грамотной расстановки визуальных акцентов и заголовков.
4. Лендинг-пейдж и промовидео
Классический лендинг-пейдж для стартапа: рассказ об идее и фичах, возможность быстро поставить приложение на свои устройства. Адаптивная вёрстка и анимация уже стали стандартом для индустрии.
Сайт собран с помощью Readymag.
Что делать, когда времени мало? Нет возможности продумать сценарий ролика, а анимацию — тем более? Находим подходящий шаблон, не скрываем это от клиента и заполняем его своим контентом.
![](/i/galleries/34/1x_o_c753a196824f386d88a6cd85e08c9b6e.jpg)
Это видео продемонстрировало продукт на всеобщей конференции Meinestadt, открывающей 2016 год.
TO BE CONTINUED...
Stadtmeister запущен в срок и показан на годовой презентации Meinestadt. За красивыми картинками, что вы увидели, стоит оперативная работа команды разработчиков iOS и Android, которые интегрировали дизайн в уже готовое приложение. И впереди нас ждёт работа по поддержке и развитию продукта.