Notion
Silta papīra piezīmju grāmatiņa pusdienas saulē
Notion saskarne izskatās kā iemīļota papīra piezīmju grāmatiņa gaišā dienas laikā: silts, krēmīgs audekls (#f6f5f4), kas šķiet taustāms, nevis sterils, dāsna sans-serif tipogrāfija piešķir redakcionālu svaru produkta tekstam, un krāsa, kas izmantota kā retas pieturzīmes — persiku krāsas "tabletes" izceļ darbības vārdus, viena zila krāsa iezīmē galveno darbību, un rotējošs akcentu toņu klāsts (koraļļu, dzintara, debesu, pusnakts) iekrāso karšu fonus kā uzlīmes. Kartītes ir izvietotas uz audekla ar plānām apmalēm un stūriem — bez ēnām, bez hroma — kā Moleskine piezīmju grāmatiņas līnijotās daļas. Animācija ir rotaļīga un atsperīga, ar vienmērīgām pārejām 200 ms ātrumā un atsperīgām varoņu animācijām, kas piešķir dzīvību saskarnei, nebūdamas dekoratīvas.
Centrējot, maksimālais platums ir ierobežots līdz aptuveni 1440 pikseļiem. Galvenais elements ir centrēts steks: simbolu rinda → liels divu rindu virsraksts ar iestrādātu krāsainu tableti → apakšvirsraksts → rinda ar divām aicinājuma uz darbību pogām → liels produkta lietotāja interfeisa makets. Zem galvenā elementa sadaļas mijas starp baltu kartīšu režģiem un pilnkrāsu akcentu paneļiem. Logotipa siena ir centrēts vienas rindas režģis ar partneru logotipiem pelēktoņos. Funkciju bloki izmanto divu kolonnu izkārtojumu (teksts kreisajā pusē, krāsains panelis labajā pusē), pārmaiņus starp sadaļām no kreisās uz labo pusi. Sadaļā "Jautājiet saviem asistentiem pēc pieprasījuma" tiek izmantots 2x2 kartīšu režģis, kur augšējā kartīte aizņem visu platumu, bet apakšējā rinda ir sadalīta divās vienādās kolonnās. Iegremdēšanas līnijas starp sadaļām ir dāsnas (~80 pikseļi), radot mierīgu vertikālu ritmu. Navigācija ir fiksēta 64 pikseļu augsta augšējā josla ar centrētiem navigācijas elementiem un pa labi izlīdzinātām darbību pogām.
Ilustrācijas ir vissvarīgākās, bez fotoattēliem. Vizuālā valoda ir veidota, izmantojot plakanus, ilustrētus simbolus (noapaļotas malas 2 pikseļu krāsainos apļos), abstraktus dekoratīvus elementus (ar roku zīmētas ķegļu līnijas, mirdzumi, bultiņas, ziedu formas) un produkta lietotāja saskarnes maketus. Simboli galvenajā logā parādās kā horizontāla septiņu avatāru rinda un ir izkaisīti pa lapu kā rotaļīgas pieturzīmes. Produkta ekrānuzņēmumi ir vienīgie "īstie" vizuālie elementi: tie parāda faktisko Notion saskarni (Kanban dēļi, dokumentu skati, AI aģentu paneļi) ar pilnu elementu un reālu datu kopu. Produkta makets galvenajā logā ir liels, centrēts un met vienu ēnu, kas to atdala no audekla. Nav dzīvesstila fotoattēlu, nav attēlu krājuma, nav abstraktu 3D renderējumu.
Palete
Zīmols
- Notion Blue
#0075de— Galvenais elements, kas aizpilda aicinājuma uz darbību (CTA) pogu, kas ir akcents aktīvajā navigācijā, aizpildītās darbību pogas ir vienīgā krāsu shēma gandrīz vienkrāsainajā sistēmā, kas ir pietiekami piesātināta, lai to uztvertu kā slēdzi.
Neitrāls
- Paper Warmth
#f6f5f4— Lapas audekls, galvenā loga fons un sadaļas fons ir siltās, viegli bēšās krāsās, kas sistēmai piešķir taustāmu, analogu sajūtu. - Pure White
#ffffff— Kartīšu virsmas, reljefi paneļi, logotipa fons, kontrastējošs teksts uz tumšām kartēm. - Ink Black
#000000— Galvenais teksts, navigācijas saites, virsraksti — tiek izmantoti ar dažādu caurspīdīgumu (100%, 95%, 90%, 60%, 40%, 20%), lai izveidotu hierarhiju, nepievienojot jaunas krāsas. - Charcoal
#111111— Tumša teksta opcija tām lietotāja interfeisa zonām, kur tīra melna krāsa izskatītos pārāk skarba. - Stone
#757575— Sekundārās navigācijas teksts, apklusināts palīgteksts, atspējotu pogu nosaukumi — 60 % tintes alfabēts - Graphite
#615d59— Galvenajam tekstam ir silts tonis – brūngani pelēks, kas harmonizējas ar silto fonu.
Tipogrāfija
no 12 līdz 96 pikseļiem · 10 soļi
- NotionInter — nomaiņa: Inter · kontūras 400, 500, 600, 700 · Galvenais sans-serif fonts ir ģeometrisks humānists ar smalkām niansēm, kas tiek izmantots 400 izmēros pamattekstam, 500 izmēros navigācijai/lietotāja saskarnei un 600–700 izmēros virsrakstiem. Fonta skalā lielākos izmēros tiek izmantota agresīva negatīva burtu atstarpe (-4,6 pikseļi pie 96 pikseļiem, -2 pikseļi pie 72 pikseļiem), kas padara virsrakstu kompaktāku un pārliecinātāku, nevis gaisīgāku.
- Lyon Text — nomaiņa: Source Serif Pro · kontūras 400 · Redakcijas serif fonts, kas rezervēts atsevišķām pamatteksta sadaļām un sadaļu ievadiem, tiek izmantots taupīgi (četras reizes), lai piešķirtu burtveidolam literāru svaru, līdzīgi kā citātam žurnāla maketā. Tas darbojas kā sistēmisks akcents, nevis paralēla hierarhija.
Intervāli un forma
| Mērķis | Nozīme |
|---|---|
| Blīvums | vidēji |
| Pamata solis | 8px |
| Pogas rādiuss | 8px |
| Kartes rādiuss | 12px |
| Ēnas | nē — robežas ēnu vietā |
| Starp sekcijām | 80px |
| Lapas platums | 1440px |
Mākslīgais intelekts izveidos jūsu vietni Notion stilā un aizpildīs to
- Aizpildiet ar produktiem un ierakstiem, izmantojot saiti — Instagram, TikTok, Facebook.
- Pārsūtiet saturu no savas vecās vietnes — vienkārši norādiet adresi.
- Moderns dizains uz labākā dzinēja: React ( Next.js) ar servera renderēšanu un SEO optimizāciju uzreiz pēc instalēšanas.
- Pilnībā automatizēta SEO optimizācija meklēšanas rezultātiem un neironu tīkla ieteikumiem.
Līdzīgi stili
- ElevenLabs — Foto eseja siltos krēmkrāsas toņos ar neuzkrītošiem virsrakstiem. Bauhaus stila piezīmju grāmatiņa — olu čaumalas krāsas papīrs, melna tinte un viens violets un oranžs akcents produktu izvietošanai.
- Awesomic — Redakcijas cinka siets ar oranžām pieturzīmēm, kas atgādina konfeti
- Monad — redakcijas tehniskais žurnāls uz silta pergamenta
- Dub — Link matēta rīspapīra vadības panelis
- Seline Analytics — Kluss analītisks galds uz silta papīra
- Anthropic — Zinātnisks lauka žurnāls uz silta pergamenta — mierīgas ziloņkaula virsmas, serifi raksta virsraksti un viens māla akcents, kas parādās tikai tad, kad nepieciešama rīcība.
- Calendly — Tumši zila tinte uz auksta marmora
- Augen Pro — Apple baltajā prezentācijā vienkrāsainā telpā kā vienīgais akcents ir klīnisks, viegls, elektriski zils tonis.
- Antimetal — Redakcijas hronika uz krēmkrāsas papīra — kluss rīts zinātniskā žurnālā, kur atturība pauž pārliecību un serifi veic smago darbu.
- Perk — Elektriskais laims uz silta pergamenta papīra
- Ditto — Saules apspīdēta darbnīca, kurā tiek radīti savvaļas ziedu paraugi. Silti krēmkrāsas virsmas, spilgti dzeltena pamatkrāsa, dziļi tumši zilas tintes, organiskas krāsu formas, kas plaukst aiz darba.
- Officevibe — Redakcijas žurnāls uz silta krēmkrāsas papīra. Iedomājieties pārdomātu eseju par personāla vadību, kas pasniegta kā produkts — kursīvs ar serif fontu, kas čukst cauri modernai zilai saskarnei.