Notion
Egy meleg papírfüzet a déli napsütésben
A Notion kezelőfelülete egy közkedvelt papírfüzetre hasonlít fényes nappal: egy meleg, krémszínű vászon (#f6f5f4), amely inkább tapintható, mint steril, a nagyvonalú sans-serif tipográfia szerkesztői súlyt kölcsönöz a termékszövegnek, a ritka írásjelek színe pedig – barackszínű „pirulák” emelik ki az igéket, egyetlen kék a fő akciót rögzíti, a hangsúlyárnyalatok (korall, borostyán, ég, éjfél) forgó skálája pedig matricákhoz hasonlóan színezi a kártyák hátterét. A kártyák vékony szegélyű és sarkú – árnyékok és króm nélküli – vásznon helyezkednek el, mint egy Moleskine-füzet vonalazott részei. Az animáció játékos és rugalmas, 200 ms-os átmenetekkel és rugalmas karakteranimációkkal, amelyek életet visznek a kezelőfelületbe anélkül, hogy dekoratívak lennének.
Középre igazítva a maximális szélesség körülbelül 1440 képpontra van korlátozva. A fő elem egy középre igazított halom: egy szimbólumsor → egy nagy, kétsoros címsor beágyazott színes pillérrel → egy alcím → egy sor két cselekvésre ösztönző gombbal → egy nagyméretű termék felhasználói felületének makettje. A fő elem alatt a részek fehér kártyákból álló rácsok és teljes színű díszítőpanelek között váltakoznak. A logófal egy középre igazított, egysoros, szürkeárnyalatos partnerlogókból álló rács. A funkcióblokkok kétoszlopos elrendezést használnak (szöveg balra, színes panel jobbra), a részek között balról jobbra váltva. A „Kérdezze asszisztenseit igény szerint” rész egy 2x2-es kártyarácsot használ, ahol a felső kártya a teljes szélességet foglalja el, az alsó sor pedig két egyenlő oszlopra van osztva. A részek közötti kötővonalak nagyok (~80 képpont), nyugodt függőleges ritmust hozva létre. A navigáció egy fix, 64 képpont magas felső sáv középre igazított navigációs elemekkel és jobbra igazított akciógombokkal.
Az illusztrációk kiemelkedőek, fotók nélkül. A vizuális nyelv lapos, illusztrált szimbólumokra (lekerekített élek 2px-es színes körökben), absztrakt díszítőelemekre (kézzel rajzolt cirkaljonok, csillámpor, nyilak, virágformák) és a termék felhasználói felületének makettjeire épül. A szimbólumok a főablakban hét avatar vízszintes soraként jelennek meg, és játékos írásjelekként vannak szétszórva az oldalon. A termék képernyőképei az egyetlen "valódi" vizuális elemek: a tényleges Notion felületet (Kanban táblák, dokumentum nézetek, AI ügynökpanelek) mutatják az elemek és a valódi adatok teljes készletével. A főablakban látható termék makett nagy, középre igazított, és egyetlen árnyék választja el a vászontól. Nincsenek életstílus fotók, nincsenek stock fotók, nincsenek absztrakt 3D renderelések.
Paletta
Márka
- Notion Blue
#0075de— A cselekvésre ösztönző (CTA) gombot kitöltő fő elem, az aktív navigációban hangsúlyos elem, a kitöltött akciógombok jelentik az egyetlen színsémát egy közel monokróm rendszerben, amely elég telített ahhoz, hogy kapcsolóként érzékelhető legyen.
Semleges
- Paper Warmth
#f6f5f4— Az oldalvászon, a főablak háttere és a szakasz háttere mind meleg, enyhén bézs színű, ami tapintható, analóg érzetet kölcsönöz a rendszernek. - Pure White
#ffffff— Kártyafelületek, kiemelt panelek, logós háttér, kontrasztos szöveg sötét kártyákon. - Ink Black
#000000— Fő szöveg, navigációs linkek, címsorok – különböző átlátszósági fokozatokkal (100%, 95%, 90%, 60%, 40%, 20%) használva hierarchiát építenek új színek hozzáadása nélkül. - Charcoal
#111111— Sötét szöveg opció azokhoz a felhasználói felület területekhez, ahol a tiszta fekete túl durván mutatna. - Stone
#757575— Másodlagos navigációs szöveg, némított segédszöveg, letiltott gombfeliratok - 60%-os tinta alfa - Graphite
#615d59— A fő szöveg meleg tónusú - barnásszürke, amely harmonizál a meleg háttérrel.
Tipográfia
12-től 96 képpontig · 10 lépésben
- NotionInter — csere: Inter · körvonalak 400, 500, 600, 700 · A fő sans-serif betűtípus egy finom árnyalatokkal tarkított geometrikus humanista betűtípus, amelyet 400-as méretben használnak a törzsszöveghez, 500-as méretben a navigációhoz/felhasználói felülethez, és 600-700-as méretben a címsorokhoz. A betűméret agresszív negatív betűközt használ nagyobb méretekben (-4,6 képpont 96 képpontnál, -2 képpont 72 képpontnál), ami a címsort kompaktabbnak és magabiztosabbnak, nem pedig légiesnek kelti.
- Lyon Text — csere: Source Serif Pro · körvonalak 400 · A szerkesztői talpas betűtípust, amelyet a fő szöveg egyes szakaszai és a szakaszbevezetők számára tartanak fenn, takarékosan (négy alkalommal) használják, hogy irodalmi súlyt adjanak a betűtípusnak, hasonlóan egy magazin-idézethez. Inkább szisztematikus hangsúlyként, mint párhuzamos hierarchiaként funkcionál.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | átlagos |
| Alapvető lépés | 8px |
| Gomb sugara | 8px |
| Kártya sugara | 12px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 80px |
| Oldal szélessége | 1440px |
A mesterséges intelligencia Notion 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
- ElevenLabs — Meleg krémszínű fotóesszé visszafogott címekkel. Bauhaus stílusú jegyzetfüzet – tojáshéjszínű papír, fekete tinta és egyetlen lila és narancssárga díszítőelem a termékek bemutatásához.
- Awesomic — Szerkesztői cinkháló narancssárga írásjelekkel, konfettire emlékeztetve
- Monad — szerkesztőségi műszaki folyóirat meleg pergamenen
- Dub — Link matt rizspapír kezelőpanelje
- Seline Analytics — Egy csendes elemző asztal meleg papíron
- Anthropic — Tudományos terepnapló meleg pergamenen – nyugodt elefántcsont felületek, csíkos szerkesztői címsorok és egyetlen agyagdísz, amely csak akkor jelenik meg, ha cselekvésre van szükség.
- Calendly — Sötétkék tinta hideg márványon
- Augen Pro — Az Apple fehér prezentációjában a klinikai, súlytalan, elektromos kék szín az egyetlen hangsúly a monokróm térben.
- Antimetal — Krémszínű papíron szerkesztett krónika – egy csendes reggel egy tudományos folyóiratban, ahol a visszafogottság magabiztosságot sugall, és a betűsarok végzi a nehéz munkát.
- Perk — Elektromos lime meleg pergamenpapíron
- Ditto — Egy napsütötte műhely, ahol vadvirágmintákat készítenek. Meleg krémszínű felületek, élénk sárga alapszín, mély sötétkék tinták, organikus színformák virágoznak a darab mögött.
- Officevibe — Egy meleg krémszínű papíron megjelenő vezércikk. Képzeljen el egy elgondolkodtató esszét a HR-menedzsmentről, amelyet termékként mutat be – egy modern kék kezelőfelületen suttogó, talpas, folyóírással írt betűtípus.