Subframe
Գրաֆիկական նկար տաք մագաղաթի վրա: Դիզայներական թուղթ, որտեղ յուրաքանչյուր հարվածը կամ գրաֆիտ է, կամ ռետին, երբեք ներկ. խորությունը ձեռք է բերվում գծի հաստության և նոսր շերիֆների միջոցով:
Subframe-ը մոնոքրոմ դիզայների աշխատանքային տարածք է՝ տաք, կրեմագույն կտավ, գրաֆիտային սև թանաք և քրոմատիկ շեշտադրումների լիակատար բացակայություն: Ամբողջ ինտերֆեյսը ընկալվում է որպես մեկ նյութ՝ թուղթ, մատիտ և ստվեր՝ մեկ համարձակ տպագրական հպումով. նուրբ սերիֆ (Instrument Serif)՝ համակարգված sans-serif (Inter) ֆոնի վրա, որը խմբագրական լրջություն է հաղորդում վերնագրերին: Մակերեսները հարթ են և շրջանակված, այլ ոչ թե բարձրացված. խորությունը ձեռք է բերվում #e5e7eb բարակ բաժանարարների և մուգ կառավարման տարրերի վրա ներդիր լուսավորությունների միջոցով, այլ ոչ թե ստվերների: Խտությունը առատ է. լայն ուղղահայաց ռիթմ (բաժինների միջև 48–64px բացեր), կենտրոնացված, լրիվ լայնությամբ դասավորություններ և տեքստի շուրջ առատ սպիտակ տարածություն: Միակ գույնը գրեթե սպիտակի և գրեթե սևի միջև հակադրությունն է, ինչը մուգ կոճակը դարձնում է յուրաքանչյուր էջի ամենաակնառու տարրը, իսկ գործընկեր ապրանքանիշերի լոգոների շերտը՝ մոխրագույն երանգներով՝ միակ դեկորատիվ տեսողական տարրը:
Կենտրոնացված, լրիվ լայնությամբ դասավորություններ (1200px)՝ առատ ուղղահայաց ռիթմով: Հիմնական տարրը մեկ, կենտրոնացված բլոկ է. վերևում մուգ, հատվածավորված կառավարման տարր, մեծ «Inter» վերնագիր, մեկ տողանի ենթավերնագիր և երկու հարակից կոճակներ (լցված + կիսաթափանցիկ)՝ առանց կողային պատկերի, առանց դասավորության բաժանման: Հիմնական տարրի տակ կենտրոնացված մոխրագույն երանգի լոգոյի շերտ է: Յուրաքանչյուր հաջորդ բաժին հետևում է նույն ձևանմուշին՝ ձախ կողմում դասավորված վերնագիր և ենթավերնագիր բլոկ, ապա լրիվ լայնությամբ ապրանքի ցուցադրման շրջանակ՝ բաժինների միջև 48–64px միջանկյալ տարածքով: Նավիգացիան նվազագույն է. վերևի գոտի՝ կենտրոնացված հղումներով և աջ կողմում դասավորված գործողություններով, առանց կողային գոտու, առանց մեգա-մենյուի: Էջը վերևից ներքև կարդացվում է որպես կենտրոնացված հայտարարությունների շարք, որոնցից յուրաքանչյուրին տրվում է բավարար տարածք. դասավորությունն ավելի շատ նման է խմբագրական պորտֆոլիոյի, քան զբաղված ապրանքի էջի:
Տեսողական դիզայնը մինիմալիստական և ֆունկցիոնալ է: Համակարգն օգտագործում է երկու տեսողական ռեժիմ՝ (1) շրջանակված արտադրանքի էկրանի նկարներ և UI մակետներ, որոնք տեղակայված են 24px շառավղով շրջանակների մեջ. դրանք ցուցադրում են ինտերֆեյսի իրական բաղադրիչները (աղյուսակներ, կոճակներ, ձևեր), որոնք ներկայացված են նույն մոնոխրոմ պալիտրա մեջ, ինչը էկրանի նկարներն անխափան կերպով ինտեգրում է էջի մեջ. (2) մոխրագույն երանգների գործընկերների լոգոների մեկ շերտը ծառայում է որպես սոցիալական ապացույց, ներկայացված է հարթ, առանց գույնի կամ կոնտեյներների: Չկան ապրելակերպի լուսանկարներ, աբստրակտ գրադիենտներ կամ 3D ռենդերներ: Միակ պատկերազարդ տարրը մուգ արտադրանքի «սալիկն» է, որը կենտրոնացած է տաք մոխրագույն ֆոնի վրա՝ ապրանքանիշի պատկերակով. այն ընկալվում է որպես արտադրանքի ցուցադրություն, այլ ոչ թե զարդարանք: Բոլոր պատկերները զբաղեցնում են տեքստային դասավորություն, որտեղ տեսողական կշիռը կրում է տեքստը:
Պալիտրա
Չեզոք
- Page Canvas
#fafafa— Էջի ֆոնը, կտավի վրա բացիկը, մուգ մակերեսների վրա բաց տեքստը՝ տաք սպիտակ գույնը, որը հիմքում ընկած է ամբողջ մոնոքրոմ համակարգի։ - Hairline Border
#e5e7eb— Բաժանիչներ, քարտի եզրագծեր, պատկերի շրջանակներ, պատկերակի ուրվագծեր՝ համակարգում ամենատարածված ուրվագծերի տեսակը, որը սահմանում է տարածական կառուցվածքը։ - Card Surface
#ededed— Բարձրացված ֆոն քարտերի համար, լրացուցիչ մակերես - գտնվում է կտավից մեկ քայլ վերև, ստեղծելով խմբավորում առանց ստվերների: - Divider Mid
#dadada— Միջին տոների բաժանիչներ և հատվածների միջև անցումներ - Graphite
#242424— Բարձր կոնտրաստային չեզոք լցոնում բաց մակերեսների վրա գտնվող հիմնական կոճակների համար։ - Ink Black
#171717— Հիմնական տեքստը, վերնագրերը, պատկերակների ուրվագծերը մի փոքր ավելի զով են, քան Graphite-ը, որն օգտագործվում է տպագրության համար, այլ ոչ թե մակերեսների։
Տպագրություն
12-ից մինչև 128px · 7 քայլ
- Inter — փոխարինում: Inter (Google Fonts) · ուրվագծեր 500, 600, 700 · Sans-serif համակարգի ինտերֆեյս՝ նավիգացիա, հիմնական տեքստ, կոճակներ, ենթավերնագրեր և բաժինների վերնագրեր: Քաշը՝ 500 հիմնական տեքստի և կառավարման տարրերի համար, 600 ենթավերնագրերի և նավիգացիոն շեշտադրումների համար և 700 բաժինների վերնագրերի համար: Տառերի միջև ուժեղ բացասական հեռավորությունը սեղմում է ցանկացած չափի երկրաչափական ձևերը՝ ինտերֆեյսին տալով համառոտ, տեխնիկական տեսք:
- Instrument Serif — փոխարինում: Playfair Display · ուրվագծեր 400 · Սերիֆ տառատեսակ, որը նախատեսված է բացառապես վերնագրերի և խմբագրական բովանդակության համար: Դրա 400 քաշը և -0.025 em տառային հեռավորությունը ստեղծում են նրբագեղ, թեքատառ տեսք, որը հակադրվում է Inter-ի արդյունաբերական երկրաչափությանը. սա ստորագրության տեխնիկա է. մեկ սերիֆ բառ կամ արտահայտություն sans-serif էջում, որը ծառայում է որպես տեսողական կետադրություն, այլ ոչ թե վերնագրի ոճ:
- Fragment Mono — փոխարինում: JetBrains Mono · ուրվագծեր 400 · Accent mono՝ ներկառուցված կոդանման տարրերի, պիտակների և տեխնիկական կոչերի համար: Օգտագործվում է խնայողաբար, այն հայտնվում է ֆունկցիաների ցանկերում և ներկառուցված ծանոթագրություններում, որտեղ դիզայնի գործիքը ցանկանում է նշել «սա մեքենայի արդյունք է»:
Ժամանակահատվածներ և ձև
| Նպատակ | Նշանակություն |
|---|---|
| Խտություն | միջին |
| Հիմնական քայլ | 8px |
| Կոճակի շառավիղ | 16px |
| Քարտի շառավիղ | 24px |
| Ստվերներ | ստվերների փոխարեն՝ առանց սահմանների |
| Բաժինների միջև | 64px |
| Էջի լայնությունը | 1200px |
Արհեստական բանականությունը կկառուցի ձեր կայքը Subframe ոճով և կլրացնի այն
- Լրացրեք ապրանքներով և գրառումներով՝ հղումով - Instagram, TikTok, Facebook:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- monopo saigon — Խմբագրական լռության ետևում հեղուկ, ծիածանափայլ լույս՝ հալված լույսի վրա լողացող մոնոքրոմ խմբագրական պատկերասրահ։
- Hyer Aviation — Մթնշաղ՝ մագաղաթի վրա, խցիկում։ Լուսաբացի գունատ երկինքը հանդիպում է ֆյուզելյաժի չափի շերիֆային լոգոյին, և մեկ տաք կավե շեշտադրումը խախտում է միագույն զսպվածությունը։
- OFF+BRAND. — Ծիածանագույն գունդ տաք մագաղաթի վրա
- Seed — Կենդանի օրգանիզմ լաբորատոր ապակու տակ
- Eindhoven Design District — Սպիտակ թղթի վրա խմբագրական բրուտալիզմը քաղաքային դիզայնի մանիֆեստ է, որը կատարվել է խոշոր տառատեսակով, նվազագույն լուսանկարչությամբ և բացարձակ զսպվածությամբ։
- Miranda — Դասական լայնաֆորմատ տառատեսակ բաց կրեմագույն ֆոնի վրա՝ թվային դարաշրջանի թերթի խմբագրական հոդված
- Monocle — Բարձրորակ, լայնաֆորմատ թերթ՝ կրեմագույն թղթի վրա: Ուշադիր մշակված խմբագրական, որտեղ յուրաքանչյուր սյունակ արժանի է իր տեղին, և էջում հայտնվում է միայն մեկ նշանակալից գույն:
- Agencja brandingowa — Խմբագրական պատկերասրահ սպիտակ երանգներով՝ սև թանաքով տպագրությամբ
- Websmith Studio — Առավոտյան լույս կրեմի թղթի վրա
- Aspelin Reitan — Ճարտարապետական արխիվ՝ Candlelight-ի կողմից - Էջը նման է կառուցված տարածքների պորտֆոլիոյի, որը ամրացված է տաք կրեմագույն պատին, իսկ յուրաքանչյուր պատկերի վերևում, էջի ամբողջ լայնությամբ, լողում է սպիտակ տեքստի մեկ տող։
- Public — Միագույն խմբագրական սառը մարմարի վրա՝ գրեթե միագույն կտավ, 300 կետանոց սերիֆ տառատեսակով և միակ մանուշակագույն շեշտադրմամբ, որը կատարում է ամբողջ գունային աշխատանքը։
- Motto — Տպագրական մոնոլիտ թղթի վրա՝ մեկ, վստահ ձայն, որը հայտարարում է ձյունաճերմակ թղթի վրա