Notion
Günortan güneşinde ýyly kagyz depder
“Notion”-yň interfeýsi gün şöhlesinde söýgüli kagyz depderçä meňzeýär: steril däl-de, duýulýan ýaly duýulýan ýyly, krem reňkli kanwa (#f6f5f4), önümiň nusgasyna redaksiýa agramyny goşýan giň sans-serif tipografiýasy we seýrek punktuasiýa hökmünde ulanylýan reňk — şaftaly reňkli “tabletkalar” işlikleri nygtaýar, esasy hereketi ýeke gök reňkde berkidýär we aýlanýan basyş reňkleri (merjen, sary, asman, ýary gije) kartoçkalaryň fonlaryny stikerler ýaly reňkleýär. Kartoçkalar “Moleskine” depderçäniň çyzykly bölekleri ýaly inçe gyralary we burçlary — kölegesiz, hromsyz — bolan kanwada ýerleşdirilen. Animasiýa oýunly we ýazly, 200ms-de ýumşak geçişler we interfeýse bezegsiz jan berýän ýazly gahryman animasiýalary bilen.
Merkezleşdirilen, iň uly giňlik takmynan 1440 piksel bilen çäklendirilen. Esasy element merkezleşdirilen stekdir: simwollaryň hatary → içine goýlan reňkli tabletkaly uly iki setirlik sözbaşy → kiçi sözbaşy → iki çagyryş düwmesi bolan hatar → uly önüm interfeýsi maketidir. Esasy elementiň aşagynda bölümler ak kartlaryň we doly reňkli aksent panelleriniň arasynda üýtgeýär. Logotip diwary çal reňkli hyzmatdaş logotipleriniň merkezleşdirilen bir setirlik setidir. Aýratynlyk bloklary bölümleriň arasynda çepden saga üýtgeýän iki sütünli düzülişi ulanýar (çepde tekst, sagda reňkli panel). "Isleg boýunça kömekçileriňizden soraň" bölümi 2x2 kart toruny ulanýar, bu ýerde ýokarky kart doly giňligi eýeleýär we aşaky hatar iki deň sütüne bölünýär. Bölümleriň arasyndaky turbalar giň (~80 piksel) bolup, asuda dik ritm döredýär. Nawigasiýa merkezleşdirilen nawigasiýa elementleri we sag tarapa deňleşdirilen hereket düwmeleri bolan 64 piksel beýiklikdäki berk ýokarky paneldir.
Suratlar ýok, suratlar iň möhümdir. Wizual dil tekiz, suratlandyrylan nyşanlara (2 piksel reňkli tegeleklerde tegelek gyralara), abstrakt bezeg elementlerine (el bilen çekilen çyzyklara, ýalpyldawuklara, oklara, gül şekillerine) we önümiň ulanyjy interfeýsiniň maketlerine esaslanýar. Nyşanlar esasy penjirede ýedi awataryň gorizontal hatary hökmünde peýda bolýar we sahypada oýunly punktuasiýa hökmünde ýaýradylýar. Önümiň ekran suratlary ýeke-täk "hakyky" wizual elementlerdir: olar hakyky Notion interfeýsini (Kanban tagtalary, resminama görnüşleri, AI agent panelleri) doly elementler we hakyky maglumatlar bilen görkezýär. Esasy penjiredäki önümiň maket uly, merkezleşdirilen we ony tuwaldan bölýän ýeke-täk kölege döredýär. Durmuş suratlary, stok suratlar, abstrakt 3D renderler ýok.
Palitra
Brend
- Notion Blue
#0075de— Herekete çagyryş (CTA) düwmesini doldurýan esasy element, işjeň nawigasiýada aýratynlyk, doldurylan hereket düwmeleri, açar hökmünde kabul edilmek üçin ýeterlik derejede doýgun bolan diýen ýaly monohrom ulgamdaky ýeke-täk reňk shemasydyr.
Neýtral
- Paper Warmth
#f6f5f4— Sahypanyň kanwasy, esasy penjire fony we bölüm fonunyň hemmesi ýyly, biraz bej reňklerde bolup, ulgama duýulýan, analog duýgy berýär. - Pure White
#ffffff— Kart ýüzleri, galdyrylan paneller, logotip fon, gara kartlardaky kontrastly tekst. - Ink Black
#000000— Esasy tekst, nawigasiýa baglanyşyklary, sözbaşylar - täze reňkler goşmazdan ierarhiýa gurmak üçin dürli açyklyk bilen (100%, 95%, 90%, 60%, 40%, 20%) ulanylýar. - Charcoal
#111111— Arassa gara reňkiň gaty berk görünjek UI ýerleri üçin garaňky tekst opsiýasy. - Stone
#757575— Ikinji derejeli nawigasiýa teksti, sessiz kömekçi tekst, öçürilen düwme bellikleri - 60% syýa alfa - Graphite
#615d59— Esasy tekst ýyly fon bilen sazlaşýan ýyly öwüşginli - goňur çal reňke eýedir.
Tipografiýa
12-den 96 piksele çenli · 10 ädim
- NotionInter — çalyşmak: Inter · konturlar 400, 500, 600, 700 · Esasy sans-serif şrifti inçe nyuanslary bolan geometrik gumanist şrift bolup, esasy tekst üçin 400, nawigasiýa/ulanyjy interfeýsi üçin 500 we sözbaşylar üçin 600-700 ölçeglerinde ulanylýar. Şrift ölçegi uly ölçeglerde (96 pikselde -4.6 piksel, 72 pikselde -2 piksel) agressiw negatiw harp aralygyny ulanýar, bu bolsa sözbaşyny howa ýaly däl-de, has ykjam we ynamly edýär.
- Lyon Text — çalyşmak: Source Serif Pro · konturlar 400 · Esasy tekstiň aýry-aýry bölümleri we bölümleriň girişleri üçin niýetlenen redaksion serif şrifti žurnalyň maketinde getirilýän sitata meňzeş şrifte edebi agram bermek üçin seýrek ulanylýar (dört gezek). Ol parallel ierarhiýa däl-de, ulgamlaýyn aksent hökmünde hyzmat edýär.
Aralyklar we görnüş
| Maksat | Manysy |
|---|---|
| Dykyzlyk | ortaça |
| Esasy ädim | 8px |
| Düwme radiusy | 8px |
| Kart radiusy | 12px |
| Kölegeler | kölegeleriň ýerine serhetler ýok |
| Bölümleriň arasynda | 80px |
| Sahypanyň giňligi | 1440px |
Süni intellekt web sahypaňyzy Notion stilinde gurar we ony doldurar
- Instagram, TikTok, Facebook salgylary arkaly önümler we ýazgylar bilen dolduryň.
- Köne saýtyňyzdan mazmuny göçüriň — diňe salgyny görkeziň.
- Iň gowy motorda döwrebap dizaýn: React ( Next.js) serwer renderi we SEO optimizasiýasy bilen gyssagly ýagdaýda.
- Gözleg netijeleri we neýron tor maslahatlary üçin doly awtomatlaşdyrylan SEO optimizasiýasy.
Meňzeş stiller
- ElevenLabs — Ýumşak krem reňkli we inçe sözbaşyly suratly esse. Bauhaus stilindäki depderçe — ýumurtga gabygy reňkli kagyz, gara syýa we önümi görkezmek üçin ýekeje gyrmyzy we mämişi reňkli bezeg.
- Awesomic — Konfeti ýadyňa salýan mämişi punktuasiýa belgileri bolan redaksiýa sink tor
- Monad — ýyly pergamentde redaksiýa tehniki žurnaly
- Dub — Link-iň mat tüwi kagyzynyň dolandyryş paneli
- Seline Analytics — Ýyly kagyzyň üstünde sessiz analitiki stol
- Anthropic — Ýyly pergament barada ylmy meýdan žurnaly — pil süňküniň asuda ýüzleri, serif redaksiýa sözbaşylary we diňe hereket gerek bolanda peýda bolýan ýekeje palçyk aksenti.
- Calendly — Sowuk mermeriň üstünde gara gök syýa
- Augen Pro — Apple-iň ak görnüşi monohrom giňişlikde ýeke-täk aksent hökmünde kliniki, agramsyz, elektrik gök reňki öz içine alýar.
- Antimetal — Kremli kagyzdaky redaksiýa hronikasy — ylmy žurnalda asuda ertir, bu ýerde öz-özüňi saklamak ynamy aňladýar, serifler bolsa agyr işleri ýerine ýetirýär.
- Perk — Gyzgyn pergament kagyzynda elektrik laýmy
- Ditto — Gün şöhlesi düşýän ussahanada ýabany gülleriň nusgalaryny döredýär. Ýyly krem reňkli ýüzler, açyk sary esasy reňk, goýy gök reňkli syýalar, eseriň arkasynda açylýan organiki reňkli görnüşler.
- Officevibe — Krem reňkli kagyzda ýazylan redaksiýa žurnaly. HR dolandyryşy barada oýlanyşykly oçerk göz öňüne getiriň, ol önüm hökmünde hödürlenýär — häzirki zaman gök interfeýs arkaly pyşyrdaýan kursiw serif şrifti.