Notion

Eguerdiko eguzkitan paperezko koaderno epel bat

Notion-en interfazea egun argitan dagoen koaderno maite baten antza du: mihise bero eta krematsu bat (#f6f5f4), antzua baino ukigarria, sans-serif tipografia eskuzabalak produktuaren testuari pisu editoriala ematen diona, eta puntuazio urri gisa erabiltzen den kolorea —mertxika koloreko "pilulek" aditzak nabarmentzen dituzte, urdin bakar batek ekintza nagusia ainguratzen du, eta azentu-tonu sorta birakari batek (koral, anbar, zerua, gauerdia) txartelen atzeko planoak koloreztatzen ditu pegatinak balira bezala. Txartelak mihise batean antolatuta daude, ertz eta izkin meheekin —itzalik gabe, kromorik gabe—, Moleskine koaderno baten lerrokatutako atalak bezala. Animazioa jostalaria eta malgukia da, 200 ms-ko trantsizio leunekin eta pertsonaien animazio malgukitsuekin, interfazeari bizia ematen diotenak apaingarriak izan gabe.

Zentratuta, gehienezko zabalera gutxi gorabehera 1440px-ra mugatzen da. Elementu nagusia erdiko pila bat da: sinboloen ilara bat → bi lerroko izenburu handi bat, koloretako pilula txertatu batekin → azpititulu bat → bi ekintzarako dei botoi dituen ilara bat → produktuaren UI maketa handi bat. Elementu nagusiaren azpian, atalak txartel zurien sareta eta kolore osoko azentu panelen artean txandakatzen dira. Logotipoaren horma bazkideen logotipoen ilara bakarreko sare zentratua da, eskala grisean. Ezaugarri blokeek bi zutabeko diseinua erabiltzen dute (testua ezkerrean, koloretako panela eskuinean), atalen artean ezkerretik eskuinera txandakatuz. "Galdetu zure laguntzaileei eskaeraren arabera" atalak 2x2 txartelen sareta bat erabiltzen du, non goiko txartelak zabalera osoa hartzen duen eta beheko ilara bi zutabe berdinetan banatuta dagoen. Atalen arteko lerroak zabalak dira (~80px), erritmo bertikal lasaia sortuz. Nabigazioa 64px-ko altuerako goiko barra finko bat da, erdiko nabigazio elementuekin eta eskuinean lerrokatutako ekintza botoiak dituena.

Ilustrazioak dira nagusi, argazkirik gabe. Hizkuntza bisuala sinbolo lau eta ilustratuetan oinarritzen da (ertz biribilduak 2px-ko zirkulu koloretsuetan), elementu apaingarri abstraktuetan (eskuz marraztutako zirriborroak, purpurina, geziak, lore formak) eta produktuaren erabiltzaile interfazearen maketatan. Sinboloak leiho nagusian agertzen dira zazpi avatarrez osatutako ilara horizontal gisa eta orrialdean zehar sakabanatuta daude puntuazio jostalari gisa. Produktuaren pantaila-argazkiak dira "benetako" elementu bisual bakarrak: benetako Notion interfazea erakusten dute (Kanban taulak, dokumentuen ikuspegiak, IA agenteen panelak) elementu multzo oso batekin eta datu errealekin. Leiho nagusiko produktuaren maketa handia da, erdian dago, eta itzal bakarra proiektatzen du mihisetik bereizten duena. Ez dago bizimodu argazkirik, ez stock irudirik, ez 3D render abstrakturik.

SaaS hutsa Minimalismoa Editoriala

https://notion.so

Paleta

Marka

Notion Blue #0075de — Ekintzarako deia (CTA) botoia betetzen duen elementu nagusia, nabigazio aktiboan azentu bat, ekintza-botoi beteak dira ia monokromo sistema bateko kolore-eskema bakarra, etengailu gisa hautemateko bezain saturatua dena.

Neutroa

Paper Warmth #f6f5f4 — Orriaren mihisea, leiho nagusiaren atzeko planoa eta atalaren atzeko planoa kolore bero eta beix samarra dira, sistemari sentsazio taktil eta analogikoa ematen diotenak.
Pure White #ffffff — Txartelen gainazalak, panel altxatuak, logotipoaren atzeko planoa, testu kontrastatua txartel ilunetan.
Ink Black #000000 — Testu nagusia, nabigazio estekak, goiburuak - gardentasun desberdinekin (% 100, % 95, % 90, % 60, % 40, % 20) erabiltzen dira hierarkia eraikitzeko kolore berriak gehitu gabe.
Charcoal #111111 — Testu ilunaren aukera bat beltz hutsa gogorregia izango litzatekeen UI eremuetarako.
Stone #757575 — Bigarren mailako nabigazio-testua, laguntza-testu isildua, desgaitutako botoien etiketak - % 60ko tinta-alfa
Graphite #615d59 — Testu nagusiak tonu beroa du - gris marroia, atzeko plano beroarekin harmonizatzen duena.

Tipografia

12tik 96px-ra · 10 urrats

NotionInter — ordezkapena: Inter · eskemak 400, 500, 600, 700 · Sans-serif letra-tipo nagusia humanista geometrikoa da, ñabardura sotilak dituena, 400 tamainatan erabiltzen da testuaren gorputzerako, 500 nabigazio/erabiltzaile interfazearentzat eta 600-700 izenburuetarako. Letra-tipoaren eskalak letra-tarte negatibo oldarkorra erabiltzen du tamaina handiagoetan (-4.6px 96px-tan, -2px 72px-tan), eta horrek izenburua trinkoagoa eta ziurragoa ematen du, airetsuagoa baino.
Lyon Text — ordezkapena: Source Serif Pro · eskemak 400 · Testu nagusiaren atal indibidualetarako eta atalen sarrerarako gordetako editorial serif letra-tipoa gutxitan erabiltzen da (lau aldiz) letra-tipoari pisu literarioa emateko, aldizkari baten diseinuko aipu baten antzera. Hierarkia paralelo baten ordez azentu sistemiko gisa funtzionatzen du.

Tarteak eta forma

Helburua	Esanahia
Dentsitatea	batez bestekoa
Oinarrizko urratsa	8px
Botoiaren erradioa	8px
Txartelaren erradioa	12px
Itzalak	ez - itzalen ordez ertzak
Atalen artean	80px
Orriaren zabalera	1440px

Adimen artifizialak zure webgunea Notion estiloan eraikiko du eta beteko du

Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
Transferitu edukia zure gune zaharretik: zehaztu helbidea.
Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.

Sortu webgune bat estilo honetan

Estilo antzekoak

ElevenLabs — Krema koloreko tonu beroetako argazki-saiakera, izenburu sotilekin. Bauhaus estiloko koadernoa: arrautza-oskolaren koloreko papera, tinta beltza eta produktua erakusteko more eta laranja koloreko azentu bakarra.
Awesomic — Konfetiaren antzeko puntuazio-markak laranja koloreko zink sare editoriala
Monad — pergamino beroan argitaratutako aldizkari tekniko editoriala
Dub — Link-en arroz-paper matearen kontrol-panela
Seline Analytics — Paper epelaren gaineko taula analitiko lasaia
Anthropic — Pergamino epelaren gaineko aldizkari zientifikoa: boli koloreko gainazal lasaiak, serifadun editorial-izenburuak eta ekintza beharrezkoa denean bakarrik agertzen den buztinezko azentu bakarra.
Calendly — Tinta urdin iluna marmol hotzean
Augen Pro — Appleren aurkezpen zuriak urdin elektriko, kliniko eta arin bat du azentu bakar gisa espazio monokromo batean.
Antimetal — Krema koloreko paperean argitaratutako kronika editoriala —goiz lasai bat aldizkari zientifiko batean, non neurritasunak konfiantza ematen duen eta serifek lan astuna egiten duten
Perk — Limoi elektrikoa pergamino-paper epelaren gainean
Ditto — Eguzki argitan dagoen tailer bat lore basatien laginak sortzen. Krema koloreko gainazal epelak, oinarrizko kolore hori bizia, itsas urdin ilunaren tintak, piezaren atzean loratzen diren kolore organikoen formak.
Officevibe — Krema koloreko paper epel batean argitaratutako aldizkari editorial bat. Imajinatu Giza Baliabideen kudeaketari buruzko saiakera hausnarkor bat, produktu gisa aurkeztua: interfaze urdin moderno batetik xuxurlatzen den letra-tipo etzana.