Vivid+Co
призматичне світло крізь обсидіан
Vivid+Co працює в кінематографічній темній порожнечі: майже чорне полотно #101010-#495764, що переривається єдиним майже білим відтінком (#fffdf9), що використовується для багатьох шрифтів і елементів інтерфейсу. Типографіка в основному виконана шрифтом Neue Montreal товщиною 400 - навмисна відмова від жирного шрифту, де авторитетність досягається за рахунок масштабу (136px і 105px), а не ваги. Фірмовим прийомом є хроматична призма: блоки насиченого червоного/зеленого/синього світла, розділені RGB, просочуються крізь скляні куби, порушуючи монохромну поверхню. Макет центрований та просторий; навігація, основний текст та посилання виконані в одному кольорі #fffdf9 без окремих акцентних кнопок, заливок та тіней — диференціація досягається за рахунок інтервалів, масштабу та райдужного артефакту, який є єдиним колірним акцентом бренду.
Темне полотно, яке займає всю ширину сторінки, з однією колонкою контенту максимальною шириною ~1440px. Основний елемент: центрований призматичний артефакт з заголовком, що перекривається (текст перетинає куби) і підзаголовком, вирівняним по лівому краю. Навігація розташована в тонкій верхній панелі: ліворуч – логотип, праворуч – чотири невидимі посилання, а в кінці рядка – виділена кнопка «Контакти». Ритм розділів чергується між панелями-героями на всю висоту екрана і вужчими смугами контенту з проміжками ~108px. Розташування контенту асиметричне: призматичний артефакт є візуальним центром, а заголовки обтікають його. Текстові блоки в одну колонку мають максимальну ширину близько 440px; відсутні багатоколонкові сітки, матриці карток та таблиці цін. Нижній колонтитул є тонкою смугою, розділеною тонкою лінією, з двома колонками метаданих.
Головний елемент дизайну - абстрактне 3D-зображення скляних кубів з хроматичною аберацією по краях, розділеними за кольором RGB. Жодних фотографій, жодних зображень людей, жодних знімків продукції. Призма — це і є імідж бренду, решта — монохромна друкарня на темному полотні. Іконографія мінімальна: тонкі навігаційні написи та невеликий акцент у вигляді курсора/гліфа (область 142765) наприкінці одного із заголовків натякають на єдину монолінійну іконку 16px. Жодних ілюстрацій, жодних декоративних візерунків, жодних текстур.
Палітра
Нейтральні
- Bone White
#fffdf9— Основний текст, підписи навігації, колір посилань, заливка заголовків - майже білий колір, що займає всі типографічні поверхні темного полотна. - Obsidian
#101010— Полотно сторінки, заливка фону для головного та роздільних смуг – глибокий чорний колір, усередині якого знаходиться призматичний артефакт. - Graphite Veil
#495764— За заголовками та блоками контенту домінує холодний темний сланець, що надає полотну глибини без використання плоского чорного кольору. - Ash Border
#403f3f— Ледве помітна розділова лінія та контур картки — використовуються в 1px для поділу рядків, не конкуруючи з текстом. - Fog Blue
#6f879c— Приглушений другорядний текст та ледь помітні написи на кнопках (контраст 3,7:1) — позначення категорій послуг, такі як «Стратегія», «Креатив», «Комунікації + маркетинг», сприймаються як невиділені метадані. - Pure Black
#000000— Декоративна заливка для іконок та ілюстрацій у форматі SVG – використовується у зображенні призми та гліфах іконок; не є тлом.
Друкарня
від 15 до 136px · 9 ступенів
- Neue Montreal — заміна: Söhne · зображення 400, 700 · Ексклюзивний шрифт використовується у всьому інтерфейсі користувача - заголовках, основному тексті, навігації, кнопках, посиланнях, нижньому колонтитулі. Товщина 400 - значення за замовчуванням; товщина 700 зарезервована лише для підзаголовків. Заголовки з товщиною 105px і 136px мають міжрядковий інтервал 1,00-1,01 і міжлітерну відстань -0.02em, створюючи кінематографічні, розташовані один над одним заголовки, які сприймаються скоріше як скульптурні, ніж типографічні.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | простора |
| Базовий крок | 7px |
| Радіус кнопок | 0px |
| Радіус карток | 15px |
| Тіні | ні — межі замість тіней |
| Між секціями | 108px |
| Ширина сторінки | 1440px |
ІІ збере ваш сайт у стилі Vivid+Co і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Sequel — Приватний показ після настання темряви — єдина тепла лампа в решті неосвітленого кінотеатру
- ThoughtLab — Обсидіановий монумент з багряним сигналом. Полотно із чорної порожнечі, де єдиний насичений червоний об'єкт у соборі, надрукованому великими білими літерами, — це єдина хроматична фігура.
- Dovetail — Схема креслення під чорним місяцем – ледь помітні лінії графіка, білий шрифт, одна фіолетова іскра
- MekaVerse — Монохромна галерея цифрових артефактів — суцільна чорна порожнеча, де відмальований світ висить, наче музейний експонат, а весь інтерфейс користувача — це біле чорнило на матовому чорному склі.
- Krea — галерея нуар опівночі
- Factory — Термінал «військова кімната» опівночі. «Завод» - це строга чорна панель управління, де єдина біла карта приземляється, немов освітлене ліхтариком повідомлення - єдиний об'єкт у кімнаті - це сама робота
- basement — Порожня друкарня о 3 годині ночі - величезні, стислі шрифти, що розтікаються по темряві, один проблиск помаранчевого світла на навігаційній панелі, все інше біле або примарно-сіре
- Stink Studios — Кіностудія опівночі - проектор гуде, у кімнаті темно, світиться тільки кіноплівка
- Apple (España) — чорний театр зі фурнітурою, що світиться
- Charlie — Друкарня, висічена з монастирського каменю на обсидіані. Портфоліо, в якому одна червона стіна створює оглушливу тишу
- Rive — Високоточне нічне бачення. Інтерфейс є спеціальною лінзою, що пробивається крізь темряву, щоб з абсолютною чіткістю сфокусуватися на технічних деталях.
- Datalands — Чорний собор із єдиним неоновим пульсом. Логотип заповнює неф; все інше - це ледь чутний текст під ним