MobileArts — международная компания, которая специализируется на разработке мобильных приложений для Android платформ.
В студии мы сделали редизайн для нескольких Android приложений и веб-сервисов. А также разработали дизайн и сверстали сайт для компании.
Разработка сайта MobileArts
Цель сайта: рассказать о компании, ее услугах, разработанных приложениях и сделать основной акцент на сервисе MobiBox — платежную платформу для монетизации цифровых продуктов, основной фишкой которого является подписка через телефон. Поэтому информацию о MobiBox мы показали на первом экране + добавили экраны подписки через телефон в виде анимации. В качестве базового шрифта подобрали узкий Roboto Condensed так как он хорошо сочетается с лого. В визуальном стиле сохранили акцентный оранжевый цвет, но добавили к нему желтого, чтобы получился яркий градиент. Cерый цвет сделали темно-фиолетовым для более контрасного сочетания с оранжевым.
Для слайдера была применена CSS-анимация, которая позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя его производительность и эффективность.
Дизайн для Android приложений
У компании MobileArts есть свои приложения в GooglePlay и практически у всех одна проблема — они выглядели просто как цветные прототипы. Наша задача заключалась в том, чтобы:
- сделать редизайн существующих приложений в соответствии с гайдлайнами material design;
- сделать новый дизайн визуально приятнее, понятнее и более человечным;
- разработать дизайн веб-интерфейсов и landing pages для этих приложений.
SecretBox
SecretBox — это приложение с помощью которого юзер может скрывать фото, видео, аудио, файлы, контакты и SMS от посторонних глаз. Мы исправили основную проблему старого дизайна: расставили приоритеты и сделали более контрастными активные и не активные UI элементы. Добавили empty states, чтобы обьяснить пользователю почему на экране отсутствует контент и что сделать чтобы он появился.
Laki
Приложение с видео-контентом для бьюти индустрии. Визуальный стиль должен соответствовать целевой аудитории, поэтому акцентный цвет мы выбрали ярко-розовый, заголовки сделали большими, иконки скругленными.
В качетве основного шрифта подобрали не стандандартный шрифт для материал дизайна, поскольку он должен поддерживать арабский язык — это шрифт Mada.
PhoneGuard
Основная функция PG — это защита приложений с помощью блокировки + защита телефона удаленно через веб-сервис. Несколько фич из удаленного доступа: блокировка приложений, включение/выключение wifi, вибрации бекап контактов, блокировка входящих звонков. В ходе редизайна мы улучшили цветовую схему в оттенках: черный стал черным с оттенком синего, желтый более ярким. Добавили дизайн главного экрана с выбором паттерна блокировки приложений. Структурировали все UI элементы в материал стиль.
Новый дизайн веб-интерфейса сделали более компактным, а именно: вынесли все категории Alerts, Logs, Controls на один экран, для того чтобы юзер видел полную картину доступов; избавились от повтора одних и тех же заголовков и кнопок; добавили иконки экшенов для более быстрого и легкого восприятия информации на странице.
SpaceManager
Суть приложения — улучшить производительность телефона путем мониторинга памяти на телефоне, sd-карте и cloud. В ходе редизайна изменили визуальный стиль: основной цвет подобрали фиолетовый, второстепенный — желтый. Отделили разную по смыслу информацию разбив настройки на 4 отдельных экрана. Главным сделали экран с pie chart, где хорошо видно сравнение памяти.
DataMonitor
Приложение мониторит расход мобильного интернета. В первую очередь мы освежили дизайн сделав новую цветовую схему: темно синий + розовый c голубым для акцентов. Создали иконку приложения, на ее основе сделали сплеш экран. Мы объединили Cellular и WiFi на первом экране, чтобы юзер мог видеть все использованные данные за сегодня и сравнить их. На экране просмотра инфо о приложениях мы добавили piechart для быстрого сравнения на какое приложение уходит больше всего Cellular или WiFi данных.
Сделали редизайн веб-интерфейса с помощью которого можно мониторить данные семейных девайсов. Мы исправили основные проблемы старого дизайна добавив туториал “как подключить девайс к веб-сервису” и разместив все экшены на один дашборд.
MobiBox CRM
MobiBox — главный продукт компании и в тоже время большая CRM система. В нашу задачу входило сделать редизайн нескольких основных страниц и набор UI элементов для всей системы.
В визуальном стиле сделали контаснее цветовую палитру: с грязно синего в сине-голубой градиент, с тускло-зеленого в ярко-зеленый. Все CRM системы — это большое количество данных в таблицах, поэтому шрифт должен быть компактным, но при этом хорошо читабельным. С этой задачей отлично справился Source Sans Pro. Также исправили проблему навигации: перенесли первых два уровня в шапку, навигация третьего уровня ушла в табы ниже шапки.
Команда проекта:
- Мария
Проектный менеджер
- Юля
Дизайнер
- Татьяна
Дизайнер
- Андрей Л.
Frontend разработчик
- Иванна Мартынюк
QA инженер