История разработки: Octava Page

2021.05.31, обновлено 2023.01.07. Теги: История разработки, Кейс

Octava Page - веб-приложение для новичков-музыкантов, помогающее ориентироваться в нотах.

Содержание

Как приложение выглядит сейчас

Интерфейс представляет собой схематический гриф гитары с обозначенными на нём нотами на каждом ладу.

Количество струн можно изменять кнопками “+” и “-” внизу, строй гитары – настраивать путём ввода нот на открытых струнах (по умолчанию – стандартный строй с 6 струнами EBGDAE).

Также с помощью интерфейса сверху можно выбрать аккорд или гамму и ввести тонику, в результате на “грифе” будут выделены ноты этого аккорда или гаммы.

Использует английскую нотацию (в российских музыкальных образовательных учреждениях распространена немецкая система, в которой, например, нота си - H, в противоположность B в английской) и, соответственно, англоязычные термины.

Так как приложение беcсерверное и в собранном виде содержит только статические файлы, его можно установить как Progressive Web Application (PWA) и оно будет работать без интернета. Для этого надо открыть его в отдельной вкладке и нажать на ссылку “Add to home screen” внизу страницы (если ваш браузер поддерживает PWA).

При разработке я использовал React, Snowpack, SASS, Bootstrap и JavaScript.

История

Изначально приложение было задумано не конкретно для гитаристов, а для любых музыкантов (в первую очередь меня и моих друзей; я, например, на гитаре не играл), несмотря на интерфейс (и до сих пор может использоваться не только ими): идея первого варианта была основана на выводе октавы нот от определённой тоники (как на скриншоте – тоника всегда под номером 0, далее ноты по полутонам).

Предполагаемый способ использования был такой:

Пользователь знает “устройство” некоторого типа аккордов, например, мажорных, но пока затрудняется “вычислять” их составные ноты в уме
Вводится тоника
Приложение строит октаву от неё
Пользователь, зная, что ноты мажорного аккорда отстоят друг от друга на 4 и 3 полутона соотвественно, смотрит ноты с номерами 0-4-7 – это и будут ноты, составляющие аккорд.
Далее он самостоятельно находит соответствующие ноты у себя на инструменте – не обязательно гитаре.

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

Аналогично приложение можно было использовать для многих других целей, в том числе “рассчёту” составных нот гамм (тон-тон-полутон- и т.д.), интервалов, а также нахождения нот на грифе. Таким образом получается простота, гибкость и многофункциональность приложения, в зависимости от того, под каким углом на его функцию взглянуть.

Опыт использования друзьями показал, что это была не самая удачная и понятная интуитивно идея. Поэтому я добавил возможность подсветки аккордов / гамм и возможность использования множества “струн”.

С одной стороны, приложение стало более функциональным и удобным (всё, что можно было сделать с его помощью раньше, можно и сейчас точно тем же способом), но, с другой стороны, с точки зрения пользователя оно стало гораздо более узкоспециализированным, превратившись в интерактивную аппликатуру для гитары.