Guitar Notes Helper

Фичи

Задача

Сделать удобный сервис показывающий ноты, гаммы и аккорды на грифе

Проблема

Общей проблемой можно выделить: отсутствие русских нот, обрезанный гриф, немасштабируемый гриф, гриф с непропрциональными ладами, отсутствие всех нот (только гаммы или аккорды),  неадаптивный дизайн, сложная навигация

Аналитика

В результате исследования было выделено 39 фич, из которых 24 ключевых (важных для пользователя). Наш сервис набрал 79% из них, тогда как ни один из аналогов не смог набрать больше 46%.  При этом 11 фич нашего сервиса оказались абсолютно уникальными. Всего же в разработку ушло 30 фич и 7 фич в бэклог.

Также несмотря на очевидные проблемы в структуре и логике аналогичных сервисов, был проведен тест скорости обработки операций, по результатам которого наш прототип ожидаемо получил преимущество в скорости обработки первичной операции на 32% и на 52% в скорости обработки множественных операций.

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

Структура

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

В каждом режиме есть как уникальные опции (в гаммах – ступени, в аккордах – прогрессия) так и общие (октавы, частоты). Также из общего для всех разделов есть фильтр нот. Гриф можно настраивать (скрывать лады, маркеры, включать инкрустацию итд).

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

Стиль

Сервис выполнен в монохромном виде с акцентом на нотах и ладах. Цвет при этом имеет многослойную взаимосвязанную структуру. Первый слой темный это ноты, второй светлее нот – гриф, третий –  текст и элементы управления, четвертый самый светлый – фон. При этом фон на контрасте с темным грифом формирует лады (вертикальные разделители).

Другой важной задачей была компоновка элементов. Навигация по тонике (меню под грифом) не должна обрезаться в разрешении 1280x720, а сам гриф надо располагать максимально близки к центру экрана или выше. При этом невозможно отказаться от шапки, блока заголовка и фильтров. И надо учитывать интерфейс ОС и браузера, а это еще плюс 70 - 140 пикселей сверху.  

Сайт использует шрифтовую пару Roboto-Montseratt. Плавающая шапка в привычном стиле гугл сервисов. Иконки Material design, свитчи кастомные, стилизованные под иконки, чтобы лучше сливаться с фоном и не отвлекать от грифа

Альтернативные версии.

Шапка

Шапка фиксируется при скролле. Элементы слева направо: логотип, разделы, кнопка переключения языка, кнопка темной/светлой темы, кнопка помощи, кнопка настроек, кнопка помощи проекту. Имеет четыре шага масштабирования.

Заголовок

Блок заголовка содержит информацию о выбранном элементе, дополнительную навигацию по разделу, фильтры и доступные режимы

Гриф

Гриф – основная и одна из самых сложных частей. Нужно подобрать цвет, шрифт, тип заливки нот с учетом фона ладов. Фон грифа может быть светлый с темными ладами так и наоборот. Здесь нужно добиться хорошей читабельности, но с минимальным контрастом. Нужно продумать отображение английских и русских нот с учетом минимальной ширины лада и разного количества символов. Английские ноты используют от 1 до 2 символов, русские от 2 до 5. Нужно учесть и масштабирование грифа, например разрешение 1080p позволяет отображать гриф с реальными пропорциями, а 720 уже нет. Также надо продумать и нулевой лад, он может быть фиксированным или динамическим.

Вместе с программистом мы придумали уникальную механику масштабирования, позволяющую растягивать и сжимать гриф сохраняя реальные пропорции мензуры, от максимально возможной ширины экрана до самой компактной в 980px, это позволяет отображать 24 ладовый гриф без скролла почти на всех устройствах кроме смартфона.

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

Фильтры

Фильтры нот – одна из киллер фич сервиса. Фильтры позволяют отсечь лишние ноты по названию, знаку, номеру лада и октаве. Также с помощью фильтров можно собрать свою гамму или аккорд, последнее особенно полезно для поиска всевозможных позиций на грифе. Фильтры общие для всех режимов.

Главная

На главной показываются все ноты и блок рекомендуемых гамм, аккордов

Два режима, октавы и частоты, общие для всех разделов. Режимы заменяют названия нот на выбранный параметр. Октавы показывают номер октавы в международном формате Sciencific Pitch Notation, частоты показывают частоту ноты в формате 12-TET (Равномерно-темперированный строй)

Гаммы

Второй по значимости раздел – гаммы, отображет ноты гаммы. Гамма выбирается в блоке заголовке или в карточках под списокм тоник. В выпадающем списке гаммы отсортированы по категориями и популярности. Любую гамму можно добавить в избранное нажав на иконку звезды, которая появляется при наведении и аналогично убрать. Избранные гаммы появляются вверху списка и в блоке карточек.

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

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

К стандартным режимам частот и октав добавляются три уникальных режима – ступени, аккорды и боксы. Режим ступеней показывает номер ступени вместо названия ноты, режим аккордов показывать какие аккорды в каких позициях входят в гамму, режим боксов показывает гамму в разных позициях с ограничением на количество нот на струне.

Аккорды

Раздел аккорды отображает ноты аккордов. Структура раздела идентична разделу с гаммами. Аккорды выбирается в блоке заголовке или в карточках под списком тоник. В выпадающем списке аккорды отсортированы по сложности. Любой аккорд можно добавить в избранное нажав на иконку звезды, которая появляется при наведении и аналогично убрать. Избранные аккорды появляются вверху списка и в блоке карточек.

Выбор тоники (ключа) от которого строится выбранный аккорд расположен под грифом

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

К стандартным режимам частот и октав добавляются три уникальных режима, интервалы, гаммы и прогрессия. Режим интервалов показывает интервал вместо названия ноты, режим гамм показывать какие гаммы включают выбранный аккорд, режим прогрессий показывает популярные прогрессии от выбранного аккорд

Квинтовый круг

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

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

Режимы идентичны режимам в гаммах

Футер

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

Вспомогательный функционал

Весь вторичный функционал выполнен в модальных окнах. К нему относятся: Помочь проекту, настройки, помощь, обратная связь, информация о сервисе. Окна имеют либо фиксированную либо авто ширину, по высоте увеличиваются от центра к краям пока не достигнут предела верхних и нижних паддингов, после чего появляется вертикальный скролл

Настройки

Настройки открываются по иконке шестеренки в шапке.  В настройки входят автомасштабирование грифа, выделение 12, 24 ладов, маркеры ладов, нумерация ладов, анатомический гриф, инкрустация, количество струн, инкрустация, количество струн, строй

Помочь проекту, обратная связь, о сервисе

Форма помощи проекту доступна по кнопке в шапке и ссылке в футере. Формы о сервисе и обратная связь доступны только по ссылкам в футере.

Помощь

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

Общая теория

Справочники

Инструменты

Темная тема

Масштабирование

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

Компоненты