Notion
Topel papirnat zvezek na opoldanskem soncu
Notionov vmesnik je videti kot priljubljen papirnat zvezek sredi belega dne: toplo, kremasto platno (#f6f5f4), ki je otipljivo in ne sterilno, radodarna tipografija brez serifov daje besedilu izdelka uredniško težo, barve pa so uporabljene kot redka ločila – breskove»tabletke« poudarjajo glagole, ena sama modra barva zasidra glavno dogajanje, vrteča se paleta poudarjenih odtenkov (koralna, jantarna, nebo, polnoč) pa obarva ozadja kartic kot nalepke. Kartice so razporejene na platnu s tankimi robovi in vogali – brez senc, brez kroma – kot črtasti deli zvezka Moleskine. Animacija je igriva in vzmetna, z gladkimi prehodi pri 200 ms in vzmetnimi animacijami likov, ki v vmesnik vdahnejo življenje, ne da bi bile dekorativne.
Sredinsko razporejena največja širina je omejena na približno 1440 slikovnih pik. Glavni element je sredinsko razporejen sklad: vrstica simbolov → velik dvovrstični naslov z vdelano barvno tabletko → podnaslov → vrstica z dvema gumboma za poziv k dejanju → velik model uporabniškega vmesnika izdelka. Pod glavnim elementom se razdelki izmenjujejo med mrežami belih kartic in barvnimi poudarjenimi ploščami. Stena z logotipi je centrirana mreža z eno vrstico logotipov partnerjev v sivini. Bloki funkcij uporabljajo postavitev z dvema stolpcema (besedilo na levi, barvna plošča na desni), ki se med razdelki izmenjujejo od leve proti desni. Razdelek»Vprašajte svoje pomočnike na zahtevo« uporablja mrežo kartic 2x2, kjer zgornja kartica zavzema celotno širino, spodnja vrstica pa je razdeljena na dva enaka stolpca. Žlebovi med razdelki so obsežni (~80 slikovnih pik), kar ustvarja umirjen navpičen ritem. Navigacija je fiksna zgornja vrstica, visoka 64 slikovnih pik, s centriranimi navigacijskimi elementi in desno poravnanimi gumbi za dejanja.
Ilustracije so najpomembnejše, brez fotografij. Vizualni jezik temelji na ploskih, ilustriranih simbolih (zaobljeni robovi v barvnih krogih velikosti 2px), abstraktnih dekorativnih elementih (ročno narisane vijuge, bleščice, puščice, oblike rož) in maketah uporabniškega vmesnika izdelka. Simboli se v glavnem oknu pojavijo kot vodoravna vrsta sedmih avatarjev in so raztreseni po strani kot igriva ločila. Posnetki zaslona izdelka so edini "pravi" vizualni elementi: prikazujejo dejanski vmesnik Notion (Kanban table, pogledi dokumentov, plošče agentov umetne inteligence) s celotnim naborom elementov in dejanskih podatkov. Maketa izdelka v glavnem oknu je velika, centrirana in meče eno samo senco, ki jo ločuje od platna. Ni fotografij življenjskega sloga, ni slik iz arhiva, ni abstraktnih 3D-upodobitev.
Paleta
Blagovna znamka
- Notion Blue
#0075de— Glavni element, ki zapolnjuje gumb s pozivom k dejanju (CTA), poudarek v aktivni navigaciji, zapolnjeni akcijski gumbi so edina barvna shema v skoraj enobarvnem sistemu, ki je dovolj nasičena, da jo je mogoče zaznati kot stikalo.
Nevtralno
- Paper Warmth
#f6f5f4— Platno strani, ozadje glavnega okna in ozadje razdelka so toplih, rahlo bež barv, ki dajejo sistemu taktilen, analogen občutek. - Pure White
#ffffff— Površine kartic, dvignjene plošče, logotip v ozadju, kontrastno besedilo na temnih karticah. - Ink Black
#000000— Glavno besedilo, navigacijske povezave, naslovi - uporabljajo se z različno prosojnostjo (100 %, 95 %, 90 %, 60 %, 40 %, 20 %) za izgradnjo hierarhije brez dodajanja novih barv. - Charcoal
#111111— Možnost temnega besedila za tista področja uporabniškega vmesnika, kjer bi čista črna barva izgledala preveč ostra. - Stone
#757575— Sekundarno navigacijsko besedilo, utišano pomožno besedilo, onemogočene oznake gumbov - 60 % črnila alfa - Graphite
#615d59— Glavno besedilo ima topel ton - rjavkasto siv, ki se usklajuje s toplim ozadjem.
Tipografija
od 12 do 96 slikovnih pik · 10 korakov
- NotionInter — zamenjava: Inter · obrisi 400, 500, 600, 700 · Glavna pisava sans-serif je geometrijski humanistični slog s subtilnimi niansami, ki se uporablja pri velikostih 400 za besedilo, 500 za navigacijo/uporabniški vmesnik in 600–700 za naslove. Merilo pisave uporablja agresiven negativen razmik med črkami pri večjih velikostih (-4,6 slikovnih pik pri 96 slikovnih pik, -2 slikovnih pik pri 72 slikovnih pik), zaradi česar se naslov zdi bolj kompakten in samozavesten, ne pa zračen.
- Lyon Text — zamenjava: Source Serif Pro · obrisi 400 · Uredniška serifna pisava, rezervirana za posamezne dele glavnega besedila in uvode v dele, se uporablja redko (štirikrat), da se pisavi da literarna teža, podobno citatu v revijalni postavitvi. Deluje kot sistemski poudarek in ne kot vzporedna hierarhija.
Intervali in oblika
| Namen | Pomen |
|---|---|
| Gostota | povprečje |
| Osnovni korak | 8px |
| Polmer gumba | 8px |
| Polmer kartice | 12px |
| Sence | ne - obrobe namesto senc |
| Med odseki | 80px |
| Širina strani | 1440px |
Umetna inteligenca bo zgradila vašo spletno stran v slogu Notion in jo napolnila
- Polnite z izdelki in objavami prek povezave - Instagram, TikTok, Facebook.
- Prenesite vsebino s starega spletnega mesta – samo navedite naslov.
- Sodoben dizajn na najboljšem iskalniku: React ( Next.js) z vnaprej pripravljenim upodabljanjem na strežniku in optimizacijo za SEO.
- Popolnoma avtomatizirana SEO optimizacija za rezultate iskanja in priporočila nevronskih mrež.
Podobni slogi
- ElevenLabs — Foto esej v toplih kremnih tonih z nežnimi naslovi. Zvezek v slogu Bauhausa – papir barve jajčne lupine, črno črnilo in en sam vijolično-oranžen poudarek za predstavitev izdelka.
- Awesomic — Uredniška cinkova mreža z oranžnimi ločili, ki spominjajo na konfete
- Monad — uredniška tehnična revija na toplem pergamentu
- Dub — Linkova nadzorna plošča z mat riževim papirjem
- Seline Analytics — Tiha analitična miza na toplem papirju
- Anthropic — Znanstvena terenska revija o toplem pergamentu – mirne slonokoščene površine, serifirani uvodniški naslovi in en sam glineni naglas, ki se pojavi le, ko je potrebno ukrepanje.
- Calendly — Temno modro črnilo na hladnem marmorju
- Augen Pro — Applova bela predstavitev ima klinično, breztežno, električno modro barvo kot edini poudarek v enobarvnem prostoru.
- Antimetal — Uredniška kronika na krem papirju – mirno jutro v znanstveni reviji, kjer zadržanost izraža samozavest, serifi pa opravljajo težko delo.
- Perk — Električna apna na toplem pergamentnem papirju
- Ditto — S soncem obsijana delavnica ustvarjanja vzorcev divjih rož. Tople kremne površine, živahna rumena osnovna barva, temno temno modra črnila, organske barvne oblike, ki cvetijo za delom.
- Officevibe — Uredniška revija na toplem kremnem papirju. Predstavljajte si premišljen esej o upravljanju s človeškimi viri, predstavljen kot izdelek – kurzivna serifna pisava, ki šepeta skozi sodoben moder vmesnik.