Notion
Տաք թղթե տետր կեսօրվա արևի տակ
Notion-ի ինտերֆեյսը լայն ցերեկով նման է սիրված թղթե տետրակի. տաք, կրեմագույն կտավ (#f6f5f4), որը շոշափելի է թվում, այլ ոչ թե ստերիլ, առատաձեռն sans-serif տպագրությունը խմբագրական կշիռ է հաղորդում ապրանքի տեքստին, իսկ գույնը օգտագործվում է որպես նոսր կետադրություն. դեղձագույն «հաբերը» ընդգծում են բայերը, մեկ կապույտը խարիսխ է դնում հիմնական գործողության վրա, իսկ շեշտադրման գույների պտտվող շարքը (մարջան, սաթ, երկինք, կեսգիշեր) գունավորում է քարտերի ֆոնը՝ ինչպես կպչուն պիտակներ: Քարտերը դասավորված են կտավի վրա բարակ եզրագծերով և անկյուններով՝ առանց ստվերների, առանց քրոմի՝ ինչպես Moleskine տետրերի գծավոր հատվածները: Անիմացիան խաղային և առաձգական է, 200 մվրկ-ի սահուն անցումներով և առաձգական կերպարների անիմացիաներով, որոնք կենդանություն են հաղորդում ինտերֆեյսին՝ առանց դեկորատիվ լինելու:
Կենտրոնացված, առավելագույն լայնությունը սահմանափակված է մոտավորապես 1440px-ով: Հիմնական տարրը կենտրոնացված կույտ է՝ խորհրդանիշների շարք → մեծ երկտողանի վերնագիր՝ ներկառուցված գունավոր հաբով → ենթավերնագիր → տող՝ երկու գործողության կոչ անող կոճակներով → մեծ ապրանքի ինտերֆեյսի մակետ: Հիմնական տարրի տակ բաժինները հերթագայվում են սպիտակ քարտերի ցանցերի և լիարժեք գունավոր շեշտադրական վահանակների միջև: Լոգոյի պատը կենտրոնացված միաշարք ցանց է՝ գործընկերների լոգոների մոխրագույն երանգներով: Հատկանիշների բլոկները օգտագործում են երկսյունակ դասավորություն (տեքստը՝ ձախ կողմում, գունավոր վահանակը՝ աջ կողմում), բաժինների միջև հերթագայելով ձախից աջ: «Հարցրեք ձեր օգնականներին պահանջարկի դեպքում» բաժինը օգտագործում է 2x2 քարտերի ցանց, որտեղ վերին քարտը զբաղեցնում է ամբողջ լայնությունը, իսկ ներքևի տողը բաժանված է երկու հավասար սյուների: Բաժինների միջև եղած ջրհեղեղները մեծ են (~80px), ստեղծելով հանգիստ ուղղահայաց ռիթմ: Նավիգացիան ֆիքսված 64px բարձրությամբ վերին գոտի է՝ կենտրոնացված նավիգացիոն տարրերով և աջ կողմում հավասարեցված գործողության կոճակներով:
Նկարազարդումները գերակա են՝ առանց լուսանկարների: Տեսողական լեզուն կառուցված է հարթ, նկարազարդ խորհրդանիշների (կլորացված եզրեր 2px գունավոր շրջանակների մեջ), աբստրակտ դեկորատիվ տարրերի (ձեռքով նկարված ոլորապտույտներ, փայլեր, նետեր, ծաղկային ձևեր) և ապրանքի օգտագործողի ինտերֆեյսի մակետների վրա: Սիմվոլները գլխավոր պատուհանում հայտնվում են որպես յոթ ավատարների հորիզոնական շարք և ցրված են էջում որպես խաղային կետադրական նշաններ: Արտադրանքի էկրանի նկարները միակ «իրական» տեսողական տարրերն են. դրանք ցույց են տալիս իրական Notion ինտերֆեյսը (Kanban տախտակներ, փաստաթղթերի տեսքեր, արհեստական բանականության գործակալների վահանակներ)՝ տարրերի և իրական տվյալների ամբողջական հավաքածուով: Գլխավոր պատուհանում ապրանքի մակետը մեծ է, կենտրոնացված և կտավից բաժանում է մեկ ստվեր: Չկան ապրելակերպի լուսանկարներ, արխիվային պատկերներ, աբստրակտ 3D ռենդերներ:
Պալիտրա
Բրենդ
- Notion Blue
#0075de— Գործողության կոչի (CTA) կոճակը լրացնող հիմնական տարրը, ակտիվ նավիգացիայի շեշտադրումը, լցված գործողության կոճակները գրեթե մոնոխրոմ համակարգում միակ գունային սխեման են, որը բավականաչափ հագեցած է որպես անջատիչ ընկալվելու համար։
Չեզոք
- Paper Warmth
#f6f5f4— Էջի կտավը, գլխավոր պատուհանի ֆոնը և բաժնի ֆոնը բոլորը տաք, թեթևակի բեժ գույներով են, որոնք համակարգին հաղորդում են շոշափելի, անալոգային զգացողություն։ - Pure White
#ffffff— Քարտի մակերեսներ, ուռուցիկ վահանակներ, լոգոյի ֆոն, մուգ քարտերի վրա հակապատկեր տեքստ։ - Ink Black
#000000— Հիմնական տեքստը, նավիգացիոն հղումները, վերնագրերը - օգտագործվում են տարբեր թափանցիկությամբ (100%, 95%, 90%, 60%, 40%, 20%)՝ առանց նոր գույներ ավելացնելու հիերարխիա կառուցելու համար։ - Charcoal
#111111— Մուգ տեքստի տարբերակ այն ինտերֆեյսի հատվածների համար, որտեղ մաքուր սևը չափազանց կոպիտ տեսք կունենար։ - Stone
#757575— Երկրորդական նավիգացիոն տեքստ, անջատված օժանդակ տեքստ, անջատված կոճակների պիտակներ - 60% թանաքային ալֆա - Graphite
#615d59— Հիմնական տեքստն ունի տաք երանգ՝ շագանակագույն-մոխրագույն, որը ներդաշնակվում է տաք ֆոնի հետ։
Տպագրություն
12-ից մինչև 96px · 10 քայլ
- NotionInter — փոխարինում: Inter · ուրվագծեր 400, 500, 600, 700 · Հիմնական sans-serif տառատեսակը երկրաչափական հումանիստական է՝ նուրբ նրբերանգներով, որն օգտագործվում է 400 չափսերով՝ հիմնական տեքստի համար, 500՝ նավիգացիայի/օգտատիրոջ ինտերֆեյսի համար և 600-700՝ վերնագրերի համար: Տառատեսակի սանդղակը օգտագործում է ագրեսիվ բացասական տառային հեռավորություն ավելի մեծ չափերի դեպքում (-4.6px՝ 96px-ի դեպքում, -2px՝ 72px-ի դեպքում), ինչը վերնագիրը դարձնում է ավելի կոմպակտ և վստահ, քան թեթև:
- Lyon Text — փոխարինում: Source Serif Pro · ուրվագծեր 400 · Խմբագրական սերիֆ տառատեսակը, որը նախատեսված է հիմնական տեքստի առանձին բաժինների և բաժինների նախաբանների համար, օգտագործվում է խնայողաբար (չորս անգամ)՝ տառատեսակին գրական կշիռ հաղորդելու համար, նման ամսագրի դասավորության մեջ մեջբերմանը։ Այն գործում է որպես համակարգային շեշտադրում, այլ ոչ թե զուգահեռ հիերարխիա։
Ժամանակահատվածներ և ձև
| Նպատակ | Նշանակություն |
|---|---|
| Խտություն | միջին |
| Հիմնական քայլ | 8px |
| Կոճակի շառավիղ | 8px |
| Քարտի շառավիղ | 12px |
| Ստվերներ | ստվերների փոխարեն՝ առանց սահմանների |
| Բաժինների միջև | 80px |
| Էջի լայնությունը | 1440px |
Արհեստական բանականությունը կկառուցի ձեր կայքը Notion ոճով և կլրացնի այն
- Լրացրեք ապրանքներով և գրառումներով՝ հղումով - Instagram, TikTok, Facebook:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- Mollie — Քաշմիրե սեղան, մուգ գրանցամատյան: Սև տեքստի շուրջ թողեք բավարար սպիտակ տարածք խմբագրական դիզայնի համար, այնուհետև ընդգծեք ապրանքին վերաբերող կետերը տաք կրեմներով, էսպրեսո բրաուններով և իրական վճարման մեթոդների շոշափելի լուսանկարներով:
- Kagi — Առանձին ընթերցասրահ։ Ստեղծեք բաց սպիտակ տարածք համարձակ գրաֆիտային տեքստի շուրջ՝ օգտագործելով նուրբ մանուշակագույն շեշտադրումներ և տաք պաստելային մակերեսներ՝ անդորրը խախտելու համար։
- Milanote — Milanote-ը նվիրված ստեղծագործական ստուդիա է: Ստեղծեք խմբագրական պատկերասրահի ոճի էջեր՝ օգտագործելով լողացող տեսողական տախտակներ՝ մուգ շրջանակված պատեր, սպիտակ ցուցադրման տարածք և էկրանի լուսանկարներ, որոնք նման են իրական առարկաների՝ մեղմ խորությամբ:
- Co2 — Կլիմայական ատլաս ձմեռային լույսի ներքո: Ստեղծեք էջեր, որոնք նման են օդային փաստաթղթի լանդշաֆտի, որտեղ սերիֆ վերնագրերը, կատեգորիայի կոդավորված տվյալները և սառցե պատկերները ընդգծում են լայն սպիտակ եզրերը:
- GitButler — Փիրուզագույն՝ տեքստի վերջում։ Բարձր կոնտրաստային սերիֆային վերնագրերի համադրություն՝ նուրբ տեխնիկական ցանցերով, տաք գրաֆիտային մակերեսներով և աննկատ փիրուզագույն շեշտադրմամբ։
- ElevenLabs — Լուսանկարչական ակնարկ տաք կրեմագույն երանգներով՝ նուրբ վերնագրերով: Բաուհաուսի ոճի տետր՝ ձվի կճեպի գույնի թուղթ, սև թանաք և մեկ մանուշակագույն ու նարնջագույն շեշտադրում ապրանքի ցուցադրման համար:
- Awesomic — Խմբագրական ցինկե ցանց՝ կոնֆետի հիշեցնող նարնջագույն կետադրական նշաններով
- Monad — խմբագրական տեխնիկական ամսագիր տաք մագաղաթի վրա
- Dub — Link-ի մատ բրնձե թղթի կառավարման վահանակ
- Seline Analytics — Հանգիստ վերլուծական սեղան տաք թղթի վրա
- Anthropic — Գիտական դաշտային ամսագիր տաք մագաղաթի մասին՝ հանգիստ փղոսկրե մակերեսներով, սերիֆացված խմբագրական վերնագրերով և կավե միակ շեշտադրմամբ, որը հայտնվում է միայն այն ժամանակ, երբ անհրաժեշտ է գործողություն։
- Calendly — Մուգ կապույտ թանաք սառը մարմարի վրա