Перейти к содержимому

Copious Lab

Одна студия, несколько сайтов.

Одна компания, одни и те же цены из одной и той же CMS — и двадцать один способ всё это построить. Каждый дизайн — рабочая страница, а в заметках сказано, чего он стоит в скорости и доступности.

Меняется только название; цены и услуги остаются нашими. Ничего не сохраняется.

  1. Текущий сайт

    Editorial

    • Рендерится на сервере, работает без JavaScript
    • JS главной ≈ 139 kB в gzip, без WebGL
    • WCAG 2.1 AA, проверяется axe в CI

  2. Концепт A

    Spatial studio

    • Одна процедурная WebGL-сцена, которая меняется с каждым разделом
    • three.js загружается после первой отрисовки; текст его никогда не ждёт
    • При минимуме анимации — неподвижный кадр; без WebGL или JS страница остаётся простым HTML

  3. Концепт B

    Terrain

    • Гравированный пейзаж, над которым вы пролетаете при прокрутке; каждый раздел — свой рельеф
    • Тушевые хребты и горизонтали на бумаге, нарисованные одним шейдером; курсор приподнимает землю
    • Текст лежит на сплошных бумажных табличках и никогда не попадает на линии

  4. Концепт C

    Facet

    • Холодный кристаллический объект, который собирается из осколков при прокрутке
    • Интерфейс приборной панели: моноширинные показания, текст, который расшифровывается на месте
    • Затенение в духе преломления, полностью процедурное

  5. Концепт D

    Liquid

    • Полноэкранный жидкий градиент, который размешивает курсор
    • Каждый раздел меняет настроение цвета
    • Мягко и органично, с крупным спокойным шрифтом: полная противоположность C

  6. Концепт E

    Bitmap

    • Освещённый 3D-натюрморт, сведённый упорядоченным дизерингом к двум краскам; разделы растворяются клетка за клеткой
    • Курсор (или палец на картинке) — фонарик; услуга или обещание в фокусе подсвечивает свой предмет
    • Каждое слово стоит на сплошном бумажном окне; без WebGL его заменяет CSS-дизеринг

  7. Концепт F

    Diorama

    • Низкополигональная улица старого города в сумерках; прокрутка ведёт внутрь, по комнате на раздел
    • Отрисовано в трети разрешения, с прыгающими вершинами, аффинными текстурами и постеризованной палитрой
    • Весь текст — в сплошных диалоговых окнах; без WebGL его заменяет сумеречный силуэт города на CSS

  8. Концепт G

    Glyph

    • 3D-форма, нарисованная одними символами и меняющаяся от раздела к разделу: узел, пятнадцать бусин, цепь, гранёное кольцо
    • Тени — через тональную шкалу; на силуэте символы подбираются по форме контура
    • Текст стоит на сплошных панелях; без WebGL или JS его заменяет ASCII-тор, напечатанный сервером

  9. Концепт H

    Phosphor

    • Сайт как XY-осциллограф: в каждом разделе новая фигура, прочерченная светящимся лучом
    • Гауссовы сегменты луча, затухающий ping-pong-буфер для послесвечения и проход свечения
    • Наведите курсор на услугу (или коснитесь её фигуры), чтобы настроить осциллограф на её соотношение; при минимуме анимации остаётся один неподвижный след

  10. Концепт I

    Pool

    • Живая симуляция волн с настоящим преломлением и каустикой на WebGL
    • Текст — на сплошных табличках у бассейна; вода видна только между ними
    • Минимум анимации: один неподвижный кадр залитой солнцем воды, без симуляции

  11. Концепт J

    Turing

    • Живая симуляция реакции–диффузии Грея–Скотта на WebGL
    • Текстовые панели вырезаны из симуляции, и узор растёт вокруг них
    • Минимум анимации: культура выращивается при загрузке и показывается неподвижной

  12. Концепт K

    Mycelium

    • Сеть слизевика из ~100 тыс. агентов на GPU, которая растёт между блоками страницы
    • Каждая услуга, шаг и обещание — пища; курсор тоже, а прожилки обходят текст
    • При минимуме анимации сеть выращивается незаметно и показывается неподвижной; без WebGL — нарисованная

  13. Концепт L

    Loom

    • Тканая страница: прокрутка вплетает в голую основу новые ряды полотна
    • У каждого раздела своя полоса — полотняное, саржа, ёлочка, рогожка, гусиная лапка, атлас
    • Один фрагментный шейдер; нити основы дрожат под курсором; при минимуме анимации видна готовая ткань

  14. Концепт M

    Copious OS

    • Разделы — настоящие окна: их можно перетаскивать, складывать стопкой и сворачивать; без JS — одна колонка
    • Без WebGL; один небольшой 2D-canvas для обоев с дизерингом
    • Клавиатура: значки и док — это ссылки и кнопки, Esc сворачивает, Alt+W переключает окна

  15. Концепт N

    Sheet

    • Сайт как электронная таблица; услуги — настоящая таблица, вкладки — ссылки
    • Стрелки перемещают выделение; строка формул описывает каждую ячейку
    • Ни canvas, ни WebGL; гистограммы в ячейках построены по опубликованным ценам и срокам

  16. Концепт O

    Receipt

    • Весь сайт — один кассовый чек на термобумаге, который выходит из принтера по мере прокрутки
    • Только CSS и SVG: scroll-таймлайны с небольшим запасным вариантом на JS, без WebGL и canvas
    • Услуги — настоящая таблица; по запросу печатается на бумаге шириной 80 мм

  17. Концепт P

    Riso

    • Двухцветный ризографический зин: каждый разворот появляется со сбитой приводкой и сводится при прокрутке
    • Растр — чистый CSS (точечные градиенты и contrast()); зерно — один SVG-фильтр turbulence
    • Основной текст всегда напечатан сплошной синей краской по бумаге, 7,5:1; розовая — только декор

  18. Концепт Q

    Specimen

    • Сайт как образец шрифта от словолитни, набранный свободным вариативным шрифтом Roboto Flex
    • Настоящие ползунки управляют насыщенностью, шириной, оптическим кеглем и грейдом; буквы в шапке тянутся к курсору
    • Ни canvas, ни WebGL: один вариативный шрифт, разбитый по письменностям, CSS-переменные и оси, управляемые прокруткой

  19. Концепт R

    Loupe

    • Спокойная печатная страница; стеклянная лупа показывает, как она устроена
    • Под стеклом: имена элементов, настоящая сетка и базовая линия, измеренные размеры и поле CMS за каждой строкой
    • Измеряется по живой странице во время работы; ни canvas, ни WebGL; кнопка показывает весь рентген с клавиатуры

  20. Концепт S

    Toybox

    • Страница — коробка с кубиками: настоящие заголовки, карточки и кнопки падают, складываются в стопки, их можно бросать (matter.js)
    • У каждой детали своё место; «Прибрать» возвращает её туда, а улёгшиеся детали всегда лежат ровно и читаемо
    • Минимум анимации или нет JavaScript: те же кубики, аккуратно сложенные; Space подбрасывает деталь в фокусе

  21. Концепт T

    Droste

    • Бесконечный зум: вы прокручиваете вглубь страницы, сквозь просвет буквы — в следующий раздел
    • Только шрифт — один гротеск, волосяные линии и один акцент; каждый слой — настоящий раздел, сначала панорама, потом зум
    • Минимум анимации или нет JavaScript: те же слои одним документом; фокус и ссылки попадают на нужную глубину