Notion
Soe paberist märkmik keskpäevapäikeses
Notioni liides näeb välja nagu armastatud pabermärkmik keset päist päeva: soe, kreemjas lõuend (#f6f5f4), mis tundub pigem kombatav kui steriilne, helde sans-serif tüpograafia annab tootetekstile toimetusliku kaalu ning värvid, mida kasutatakse hõredate kirjavahemärkidena – virsikukarva „pillid” tõstavad esile tegusõnu, üks sinine ankurdab põhitegevust ja vahelduv aktsentvärvide massiiv (korall, merevaigukollane, taevas, südaöö) värvib kaartide taustu nagu kleebiseid. Kaardid on paigutatud lõuendile õhukeste ääriste ja nurkadega – ilma varjudeta, ilma kroomita – nagu Moleskine'i märkmiku joonitud osad. Animatsioon on mänguline ja kevadine, sujuvate üleminekutega 200 ms juures ja kevadiste tegelasanimatsioonidega, mis toovad liidese ellu ilma dekoratiivsed olemata.
Tsentreeritult on maksimaalne laius piiratud umbes 1440 piksliga. Põhielement on tsentreeritud virn: sümbolite rida → suur kaherealine pealkiri manustatud värvilise tabletiga → alapealkiri → rida kahe tegevusele kutsuva nupuga → suur toote kasutajaliidese makett. Põhielemendi all vahelduvad sektsioonid valgete kaartide ruudustiku ja täisvärviliste aktsentpaneelide vahel. Logo sein on tsentreeritud üherealine halltoonides partnerite logode ruudustik. Funktsiooniplokid kasutavad kaheveerulist paigutust (tekst vasakul, värviline paneel paremal), vaheldudes sektsioonide vahel vasakult paremale. Jaotises „Küsi oma assistentidelt nõudmisel” kasutatakse 2x2 kaardiruudustikku, kus ülemine kaart võtab enda alla kogu laiuse ja alumine rida on jagatud kaheks võrdseks veeruks. Sektsioonidevahelised äärised on helded (~80 pikslit), luues rahuliku vertikaalse rütmi. Navigeerimine on fikseeritud 64 piksli kõrgune ülemine riba tsentreeritud navigeerimiselementide ja paremale joondatud toimingunuppudega.
Illustratsioonid on üliolulised, fotosid pole. Visuaalne keel on üles ehitatud lamedatele, illustreeritud sümbolitele (ümarad servad 2px värvilistes ringides), abstraktsetele dekoratiivsetele elementidele (käsitsi joonistatud kriipsud, sädelus, nooled, lillekujud) ja toote kasutajaliidese makettidele. Sümbolid kuvatakse peaaknas seitsme avatari horisontaalse reana ja on hajutatud üle lehe mänguliste kirjavahemärkidena. Toote ekraanipildid on ainsad "päris" visuaalsed elemendid: need näitavad tegelikku Notioni liidest (Kanbani tahvlid, dokumendivaated, tehisintellekti agendi paneelid) koos täieliku elementide komplekti ja päris andmetega. Toote makett peaaknas on suur, tsentreeritud ja heidab lõuendist eraldades ühe varju. Puuduvad elustiilifotod, pildipangad ega abstraktsed 3D-renderdused.
Palett
Bränd
- Notion Blue
#0075de— Aktiivses navigeerimises aktsendiks olev tegevusele kutsuva nupu (CTA) peamine element, täidetud tegevusenupud, on peaaegu monokroomse süsteemi ainus värviskeem, mis on piisavalt küllastunud, et seda lülitina tajuda.
Neutraalne
- Paper Warmth
#f6f5f4— Lehekülje lõuend, peaakna taust ja sektsiooni taust on kõik soojades, kergelt beežides toonides, mis annavad süsteemile kombatava ja analoogse tunde. - Pure White
#ffffff— Kaardipinnad, reljeefsed paneelid, logo taust, kontrastne tekst tumedatel kaartidel. - Ink Black
#000000— Põhitekst, navigeerimislingid, pealkirjad – kasutatakse erineva läbipaistvusega (100%, 95%, 90%, 60%, 40%, 20%) hierarhia loomiseks ilma uusi värve lisamata. - Charcoal
#111111— Tumeda teksti valik nendele kasutajaliidese aladele, kus puhas must näeks liiga karm välja. - Stone
#757575— Teisese navigeerimise tekst, vaigistatud abitekst, keelatud nuppude sildid – 60% tindi alfa - Graphite
#615d59— Põhitekstil on soe toon – pruunikashall, mis harmoneerub sooja taustaga.
Tüpograafia
12-st 96 pikslini · 10 sammu
- NotionInter — asendamine: Inter · kontuurid 400, 500, 600, 700 · Peamine sans-serif font on geomeetriline humanistlik peenete nüanssidega, mida kasutatakse põhiteksti puhul suurustes 400, navigeerimise/kasutajaliidese puhul suurustes 500 ja pealkirjade puhul suurustes 600–700. Fondiskaala kasutab suuremate suuruste puhul agressiivset negatiivset tähevahe (-4,6 pikslit 96 piksli puhul, -2 pikslit 72 piksli puhul), mis muudab pealkirja kompaktsemaks ja enesekindlamaks, mitte õhuliseks.
- Lyon Text — asendamine: Source Serif Pro · kontuurid 400 · Toimetuse serif-fonti, mis on reserveeritud põhiteksti üksikutele osadele ja osade sissejuhatustele, kasutatakse säästlikult (neli korda), et anda kirjatüübile kirjanduslik kaal, sarnaselt ajakirja küljenduse tsitaadile. See toimib pigem süsteemse aktsendi kui paralleelse hierarhiana.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | keskmine |
| Põhisamm | 8px |
| Nupu raadius | 8px |
| Kaardi raadius | 12px |
| Varjud | ei - varjude asemel äärised |
| Sektsioonide vahel | 80px |
| Lehe laius | 1440px |
Tehisintellekt loob teie veebisaidi Notion stiilis ja täidab selle
- Täida toodete ja postitustega lingi kaudu - Instagram, TikTok, Facebook.
- Kanna sisu oma vanalt saidilt üle – täpsusta lihtsalt aadress.
- Moodne disain parimal mootoril: React ( Next.js) koos serveri renderdamise ja SEO optimeerimisega koheselt.
- Täisautomaatne SEO optimeerimine otsingutulemuste ja närvivõrgu soovituste jaoks.
Sarnased stiilid
- Mollie — Kašmiirist lett, tume pearaamat. Jäta musta teksti ümber piisavalt tühja ruumi kujunduse jaoks ning seejärel rõhuta tootega seotud punkte soojade kreemide, espressopruunide ja kombatavate fotodega tegelikest makseviisidest.
- Kagi — Eraldi lugemissaal. Loo julge grafiitteksti ümber avatud valge ruum, kasutades rahu lõhustamiseks õrnu lillasid aktsente ja sooje pastelseid pindu.
- Milanote — Milanote on pühendunud loominguline stuudio. Looge galeriistiilis lehti, kasutades ujuvaid visuaalseid tahvleid: tumeda raamiga seinu, valget väljapanekupinda ja ekraanipilte, mis näevad välja nagu päris objektid pehme sügavusega.
- Co2 — Kliimaatlas talvises valguses. Looge lehti nagu õhust dokumentmaastik, kus serif-pealkirjad, kategooriatesse kodeeritud andmed ja jäised pildid toovad esile laiad valged veerised.
- GitButler — Türkiissinine teksti lõpus. Suure kontrastsusega serif-pealkirjade, peene tehnilise ruudustiku, soojade grafiitpindade ja diskreetse türkiissinise aktsendi kombinatsioon.
- ElevenLabs — Soojades kreemikates toonides fotoessee peenete pealkirjadega. Bauhausi stiilis märkmik – munakoorekarva paber, must tint ja üks lilla ja oranž aktsent toote väljapanekuks.
- Awesomic — Toimetuse tsinkvõrk oranžide konfetti meenutavate kirjavahemärkidega
- Monad — toimetuse tehniline ajakiri soojal pärgamendil
- Dub — Linki matt riisipaberist juhtpaneel
- Seline Analytics — Vaikne analüütiline laud soojal paberil
- Anthropic — Teaduslik väliajakiri soojal pärgamendil – rahulikud elevandiluu pinnad, seriifidega pealkirjad ja üks saviaktsent, mis ilmub ainult siis, kui on vaja tegutseda.
- Calendly — Tumesinine tint külmal marmoril