Перейти до вмісту

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: ті самі шари одним документом; фокус і посилання потрапляють на потрібну глибину