Попередній Наступний

Компанія MobileArts

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 інженер