Superhuman
aranyóra szerkesztőbizottság
A Superhuman a szerkesztői fotózás és a szoftveres felhasználói felület metszéspontjában helyezkedik el – egy meleg, pergamenszerű vászon (sosem tiszta fehér) keretezi a bordó márkaelemeket és az élénk lila díszítéseket. A 460-as betűméretben szedett címsorok inkább suttognak, mint kiabálnak, lehetővé téve, hogy a teljes oldalas filmes fotó végezze el a nehéz munkát, míg az áttetsző termék felhasználói felületi kártyák üvegként lebegnek a képek felett. A paletta az idő nagy részében nyugodt és szerkesztői marad: krémszínű felületek, szénszínű szöveg, finom melegszürke szegélyek és nagylelkű térközök az elemek között, a színeket a szándékos márkajelzéseknek tartjuk fenn – egyetlen bordó cselekvésre ösztönzés, lila linkek, egy világos lila kiegészítő gomb. A rendszer szándékosan kerüli az erős árnyékokat és színátmeneteket a felhasználói felület felületein; A mélységet réteges fotózással és a cím finom háttérelmosásával érik el, nem pedig halmozási effektussal.
A fő elem egy teljes szélességű fénykép középre igazított címsorral (48-64px/460) és egyetlen cselekvésre ösztönzéssel, amelyet egy bor képe töltött meg, lebegő, áttetsző termék felhasználói felületi kártyákkal a bal és jobb széleken. A fő elem alatt egy fehér csíkos logócsík található (soronként 6 cella, maximális szélesség korlátozott), majd egy fülrész fehér kártyafelületekkel pergamenvásznon. Egy sötét türkiz csík töri meg a ritmust az oldal körülbelül kétharmadánál – teljes szélességű, két oszlop (kép balra, szöveg jobbra) –, ami az egyetlen tónuskontrasztot adja görgetés közben. Ezt egy átmenetes, hangulatos csík követi. A szakaszok közötti függőleges térköz 64-96px. A maximális tartalomszélesség ~1200px középre igazítva, a fő elem és a sötét csík a nézetablak teljes szélességét kitölti. A navigáció egyetlen fix fejléc elmosódott háttérrel; nincs oldalsáv, nincs mega menü. A lábléc egy teljes szélességű bordó oldal, több oszlopos linkelrendezéssel. Az általános ritmus: fő kép → nyugodt fehér/krémszínű tartalom → sötét csík a fő képpel → hangulatos színátmenet → bordó lábléc, váltakozó világos és sötét csíkok a szerkesztői tempó megteremtése érdekében.
Az elsődleges vizuális elem a filmes fényképezés: egy teljes szélességű portré a nyílt égbolt előtt a fókuszpont, egy második, hangulatos csíkkal az oldalon lejjebb. A kép meleg tónusú, finoman visszafogott, és profilból készült, egy aranyórára emlékeztet, inkább szerkesztői, mint vállalati hangulatot teremtve. Egy áttetsző geometrikus téglalapokkal és kézzel írott feliratokkal ellátott sötét csík egy gondolataiba merült férfi fényképére vetül – inkább felületek kollázsa, mint egyetlen kép. A felhasználói felület lebegő üvegkártyákként jelenik meg, amelyek közvetlenül a fényképre vannak ráhelyezve, nem pedig különálló képernyőképekként. Nincsenek stock illusztrációk, nincsenek 3D renderelések és absztrakt dekoratív formák, kivéve a színátmenetes hangulatos csíkot. Az ikonok minimalista monokróm vonalikonok, ~16-20 képpont szélesek, egyetlen szélességgel, amely megfelel a 460 pontos szövegvastagságnak.
Paletta
Márka
- Midnight Wine
#421d24— A fő akciógombok, a hirdetési banner és a lábléc meleg, szinte fekete bordó színű, amely inkább tintára, mint vörösre emlékeztet, rögzítve a színpalettát anélkül, hogy túlzó lenne. - Royal Violet
#714cb6— A lilát linkek, címkék és rövid kifejezések kiemelésére használjuk. Nem szabad elsődleges színként használni a cselekvésre ösztönzésekhez.
Semleges
- Lilac Mist
#d4c7ff— A másodlagos felületkitöltés, a világos ikonok és a szellemgombok háttere mind visszafogott lila színű, amely a márka stílusára utal anélkül, hogy túlzott figyelmet vonzana magára. - Deep Lagoon
#0c4243— A fő narratív elemként használt szalag sötét háttere az egyetlen sötét felület a rendszerben, amelyet egy ráhelyezett geometrikus mintázattal kombináltak. - Warm Parchment
#f2f0eb— Az oldal munkafelülete a domináns elem; a fehéret meleg krémszín váltja fel alapként, szerkesztői melegséget kölcsönözve az egész rendszernek. - Soft Mist
#e3e3e2— Vékony szegélyek, kártyakörvonalak, elválasztó vonalak – meleg, világosszürke, amely beleolvad a pergamenbe, de tisztán kiveszi a széleket. - Ink Charcoal
#292827— A szöveg törzse, címsorok, ikonok körvonalai – meleg, majdnem fekete színű, annyi barna színnel, hogy tintanyomnak tűnjön a papíron, soha nem hideg #000 - Stone Gray
#666666— Másodlagos törzsszöveg, kiegészítő szövegek, diszkrét leírások – egyetlen középszürke szín, takarékosan használva, hogy soha ne versenyezzen a fő szöveggel.
Tipográfia
12-től 64 képpontig · 8 lépésben
- Super Sans VF — csere: Inter (closest open equivalent for variable weight range) · körvonalak 460, 500, 540, 600, 700 · Egyetlen betűtípus a teljes rendszerben. A tengelyváltozók 460-tól (egy jellegzetes, enyhén levágott betűtípus az összes nagyméretű címsorszöveghez) 540-ig (kiemelt törzsszöveg) és 700-ig (kis, félkövér feliratok) terjednek ki. A speciálisan tervezett vizuális effektusnak köszönhetően a 460-as vastagságú címsorok inkább átgondoltnak, mint véletlenszerűnek tűnnek – 48-64 képpontos méretben és szoros betűközökkel a „enyhén levágott” hatás inkább magabiztosnak, mint vékonynak érződik.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | sűrű |
| Alapvető lépés | 8px |
| Gomb sugara | 16px |
| Kártya sugara | 16px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 64-96px |
| Oldal szélessége | 1200px |
A mesterséges intelligencia Superhuman stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- AI for Business — Brutalista szerkesztői bemutatóterem meleg szürke árnyalatokban
- Jeton — Vezércikk a fintechről a meleg márványon
- Airtable — Egy hangulatos szeminárium, különböző színekkel jelölt fejezetekkel
- Osmo — A Fejlesztők Múzeuma a Szürke Betonon
- Linktr — A szerkesztőségi plakátok úgy vannak egymásra halmozva, mint a cukorkák. A weboldal színes blokkokban készült, élénkzöld címsorokkal, kobaltkék falakkal és fehér, pirula alakú navigációs elemekkel, amelyek a bordó mezők felett lebegnek.
- Outsource Consultants — Nagyméretű építészeti lap csontpapíron. Monográfiai esztétika, ahol egyetlen élénk indigófolt szakítja meg az egyébként meleg, tipográfiailag maximalista rácsot.
- Streamtime — Tapintható kreatív hangulattábla - Designer Scrapbooking asztal
- Switch-Lit — Krémszínű papírra tintával nyomtatott szerkesztői rács
- HubSpot — Meleg krémszínű papír egyetlen narancssárga díszítéssel. A HubSpot egy vastag papírra nyomtatott dizájnermagazinra hasonlít – talpas címsorok, meleg krémszínű oldalak és egyetlen tüzes narancssárga díszítés, amely csak a legfontosabb pontokat emeli ki.
- Granola — Meleg pergamenre nyomtatott terepi jegyzetek – A granola úgy olvasható, mint egy napsütötte asztalon kinyitott, kopott Moleskine jegyzetfüzet: a talpas címsorok szilárdságérzetet kölcsönöznek, a növényi tintához hasonló organikus zöld díszítések, a kártyák szélein pedig kézzel írott jegyzetekre emlékeztető finom vonalak.
- Secure — Egy európai kávézóban lágy nappal folytatott beszélgetés a videohívások meleg, stílusos felfogása, ahol a talpas címsorok inkább egy átgondolt magazincikk, mint egy tech termékoldal olvasására hasonlítanak.
- Mockups made easy — Szerkesztői tervezőstúdió fehér papíron