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 — Бележки от полето върху топъл пергамент – Гранола се чете като износен тефтер Moleskine, отворен на осветено от слънцето бюро: заглавията със серифни букви придават усещане за солидност, органични зелени акценти като растително мастило и фини линии в полетата на картите, които наподобяват ръкописни бележки.
- Secure — Разговор в европейско кафене на мека дневна светлина е топъл и стилен поглед върху видео разговорите, където заглавията със серифни букви се четат като замислена статия в списание, а не като страница на технологичен продукт.
- Mockups made easy — Редакционно дизайнерско студио на бяла хартия