Workspace Digital Awards 2025 — успейте номинировать кейсы по льготной цене до 1 декабря. Принять участие!
Alfa Faces
Разработка дизайна приложения по проведению музыкальных занятий онлайн – Mooze App
Alfa Faces
WDA
2023
#Проектирование#Дизайн приложений#Фирменный стиль

Разработка дизайна приложения по проведению музыкальных занятий онлайн – Mooze App

3450 
Alfa Faces
Alfa Faces Россия, Москва
Поделиться:
Разработка дизайна приложения по проведению музыкальных занятий онлайн – Mooze App
Клиент

Mooze

Сфера

Компьютеры и интернет

Регион

Россия, Москва

Сдано

Ноябрь 2022

Задача

О проекте:

Mooze собрал в себе все преимущества видеочатов и самые необходимые функции музыкальных приложений, чтобы сделать онлайн-уроки музыки более удобными. Не нужно ничего скачивать или устанавливать. В окне браузера все работает! Тренируйтесь где хотите, улучшайте свои навыки и создавайте музыкальные шедевры.

Наша роль:

Команда Mooze обратилась к нам за помощью в разработке визуального стиля приложения. Нам предоставили детальные прототипы и Moodboard. Так же необходимо было уделить особое внимание при разработке таких модулей, как метроном, плеер, микшер.

Решение

Мы составили план работ, в котором разбили задачу на шаги:

1. Анализ Moodboard;

2. Проработка и выбор визуального стиля, в котором будем прорисовывать весь интерфейс приложения;

3. Прорисовка всех экранов на основе выбранного стиля;

4. Составление UI Kit для разработки.

Рассказываем обо все по порядку.

1Анализ Moodboard

Изучив Moodboard, мы выявили общие особенности стиля: легкий и чистый дизайн с использованием мягкой цветовой палитры, скругления элементов интерфейса и отсутствия тени.

2Проработка и выбор визуального стиля

На основе анализа Moodboard, мы прорисовали три варианта концепции главного экрана в светлой и темной теме и показали их команде Mooze.

Клиенту понравился Concept #3, как разделяется верхняя и боковая панель от центральной области, а так же плеер и иконки. По цветовой гамме и проработке метронома больше понравился Concept #1. Мы зафиксировали все пожелания и приступили к детальной прорисовке макетов.

3Вход и авторизация

Фрагменты форм создания новой комнаты, авторизации и настройки устройства при входе в сессию.

4Системные экраны

Главный экран состоит из нескольких панелей управления. Рабочая область всегда содержит окна видеокамер. Панели управления содержат такие функции, как управление микрофоном, управление видеокамерой, запись/совместное использование экрана, отображение/скрытие чата, завершение/начало сеанса, открытие/закрытие настроек и т.д.

5Музыкальный плеер, метроном, микшер и чат

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

6Интерактивная доска

Позволяет рисовать, размещать и удалять объекты, добавлять заметки и ключи к хосту, устанавливать схемы, добавлять тексты и картинки. Режим документа PDF также доступен для работы.

7Видеопроект

После завершения записи файл добавляется в список видео. Вы можете посмотреть видео сразу в видеоплеере или воспроизвести демо для собеседника. В десктопной версии расширен функционал видеопроекта: акцент сделан на более широкое взаимодействие со звуковыми дорожками записей.

8Мобильная версия

Mooze – преимущественно браузерное приложение, поэтому мы подготовили адаптивные версии для мобильных устройств.

9Темная тема

Также была разработана темная версия Mooze. Каждый пользователь может выбрать и настроить удобное для себя пространство.

10UI Kit для разработки

Наша команда создала более 100 элементов руководства по стилю, включая систему шрифтов, иконки, кнопки и другие элементы управления. Мы начали создавать UI Kit с самых первых этапов прорисовки, а затем дополняли ее по мере прорисовки всего функционала.

Результат

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

Выражаем благодарность всей команде Mooze за консультацию по всем функциям приложения и за проделанную работу!

Отзыв клиента

Анастасия Анисимова
Анастасия Анисимова

Менеджер продукта

Спасибо команде “Alfa Faces” за проделанную работу! Нам было очень комфортно работать вместе. И нашей команде, а главное, и нашим клиентам очень нравится результат.

https://mooze.io/

Стек технологий

  • Figma Figma Графический редактор

Над проектом работали:


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Alfa Faces с удовольствием обсудит вашу задачу

Оставить заявку