Creative Giants
Великоформатний редакційний постер на кремовому папері
Creative Giants виглядає як збільшений розворот артбука, створений за допомогою коду: тепле кремове полотно, тонкі поля і настільки великий шрифт, що він більше схожий на плакат, ніж на заголовок. Вся система працює на негативному просторі і одному легкому розмірі (300) — заголовки ледь чутні при розмірі 64-84px, а не різко виділяються жирним шрифтом, а міжлітерна відстань різко зменшується (-0.04em) у міру збільшення розміру шрифту, так що слова здаються висіченими. Колірна гамма розподілена на невеликі насичені мазки: яскравий пурпуровий, глибокий бірюзовий, світло-блакитний, яскраво-рожевий, м'ятний і темно-синій з'являються як поверхні карток або акцентів, а не як фонові заливки. Інтерактивні елементи є чорними на кремовому фоні фігурами з повністю закругленими (1440px) радіусами, а хромовані елементи майже непомітні — єдиний круглий логотип і кнопка «Меню» ширяють у білому просторі. Візуальна концепція – це контактний лист виробничої студії: один величезний заголовок, одна фотографія на всю ширину сторінки, один тихий рядок метатексту. Кожна друга сторінка має бути витримана у тому ж лаконічному стилі.
Модель сторінки з повним заповненням: немає контейнера максимальної ширини, контент займає всю ширину сторінки з однаковими відступами ліворуч та праворуч (16–32px на мобільних пристроях, 32px+ на настільних комп'ютерах). Головний заголовок - це один великий заголовок («CREATIVE GIANTS» на 84px), що займає приблизно 40% області перегляду, за яким відразу слідує фотографія з повним заповненням, метатегом в лівому нижньому кутку і накладенням заголовка. Ритм розділів монолітний: кожен новий розділ починається з невеликого тексту, написаного великими літерами, і пояснення, розділеного порожнім простором в 48-64px - немає темних/світлих смуг, що чергуються, за винятком однієї інвертованої акцентної картки Navy Ink. Контент вирівнюється з лівого краю; немає центрованих блоків, крім головного заголовка. У розділі новин/тематичних досліджень використовується триколонова сітка з карток з плаваючим праворуч блоком стрілок. Навігація здійснюється через єдиний верхній заголовок - без бічної панелі та будь-яких закріплених елементів за межами самого заголовка. Загальна щільність розміщення елементів є просторою і відповідає редакційному стилю: кожен розділ «дихає», а порожній простір є основним структурним елементом.
В оформленні переважає редакційна фотографія: зображення займає всю ширину сторінки, має гострі кути без накладень або закруглених масок. Стиль тяжіє до документального та атмосферного — зморшкуваті руки, громадські інсталяції, невимушені кадри з людьми ніколи не використовуються постановочні фотографії продукції. Зображення завжди представлені у великому масштабі (на всю ширину області перегляду або заповнюючи всю картку), тому дизайн-одиницею є фотографія, а не інтерфейс користувача. Жодних ілюстрацій, 3D-моделей, макетів продукції. Іконографія мінімальна: один невеликий круглий логотип, контурні шеврони на елементах управління каруселі та легкі іконки інтерфейсу користувача з обведенням 1px. Щільність зображення визначається самим зображенням, а текст служить як непомітний шар анотацій під або поверх фотографії.
Палітра
Бренд
- Magenta Bloom
#8a0467— Рожевий колір використовується як допоміжний акцент для декоративних деталей та акцентування уваги на нечасті запити. Не слід виділяти його як основний колір заклику до дії. - Forest Teal
#03624c— Насичений акцентний колір бренду для рамок листівок та декоративних штрихів; поєднується з відтінком Magenta Bloom для двоколірної обробки.
Нейтральні
- Bone White
#fffef7— Полотно сторінки, поверхні картону, текст на темних акцентах — теплий кремовий відтінок, який замінює чистий #ffffff та надає всій системі відчуття паперу та друкованого тексту. - Ink Black
#000000— Темний колір доповнює нейтральний колір тексту, піктограм та створює сильний контраст. Не слід використовувати його як основний колір для закликів до дії. - Graphite
#666666— Другий основний текст, підписи, метадані, допоміжний текст — відступають на другий план, щоб домінувати основний текст. - Ash
#aaaaaa— Кордони полів введення, колір неактивних посилань, третинні роздільники - м'який структурний сірий колір, який зникає, коли не потрібний. - Charcoal Scale
#4d4c4a— Середньо-нейтральний відтінок для меж списків, ледь помітне підвищення контрасту на темній доріжці — теплий сірий, а не синьо-сірий. - Powder Blue
#a5c8eb— М'який колірний акцент – фони для листівок, розмиті фони, приглушена заливка ілюстрацій; охолоджує тепле тло, не створюючи конкуренцій.
Друкарня
від 12 до 84px · 7 ступенів
- Switzer — заміна: Inter (300 · зображення 300, 400 · Система з одним шрифтом: товщина 300 для всіх елементів відображення та заголовків (12–84px), товщина 400 для основного тексту, метаданих та елементів керування інтерфейсу користувача. Найбільш кращий варіант - використання товщини 300 при розмірі 64-84px - у більшості систем використовується жирний шрифт 700-800; шрифт Switzer світлого відтінку зберігає тонкі лінії, створюючи відчуття, ніби шрифт нанесений аерографом на кремове полотно. Більш щільна міжлітерна відстань у міру збільшення розміру (-0.04em при 84px, -0.018em при 14px) зберігає внутрішні простори відкритими, не створюючи відчуття розрідженості.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 8px |
| Радіус кнопок | 1440px |
| Радіус карток | 0px |
| Тіні | ні — межі замість тіней |
| Між секціями | 64px |
ІІ збере ваш сайт у стилі Creative Giants і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- ElevenLabs — Фоторепортаж у теплих кремових тонах із ненав'язливими заголовками. Блокнот у стилі Баухаус — папір кольору яєчної шкаралупи, чорне чорнило, один фіолетовий та помаранчевий акцент для демонстрації продукту.
- monopo saigon — Рідке сяйво, що переливається, за редакційною тишею — монохромна редакційна галерея, що ширяє на розплавленому світлі.
- Awesomic — Редакційна цинкова сітка з помаранчевими розділовими знаками, що нагадують конфетті
- Monad — редакційний технічний журнал на теплому пергаменті
- Dub — матова панель управління Link на рисовому папері
- Seline Analytics — Тихий аналітичний стіл на теплий папір
- Notion — Теплий паперовий блокнот під полуденним сонцем
- Hyer Aviation — Сутінки в кабіні пілота над пергаментом. Бліде світане небо зустрічається з логотипом із засічками розміром з фюзеляж, а один теплий глиняний акцент порушує монохромну стриманість
- Anthropic — Науковий польовий журнал на теплому пергаменті — спокійні поверхні кольору слонової кістки, редакційні заголовки із засічками та єдиний глиняний акцент, що з'являється лише тоді, коли потрібно діяти
- Calendly — Темно-синє чорнило на холодному мармурі
- Augen Pro — Презентація Apple на білому тлі — клінічний, невагомий, електричний синій як єдиний акцент у монохромному просторі
- OFF+BRAND. — Переливається сфера на теплому пергаменті