Notion

Šiltas popierinis užrašų knygutės formos laikraštis vidurdienio saulėje

„Notion“ sąsaja atrodo kaip mylimas popierinis užrašų knygelė vidury dienos: šilta, kreminė drobė (#f6f5f4), kuri atrodo labiau lytinti nei sterili, dosni sans serif tipografija suteikia redakcinio svorio produkto tekstui, o spalva naudojama kaip retas skyrybos ženklas – persikinės „tabletės“ paryškina veiksmažodžius, viena mėlyna spalva įtvirtina pagrindinį veiksmą, o besikeičiantis akcento atspalvių masyvas (koralų, gintaro, dangaus, vidurnakčio) nudažo kortelių fonus tarsi lipdukus. Kortelės išdėstytos ant drobės su plonais rėmeliais ir kampais – be šešėlių, be chromo – kaip linijuotos „Moleskine“ užrašų knygelės dalys. Animacija žaisminga ir elastinga, su sklandžiais perėjimais kas 200 ms ir elastingomis personažų animacijomis, kurios suteikia gyvybės sąsajai, nebūdamos dekoratyvios.

Centruojant, maksimalus plotis ribojamas iki maždaug 1440 pikselių. Pagrindinis elementas yra centre esantis krūvis: simbolių eilutė → didelė dviejų eilučių antraštė su įterptu spalvotu simboliu → paantraštė → eilutė su dviem raginimo veikti mygtukais → didelis produkto vartotojo sąsajos maketas. Po pagrindiniu elementu sekcijos kaitaliojasi tarp baltų kortelių tinklelių ir spalvotų akcento skydelių. Logotipo siena yra centre esantis vienos eilutės partnerių logotipų tinklelis pilkos spalvos atspalviais. Funkcijų blokuose naudojamas dviejų stulpelių išdėstymas (tekstas kairėje, spalvotas skydelis dešinėje), kaitaliojant sekcijų išdėstymą iš kairės į dešinę. Skiltyje „Klauskite savo padėjėjų pagal poreikį“ naudojamas 2x2 kortelių tinklelis, kuriame viršutinė kortelė užima visą plotį, o apatinė eilutė padalinta į du lygius stulpelius. Tarpeliai tarp sekcijų yra dideli (~80 pikselių), sukuriantys ramų vertikalų ritmą. Navigacija yra fiksuota 64 pikselių aukščio viršutinė juosta su centruotais naršymo elementais ir dešinėje lygiuotais veiksmų mygtukais.

Iliustracijos yra svarbiausios, be nuotraukų. Vizualinė kalba sukurta remiantis plokščiais, iliustruotais simboliais (suapvalintais kraštais 2 pikselių spalvotuose apskritimuose), abstrakčiais dekoratyviniais elementais (ranka pieštais vingiuotais raibuliais, blizgučiais, rodyklėmis, gėlių formomis) ir produkto vartotojo sąsajos maketais. Simboliai pagrindiniame lange rodomi kaip septynių avatarų horizontali eilutė ir yra išsklaidyti po puslapį kaip žaismingi skyrybos ženklai. Produkto ekrano kopijos yra vieninteliai „tikri“ vizualiniai elementai: jose rodoma tikroji „Notion“ sąsaja (Kanban lentos, dokumentų peržiūros, dirbtinio intelekto agentų skydeliai) su visu elementų rinkiniu ir tikrais duomenimis. Produkto maketas pagrindiniame lange yra didelis, centruotas ir meta vieną šešėlį, skiriantį jį nuo drobės. Nėra jokių gyvenimo būdo nuotraukų, jokių nuotraukų iš archyvo, jokių abstrakčių 3D vizualizacijų.

Grynas SaaS Minimalizmas Redakcijos

https://notion.so

Paletė

Prekės ženklas

Notion Blue #0075de — Pagrindinis elementas, užpildantis raginimo veikti (CTA) mygtuką, aktyvios navigacijos akcentą, užpildyti veiksmų mygtukai yra vienintelė spalvų schema beveik monochrominėje sistemoje, kuri yra pakankamai sodri, kad būtų suvokiama kaip jungiklis.

Neutralus

Paper Warmth #f6f5f4 — Puslapio drobė, pagrindinio lango fonas ir sekcijos fonas yra šiltų, šiek tiek smėlio spalvos, suteikiančios sistemai lytėjimo, analogiškumo pojūtį.
Pure White #ffffff — Kortelių paviršiai, iškilūs skydeliai, logotipo fonas, kontrastingas tekstas ant tamsių kortelių.
Ink Black #000000 — Pagrindinis tekstas, naršymo nuorodos, antraštės – naudojami su skirtingu skaidrumu (100 %, 95 %, 90 %, 60 %, 40 %, 20 %), siekiant sukurti hierarchiją nepridedant naujų spalvų.
Charcoal #111111 — Tamsaus teksto parinktis toms vartotojo sąsajos sritims, kuriose gryna juoda spalva atrodytų per daug atšiauri.
Stone #757575 — Antrinis naršymo tekstas, nutildytas pagalbinis tekstas, išjungtų mygtukų etiketės – 60 % rašalo alfa
Graphite #615d59 — Pagrindinis tekstas yra šilto – rusvai pilko – tono, kuris dera su šiltu fonu.

Tipografija

nuo 12 iki 96 pikselių · 10 žingsnių

NotionInter — pakeitimas: Inter · kontūrai 400, 500, 600, 700 · Pagrindinis šriftas be serifų yra geometrinis humanistas su subtiliais niuansais, naudojamas 400 dydžio tekstui, 500 dydžio navigacijai / vartotojo sąsajai ir 600–700 dydžio antraštėms. Didesniuose dydžiuose šrifto skalėje naudojami agresyvūs neigiami raidžių tarpai (-4,6 pikselio esant 96 pikselių, -2 pikseliai esant 72 pikselių), todėl antraštė atrodo kompaktiškesnė ir užtikrintesnė, o ne erdvi.
Lyon Text — pakeitimas: Source Serif Pro · kontūrai 400 · Redakcinis serifinis šriftas, skirtas atskiroms pagrindinio teksto dalims ir skyrių įvadams, naudojamas retai (keturis kartus), kad šriftui būtų suteiktas literatūrinis svoris, panašiai kaip citatai žurnalo makete. Jis veikia kaip sisteminis akcentas, o ne lygiagreti hierarchija.

Intervalai ir forma

Tikslas	Reikšmė
Tankis	vidutinis
Pagrindinis žingsnis	8px
Mygtuko spindulys	8px
Kortelės spindulys	12px
Šešėliai	ne – rėmeliai vietoj šešėlių
Tarp sekcijų	80px
Puslapio plotis	1440px

Dirbtinis intelektas sukurs jūsų svetainę Notion 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.

Sukurkite svetainę tokiu stiliumi

Panašūs stiliai

ElevenLabs — Šiltų kreminių atspalvių fotoreportažas su subtiliomis antraštėmis. Bauhaus stiliaus užrašų knygelė – kiaušinio lukšto spalvos popierius, juodas rašalas ir vienas violetinis bei oranžinis akcentas gaminiui eksponuoti.
Awesomic — Redakcijos cinko tinklelis su oranžiniais skyrybos ženklais, primenančiais konfeti
Monad — redakcinis techninis žurnalas ant šilto pergamento
Dub — „Link“ matinio ryžinio popieriaus valdymo skydelis
Seline Analytics — Ramus analitinis stalas ant šilto popieriaus
Anthropic — Mokslinis lauko žurnalas ant šilto pergamento – ramūs dramblio kaulo paviršiai, serifuotos redakcinės antraštės ir vienas molinis akcentas, atsirandantis tik tada, kai reikia imtis veiksmų.
Calendly — Tamsiai mėlynas rašalas ant šalto marmuro
Augen Pro — „Apple“ baltoje prezentacijoje monochrominėje erdvėje vienintelis akcentas – klinikinė, nesvari, elektrinė mėlyna spalva.
Antimetal — Redakcijos kronika ant kreminio popieriaus – ramus rytas moksliniame žurnale, kur santūrumas perteikia pasitikėjimą, o serifai atlieka sunkų darbą.
Perk — Elektrinė citrina ant šilto pergamentinio popieriaus
Ditto — Saulės apšviestos dirbtuvės, kuriose kuriami laukinių gėlių pavyzdžiai. Šilti kreminiai paviršiai, ryški geltona pagrindinė spalva, tamsiai mėlyni dažai, organinės spalvų formos, žydinčios už kūrinio.
Officevibe — Redakcinis žurnalas ant šiltos kreminės spalvos popieriaus. Įsivaizduokite apgalvotą esė apie žmogiškųjų išteklių valdymą, pateiktą kaip produktą – kursyvu su serifiniu šriftu, šnabždančiu per modernią mėlyną sąsają.