Сайт студии: витрина собственного уровня

Задача

Студии из двух человек нечем подтвердить слова, кроме собственной работы. Отзывы можно написать, логотипы клиентов — нарисовать. Проверяемо только одно: как сделан сайт, на котором эти слова напечатаны.

Поэтому требование к проекту было жёстким: сайт должен выдерживать ту же проверку, которую мы предлагаем клиентам — скорость, адаптив, разметку, читаемый код. И приводить заявки без рекламного бюджета.

Идея первого экрана

Главная сложность формулируется просто: студия — это два разных человека и две разные профессии. Написать «дизайн и разработка» может кто угодно. Мы решили показать это буквально.

Экран разделён пополам. Слева живёт сцена Марка: редактор сам печатает код, и параллельно в окне браузера по строчкам собирается страница. Справа — сцена Ангелины: на холсте рисуется логотип, подбираются цвета и типографика. Половины реагируют на курсор и расходятся при прокрутке.

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

Как сделано

Вёрстка полностью ручная: HTML, CSS и JavaScript без фреймворков и сборщиков. Анимации построены на прокрутке и считаются в одном цикле кадров, поэтому страница не дёргается на телефоне. Режим уменьшенного движения в системе отключает анимации целиком — сайт остаётся читаемым.

Шрифты лежат на своём домене, изображения отдаются в WebP с заданными размерами, разметка Schema.org описывает студию, услуги, цены и вопросы. Форма заявки работает через собственный обработчик на том же домене: заявка приходит в Telegram-бот за секунды, а если отправка сорвалась — посетитель сразу видит прямые контакты.

Результат

Сайт открывается быстро, корректно работает на телефонах и планшетах, размечен для поисковых систем и служит основной точкой входа для новых клиентов. Он же — наш постоянный полигон: приёмы, которые мы сначала проверяем здесь, потом уходят в клиентские проекты.

Что мы вынесли из проекта

Собственный сайт — самый требовательный заказчик. Здесь нельзя сослаться на сроки и бюджет, поэтому любая срезанная деталь остаётся на виду. Именно поэтому он лучше портфолио объясняет, как мы работаем.