Концепция
Two Sides — это веб-синтезатор, вдохновлённый эстетикой и музыкой сериала «Очень странные дела». Интерфейс оформлен как стена с рождественскими гирляндами: красные, жёлтые и зелёные лампочки задают цветовой язык инструмента. Это живой, немного тревожный и ностальгический образ, который сразу отсылает к миру сериала и позволяет почувствовать себя внутри его атмосферы. Инструмент создан для того, чтобы каждый, даже не зная нот, мог собрать собственную композицию и выразить настроение через звук и цвет.
В основе концепции лежит идея двух миров: инструмент существует в двух стилях, как мир и Изнанка. «Мир» — тёплый и светлый, с бежевыми панелями и яркими цветными огнями. «Изнанка» — тёмная, серая и тревожная, где все цвета становятся красными, а звук опускается ниже и густеет. Переключение между ними превращает один и тот же синтезатор в две противоположные стороны одной истории
Стиль инструмента строится на двух состояниях. Мир — тёплый: бежевые панели, а красный, жёлтый и зелёный повторяют цвета гирлянды и обозначают источники звука. Изнанка — холодная и тревожная: серая стена, тёмные панели, всё красное, мерцание. Одна и та же панель, меняются только цвет и фон, форма остаётся. Форма везде одинаковая: скруглённые панели, фонарики и ползунки вместо ручек, потому что мышью ими управлять удобнее. Шрифт Inter
UI kit
Я использовала простые по форме и понятные мне кнопки, при этом стилизовала их под выбранную тему
Есть три источника звука: два синтезатора и барабаны. Каждый идёт в свой канал, где настраиваются громкость и панорама. Цвета у источника и канала одинаковые. Каналы сходятся на общей шине, и дальше звук проходит четыре эффекта по порядку: distortion, delay, reverb и glitch. Источники называются synth1, synth2 и drums, каналы — ch-s1, ch-s2 и ch-dr, эффекты начинаются с fx-, ряды секвенсора — с seq-row-, а кнопки — с btn-.
Я использовала нейросеть Claude. Он помог мне лучше разобраться, как устроен синтезатор, и что нужно писать в коде, чтобы был звук и все работало. Разобраться в целом с устройством синтезатора. Я впервые сталкиваюсь с написанием кода, который создает музыку, и мне было сложно писать код, осоебнно JavaScript. Также я использовала Chatgpt для создания мокапов. Идея, дизайн и макет я разработала самостоятельно
