Dub
Link-ի մատ բրնձե թղթի կառավարման վահանակ
Դաբի տեսողական համակարգն ունի զուսպ, գրեթե խմբագրական SaaS գեղագիտություն. գրեթե սպիտակ կտավ, որը միացված է բարակ եզրագծերով, այլ ոչ թե ցցված տարրերով, խիտ մոնոխրոմ տիպոգրաֆիայով, որը ապահովում է կառուցվածքային հենարան, և մեկ վառ կապույտ գույնով (#2563eb), որը տպավորիչ է: Առաջին հայացքից մակերեսները մնում են հարթ և առանց շրջանակի, բայց յուրաքանչյուր տարա ունի 1px #e5e5e5 լուսանցք, որը հիշեցնում է տպագիր փաստաթղթի զգացողությունը: Անհատականությունը ձեռք է բերվում գունավոր «հաբերի» շեշտադրումների փոքր հավաքածուի (նարնջագույն, կանաչ, մանուշակագույն), որոնք լողում են չեզոք պալիտրա վերևում, և վերնագրերի միջոցով, որոնք վստահ և ժամանակակից են թվում՝ առանց աչքի ընկնելու: Բաղադրիչները կոմպակտ և խիտ են. 8px ջրահեռացման համակարգ, 12px քարտի շառավղ, 9999px հաբերի տեսքով պիտակներ և անտեսանելի կառավարման տարրեր՝ ծանր, լցված կոճակների փոխարեն:
Էջը կառուցված է կենտրոնացված դասավորության վրա՝ մոտավորապես 1200px առավելագույն լայնությամբ: Հիմնական տարրը կենտրոնացված տեքստային բլոկ է՝ երեք լողացող տարրերով (գործընկերային ծրագրեր, փոխակերպման վերլուծություն, կարճ հղումներ), որոնք հորիզոնական դիրքով տեղակայված են մեծ ապրանքի դասավորության վերևում: Բաժինները դասավորված են ուղղահայաց՝ համապատասխան 64px ջրատարներով, որոնք հերթագայում են սպիտակ կտավի և #f5f5f5f5 թղթի մշուշը՝ տոնային տարանջատման համար: Ներքևի հատվածն օգտագործում է Z-աձև դասավորություն. խմբագրական տեքստը կենտրոնացված է միջին երրորդում, իսկ լողացող UI քարտերը ամրացված են ձախ և աջ եզրերին՝ ստեղծելով ասիմետրիկ, ամսագրանման ռիթմ: Լոգոյի ամպը պարզ 5x2 ցանց է, որը կենտրոնացված է էջի վրա: Նավիգացիան մինիմալիստական վերին գոտի է՝ ձախ կողմում լոգոն, կենտրոնում՝ նավիգացիա, աջ կողմում՝ երկու կոճակների խումբ («Մուտք գործել» ուրվական կոճակ + լրացված «Գրանցվել» կոճակ)՝ առանց ֆիքսված կամ մեգա-մենյուի: Գլխավոր պատուհանի վահանակի դասավորությունը ցուցադրում է դասական երկսյունակ հավելվածի դասավորություն՝ ֆիքսված կողային վահանակ (նման է 240px-ի) + բովանդակության տարածք, որը սահմանում է ապրանքի տեղեկատվության խտությունը այցելուների համար, նախքան նրանք կսկսեն սքրոլ անել։
Վիզուալները կենտրոնացած են ապրանքի, այլ ոչ թե կենսակերպի վրա: Գլխավոր էկրանը կենտրոնացած է մեծ վահանակի էկրանի նկարի վրա, որը ներկայացնում է իրական աշխարհի ապրանքի մակետ՝ կողային վահանակի նավիգացիայով, տվյալների աղյուսակով և լողացող UI տարրերով, որոնք դասավորված են որպես հարթ վահանակ սպիտակ կտավի վրա: Հաճախորդների լոգոները ցուցադրվում են անհագեցած մոխրագույն ցանցի տեսքով (beehiv, superpower, Chatbase և այլն)՝ նրանց սոցիալական մեդիայի կատարողականը գնահատելու համար, որոնք զրկված են գույնից՝ էջի միակ կապույտ շեշտադրումը գերիշխող մնալու համար: Լողացող գործընկերային քարտերը (փոքր պրոֆիլներ և սալիկներ՝ եկամուտների/վճարումների տվյալներով) շարժվում են խմբագրական տեքստի բլոկների շուրջ ներքևի մասում՝ ստեղծելով խորության զգացողություն՝ առանց տեքստի վրա ստվերների օգտագործման: Կետավոր ցանցի ֆոնային նախշը ստորագրության առանձնահատկություն է. շատ ցածր անթափանցիկությամբ փոքր կետերի բարակ շարքը ստեղծում է հյուսվածք և դիզայնի համակարգի/նկարչական մակերեսի զգացողություն՝ ընդգծելով կայքի դիրքավորումը որպես «ժամանակակից հղումների վերագրման հարթակ»: Պատկերագրությունը մինիմալիստական է՝ ուրվագծերով և լրացումներով, և օգտագործում է շեշտադրումների պալիտրա (մանդարինի նարնջագույն, նարդոսի մանուշակագույն, անանուխի կանաչ)՝ առանձնահատկությունների պիտակների համար: Լուսանկարներ, նկարազարդումներ կամ եռաչափ մոդելներ չեն օգտագործվում. ապրանքի օգտագործողի ինտերֆեյսն ինքնին տեսողական լեզու է։
Պալիտրա
Բրենդ
- Electric Blue
#2563eb— Օգտագործվում է ապրանքանիշի հիմնական գույնը՝ լոգոն, հղումները, հիմնական ցուցանիշները, ակտիվ վիճակները և պատկերակների շեշտադրումները: Սպիտակ ֆոնի վրա հարուստ կապույտը ստեղծում է համակարգի միակ տեսողական գրավչությունը: - Deep Sapphire
#1e40af— Գործողության կոճակի հիմնական ֆոնը՝ գործողության կոչի թավատառ լրացումը, որը գործողությունը նշող միակ գույնն է, օգտագործվում է խնայողաբար՝ ուշադրություն գրավելու համար։
Չեզոք
- Canvas White
#ffffff— Էջի ֆոնը, քարտի մակերեսը, ցատկող վահանակները յուրաքանչյուր էկրանի բացարձակ հիմքն են։ - Paper Mist
#f5f5f5— Ներդիր քարտերի, լրացուցիչ վահանակների և լցոնումների համար գույնի նուրբ փոփոխություններ՝ մկնիկի կուրսորը պահելով։ - Ash
#e5e5e5— Քարտերի, մուտքային միակցիչների և բաժանարարների բարակ եզրագծերը համակարգը միասին պահող կառուցվածքային գիծն են։ - Smoke
#d4d4d4— Ընտրված կոնտեյներների համար ավելի սուր եզրագծեր և լրացուցիչ կոճակների ուրվագծեր։ - Pebble
#c8c8c8— Միջին կոնտրաստով եզրագծեր, կառավարման ուրվագծեր և կառուցվածքային բաժանիչներ: Այս գույնը չպետք է օգտագործվի որպես գործողության կոչերի հիմնական գույն: - Midnight Ink
#0a0a0a— Կոճակների հիմնական տեքստը, ընդգծված կոճակները և նավիգացիոն տեքստը գրեթե սև են՝ առավելագույն հակադրության համար։
Տպագրություն
11-ից մինչև 48px · 9 քայլ
- Satoshi — փոխարինում: Inter (weight 500 · ուրվագծեր 500 · Վերնագրերի ցուցադրում – օգտագործվում է միայն 36–48px տողերով՝ վերնագրերի և բաժինների վերնագրերի համար: Տառատեսակի քաշը՝ 500 (միջին, ոչ թավ): Վերնագրերը վստահ և ժամանակակից տեսք ունեն, բայց երբեք չափազանց ուժեղ չեն: Սատոշիի երկրաչափական համամասնությունները տառատեսակին հաղորդում են մի փոքր խմբագրական, ժամանակակից տեսք, որը Inter-ի հիմնական տեքստը չի կարող վերարտադրել:
- Inter — փոխարինում: Inter (native) · ուրվագծեր 400, 500, 600 · Մարմնի տեքստ, UI պիտակներ, նավիգացիա, ենթավերնագրեր և երկրորդական վերնագրեր: Inter-ը հիմնական աշխատանքային ձին է, որը մշակում է ամեն ինչ՝ 11px միկրո-պիտակներից մինչև 30px երկրորդական վերնագրեր: Մարմնի տեքստի համար լռելյայն կշիռը 400 է, ընդգծված տարրերի և կոճակների պիտակների համար՝ 500, իսկ կարևոր UI պիտակների համար՝ 600: 16px-ը 1.5 գծի բարձրությամբ ամենատարածված միաքայլ չափսն է (1220 հանդիպում), ինչը հաստատում է, որ 16px-ը կանոնիկ մարմնի տեքստի չափսն է:
- Geist Mono — փոխարինում: JetBrains Mono or IBM Plex Mono · ուրվագծեր 400, 500 · Կոդի հատվածները, տեխնիկական մետատվյալները և ներդրված միատարր տոկենները օգտագործվում են 12–14px կոդային բլոկներում և 24px կոդի ցուցադրման մեծ տարրերում։ Սա ապահովում է մշակողի գործիքի հեղինակությունը, որը համապատասխանում է Dub-ի արտադրանքի դիրքորոշմանը։
Ժամանակահատվածներ և ձև
| Նպատակ | Նշանակություն |
|---|---|
| Խտություն | միջին |
| Հիմնական քայլ | 8px |
| Կոճակի շառավիղ | 8px |
| Քարտի շառավիղ | 12px |
| Ստվերներ | ստվերների փոխարեն՝ առանց սահմանների |
| Բաժինների միջև | 64px |
| Էջի լայնությունը | 1200px |
Արհեստական բանականությունը կկառուցի ձեր կայքը Dub ոճով և կլրացնի այն
- Լրացրեք ապրանքներով և գրառումներով՝ հղումով - Instagram, TikTok, Facebook:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- ElevenLabs — Լուսանկարչական ակնարկ տաք կրեմագույն երանգներով՝ նուրբ վերնագրերով: Բաուհաուսի ոճի տետր՝ ձվի կճեպի գույնի թուղթ, սև թանաք և մեկ մանուշակագույն ու նարնջագույն շեշտադրում ապրանքի ցուցադրման համար:
- Awesomic — Խմբագրական ցինկե ցանց՝ կոնֆետի հիշեցնող նարնջագույն կետադրական նշաններով
- Monad — խմբագրական տեխնիկական ամսագիր տաք մագաղաթի վրա
- Seline Analytics — Հանգիստ վերլուծական սեղան տաք թղթի վրա
- Notion — Տաք թղթե տետր կեսօրվա արևի տակ
- Anthropic — Գիտական դաշտային ամսագիր տաք մագաղաթի մասին՝ հանգիստ փղոսկրե մակերեսներով, սերիֆացված խմբագրական վերնագրերով և կավե միակ շեշտադրմամբ, որը հայտնվում է միայն այն ժամանակ, երբ անհրաժեշտ է գործողություն։
- Calendly — Մուգ կապույտ թանաք սառը մարմարի վրա
- Augen Pro — Apple-ի սպիտակ ներկայացումը մոնոքրոմ տարածքում որպես միակ շեշտադրում օգտագործում է կլինիկական, անկշիռ, էլեկտրական կապույտը։
- Antimetal — Խմբագրական տարեգրություն կրեմագույն թղթի վրա՝ հանգիստ առավոտ գիտական ամսագրում, որտեղ զսպվածությունը վստահություն է հաղորդում, իսկ սերիֆները կատարում են ծանր աշխատանքը։
- Perk — Էլեկտրական լայմ տաք մագաղաթյա թղթի վրա
- Ditto — Արևի լույսով լուսավորված արհեստանոց, որը ստեղծում է վայրի ծաղիկների նմուշներ: Տաք կրեմագույն մակերեսներ, վառ դեղին հիմնական գույն, մուգ կապույտ թանաքներ, ստեղծագործության ետևում ծաղկող օրգանական գունային ձևեր:
- Officevibe — Խմբագրական ամսագիր՝ տաք կրեմագույն թղթի վրա: Պատկերացրեք մարդկային ռեսուրսների կառավարման մասին մտածված ակնարկ, որը ներկայացված է որպես ապրանք՝ ժամանակակից կապույտ ինտերֆեյսի միջով շշնջացող շեղագիր սերիֆ տառատեսակ: