Superhuman
„Auksinės valandos“ redakcijos kolegija
„Superhuman“ jungia redakcinę fotografiją ir programinės įrangos vartotojo sąsają – šilta, pergamentą primenanti drobė (niekada ne gryna balta) įrėmina kaštoninius prekės ženklo elementus ir ryškius violetinius akcentus. Antraštės, parašytos 460 formato šriftu, veikiau šnabžda, o ne šaukia, leisdamos viso puslapio kinematografinei fotografijai atlikti sunkų darbą, o permatomos produkto vartotojo sąsajos kortelės tarsi stiklas plūduriuoja virš vaizdų. Paletė didžiąją laiko dalį išlieka rami ir redakcinė: kreminiai paviršiai, anglies spalvos tekstas, subtilios šiltos pilkos spalvos rėmeliai ir dideli tarpai tarp elementų, o spalva skirta sąmoningam prekės ženklo skyrybai – vienas kaštoninis raginimas veikti, violetinės nuorodos, šviesiai alyvinis papildymo mygtukas. Sistema sąmoningai vengia stiprių šešėlių ir gradientų vartotojo sąsajos paviršiuose; gylis pasiekiamas sluoksniuotos fotografijos ir subtilaus fono suliejimo pavadinime, o ne per sudėjimo efektą.
Pagrindinis elementas yra viso pločio nuotrauka su centre išdėstyta antrašte (48–64 pikseliai / 460) ir vienu raginimu veikti, užpildytu vyno atvaizdu, o kairiajame ir dešiniajame kraštuose uždėtos permatomos produkto vartotojo sąsajos kortelės. Po pagrindiniu elementu yra baltos juostelės logotipo juostelė (6 langeliai eilutėje, maksimalus plotis ribotas), tada skirtukų sekcija su balto kartono paviršiais ant pergamento drobės. Tamsiai turkio spalvos juostelė nutraukia ritmą maždaug dviejuose trečdaliuose puslapio – viso pločio, du stulpeliai (vaizdas kairėje, tekstas dešinėje) – sukuriant vienintelį toninį kontrastą slenkant. Po jos seka atmosferinė gradiento juosta. Vertikalus atstumas tarp sekcijų yra 64–96 pikseliai. Didžiausias turinio plotis yra ~1200 pikselių centre, o pagrindinis elementas ir tamsi juostelė apima visą rodinio srities plotį. Navigaciją sudaro viena fiksuota antraštė su neryškiu fonu; nėra šoninės juostos, nėra mega meniu. Poraštė yra viso pločio bordo spalvos puslapis su kelių stulpelių nuorodų išdėstymu. Bendras ritmas: pagrindinis kadras → ramus baltas/kreminis turinys → tamsi juosta su pagrindiniu vaizdu → atmosferinis gradientas → bordo spalvos poraštė, kaitaliojamos šviesios ir tamsios juostos, sukuriančios redakcinį tempą.
Pagrindinis vizualinis elementas yra kinematografinė fotografija: viso pločio portretas atviro dangaus fone yra pagrindinis akcentas, o antra atmosferinė juostelė yra žemiau puslapyje. Vaizdas yra šiltų tonų, subtiliai prislopintas ir nufotografuotas profiliu, primenantis auksinę valandą, sukuriant labiau redakcinį nei korporacinį pojūtį. Tamsi juosta su permatomais geometriniais stačiakampiais ir ranka rašytais užrašais uždėta ant mintyse paskendusio vyro nuotraukos – tai paviršių koliažas, o ne vienas vaizdas. Vartotojo sąsaja pateikiama kaip plaukiojančios stiklinės kortelės, uždėtos tiesiai ant nuotraukos, o ne kaip atskiros ekrano kopijos. Nėra jokių standartinių iliustracijų, 3D vizualizacijų ir abstrakčių dekoratyvinių formų, išskyrus gradientinę atmosferinę juostelę. Piktogramos yra minimalistinės vienspalvės linijų piktogramos, maždaug 16–20 pikselių pločio, o vieno pločio reikšmė atitinka 460 taškų teksto storį.
Paletė
Prekės ženklas
- Midnight Wine
#421d24— Pagrindiniai veiksmų mygtukai, reklaminė juosta ir poraštė yra šiltos, beveik juodos bordo spalvos, labiau panašios į rašalą nei į raudoną, įtvirtinančios spalvų paletę, bet nepersistengiančios. - Royal Violet
#714cb6— Violetinė spalva naudojama nuorodoms, žymoms ir trumpoms frazėms paryškinti. Ji neturėtų būti naudojama kaip pagrindinė spalva raginimams veikti.
Neutralus
- Lilac Mist
#d4c7ff— Antrinis paviršiaus užpildas, šviesios piktogramos ir vaiduokliškų mygtukų fonai yra prislopintos violetinės spalvos, kuri užsimena apie prekės ženklo stilių, neatkreipdama į save per daug dėmesio. - Deep Lagoon
#0c4243— Tamsus juostelės fonas, naudojamas kaip pagrindinis pasakojimo elementas, yra vienintelis tamsus paviršius sistemoje, derinamas su uždėtu geometriniu raštu. - Warm Parchment
#f2f0eb— Puslapio darbinis paviršius yra dominuojantis elementas; šilta kreminė spalva pakeičia baltą kaip pagrindą, suteikianti visai sistemai redakcinį šiltumą. - Soft Mist
#e3e3e2— Plonos apvadėlės, kortelių kontūrai, skiriamosios linijos – šilta, šviesiai pilka spalva, kuri susilieja su pergamentu, bet aiškiai apibrėžia kraštus. - Ink Charcoal
#292827— Pagrindinis tekstas, antraštės, piktogramų kontūrai – šilta, beveik juoda spalva su pakankamai rudos spalvos, kad jaustųsi kaip rašalas ant popieriaus, niekada šalta #000 - Stone Gray
#666666— Antrinis tekstas, pagalbiniai tekstai, diskretiški aprašymai – viena vidutinio pilkumo spalva, naudojama saikingai, kad niekada nekonkuruotų su pagrindiniu tekstu.
Tipografija
nuo 12 iki 64 pikselių · 8 žingsniai
- Super Sans VF — pakeitimas: Inter (closest open equivalent for variable weight range) · kontūrai 460, 500, 540, 600, 700 · Vienas šriftas visoje sistemoje. Ašių kintamieji apima diapazoną nuo 460 (parašomas, šiek tiek apkirptas šriftas visam dideliam antraščių tekstui) iki 540 (paryškintas pagrindinis tekstas) ir 700 (mažos, paryškintos antraštės). Specialiai sukurtas VF leidžia 460 svorio antraštėms atrodyti labiau apgalvotoms, o ne atsitiktinėms – esant 48–64 pikselių dydžiui ir mažiems tarpams tarp raidžių, „šiek tiek apkirpto“ efektas suvokiamas kaip užtikrintas, o ne per plonas.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | tankus |
| Pagrindinis žingsnis | 8px |
| Mygtuko spindulys | 16px |
| Kortelės spindulys | 16px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 64-96px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Superhuman stiliumi ir ją užpildys
- Užpildykite produktais ir įrašais per nuorodą – Instagram, TikTok, Facebook.
- Perkelkite turinį iš senos svetainės – tiesiog nurodykite adresą.
- Modernus dizainas geriausiame variklyje: React ( Next.js) su serverio atvaizdavimu ir SEO optimizavimu iš karto.
- Visiškai automatizuotas SEO optimizavimas paieškos rezultatams ir neuroninių tinklų rekomendacijoms.
Panašūs stiliai
- AI for Business — Brutalistinis redakcinis salonas šiltais pilkais tonais
- Jeton — Redakcinis straipsnis apie finansines technologijas ant šilto marmuro
- Airtable — Jaukus seminaras, kurio skyriai pažymėti skirtingomis spalvomis
- Osmo — Kūrėjų muziejus ant pilko betono
- Linktr — Redakcijos plakatai sukrauti lyg saldainiai. Svetainė sukurta naudojant spalvotus blokus: ryškiai žalios antraštės išdėstytos kobalto mėlynumo sienų fone, o balti tabletės formos navigacijos elementai kybo virš bordo spalvų laukų.
- Outsource Consultants — Didelio formato architektūrinis lapas ant kaulinio popieriaus. Monografinė estetika, kur vienas ryškus indigo plotas pertraukia kitaip šiltą, tipografiškai maksimalistinį tinklelį.
- Streamtime — Lytėjimo lenta kūrybinei nuotaikai – dizainerio iškarpų albumo stalas
- Switch-Lit — Redakcijos tinklelis, atspausdintas rašalu ant kreminio popieriaus
- HubSpot — Šiltai kreminės spalvos popierius su vienu oranžiniu akcentu. „HubSpot“ primena ant storo popieriaus spausdintą dizainerių žurnalą – antraštės su serifais, šiltos kreminės spalvos puslapiai ir vienas ryškiai oranžinis akcentas, pabrėžiantis tik svarbiausius dalykus.
- Granola — Lauko užrašai ant šilto pergamento – granola skaitosi kaip nudėvėtas „Moleskine“ užrašų knygelė, atversta ant saulės apšviesto stalo: antraštės su serifais suteikia tvirtumo įspūdį, organiški žali akcentai, pavyzdžiui, augalinis rašalas, o plonos linijos kortelių paraštėse primena ranka rašytus užrašus.
- Secure — Pokalbis europietiškoje kavinėje švelnioje dienos šviesoje – tai šiltas ir stilingas vaizdo skambučio variantas, kai antraštės su serifais skaitosi kaip apgalvotas žurnalo straipsnis, o ne technologijų produkto puslapis.
- Mockups made easy — Redakcinio dizaino studija ant balto popieriaus