MobileArts - міжнародна компанія, яка спеціалізується на розробці мобільних додатків для Android платформ.
У Stfalcon ми зробили редизайн для кількох Android застосунків і веб-сервісів. А також розробили дизайн і зверстали сайт для компанії.
Розробка сайту MobileArts
Мета сайту: розповісти про компанію, її послуги, розроблені додатки та зробити основний акцент на сервісі MobiBox - платіжну платформу для монетизації цифрових продуктів, основною фішкою якого є підписка через телефон. Тому інформацію про MobiBox ми показали на першому екрані + додали екрани підписки через телефон у вигляді анімації. В якості базового шрифту підібрали вузький Roboto Condensed, оскільки він добре поєднується з лого. У візуальному стилі зберегли акцентний помаранчевий колір, але додали до нього жовтого, щоб вийшов яскравий градієнт. Сірий колір зробили темно-фіолетовим для більш контрастного поєднання з помаранчевим.
Для слайдера було застосовано CSS-анімацію, яка дає змогу браузеру контролювати послідовність анімації, тим самим оптимізуючи його продуктивність і ефективність.
Дизайн для Android додатків
У компанії MobileArts є свої додатки в GooglePlay і практично у всіх одна проблема - вони виглядали просто як кольорові прототипи. Наше завдання полягало в тому, щоб:
У компании 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 інженер