Studio
Недеструктивный RAW-конвейер в браузере: главной сложностью был цвет.
- Год
- 2026
- Разработка
- 12 недель
- Стек
- Next.js · React · TypeScript · Tailwind · Vercel
- Продуктовый дизайн
- Дизайн интерфейса
- Разработка
- Обработка изображений
Продукт Kayzen Web, доступный на адресе предпросмотра Vercel до перехода на окончательный домен.
- сквозная цепочка управления цветом
- ICC
- доступность в Lighthouse
- 97/100
- рекомендации (Best Practices) в LighthouseНаша самая низкая оценка по этому критерию: обработка RAW в браузере опирается на API, которые Lighthouse помечает; мы показываем результат как есть, вместо того чтобы убрать функцию, и пересмотр запланирован.
- 73/100
Какую задачу нужно было решить.
Контекст
Studio — онлайн-приложение для проявки фотографий: импорт RAW, недеструктивная коррекция, сквозное управление цветом по ICC и экспорт в разные форматы.
Ограничение
Фотографы не меняют инструмент ради удобства. Два решающих препятствия: точность цветопередачи — файл со сдвигом оттенка непригоден — и недеструктивность, то есть возможность вернуться к любой настройке через полгода.
Решение
Цветом занялись раньше, чем интерфейсом. Входной профиль камеры, линейное рабочее пространство, выходной профиль, выбираемый при экспорте: цепочка явная и показана пользователю. Настройки хранятся как список операций и никогда не применяются к исходному файлу.
Показатели на момент сдачи.
Оценки Lighthouse для сайта в рабочей среде. Мы публикуем их как есть: если какая-то оценка низкая, её причина и план исправления описаны ниже, а не замалчиваются.
Каждое решение — и его причина.
Нейтральный тёмный интерфейс
Строго нейтральный серый вокруг изображения, без малейшего оттенка. Тонированный интерфейс искажает восприятие баланса белого: это первое правило программ для обработки, и оно важнее любых эстетических соображений.
Гистограмма всегда на виду
Закреплена вверху панели настроек, с предупреждением о клиппинге. Это измерительный инструмент фотографа; спрятать её за вкладкой — всё равно что убрать уровень в ящик с инструментами.
Профессиональные сочетания клавиш
Сочетания клавиш повторяют те, что приняты в эталонных программах. Навязать опытному пользователю новую грамматику — значит заставить его переучиваться: цена перехода становится выше выгоды.
Палитра проекта
Нейтральный серый 900
#18181B
Фон рабочей области
Нейтральный серый 700
#3F3F46
Панели
Сиреневый
#A78BFA
Акцент, выделение
Красный клиппинга
#EF4444
Предупреждение о пересвете
Типографическая система
Заголовки
Inter 600
Основной текст
Inter 400
Числовые значения моноширинные: ползунок, у значения которого прыгает ширина, воспринимается как неточный.
Что внутри.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Декодирование RAW на WebAssembly
Декодирование проприетарных форматов (CR3, NEF, ARW) выполняется на WebAssembly в воркере. Основной поток остаётся свободным: ползунки реагируют даже во время декодирования 60-мегапиксельного файла.
GPU-рендеринг через WebGL
Коррекции применяются шейдерами на видеокарте. Проход на CPU сделал бы предпросмотр непригодным при таком разрешении.
История операций, а не пикселей
Каждая настройка — запись в сериализуемом стеке операций. Отмена, копирование обработки на серию, экспорт пресета — всё вытекает из этой структуры.
Как сайт становится находимым.
SEO для привлечения, а не для продукта
Само приложение не индексируется, и в этом нет нужды. Продвижение строится на презентационных страницах и сравнениях — там, где происходит знакомство с продуктом.
Удобно для всех.
С июня 2025 года Европейский акт о доступности (European Accessibility Act) требует цифровой доступности для значительной части онлайн-сервисов. Мы закладываем её на этапе проектирования, а не исправляем задним числом.
97/100 несмотря на экспертный интерфейс
Каждый ползунок — нативный input с подписью, объявляемым значением и шагом для клавиатуры. Почти все интерфейсы для обработки обходятся без этого; технических причин так поступать не было.
Что было сдано.
- Презентация
- Приложение для обработки
- Форматы и совместимость
- Тарифы
Ход проекта.
Цветовая цепочка
Входные профили, рабочее пространство, выходные профили.
Декодирование
WebAssembly, воркеры, быстрый предпросмотр.
Рендеринг
Шейдеры WebGL, гистограмма, клиппинг.
Интерфейс
Панели, сочетания клавиш, история.
О чём нас часто спрашивают.
Другие проекты
Соответствие GDPR & SaaSKonsent by Kayzen
Разработчик баннеров, который сам же их проверяет, — судья в собственном деле: независимость и была продуктом.
Наступательная кибербезопасность & SaaSSentinel by Kayzen
Продавать продукт безопасности инженерам: каждое утверждение должно было быть доказуемым.
Данные & МетеосервисMétéo Climat France
358 индексируемых страниц, анимированная карта на 72 срока — и ни одной строчки фреймворка.
Тот же уровень требований — для вашего сайта.
Бесплатный аудит вашего текущего сайта, смета в течение 24 часов и письменное обоснование — такое же, как то, что вы только что прочитали. Оплата в три этапа без переплаты; местные программы поддержки проверяются до подписания.