Substack
նարնջագույն թանաք խմբագրատան սեղանին
Substack-ը նման է լրատվական սենյակի մաշված վահանակի՝ սպիտակ կտավ, տաք, գրեթե սև տեքստ և մեկ վառ նարնջագույն շեշտադրում, որը նշում է բովանդակության ստեղծման յուրաքանչյուր փուլը: Տեսողական հիերարխիան կառուցված է խտության, այլ ոչ թե զարդարանքի վրա. բարակ մոխրագույն գծերը առանձնացնում են լրահոսի տարրերը, ավատարները փոքր են, մետատվյալները՝ խլացված, և ընթերցողի աչքը մարզված է կենտրոնանալու նարնջագույն կոչի, նարնջագույն լոգոյի, նարնջագույն «Բաժանորդագրվել» հղման և նարնջագույն «Ստեղծել» կոճակի վրա: Մակերեսները պահվում են հարթ և անսահմանափակ՝ առանց քարտի ստվերների, առանց Chrome վահանակի տարրերի՝ թույլ տալով, որ տպագրությունը (քրոմի համակարգի կոմպակտ UI տարր՝ զուգորդված հատուկ serif վերնագրի տառատեսակի հետ) կրի խմբագրական ծանրության հիմնական մասը: Ստորագրության ոճը զուսպ Chrome տարրերն են և վառ, միագույն շեշտադրումները. ընթերցանության հավելված, որը զգացվում է որպես հրատարակչական գործիք:
Եռասյունակ աշխատասեղանի դասավորություն՝ ձախ կողային վահանակի ֆիքսված տարբերակ (մոտ 200 պքս, նավիգացիա պատկերակներով և պիտակներով, կպչուն), կենտրոնական էջ (առավելագույն լայնությունը՝ մոտ 600 պքս, գրառումների ուղղահայաց գլորվող ցանկ) և աջ կողային վահանակի ֆիքսված տարբերակ (մոտ 300 պքս, որոնում + առաջարկություններ + գրանցում): Կենտրոնական էջը խմբագրական միջուկն է՝ քարտեր չկան, միայն գրառումներ՝ միմյանց վրա դարսված՝ բարակ բաժանիչներով և բաժինների միջև 32 պքս բացերով: Գլխավոր բանները տեղադրված է էջի վերևում՝ որպես մեկ լիարժեք լայնությամբ քարտ: Ձախ կողային վահանակը պարունակում է ապրանքանիշի լոգոն (նարնջագույն նշան՝ վերադրված գծերով), վեց նավիգացիոն տարրեր և ներքևի մասում լիարժեք լայնությամբ նարնջագույն «Ստեղծել» կոճակը: Աջ կողային վահանակը պարունակում է որոնման դաշտ, գրանցման քարտ և «Հաջորդը» ցանկ՝ ընթերցման համար: Նավիգացիան նվազագույն է՝ վերին վահանակ չկա, հացի փշրանքներ չկան. կողային վահանակը նավիգացիան է: Բովանդակության խտությունը բարձր է. գրառումները օգտագործում են 12-13 պքս մետատվյալներ և 15-19 պքսել մարմնի տեքստ՝ ստեղծելով թերթանման ռիթմ, այլ ոչ թե շուկայի քարտային ցանցի զգացողություն:
Լուսանկարները օգտատիրոջ կողմից ստեղծված բովանդակություն են (հեղինակի ավատարներ, գրառումների մանրապատկերներ, գրառումների պատկերներ): Substack-ը չի տրամադրում իր սեփական դեկորատիվ լուսանկարներ: Հիմնական քարտը օգտագործում է փիրուզագույնից մինչև կանաչ գրադիենտ՝ որպես ֆոն աբստրակտ նկարազարդ տարրերով (երկրաչափական ձևեր, ոճավորված առարկաներ, ինչպիսիք են գրիչները և նշումները): Աջ կողային վահանակում գտնվող գրառումների մանրապատկերները փոքր են (64px), շրջապատված են 8px շառավղով և ծառայում են որպես ընթերցանության ցանկի նախադիտում: Ընդհանուր տեսողական լեզուն տեքստային է. ինտերֆեյսը ընթերցանության կտավ է, և պատկերները ծառայում են որպես փոքր տեսողական խարիսխներ, այլ ոչ թե մթնոլորտ են ստեղծում:
Պալիտրա
Բրենդ
- Signal Orange
#ff6719— Նարնջագույնը օգտագործվում է որպես երկրորդական շեշտադրում՝ դեկորատիվ մանրամասների և հազվադեպ հանդիպող ազդանշանները ընդգծելու համար։ Այն չպետք է օգտագործվի որպես գործողության կոչերի հիմնական գույն։
Չեզոք
- Ink
#363737— Հիմնական տեքստ՝ հիմնական տեքստը, վերնագրերը, գրառումների վերնագրերը, ժամանակային նշագրերը և հեղինակների անունները։ Ավելի հեշտ ընթերցման համար օգտագործվում է տաք, գրեթե սև գույն՝ մաքուր #000-ի փոխարեն։ - Paper
#ffffff— Էջի կտավը, քարտի մակերեսները, մուտքագրման դաշտերը և նավիգացիոն ֆոնը գերիշխող մակերեսներն են, որոնք զբաղեցնում են ինտերֆեյսի մեծ մասը։ - Charcoal
#232525— Բարձր ընտրության մակարդակներով լրացուցիչ տեքստի և հղումների համար պահեք մկնիկի կուրսորը պահած վիճակում, իսկ կոդի բլոկների և ընտրության բլոկների համար՝ թանաքի ռեժիմից ավելի խորը։ - Stone
#777777— Երկրորդական UI տարրերի, բաժանարարների և լռեցված պիտակների համար աջակցվում է չեզոք գույն։ Այն չպետք է օգտագործվի որպես գործողության կոչերի հիմնական գույն։ - Ash
#b6b6b6— Բարակ եզրագծեր, կոճակների ուրվագծեր, պատկերակների ուրվագծեր, անջատված կառավարման տարրերի եզրագծեր։ - Mist
#c8c8c8— Բաժանարար գծեր, պատկերակների համար աննկատ ֆոն, դատարկ բջիջները լրացնելով կմախքի տեսքով։
Տպագրություն
12-ից մինչև 32px · 5 քայլ
- system-ui — փոխարինում: -apple-system · ուրվագծեր 400, 500, 600 · Օգտատիրոջ ինտերֆեյսի և հիմնական տեքստի հիմնական տառատեսակն օգտագործվում է նավիգացիոն պիտակների, կոճակների, հաղորդագրության տեքստի, մետատվյալների, մուտքագրման դաշտերի և ինտերֆեյսի բոլոր տարրերի համար: Մետատվյալների համար 12-13px և հիմնական տեքստի համար 15-19px կոմպակտ չափերը ստեղծում են խիտ նորությունների հոսքի զգացողություն: Հիմնական տեքստի համար քաշը կազմում է 400, նավիգացիոն տարրերի և կոճակների պիտակների համար՝ 500, իսկ ընդգծված հաղորդագրությունների վերնագրերի և բաժինների վերնագրերի համար՝ 600:
- Cahuenga — փոխարինում: Charter · ուրվագծեր 500 · Արտադրանքի մակարդակի վերնագրերի համար նախատեսված դեկորատիվ սերիֆ տառատեսակ (կողային վահանակի վերնագրեր, գրանցման քարտի վերնագրեր, հիմնական տեքստ): Միջին հաստությունը և գծի թեթև բարձրությունը այն հաղորդում են առանձնահատուկ տեսք՝ առանց ծանրության զգացողության. սա միակ տառատեսակն է, որը, բացի նարնջագույն գույնից, ցույց է տալիս Substack-ի ինքնությունը:
- Spectral — փոխարինում: Charter · ուրվագծեր 400 · Երկար գրառումների համար նախատեսված սերիֆ տառատեսակ՝ օգտագործվում է ընթերցասրահներում և լրատվական հոսքերի բովանդակության մեջ՝ խմբագրական նյութերի ընթեռնելիությունը բարելավելու համար: Տողերի միջև մի փոքր ավելի նեղ հեռավորությունը (1.20) ապահովում է պարբերությունների հարմարավետ ընթերցում՝ միաժամանակ պահպանելով լրատվական սենյակներին բնորոշ կոմպակտությունը:
Ժամանակահատվածներ և ձև
| Նպատակ | Նշանակություն |
|---|---|
| Խտություն | խիտ |
| Հիմնական քայլ | 8px |
| Կոճակի շառավիղ | 9999px |
| Քարտի շառավիղ | 12px |
| Ստվերներ | ստվերների փոխարեն՝ առանց սահմանների |
| Բաժինների միջև | 32px |
| Էջի լայնությունը | 1200px |
Արհեստական բանականությունը կկառուցի ձեր կայքը Substack ոճով և կլրացնի այն
- Լրացրեք ապրանքներով և գրառումներով՝ հղումով - Instagram, TikTok, Facebook:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- Mollie — Քաշմիրե սեղան, մուգ գրանցամատյան: Սև տեքստի շուրջ թողեք բավարար սպիտակ տարածք խմբագրական դիզայնի համար, այնուհետև ընդգծեք ապրանքին վերաբերող կետերը տաք կրեմներով, էսպրեսո բրաուններով և իրական վճարման մեթոդների շոշափելի լուսանկարներով:
- Kagi — Առանձին ընթերցասրահ։ Ստեղծեք բաց սպիտակ տարածք համարձակ գրաֆիտային տեքստի շուրջ՝ օգտագործելով նուրբ մանուշակագույն շեշտադրումներ և տաք պաստելային մակերեսներ՝ անդորրը խախտելու համար։
- Milanote — Milanote-ը նվիրված ստեղծագործական ստուդիա է: Ստեղծեք խմբագրական պատկերասրահի ոճի էջեր՝ օգտագործելով լողացող տեսողական տախտակներ՝ մուգ շրջանակված պատեր, սպիտակ ցուցադրման տարածք և էկրանի լուսանկարներ, որոնք նման են իրական առարկաների՝ մեղմ խորությամբ:
- Co2 — Կլիմայական ատլաս ձմեռային լույսի ներքո: Ստեղծեք էջեր, որոնք նման են օդային փաստաթղթի լանդշաֆտի, որտեղ սերիֆ վերնագրերը, կատեգորիայի կոդավորված տվյալները և սառցե պատկերները ընդգծում են լայն սպիտակ եզրերը:
- GitButler — Փիրուզագույն՝ տեքստի վերջում։ Բարձր կոնտրաստային սերիֆային վերնագրերի համադրություն՝ նուրբ տեխնիկական ցանցերով, տաք գրաֆիտային մակերեսներով և աննկատ փիրուզագույն շեշտադրմամբ։
- ElevenLabs — Լուսանկարչական ակնարկ տաք կրեմագույն երանգներով՝ նուրբ վերնագրերով: Բաուհաուսի ոճի տետր՝ ձվի կճեպի գույնի թուղթ, սև թանաք և մեկ մանուշակագույն ու նարնջագույն շեշտադրում ապրանքի ցուցադրման համար:
- Awesomic — Խմբագրական ցինկե ցանց՝ կոնֆետի հիշեցնող նարնջագույն կետադրական նշաններով
- Monad — խմբագրական տեխնիկական ամսագիր տաք մագաղաթի վրա
- Dub — Link-ի մատ բրնձե թղթի կառավարման վահանակ
- Seline Analytics — Հանգիստ վերլուծական սեղան տաք թղթի վրա
- Notion — Տաք թղթե տետր կեսօրվա արևի տակ
- Anthropic — Գիտական դաշտային ամսագիր տաք մագաղաթի մասին՝ հանգիստ փղոսկրե մակերեսներով, սերիֆացված խմբագրական վերնագրերով և կավե միակ շեշտադրմամբ, որը հայտնվում է միայն այն ժամանակ, երբ անհրաժեշտ է գործողություն։