Демонстрационный проектОткрыть сайт →

Демо-сайт · интернет-магазин · три дизайна на одном движке

Насыщенный, как витрина. Быстрый, как лендинг.

Большие фотографии, анимация, 3D, игровые механики, магазин на 20 товаров — и всё это в трёх совершенно разных дизайнах, которые работают на одном движке. Мы нарочно переусложнили сайт, чтобы показать: даже так он открывается мгновенно и одинаково хорошо выглядит на телефоне, ноутбуке и ультрашироком мониторе.

Тема — шутка: «Научный институт ищет птенцов голубя». Всё остальное всерьёз: каждый блок — образец того, что нужно настоящему коммерческому сайту.

92–94
скорость на телефонеGoogle PageSpeed, все три дизайна
2,2 с
до главного экранаэмуляция медленного мобильного интернета
100
доступностьGoogle PageSpeed: контраст, подписи, клавиатура
100
SEOразметка товаров, подборки, мета-данные

Один сайт — три дизайна

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

Всё, что есть у настоящего магазина

Несмотря на шутливый тон, внутри — полный набор компонентов коммерческого сайта. Всё работает, всё можно потрогать.

Продажи

Полный путь покупателя, как в настоящем магазине

  • Каталог на 20 товаров: разделы, фильтр цены, сортировка, «Показать ещё»
  • SEO-подборки на отдельных страницах
  • Карточка: галерея, варианты, размеры, доставка по городам, вопросы
  • Корзина, избранное, сравнение, быстрый просмотр
  • «Товар дня» с таймером и комплекты со скидкой

Доверие

То, что снимает сомнения перед покупкой

  • Отзывы с фото, распределением оценок и ответами
  • Рейтинги на каждом товаре
  • Частые вопросы
  • Тарифы с переключением «месяц / год»

Вовлечение

Механики, ради которых страницу листают до конца и пересылают

  • Кнопка с общим счётчиком для всех посетителей
  • Анкета в три шага и именное удостоверение-картинка
  • Мини-игра на время и достижения
  • Интерактивная карта: можно отметить своё наблюдение
  • Голосование и «предложить свою версию»

Вау-эффекты

Тяжёлое — но не в ущерб скорости

  • Фотореалистичные кадры, которые реагируют на курсор
  • 3D-модель товара прямо в карточке
  • Анимации при прокрутке
  • Три дизайна, переключаемые на лету

Красота не тормозит

Обычно насыщенный сайт платит скоростью: тяжёлые картинки, шрифты, скрипты. Здесь каждый килобайт на своём месте — поэтому сайт быстрый на обычном мобильном интернете, а не только на офисном Wi-Fi.

Картинки
современные форматы AVIF и WebP, свой размер под каждый экран, всё ниже первого экрана — по мере прокрутки
Шрифты
только нужные начертания, заранее грузятся лишь шрифты заголовка — текст виден сразу
Код
тяжёлые части — 3D, карта, игры — подключаются, только когда до них дошли
Страницы
собираются заранее и отдаются готовыми, без ожидания сервера

От телефона до ультраширокого монитора

Вёрстка подстраивается под любую ширину, а не под три «стандартных» экрана. На телефоне — свои кадры и своя компоновка, а не уменьшенная копия.

  1. 320 px
  2. 390 px
  3. 768 px
  4. 1024 px
  5. 1440 px
  6. 1920 px
  7. 3440 px

Хотите так же — но про ваш бизнес?

Такой же быстрый и живой сайт, только всерьёз: под ваши товары, услуги и стиль.

«Голубиный вестник»

Вы подписаны

Вестник доставляет голубь. Адрес он знает сам, поэтому почту мы не спрашиваем. Первый выпуск прилетит, когда найдётся птенец.

Демо-сайт: никакие данные не собираются и никуда не отправляются.