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 օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- Mollie — Քաշմիրե սեղան, մուգ գրանցամատյան: Սև տեքստի շուրջ թողեք բավարար սպիտակ տարածք խմբագրական դիզայնի համար, այնուհետև ընդգծեք ապրանքին վերաբերող կետերը տաք կրեմներով, էսպրեսո բրաուններով և իրական վճարման մեթոդների շոշափելի լուսանկարներով:
- Kagi — Առանձին ընթերցասրահ։ Ստեղծեք բաց սպիտակ տարածք համարձակ գրաֆիտային տեքստի շուրջ՝ օգտագործելով նուրբ մանուշակագույն շեշտադրումներ և տաք պաստելային մակերեսներ՝ անդորրը խախտելու համար։
- Milanote — Milanote-ը նվիրված ստեղծագործական ստուդիա է: Ստեղծեք խմբագրական պատկերասրահի ոճի էջեր՝ օգտագործելով լողացող տեսողական տախտակներ՝ մուգ շրջանակված պատեր, սպիտակ ցուցադրման տարածք և էկրանի լուսանկարներ, որոնք նման են իրական առարկաների՝ մեղմ խորությամբ:
- Co2 — Կլիմայական ատլաս ձմեռային լույսի ներքո: Ստեղծեք էջեր, որոնք նման են օդային փաստաթղթի լանդշաֆտի, որտեղ սերիֆ վերնագրերը, կատեգորիայի կոդավորված տվյալները և սառցե պատկերները ընդգծում են լայն սպիտակ եզրերը:
- GitButler — Փիրուզագույն՝ տեքստի վերջում։ Բարձր կոնտրաստային սերիֆային վերնագրերի համադրություն՝ նուրբ տեխնիկական ցանցերով, տաք գրաֆիտային մակերեսներով և աննկատ փիրուզագույն շեշտադրմամբ։
- ElevenLabs — Լուսանկարչական ակնարկ տաք կրեմագույն երանգներով՝ նուրբ վերնագրերով: Բաուհաուսի ոճի տետր՝ ձվի կճեպի գույնի թուղթ, սև թանաք և մեկ մանուշակագույն ու նարնջագույն շեշտադրում ապրանքի ցուցադրման համար:
- Awesomic — Խմբագրական ցինկե ցանց՝ կոնֆետի հիշեցնող նարնջագույն կետադրական նշաններով
- Monad — խմբագրական տեխնիկական ամսագիր տաք մագաղաթի վրա
- Seline Analytics — Հանգիստ վերլուծական սեղան տաք թղթի վրա
- Notion — Տաք թղթե տետր կեսօրվա արևի տակ
- Anthropic — Գիտական դաշտային ամսագիր տաք մագաղաթի մասին՝ հանգիստ փղոսկրե մակերեսներով, սերիֆացված խմբագրական վերնագրերով և կավե միակ շեշտադրմամբ, որը հայտնվում է միայն այն ժամանակ, երբ անհրաժեշտ է գործողություն։
- Calendly — Մուգ կապույտ թանաք սառը մարմարի վրա