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 — Студыя рэдакцыйнага дызайну на белай паперы