Notion
Topla papirna sveska na podnevnom suncu
Notionov interfejs izgleda kao voljena papirna bilježnica usred bijela dana: toplo, kremasto platno (#f6f5f4) koje se osjeća taktilno, a ne sterilno, velikodušna sans-serif tipografija daje uredničku težinu tekstu proizvoda, a boja korištena kao rijetka interpunkcija - breskvaste "pilule" ističu glagole, jedna plava usidrava glavnu radnju, a rotirajući niz akcentnih nijansi (koraljna, ćilibarna, nebo, ponoć) boji pozadine kartica poput naljepnica. Karte su raspoređene na platnu s tankim rubovima i uglovima - bez sjena, bez kroma - poput linijskih dijelova Moleskine bilježnice. Animacija je razigrana i proljetna, s glatkim prijelazima na 200ms i proljetnim animacijama likova koje unose život u interfejs bez da su dekorativne.
Centrirano, maksimalna širina je ograničena na približno 1440px. Glavni element je centrirani stek: red simbola → veliki dvoredni naslov s ugrađenom obojenom tabletom → podnaslov → red s dva dugmeta za poziv na akciju → veliki model korisničkog interfejsa proizvoda. Ispod glavnog elementa, odjeljci se izmjenjuju između mreža bijelih kartica i akcentnih panela u punoj boji. Zid s logotipom je centrirana mreža s jednim redom logotipa partnera u sivoj nijansi. Blokovi funkcija koriste raspored s dvije kolone (tekst s lijeve strane, panel u boji s desne strane), naizmjenično s lijeva na desno između odjeljaka. Odjeljak "Pitajte svoje asistente na zahtjev" koristi mrežu kartica 2x2, gdje gornja kartica zauzima punu širinu, a donji red je podijeljen u dva jednaka stupca. Razmaci između odjeljaka su prostrani (~80px), stvarajući miran vertikalni ritam. Navigacija je fiksna gornja traka visoka 64px s centriranim navigacijskim elementima i desno poravnatim dugmadima za akcije.
Ilustracije su najvažnije, bez fotografija. Vizuelni jezik je izgrađen na ravnim, ilustrovanim simbolima (zaobljeni rubovi u krugovima u boji od 2px), apstraktnim dekorativnim elementima (ručno crtane vijugave linije, šljokice, strelice, oblici cvijeća) i maketama korisničkog interfejsa proizvoda. Simboli se pojavljuju u glavnom prozoru kao horizontalni red od sedam avatara i razasuti su po stranici kao razigrana interpunkcija. Snimci ekrana proizvoda su jedini "pravi" vizuelni elementi: oni prikazuju stvarni Notion interfejs (Kanban ploče, prikazi dokumenata, paneli AI agenata) sa kompletnim skupom elemenata i stvarnih podataka. Maketa proizvoda u glavnom prozoru je velika, centrirana i baca jednu sjenu koja ga odvaja od platna. Nema fotografija životnog stila, nema stock slika, nema apstraktnih 3D rendera.
Paleta
Brend
- Notion Blue
#0075de— Glavni element koji ispunjava dugme za poziv na akciju (CTA), akcenat u aktivnoj navigaciji, ispunjena dugmad za akciju su jedina shema boja u gotovo monohromatskom sistemu koja je dovoljno zasićena da se percipira kao prekidač.
Neutralno
- Paper Warmth
#f6f5f4— Platno stranice, pozadina glavnog prozora i pozadina sekcije su toplih, blago bež boja koje sistemu daju taktilni, analogni osjećaj. - Pure White
#ffffff— Površine kartica, podignuti paneli, logotip u pozadini, kontrastni tekst na tamnim karticama. - Ink Black
#000000— Glavni tekst, navigacijske veze, naslovi - koriste se s različitom transparentnošću (100%, 95%, 90%, 60%, 40%, 20%) za izgradnju hijerarhije bez dodavanja novih boja. - Charcoal
#111111— Opcija tamnog teksta za ona područja korisničkog interfejsa gdje bi čista crna boja izgledala previše grubo. - Stone
#757575— Tekst sekundarne navigacije, tekst pomoći s isključenim zvukom, onemogućene oznake dugmadi - 60% alfa tinte - Graphite
#615d59— Glavni tekst ima topao ton - smeđe-sivu, koja se usklađuje s toplom pozadinom.
Tipografija
od 12 do 96px · 10 koraka
- NotionInter — zamjena: Inter · obrisi 400, 500, 600, 700 · Glavni sans-serif font je geometrijski humanistički sa suptilnim nijansama, korišten u veličinama 400 za glavni tekst, 500 za navigaciju/korisnički interfejs i 600-700 za naslove. Skala fonta koristi agresivni negativni razmak između slova pri većim veličinama (-4,6px na 96px, -2px na 72px), što naslov čini kompaktnijim i samouvjerenijim, a ne prozračnim.
- Lyon Text — zamjena: Source Serif Pro · obrisi 400 · Urednički serifni font, rezervisan za pojedinačne dijelove glavnog teksta i uvode dijelova, koristi se štedljivo (četiri puta) kako bi se fontu dala književna težina, slično citatu u časopisnom rasporedu. Funkcioniše kao sistemski akcenat, a ne kao paralelna hijerarhija.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | prosjek |
| Osnovni korak | 8px |
| Radijus dugmeta | 8px |
| Radijus kartice | 12px |
| Sjene | ne - okviri umjesto sjena |
| Između sekcija | 80px |
| Širina stranice | 1440px |
Vještačka inteligencija će izgraditi vašu web stranicu u Notion stilu i popuniti je
- Popunite proizvodima i objavama putem linka - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa vaše stare stranice - samo navedite adresu.
- Moderan dizajn na najboljem engine-u: React ( Next.js) sa serverskim renderovanjem i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretrage i preporuke neuronskih mreža.
Slični stilovi
- ElevenLabs — Foto esej u toplim krem tonovima sa suptilnim naslovima. Bilježnica u stilu Bauhausa - papir boje ljuske jajeta, crna tinta i jedan ljubičasti i narandžasti akcenat za izlaganje proizvoda.
- Awesomic — Urednička cinkova mreža s narandžastim interpunkcijskim znakovima koji podsjećaju na konfete
- Monad — urednički tehnički časopis na toplom pergamentu
- Dub — Linkova kontrolna ploča od mat rižinog papira
- Seline Analytics — Tihi analitički sto na toplom papiru
- Anthropic — Naučni časopis s terena o toplom pergamentu - mirne površine boje slonovače, serifirani urednički naslovi i jedan glineni akcenat koji se pojavljuje samo kada je potrebna akcija.
- Calendly — Tamnoplava tinta na hladnom mramoru
- Augen Pro — Appleova bijela prezentacija sadrži kliničku, bestežinu, električno plavu boju kao jedini akcenat u monohromatskom prostoru.
- Antimetal — Uvodnik na krem papiru - tiho jutro u naučnom časopisu, gdje suzdržanost prenosi samopouzdanje, a serifi obavljaju teški posao.
- Perk — Električni limet na toplom pergament papiru
- Ditto — Suncem obasjana radionica u kojoj se izrađuju uzorci divljeg cvijeća. Tople kremaste površine, živahna žuta osnovna boja, tamnoplave tinte, organski oblici boja koji cvjetaju iza djela.
- Officevibe — Uvodnik časopisa na toplom krem papiru. Zamislite promišljen esej o upravljanju ljudskim resursima, predstavljen kao proizvod - kurzivni serifni font koji šapuće kroz moderni plavi interfejs.