Notion
Një fletore e ngrohtë letre në diellin e mesditës
Ndërfaqja e Notion duket si një fletore letre e dashur në mes të ditës: një kanavacë e ngrohtë dhe kremoze (#f6f5f4) që ndihet e prekshme në vend të sterilitetit, tipografia bujare sans-serif i jep peshë editoriale tekstit të produktit, dhe ngjyra e përdorur si pikësim i rrallë - "pilulat" e pjeshkës nxjerrin në pah foljet, një ngjyrë blu e vetme ankoron veprimin kryesor dhe një grup rrotullues nuancash theksi (koral, qelibar, qiell, mesnatë) ngjyrosin sfondet e kartave si afishe. Kartat janë të rregulluara në një kanavacë me kufij dhe cepa të hollë - pa hije, pa krom - si pjesët e rreshtuara të një fletoreje Moleskine. Animacioni është i gjallë dhe elastik, me tranzicione të lëmuara në 200ms dhe animacione elastike të personazheve që i japin jetë ndërfaqes pa qenë dekorative.
Në qendër, gjerësia maksimale është e kufizuar në afërsisht 1440px. Elementi kryesor është një pirg i qendruar: një rresht simbolesh → një titull i madh me dy rreshta me një pilulë me ngjyra të integruara → një nëntitull → një rresht me dy butona thirrjeje për veprim → një model i madh i ndërfaqes së përdoruesit të produktit. Poshtë elementit kryesor, seksionet alternojnë midis rrjetave të kartave të bardha dhe paneleve me theks me ngjyra të plota. Muri i logos është një rrjet i qendruar me një rresht të vetëm të logove të partnerëve në shkallë gri. Blloqet e veçorive përdorin një paraqitje me dy kolona (teksti në të majtë, paneli me ngjyra në të djathtë), duke alternuar nga e majta në të djathtë midis seksioneve. Seksioni "Pyetni asistentët tuaj sipas kërkesës" përdor një rrjet kartash 2x2, ku karta e sipërme zë gjerësinë e plotë dhe rreshti i poshtëm është i ndarë në dy kolona të barabarta. Hapësirat midis seksioneve janë të bollshme (~80px), duke krijuar një ritëm vertikal të qetë. Navigimi është një shirit i sipërm i fiksuar me lartësi 64px me elementë navigimi të qendruar dhe butona veprimi të rreshtuar në të djathtë.
Ilustrimet janë parësore, pa foto. Gjuha vizuale është ndërtuar mbi simbole të sheshta, të ilustruara (skaje të rrumbullakosura në rrathë me ngjyra 2px), elementë dekorativë abstraktë (skica të vizatuara me dorë, shkëlqim, shigjeta, forma lulesh) dhe makete të ndërfaqes së përdoruesit të produktit. Simbolet shfaqen në dritaren kryesore si një rresht horizontal me shtatë avatarë dhe janë të shpërndara në të gjithë faqen si shenja pikësimi lozonjare. Pamjet e ekranit të produktit janë të vetmit elementë vizualë "të vërtetë": ato tregojnë ndërfaqen aktuale të Notion (tabelat Kanban, pamjet e dokumenteve, panelet e agjentëve të IA-së) me një grup të plotë elementësh dhe të dhënash reale. Maketi i produktit në dritaren kryesore është i madh, i përqendruar dhe hedh një hije të vetme që e ndan atë nga kanavaca. Nuk ka foto të stilit të jetesës, nuk ka imazhe stok, nuk ka renderime abstrakte 3D.
Paletë
Markë
- Notion Blue
#0075de— Elementi kryesor që mbush butonin e thirrjes për veprim (CTA), një theks në navigimin aktiv, butonat e mbushur të veprimit janë skema e vetme e ngjyrave në një sistem pothuajse monokrom që është mjaftueshëm e ngopur për t'u perceptuar si një çelës.
Neutral
- Paper Warmth
#f6f5f4— Kanavaca e faqes, sfondi i dritares kryesore dhe sfondi i seksionit janë të gjitha me ngjyra të ngrohta, paksa bezhë, që i japin sistemit një ndjesi analoge dhe prekëse. - Pure White
#ffffff— Sipërfaqe kartelash, panele të ngritura, sfond logoje, tekst kontrastues në kartela të errëta. - Ink Black
#000000— Teksti kryesor, lidhjet e navigimit, titujt - përdoren me transparencë të ndryshme (100%, 95%, 90%, 60%, 40%, 20%) për të ndërtuar hierarki pa shtuar ngjyra të reja. - Charcoal
#111111— Një opsion teksti të errët për ato zona të ndërfaqes së përdoruesit ku e zeza e pastër do të dukej shumë e ashpër. - Stone
#757575— Tekst navigimi dytësor, tekst ndihmës i heshtur, etiketa butonash të çaktivizuara - 60% bojë alfa - Graphite
#615d59— Teksti kryesor ka një ton të ngrohtë - gri kafe, i cili harmonizohet me sfondin e ngrohtë.
Tipografi
nga 12 në 96px · 10 hapa
- NotionInter — zëvendësim: Inter · skica 400, 500, 600, 700 · Fonti kryesor sans-serif është një font gjeometrik humanist me nuanca delikate, i përdorur në madhësitë 400 për tekstin e trupit, 500 për navigimin/ndërfaqen e përdoruesit dhe 600-700 për titujt. Shkalla e fontit përdor hapësirë agresive negative midis shkronjave në madhësi më të mëdha (-4.6px në 96px, -2px në 72px), gjë që e bën titullin të duket më kompakt dhe i sigurt, në vend që të jetë i ajrosur.
- Lyon Text — zëvendësim: Source Serif Pro · skica 400 · Fonti serif editorial, i rezervuar për seksione individuale të tekstit kryesor dhe hyrjet e seksioneve, përdoret me kursim (katër herë) për t'i dhënë fontit peshë letrare, ngjashëm me një citat në një paraqitje reviste. Funksionon si një theks sistemik dhe jo si një hierarki paralele.
Intervalet dhe forma
| Qëllimi | Kuptimi |
|---|---|
| Dendësia | mesatare |
| Hapi bazë | 8px |
| Rrezja e butonit | 8px |
| Rrezja e kartës | 12px |
| Hijet | pa kufij në vend të hijeve |
| Midis seksioneve | 80px |
| Gjerësia e faqes | 1440px |
IA do ta ndërtojë faqen tuaj të internetit në stilin Notion dhe do ta mbushë atë
- Plotësoni me produkte dhe postime përmes linkut - Instagram, TikTok, Facebook.
- Transferoni përmbajtje nga faqja juaj e vjetër—thjesht specifikoni adresën.
- Dizajn modern në motorin më të mirë: React ( Next.js) me renderim të serverit dhe optimizim SEO që në fillim.
- Optimizim plotësisht i automatizuar i SEO-s për rezultatet e kërkimit dhe rekomandimet e rrjeteve nervore.
Stile të ngjashme
- ElevenLabs — Një ese me foto në tone të ngrohta krem me tituj delikatë. Një fletore në stilin Bauhaus - letër me ngjyrë lëvozhge veze, bojë e zezë dhe një theks i vetëm vjollcë dhe portokalli për shfaqjen e produktit.
- Awesomic — Rrjetë zinku editoriale me shenja pikësimi portokalli që të kujtojnë konfeti
- Monad — revistë teknike editoriale mbi pergamenë të ngrohtë
- Dub — Paneli i kontrollit të letrës orizi mat të Link
- Seline Analytics — Një tabelë analitike e qetë në letër të ngrohtë
- Anthropic — Një revistë shkencore mbi pergamenën e ngrohtë - sipërfaqe të qeta ngjyrë fildishi, tituj editorialë të serifuar dhe një theks i vetëm argjile që shfaqet vetëm kur nevojitet veprim.
- Calendly — Bojë blu e errët mbi mermer të ftohtë
- Augen Pro — Prezantimi i bardhë i Apple paraqet një blu elektrike klinike, pa peshë, si theksin e vetëm në një hapësirë njëngjyrëshe.
- Antimetal — Një kronikë editoriale në letër kremoze—një mëngjes i qetë në një revistë shkencore, ku përmbajtja përcjell vetëbesim dhe serifetet bëjnë punën e rëndë.
- Perk — Limon elektrik në letër pergameni të ngrohtë
- Ditto — Një seminar i ndriçuar nga dielli që krijon mostra lulesh të egra. Sipërfaqe të ngrohta krem, një ngjyrë bazë e verdhë e gjallë, bojëra blu të errët të errët, forma ngjyrash organike që lulëzojnë pas veprës.
- Officevibe — Një revistë editoriale në letër të ngrohtë me ngjyrë krem. Imagjinoni një ese të menduar mirë mbi menaxhimin e burimeve njerëzore, të paraqitur si një produkt - një font serif me shkronja të pëshpëritura përmes një ndërfaqeje moderne blu.