Superhuman
редакційна панель золотої години
Superhuman знаходиться на стику редакційної фотографії і інтерфейсу програмного забезпечення — тепле, немов пергамент, полотно (ніколи не чисто біле) обрамляє темно-бордові елементи бренду і яскраві фіолетові акценти. Заголовки, набрані шрифтом 460, швидше шепочуть, ніж кричать, дозволяючи кінематографічній фотографії на всю сторінку виконувати основну емоційну роботу, в той час як напівпрозорі картки інтерфейсу користувача парять, немов скло, над зображенням. Палітра більшу частину часу залишається спокійною і редакційною: кремові поверхні, вугільно-чорний текст, тонкі тепло-сірі кордони і велика відстань між елементами, причому колір зарезервований для навмисної розстановки розділових знаків бренду - один бордовий заклик до дії, фіолетові посилання, світло-сині. Система навмисно уникає сильних тіней і градієнтів на поверхнях інтерфейсу користувача; глибина досягається за рахунок багатошарової фотографії та легкого розмиття фону в заголовку, а не за рахунок стекування.
Головний елемент - фотографія на всю ширину сторінки з накладеним по центру заголовком (48-64px/460) і одним закликом до дії, заповненим зображенням вина, з напівпрозорими картками користувальницького інтерфейсу продукту, що плавають, накладеними поверх фотографії по лівому і правому краям. Під головним елементом: смуга логотипу у вигляді білої смуги (6 осередків в одному ряду, максимальна ширина обмежена), потім розділ вкладок із білою поверхнею карток на пергаментному полотні. Темно-бірюзова смуга порушує ритм приблизно на дві третини сторінки - на всю ширину сторінки, у дві колонки (зображення зліва, текст праворуч), створюючи єдиний тональний контраст при прокручуванні. Далі слідує градієнтна атмосферна смуга. Відстань між розділами складає 64-96px по вертикалі. Максимальна ширина контенту становить ~1200px по центру, головний елемент і темна смуга виходять на всю ширину області перегляду. Навігація є єдиним фіксованим заголовком з розмиттям фону; без бічної панелі, без мегаменю. Нижній колонтитул — бордовий на всю ширину сторінки з багатоколонковим компонуванням посилань. Загальний ритм: головний кадр → спокійний контент білого/кремового кольору → темна смуга з основним зображенням → атмосферний градієнт → нижній бордовий колонтитул, чергування світлих і темних смуг для створення редакційного темпу.
Основний візуальний елемент - кінематографічна фотографія: портрет на всю ширину сторінки на тлі відкритого неба служить центральним елементом, а нижче на сторінці розташована друга атмосферна смуга. Зображення виконане в теплих тонах, у стилі «золотої години», злегка приглушених, зняте у профіль, що створює відчуття швидше редакційного, ніж корпоративного стилю. Темна смуга з напівпрозорими геометричними прямокутниками та рукописними написами накладена поверх фотографії людини, зануреної у роздуми – це колаж із поверхонь, а не єдине зображення. Інтерфейс користувача представлений у вигляді плаваючих скляних карток, накладених безпосередньо на фотографію, а не у вигляді окремих скріншотів. Немає стокових ілюстрацій, немає 3D-рендерів, немає абстрактних декоративних форм, окрім градієнтної атмосферної смуги. Іконки - мінімалістичні монохромні лінійні іконки завтовшки ~16-20px, одинарної товщини, що відповідає товщині тексту 460.
Палітра
Бренд
- Midnight Wine
#421d24— Основні кнопки дій, банер оголошення, нижній колонтитул — теплий, майже чорний бордовий колір, який сприймається швидше як чорнило, ніж червоний, закріплюючи палітру кольорів, але не кричачи. - Royal Violet
#714cb6— Фіолетовий колір використовується для виділення посилань, тегів та коротких фраз. Не слід виділяти його як основний колір заклику до дії.
Нейтральні
- Lilac Mist
#d4c7ff— Вторинна заливка поверхонь, світлі значки, тло кнопок-привидів — приглушений фіолетовий колір, який натякає на фірмовий стиль, не привертаючи до себе зайвої уваги. - Deep Lagoon
#0c4243— Темний фон для смуги, що використовується як основний елемент оповідання - єдина темна поверхня в системі, у поєднанні з накладеним геометричним малюнком. - Warm Parchment
#f2f0eb— Робоча поверхня сторінки - домінуючий елемент; теплий кремовий колір замінює білий як основу, надаючи всій системі редакторську теплоту. - Soft Mist
#e3e3e2— Тонкі межі, контури карток, розділові лінії – теплий світло-сірий колір, що зливається з пергаментом, але чітко позначає краї. - Ink Charcoal
#292827— Основний текст, заголовки, контури іконок — теплий, майже чорний колір із достатньою кількістю коричневого, щоб відчуватися як чорнило на папері, ніколи не холодне #000 - Stone Gray
#666666— Другий основний текст, допоміжні тексти, непомітні описи — єдиний середньо-сірий колір, який використовується економно, щоб ніколи не конкурувати з основним текстом.
Друкарня
від 12 до 64px · 8 ступенів
- Super Sans VF — заміна: Inter (closest open equivalent for variable weight range) · зображення 460, 500, 540, 600, 700 · Єдиний шрифт у всій системі. Змінні осі охоплюють діапазон від 460 (фірмовий, злегка обрізаний шрифт для великого заголовного тексту) до 540 (виділення основного тексту) і 700 (невеликі жирні підписи). Спеціально розроблений VF робить заголовки товщиною 460 продуманішими, ніж випадковими - при товщині 48-64px з щільною міжлітерною відстанню, ефект «легкого обрізання» сприймається як впевненість, а не як тонкість.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 8px |
| Радіус кнопок | 16px |
| Радіус карток | 16px |
| Тіні | ні — межі замість тіней |
| Між секціями | 64-96px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Superhuman і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- AI for Business — Бруталістський редакційний виставковий зал у теплих сірих тонах
- Jeton — Редакційна стаття про фінтех на теплому мармурі
- Airtable — Затишний семінар із розділами, позначеними різними кольорами
- Osmo — Музей розробників на сірому бетоні
- Linktr — Редакційні плакати складені чаркою, наче цукерки. Сайт, оформлений у кольорових блоках, де заголовки яскраво-зеленого кольору розташовані на кобальтово-синіх стінах, а білі навігаційні елементи у формі пігулок ширяють над бордовими полями.
- Outsource Consultants — Архітектурний аркуш великого формату паперу на кістяному папері. Монографічна естетика, де одна яскрава ділянка індигового кольору перериває в іншому теплу, типографічно максималістську сітку
- Streamtime — Тактильна креативна дошка настрою – дизайнерський стіл для скрапбукінгу.
- Switch-Lit — Редакційна сітка, надрукована чорнилом, на кремовому папері
- HubSpot — Теплий кремовий колір паперу з одним помаранчевим акцентом. HubSpot нагадує дизайнерський журнал, надрукований на щільному папері — заголовки із засічками, теплі кремові сторінки та один вогняно-жовтогарячий акцент, що висвітлює лише найважливіші моменти
- Granola — Польові нотатки на теплому пергаменті — Granola читається як потертий блокнот Moleskine, відкритий на залитому сонцем столі: заголовки із засічками, що надають виробу солідність, органічні зелені акценти, немов чорнило рослинного походження, і тонкі лінії на полях карток, що нагадують рукопис.
- Secure — Розмова в європейському кафе при м'якому денному світлі – теплий, стильний погляд на відеодзвінки, де заголовки із засічками читаються як вдумлива журнальна стаття, а не сторінка технологічного продукту
- Mockups made easy — Студія редакційного дизайну на білому папері