Telegramu, WhatsApp+380637610482
Valery Danyuk
Valery Danyukmsanidi programuKutengeneza zana za AI kwa ajili ya biashara. Ubora wa juu. Nafuu.Andika kwenye Telegram
Notion — onyesho la awali la tovuti katika mtindo huu

Notion

Daftari la karatasi lenye joto kwenye jua la mchana

Kiolesura cha Notion kinaonekana kama daftari la karatasi linalopendwa mchana kweupe: turubai ya joto na yenye krimu (#f6f5f4) ambayo huhisi kuguswa badala ya kuwa tasa, uchapaji mkarimu usio na serif unaotoa uzito wa uhariri kwa nakala ya bidhaa, na rangi inayotumika kama uakifishaji mdogo—vitenzi vya "vidonge" vya peach huangazia vitenzi, bluu moja hushikilia kitendo kikuu, na safu inayozunguka ya rangi za lafudhi (matumbawe, kaharabu, anga, usiku wa manane) hupaka rangi mandharinyuma ya kadi kama vibandiko. Kadi zimepangwa kwenye turubai yenye mipaka na pembe nyembamba—hakuna vivuli, hakuna kromu—kama sehemu zilizopangwa za daftari la Moleskine. Uhuishaji ni wa kucheza na wa chemchemi, wenye mabadiliko laini ya 200ms na uhuishaji wa wahusika wa chemchemi ambao huleta uhai kwenye kiolesura bila kuwa mapambo.

Ukiwa katikati, upana wa juu zaidi umepunguzwa hadi takriban pikseli 1440. Kipengele kikuu ni rundo la katikati: safu ya alama → kichwa kikubwa cha mistari miwili chenye kidonge cha rangi kilichopachikwa → kichwa kidogo → safu yenye vitufe viwili vya wito wa kuchukua hatua → mfano mkubwa wa kiolesura cha bidhaa. Chini ya kipengele kikuu, sehemu hubadilishana kati ya gridi za kadi nyeupe na paneli za lafudhi zenye rangi kamili. Ukuta wa nembo ni gridi ya safu moja katikati ya nembo za washirika katika rangi ya kijivu. Vizuizi vya vipengele vinatumia mpangilio wa safu mbili (maandishi upande wa kushoto, paneli yenye rangi kulia), ikibadilishana kushoto hadi kulia kati ya sehemu. Sehemu ya "Waulize wasaidizi wako wanapohitajika" hutumia gridi ya kadi ya 2x2, ambapo kadi ya juu inachukua upana kamili, na safu ya chini imegawanywa katika safu mbili sawa. Mifereji kati ya sehemu ni mingi (~pikseli 80), na kuunda mdundo wa wima tulivu. Usogezaji ni upau wa juu usiobadilika wa pikseli 64 wenye vipengele vya usogezaji katikati na vitufe vya kitendo vilivyopangwa kulia.

Vielelezo ni muhimu sana, bila picha. Lugha ya kuona imejengwa juu ya alama tambarare, zilizochorwa (kingo zilizozunguka katika miduara yenye rangi ya pikseli 2), vipengele vya mapambo dhahania (vipande vilivyochorwa kwa mkono, pambo, mishale, maumbo ya maua), na michoro ya kiolesura cha mtumiaji cha bidhaa. Alama hizo zinaonekana kwenye dirisha kuu kama safu mlalo ya avatari saba na zimetawanyika kwenye ukurasa kama alama za uakifishaji za kucheza. Picha za skrini za bidhaa ndizo vipengele pekee vya kuona "halisi": zinaonyesha kiolesura halisi cha Dhana (mbao za Kanban, mitazamo ya hati, paneli za wakala wa akili bandia) zenye seti kamili ya vipengele na data halisi. Mfano wa bidhaa kwenye dirisha kuu ni mkubwa, katikati, na hutoa kivuli kimoja kinachoitenganisha na turubai. Hakuna picha za mtindo wa maisha, hakuna picha za hisa, hakuna michoro dhahania ya 3D.

Paleti

Chapa

  • Notion Blue #0075de — Kipengele kikuu kinachojaza kitufe cha wito wa kuchukua hatua (CTA), lafudhi katika urambazaji unaotumika, vitufe vya kitendo vilivyojazwa ni mpango pekee wa rangi katika mfumo unaokaribia kuwa monokromu ambao umejaa vya kutosha kuonekana kama swichi.

Isiyoegemea upande wowote

  • Paper Warmth #f6f5f4 — Turubai ya ukurasa, mandharinyuma ya dirisha kuu, na mandharinyuma ya sehemu zote ni rangi za joto na za beige kidogo zinazoipa mfumo hisia ya kugusa na ya analogi.
  • Pure White #ffffff — Nyuso za kadi, paneli zilizoinuliwa, mandharinyuma ya nembo, maandishi tofauti kwenye kadi nyeusi.
  • Ink Black #000000 — Maandishi makuu, viungo vya urambazaji, vichwa vya habari - hutumika kwa uwazi tofauti (100%, 95%, 90%, 60%, 40%, 20%) ili kujenga mpangilio bila kuongeza rangi mpya.
  • Charcoal #111111 — Chaguo la maandishi meusi kwa maeneo ya UI ambapo rangi nyeusi kabisa ingeonekana kali sana.
  • Stone #757575 — Maandishi ya urambazaji wa pili, maandishi ya msaidizi yaliyozimwa, lebo za vitufe zilizozimwa - alfa ya wino ya 60%
  • Graphite #615d59 — Maandishi kuu yana sauti ya joto - kijivu cha hudhurungi, ambacho kinapatana na mandharinyuma ya joto.

Uchapaji

kutoka pikseli 12 hadi 96 · hatua 10

  • NotionInter — mbadala: Inter · mihtasari 400, 500, 600, 700 · Fonti kuu ya sans-serif ni ya kibinadamu yenye umbo dogo, inayotumika katika ukubwa wa 400 kwa maandishi ya mwili, 500 kwa urambazaji/kiolesura cha mtumiaji, na 600-700 kwa vichwa vya habari. Kipimo cha fonti hutumia nafasi kali ya herufi hasi kwa ukubwa mkubwa (-4.6px kwa 96px, -2px kwa 72px), ambayo hufanya kichwa cha habari kihisi kikiwa kidogo na chenye ujasiri zaidi, badala ya kuwa chenye hewa.
  • Lyon Text — mbadala: Source Serif Pro · mihtasari 400 · Fonti ya serif ya uhariri, iliyotengwa kwa ajili ya sehemu moja moja za maandishi kuu na utangulizi wa sehemu, hutumika kwa kiasi kidogo (mara nne) ili kuipatia herufi uzito wa fasihi, sawa na nukuu katika mpangilio wa gazeti. Inafanya kazi kama lafudhi ya kimfumo badala ya mpangilio sambamba.

Vipindi na umbo

KusudiMaana
Uzitowastani
Hatua ya msingi8px
Kipenyo cha kitufe8px
Redi ya kadi12px
Vivulihapana - mipaka badala ya vivuli
Kati ya sehemu80px
Upana wa ukurasa1440px

AI itaunda tovuti yako kwa mtindo wa Notion na kuijaza

  • Jaza bidhaa na machapisho kupitia kiungo - Instagram, TikTok, Facebook.
  • Hamisha maudhui kutoka kwa tovuti yako ya zamani—taja tu anwani.
  • Muundo wa kisasa kwenye injini bora: React ( Next.js) yenye utoaji wa seva na uboreshaji wa SEO bila kuchelewa.
  • Uboreshaji wa SEO kiotomatiki kikamilifu kwa matokeo ya utafutaji na mapendekezo ya mtandao wa neva.

Mitindo inayofanana

  • ElevenLabs — Insha ya picha katika rangi ya krimu yenye umbo la kuvutia na vichwa vya habari hafifu. Daftari la mtindo wa Bauhaus—karatasi yenye rangi ya ganda la yai, wino mweusi, na lafudhi moja ya zambarau na chungwa kwa ajili ya kuonyesha bidhaa.
  • Awesomic — Matundu ya zinki ya uhariri yenye alama za uakifishaji za rangi ya chungwa zinazokumbusha confetti
  • Monad — jarida la kiufundi la uhariri kuhusu ngozi ya joto
  • Dub — Paneli ya kudhibiti karatasi ya mchele isiyong'aa ya Link
  • Seline Analytics — Jedwali la uchanganuzi tulivu kwenye karatasi ya joto
  • Anthropic — Jarida la kisayansi kuhusu vellum yenye joto—nyuso tulivu za pembe za ndovu, vichwa vya habari vya uhariri vilivyoandikwa kwa ufupi, na lafudhi moja ya udongo inayoonekana tu wakati hatua inahitajika.
  • Calendly — Wino wa bluu nyeusi kwenye marumaru baridi
  • Augen Pro — Uwasilishaji mweupe wa Apple una rangi ya bluu ya umeme isiyo na uzito kama lafudhi pekee katika nafasi ya monochrome.
  • Antimetal — Hadithi ya uhariri kwenye karatasi ya krimu—asubuhi tulivu katika jarida la kisayansi, ambapo kujizuia huonyesha kujiamini na masheikh hufanya kazi nzito
  • Perk — Chokaa cha umeme kwenye karatasi ya ngozi yenye joto
  • Ditto — Warsha yenye mwanga wa jua inayounda sampuli za maua ya porini. Nyuso zenye joto za krimu, rangi ya msingi ya manjano inayong'aa, wino wa bluu ya bluu iliyokolea, maumbo ya rangi ya kikaboni yakichanua nyuma ya kipande hicho.
  • Officevibe — Jarida la uhariri kuhusu karatasi ya rangi ya krimu. Hebu fikiria insha yenye mawazo kuhusu usimamizi wa rasilimali watu, iliyowasilishwa kama bidhaa—fonti ya serif yenye mkunjo ikinong'ona kupitia kiolesura cha kisasa cha bluu.