
Subframe
Графічний малюнок на теплому пергаменті. Дизайнерський папір, де кожен штрих - це або графіт, або гумка, ніколи не фарба - глибина досягається за рахунок товщини ліній і рідкісних засічок
Subframe - це монохромна робоча поверхня дизайнера: тепле кремове полотно, графітово-чорне чорнило і повна відсутність хроматичних акцентів. Весь інтерфейс сприймається як єдиний матеріал - папір, олівець і тінь - з одним сміливим типографічним прийомом: вишуканий шрифт із засічками (Instrument Serif) на тлі систематичного шрифту без засічок (Inter), що надає заголовкам редакційної серйозності. Поверхні плоскі та обрамлені, а не піднесені; глибина досягається за рахунок тонких роздільників #e5e7eb і вставних відблисків на темних елементах управління, а не тіней. Щільність щедра: широкий вертикальний ритм (48-64px проміжків між секціями), центровані макети максимальної ширини та великий простір навколо тексту. Єдиний колір – це контраст між майже білим та майже чорним, що робить темну кнопку найяскравішим елементом на кожній сторінці, а смуга логотипів партнерських брендів у сірих тонах – єдиним декоративним візуальним елементом.
Центровані макети максимальної ширини (1200px) із щедрим вертикальним ритмом. Головний елемент є єдиним центрованим блоком: темний сегментований елемент керування у верхній частині, великий заголовок Inter, підзаголовок в один рядок і дві кнопки поруч (заповнені + напівпрозорі) — без бічного зображення, без поділу макета. Під головним елементом – центрована смуга логотипу у відтінках сірого. Кожен наступний розділ слідує тому ж шаблону: блок заголовка і підзаголовка, вирівняний по лівому краю, потім рамка демонстрації продукту на всю ширину з проміжками 48-64px між розділами. Навігація мінімальна: верхня панель з центрованими посиланнями та діями, вирівняними праворуч, без бічної панелі, без мега-меню. Сторінка читається зверху вниз як серія центрованих тверджень, кожному з яких відведено достатньо місця — макет більше схожий на редакційне портфоліо, ніж насичену сторінку продукту.
Візуальний ряд мінімалістичний та функціональний. Система використовує два візуальних режими: (1) скріншоти продуктів з рамками і макети інтерфейсу користувача, укладені в рамки радіусом 24px - на них відображаються реальні компоненти інтерфейсу (таблиці, кнопки, форми), відмальовані в тій же монохромній палітрі, завдяки чому скрінш; (2) єдина смуга логотипів партнерів у відтінках сірого як соціальний доказ, відмальована плоско, без кольору та контейнерів. Тут немає лайфстайл-фотографій, абстрактних градієнтів, 3D-рендерів. Єдиний ілюстративний елемент – це темна «плитка» продукту, розташована по центру на теплому сірому фоні з іконкою бренду – вона сприймається як демонстрація продукту, а не як прикраса. Усі зображення займають текстову верстку, де візуальна вага містить текст.
Палітра
Нейтральні
- Page Canvas
#fafafa— Фон сторінки, вітальну листівку на полотні, світлий текст на темних поверхнях — теплий білий колір, який лежить в основі всієї монохромної системи. - Hairline Border
#e5e7eb— Розділювачі, межі карток, рамки зображень, контури значків — тип обведення, що найчастіше використовується в системі, визначає просторову структуру. - Card Surface
#ededed— Піднятий фон для карток, додаткова поверхня - розташовується на щабель вище за полотно, створюючи угруповання без тіней. - Divider Mid
#dadada— Розділювачі середніх тонів та переходи між секціями - Graphite
#242424— Висококонтрастна нейтральна заливка для основних кнопок на світлих поверхнях. - Ink Black
#171717— Основний текст, заголовки, контури іконок – трохи крутіше, ніж Graphite, використовується для друкарні, а не для поверхонь.
Друкарня
від 12 до 128px · 7 ступенів
- Inter — заміна: Inter (Google Fonts) · зображення 500, 600, 700 · Системний інтерфейс без засічок - навігація, основний текст, кнопки, підзаголовки, заголовки розділів. Вага 500 для основного тексту та елементів керування, 600 для підзаголовків та акценту навігації, 700 для заголовків розділів. Сильна негативна міжлітерна відстань стискає геометричні форми за будь-якого розміру, надаючи інтерфейсу стислий, технічний вигляд.
- Instrument Serif — заміна: Playfair Display · зображення 400 · Шрифт із засічками, призначений тільки для заголовків та редакційних матеріалів. Товщина 400 з міжлітерним інтервалом -0.025em створює елегантність, що тяжіє до курсиву, яка контрастує з індустріальною геометрією Inter - фірмовим прийомом: одне слово або фраза із засічками всередині сторінки без засічок, що виступає як візуальний розділовий знак, а не сти.
- Fragment Mono — заміна: JetBrains Mono · зображення 400 · Акцентний моно для вбудованих елементів, схожих на код, тегів та технічних виносок. Використовується ощадливо — з'являється у списках функцій та вбудованих інструкціях, де інструмент проектування хоче позначити «це машинний висновок».
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 8px |
| Радіус кнопок | 16px |
| Радіус карток | 24px |
| Тіні | ні — межі замість тіней |
| Між секціями | 64px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Subframe і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- monopo saigon — Рідке сяйво, що переливається, за редакційною тишею — монохромна редакційна галерея, що ширяє на розплавленому світлі.
- Hyer Aviation — Сутінки в кабіні пілота над пергаментом. Бліде світане небо зустрічається з логотипом із засічками розміром з фюзеляж, а один теплий глиняний акцент порушує монохромну стриманість
- OFF+BRAND. — Переливається сфера на теплому пергаменті
- Seed — живий організм під лабораторним склом
- Eindhoven Design District — Редакційний бруталізм на білому папері – маніфест муніципального дизайну, виконаний великим шрифтом, з мінімальною кількістю фотографій та абсолютною стриманістю
- Miranda — Класичний широкоформатний шрифт на світло-кремовому фоні - редакційна стаття газети для цифрової доби
- Monocle — Якісна газета широкоформатна на кремовому папері. Редакція, ретельно підібрана за всіма параметрами, де кожна колонка заслуговує на своє місце, а на сторінці є лише один колір, що має значення
- Agencja brandingowa — Редакційна галерея в білих тонах з типографікою, виконаною чорним чорнилом
- Websmith Studio — Вранішнє світло на кремовому папері
- Aspelin Reitan — Архітектурний архів при свічках — сторінка виглядає як портфоліо побудованих місць, прикріплене до стіни теплого кремового кольору, з одним рядком білого тексту, що ширяє над кожним зображенням на всю ширину сторінки
- Public — Монохромна редакційна стаття на холодному мармурі — майже монохромне полотно, шрифт із засічками завтовшки 300, один фіолетовий акцент, який виконує всю колірну роботу
- Motto — Друкарський моноліт на папері - єдиний впевнений голос, що заявляє про себе на білому папері