ThoughtLab
Обсидіановий монумент з багряним сигналом. Полотно із чорної порожнечі, де єдиний насичений червоний об'єкт у соборі, надрукованому великими білими літерами, — це єдина хроматична фігура.
ThoughtLab працює як мова дизайну чорного собору: чисте чорне полотно, одне червоне імпульс і настільки велика друкарня, що вона виконує функцію архітектури. Система майже повністю ахроматична - #cccccc відповідає за основну частину, #ffffff - за відображення, - при цьому #fc1c46 з'являється тільки при єдиному основному дії у вигляді контрольованого стрибка напруги на тлі порожнечі. Ієрархія будується з допомогою різких стрибків масштабу (198px → 14px), а чи не з допомогою кольору, тіней чи заливок. Компоненти невагомі: прозорі картки, кнопки-пігулки, тонкі поля введення, відсутність стека піднесень - сторінка дихає за рахунок негативного простору і щільно розташованого верхнього регістру, а не за рахунок контейнерів.
Темне полотно, що займає всю ширину сторінки, з широкими горизонтальними полями (126px з кожного боку, що зміщує колонку з контентом приблизно до 1400px). Заголовок є одним рядком 72px: логотип зліва, слоган по центру, кнопка заклику до дії у вигляді таблетки і гамбургер справа. Герой є розділеною композицією - збільшений заголовок 198px великими літерами зліва з підтримуючим основним текстом 18px нижче, а 3D-сфера перекриває текст праворуч від центру, частково «з'їдаючи» його. Під героєм розділи розташовані у просторому вертикальному ритмі з проміжками 86-108px між ними. Елементи роботи відображаються у вигляді списку, що займає майже всю ширину сторінки, а не як сітка карток. Немає бічної панелі, немає мега-меню, немає нижнього колонтитулу з сіткою з колонок — нижній колонтитул є одним тихим рядком з інформацією про авторські права та контактними даними #4c4c4c. Навігація за межі заголовка запускається гамбургером у повноекранне накладення.
Зображення нечисленні та навмисно підібрані. Домінуючим візуальним елементом є велика сфера з обсидіанової рідини, створена за допомогою WebGL — темна, майже чорна тривимірна форма з ледь помітними синіми і янтарними відображеннями по краю, яка ширяє на чорному тлі і частково перекриває заголовок. Вона функціонує скоріше як іконографія бренду, ніж як ілюстрація. Мініатюри проектів відображаються у вигляді фотографій або відео у вертикальному списку, представленому від краю до краю без рамки. Жодних фотографій у стилі лайфстайл, жодних стічних зображень, жодних декоративних градієнтів. Сфера та шрифт – єдині візуальні елементи на сторінці.
Палітра
Бренд
- Crimson Signal
#fc1c46— Основний акцент – єдиний червоний елемент; він присутній на вкладці «Контакти», у логотипі бренду та більше ніде. Його рідкість зумовлена особливостями дизайну.
Нейтральні
- Void
#000000— Фон сторінки, полотно - абсолютна основа, на якій ширяють всі інші елементи. - Ash
#cccccc— Основний текст і текст посилань, тон за замовчуванням на чорному полотні — вибраний замість чисто білого, щоб пом'якшити оптичні відблиски. - Frost
#ffffff— Відображення заголовків, тексту кнопок, тексту полів введення та розмітки – найяскравіший рівень, призначений для контенту, який має бути лінійним. - Graphite
#4c4c4c— Авторські права, метатеги, допоміжний текст — навмисне приглушений, щоб не конкурувати з основним текстом.
Друкарня
від 10 до 198px · 7 ступенів
- sui — заміна: Space Grotesk (closest free geometric match) or Inter for a more neutral alternative. Neue Haas Grotesk Display if licensed. · зображення 300, 400, 500, 700 · Єдиний шрифт. Sui - це спеціально розроблений геометричний шрифт без засічок, який використовується для всього, від 198px для заголовків до 10px для підписів. Товщина 700 зарезервована для монументальних заголовків та великих назв; товщина 400 використовується для решти системи. Контраст між жирним та звичайним шрифтом – це основна система шрифтів, друга родина не потрібна.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 9px |
| Радіус кнопок | 9999px |
| Радіус карток | 0px |
| Тіні | ні — межі замість тіней |
| Між секціями | 86-108px |
| Ширина сторінки | 1400px |
ІІ збере ваш сайт у стилі ThoughtLab і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Vivid+Co — призматичне світло крізь обсидіан
- Sequel — Приватний показ після настання темряви — єдина тепла лампа в решті неосвітленого кінотеатру
- Dovetail — Схема креслення під чорним місяцем – ледь помітні лінії графіка, білий шрифт, одна фіолетова іскра
- MekaVerse — Монохромна галерея цифрових артефактів — суцільна чорна порожнеча, де відмальований світ висить, наче музейний експонат, а весь інтерфейс користувача — це біле чорнило на матовому чорному склі.
- Krea — галерея нуар опівночі
- Factory — Термінал «військова кімната» опівночі. «Завод» - це строга чорна панель управління, де єдина біла карта приземляється, немов освітлене ліхтариком повідомлення - єдиний об'єкт у кімнаті - це сама робота
- basement — Порожня друкарня о 3 годині ночі - величезні, стислі шрифти, що розтікаються по темряві, один проблиск помаранчевого світла на навігаційній панелі, все інше біле або примарно-сіре
- Stink Studios — Кіностудія опівночі - проектор гуде, у кімнаті темно, світиться тільки кіноплівка
- Apple (España) — чорний театр зі фурнітурою, що світиться
- Charlie — Друкарня, висічена з монастирського каменю на обсидіані. Портфоліо, в якому одна червона стіна створює оглушливу тишу
- Rive — Високоточне нічне бачення. Інтерфейс є спеціальною лінзою, що пробивається крізь темряву, щоб з абсолютною чіткістю сфокусуватися на технічних деталях.
- Datalands — Чорний собор із єдиним неоновим пульсом. Логотип заповнює неф; все інше - це ледь чутний текст під ним