
Superlist
Գիշերային աշխատանքային տարածք՝ մարջանե ածուխներով՝ լուռ սմբուկի տեսքով մակերես, որտեղ մեկ տաք նարնջագույն կայծ է ազդանշան տալիս յուրաքանչյուր գործողության մասին։
Superlist-ը օգտագործում է արտադրողականության լեզու կեսգիշերային մանուշակագույն երանգներով՝ մուգ սմբուկի, տաք մարջանագույն՝ որպես միակ հիմնական գույն, և մեծ sans-serif վերնագրեր, որոնք արտացոլում են ամբողջ մթնոլորտը: Ինտերֆեյսը ստեղծում է ուշ գիշերային կենտրոնացված աշխատանքի զգացողություն՝ հանգիստ, շերտավորված և վստահ, որտեղ գույնը օգտագործվում է միայն որպես ֆունկցիոնալ կետադրություն գործողության կոչերի, ակտիվ վիճակների և հիմնական կետերի համար: Մակերեսները շերտավորված են նուրբ մուգ երանգներով՝ մանուշակագույն ենթաերանգով (#181824 → #26253b), խուսափելով մաքուր սևից՝ խորությունը տաք, այլ ոչ թե ստերիլ զգալու համար: Բաղադրիչներն առանձնանում են առատ կլորացված ձևերով (20px քարտեր, դեղահաբերի կոճակներ), մեղմ ստվերներով և «շնչելով» հարմարավետ 10-16px բացվածքներով, այլ ոչ թե նեղ ցանցերով: Վերնագրի ձայնը ամեն ինչ է. 70-88px 600 միավորանոց կշիռը՝ -0.02em տառերի նեղ միջակայքով, տեքստը համարում է տպագրական, այլ ոչ թե UI. այն ավելի մոտ է խմբագրական տեքստին, քան SaaS-ին:
Մուգ բաժինները ընդգրկում են էջի ամբողջ լայնությունը՝ կենտրոնացված, առավելագույն լայնությամբ բովանդակության կոնտեյներներով: Հիմնական բաժինը ուղղահայաց կենտրոնացված է և պարունակում է վերնագիր, ենթատեքստ և գործողության կոչ (CTA), որին հաջորդում է ապրանքի մեծ էկրանի նկար, որը համընկնում է հաջորդ բաժնի հետ: Հաջորդող բաժինները հերթագայում են կենտրոնացված տեքստային բլոկների և քարտային ցանցերի միջև: Գրախոսությունների բաժինն օգտագործում է եռասյուն ցանց՝ գրախոսությունների քարտերով և 16 բաժանմունքներով: Նավիգացիան վերին մասում գտնվող մեկ գոտի է՝ ձախ կողմում լոգոտիպով, աջ կողմում՝ կենտրոնացված հղումներով և մուտքի գործողություններով՝ առանց ֆիքսված կողային գոտու կամ մեգա-մենյուի: Բաժինների միջև բաժանմունքները մեծ են (16 բաժանմունք), ստեղծելով ընդարձակ, խմբագրական ռիթմ՝ խիտ ապրանքային ցանցի փոխարեն:
Տեսողական տարածքում գերակշռում են ապրանքի էկրանի պատկերները՝ կլորացված անկյուններով մեծ շրջանակ, որը ցուցադրում է իրական հավելվածի ինտերֆեյսը, լցնում է հիմնական և երկրորդական բաժինները: Լուսանկարները նվազագույն են, օգտագործվում են միայն որպես օգտատիրոջ ավատարներ կամ հավելվածի ներսում գտնվող մեդիայի նախադիտումներ (օրինակ՝ համերգի պատկերը ապրանքի մակետի աջ վահանակում): Վստահության գոտում գտնվող լոգոները հարթ, խլացված սպիտակ տեքստային խորհրդանիշներ են: Չկան դեկորատիվ նկարազարդումներ, աբստրակտ գրաֆիկա, եռաչափ ռենդերներ: Տեսողական ռազմավարությունն այն է, որ ցուցադրվի ապրանքը մասշտաբային, թույլ տրվի, որ տպագրությունը կատարի հուզական աշխատանքը, և մարջանագույնը օգտագործվի որպես միակ շեշտադրման գույն:
Պալիտրա
Բրենդ
- Coral Ember
#ff4a36— Նարնջագույնը օգտագործվում է որպես երկրորդական շեշտադրում՝ դեկորատիվ մանրամասների և հազվադեպ հանդիպող ազդանշանները ընդգծելու համար։ Այն չպետք է օգտագործվի որպես գործողության կոչերի հիմնական գույն։
Չեզոք
- Aubergine Canvas
#181824— Էջի ֆոնը, գլխավոր կտավը, տաք, մուգ երանգ է, որը փոխարինում է մաքուր սևին, ինչը օգտագործողի ինտերֆեյսը դարձնում է շերտավոր, այլ ոչ թե հարթ։ - Elevated Plum
#26253b— Քարտի մակերեսներ, մուտքագրման դաշտեր, նավիգացիոն կոնտեյներներ՝ մեկ քայլ ավելի հեշտ է, քան կտավը՝ առանց տեսանելի սահմանի խորություն ստեղծելու համար։ - Pure White
#ffffff— Հիմնական վերնագրերը, կոճակների տեքստը և պատկերակների ուրվագծերը՝ առավելագույն հակադրություն մուգ կտավի վրա։ - Fog Text
#696f81— Հիմնական տեքստը, երկրորդական վերնագրերը և խլացված եզրագծերը՝ 7:1 հակադրության հարաբերակցություն՝ սմբուկի գույնի ֆոնի վրա հարմարավետ ընթերցման համար։ - Ash Text
#8e8da0— Երկրորդական UI տարրերի, բաժանարարների և լռեցված պիտակների համար աջակցվում է չեզոք գույն։ Այն չպետք է օգտագործվի որպես գործողության կոչերի հիմնական գույն։ - Mist Highlight
#a3a3a7— Նուրբ եզրագծերը, բաժանարարները և ոչ ակտիվ նավիգացիոն տարրերը ստեղծում են նուրբ չեզոք երանգ, որը դեռևս առանձնանում է կտավի ֆոնին։
Տպագրություն
12-ից մինչև 88px · 9 քայլ
- sans-serif — փոխարինում: Inter · ուրվագծեր 400 · sans-serif - հայտնաբերված է արդյունահանված տվյալներում, բայց չի նկարագրվում արհեստական բանականության կողմից։
- Haffer XH SemiBold — փոխարինում: Inter Tight · ուրվագծեր 400, 600 · Հիմնական տառատեսակը ցուցադրման և վերնագրերի համար։ Այն օգտագործվում է 70–88px չափսի գլխավոր վերնագրերի համար՝ -0.02em տառային միջակայքով և 600 կշռով։ Նեղ տառային միջակայքը և մեծ տառերի բարձրությունը վերնագրերին տալիս են խմբագրական կշիռ, ինչը մուգ ինտերֆեյսը դարձնում է ավելի շատ ամսագրի շապիկի նման, քան վահանակի։ Փոխարինեք Inter Tight-ով կամ General Sans-ով՝ թավատառ կշռով։
- Jersey 10 — փոխարինում: Anybody · ուրվագծեր 400 · Մեծ, դեկորատիվ տառատեսակ՝ շեշտադրումների համար և ընդգծումների համար: Շատ մեծ չափերի դեպքում օգտագործվում է խնայողաբար՝ տպագրական շեշտադրումներ ստեղծելու համար: Կարող է փոխարինվել Anybody կամ Cabinet Grotesk տառատեսակներով:
Ժամանակահատվածներ և ձև
| Նպատակ | Նշանակություն |
|---|---|
| Խտություն | միջին |
| Հիմնական քայլ | 10-16px |
| Կոճակի շառավիղ | 100px |
| Քարտի շառավիղ | 20px |
| Ստվերներ | մեղմ ստվերներ |
| Բաժինների միջև | 80px |
| Էջի լայնությունը | 1200px |
Արհեստական բանականությունը կկառուցի ձեր կայքը Superlist ոճով և կլրացնի այն
- Լրացրեք ապրանքներով և գրառումներով՝ հղումով - Instagram, TikTok, Facebook:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- DNA — Կեսգիշերային աստղադիտարանը՝ մասնիկային ոսպնյակի միջով
- Abetterlou — Կայծեր թամբի կաշվի վրա - Տաք կրեմագույն տառատեսակ, որը փայլում է խորը սուրճի-սև ֆոնի վրա, սաթե-ոսկեգույն կոճակներով, որոնք զգացվում են ինչպես էջի մեջ սեղմված տաք մետաղ։
- Galileo-ft — Խորը տիեզերական հրամանատարական տախտակամած՝ էլեկտրական կապույտ ազդանշաններով
- Decide AI — Աստղադիտարանը կեսգիշերին - դրամահատարանի ազդանշան
- Redis Agency — Խմբագրական արհեստանոցը, որը բաց է աշխատանքային ժամերից հետո, մռայլ վայր է, որտեղ բրենդավորման ողջ աշխատանքը կատարվում է շերիֆ տառատեսակներով և մեկ կարմիր բողկով։
- Spellbook — Կեսգիշերային դատարան, լուսավորված մարջանե թանաքով՝ մութ խմբագրական մակերես, որտեղ միակ ձայնը տաք նարնջագույն գրիչի հարվածն է
- Linear — կեսգիշերային ճշգրիտ գործիք
- Origin Financial — Կեսգիշերային պատկերասրահ՝ լուռ շքեղությամբ։ Լուռ, գրեթե մութ սենյակ, որտեղ մեծ սերիֆ տառատեսակները և մի քանի լուսավորված գունավոր վահանակները ստեղծում են այն զգացողությունը, որ ֆինանսները ուշադիր ընտրված արվեստի գործ են։
- Hyperstudio — Դիզայնը քերծված է օբսիդիանի վրա: Տեքստը և նուրբ գծերը շրջանակում են մաքուր սևի սպիտակ տարածությունը, իսկ երբեմն-երբեմն ոսկեգույն կողմնացույցի նշաններ են ցույց տալիս ճանապարհը:
- Air — «Կեսգիշերային երկինքը ապակու միջով» քանդակը
- Raycast — Կեսգիշերային հրամանատարական կենտրոն, Coral Neon
- dope.security — Կեսգիշերային տերմինալ՝ մանուշակագույն փարոսներով