Разработка имиджевого лендинга для дизайн-студии Lumora

Описание

Клиент — независимая дизайн-инжиниринговая студия Lumora.

Задача:
Разработать презентационный сайт-визитку премиального уровня, который транслирует экспертизу и вызывает доверие у B2B-аудитории (стартапы, продуктовые компании). Сайт должен работать как единый HTML-файл без фреймворков, быстро загружаться, корректно отображаться на любых экранах от мобильных до 4K, и производить «вау-эффект» с первых секунд за счёт анимаций и интерактивного hero-блока. Дополнительно нужна рабочая форма заявки с серверной валидацией и возможностью подключения email-уведомлений для менеджеров студии.

Решение

Разработал полностью самостоятельный одностраничный сайт — один файл, без сборщиков и фреймворков:

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

• Интерактивный блок «жидкая кисть» в шапке — при движении курсора поверх основного фото плавно проявляется второе изображение через мягкий круговой градиент с угасанием. Эффект оптимизирован под экраны высокой плотности, корректно пересчитывается при изменении размеров окна и отключается, если пользователь предпочитает минимум движения.

• Анимации без сторонних библиотек: экран загрузки со счётчиком от 0 до 100, построчное появление заголовков, пословное проявление текста, нарастающие числа статистики при прокрутке — всё реализовано на чистом скрипте с наблюдателями видимости и плавными переходами.

• Плавная прокрутка через единственную подключённую библиотеку — навигация из шапки, полноэкранное меню и все внутренние ссылки скроллят мягко и не конфликтуют с анимациями.

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

• Доступность: быстрый переход к содержимому, подписи для экранных читалок, видимый фокус при табуляции, контрастность текста по стандартам, закрытие всплывающих окон клавишей Esc.

Результат

Готовый рабочий сайт, размещённый в облаке с мгновенной загрузкой статики и откликом серверной функции менее двух десятых секунды. Показатели качества по встроенному аудиту браузера: производительность 95+, доступность 98+, лучшие практики 100. Сайт используется студией как основная посадочная страница для привлечения клиентов — форма собирает заявки, менеджеры получают письма на почту. Заказчик может обновлять содержимое, редактируя один файл разметки, без установки программ или системы управления контентом. Код полностью передан, легко расширяется — можно добавлять разделы, переводы на другие языки, подключать аналитику — без переделки архитектуры.