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
- 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
- Augen Pro — Apple'i valge esitlus kasutab monokroomse ruumi ainsa aktsendina kliinilist, kaalutut ja elektrilist sinist.
- Antimetal — Kreemikas paberil toimetuse kroonika – vaikne hommik teadusajakirjas, kus vaoshoitus annab edasi enesekindlust ja serifid teevad raske töö ära.
- Perk — Elektriline laim soojal pärgamentpaberil
- Ditto — Päikesepaisteline töötuba, kus luuakse metslillede näidiseid. Soojad kreemikad pinnad, erk kollane põhivärv, sügavad tumesinised tindid, teose taga õitsevad orgaanilised värvivormid.
- Officevibe — Toimetuse ajakiri soojal kreemikal paberil. Kujutage ette läbimõeldud esseed personalijuhtimisest, mis on esitletud tootena – kursiivis serif-font sosistab läbi moodsa sinise liidese.