Framer
նեոնային պատկերասրահ դատարկության մեջ
Framer-ը գործում է որպես գրեթե լիակատար խավար՝ սև կտավ, որտեղ բովանդակությունը կախված է ինչպես պատկերասրահի բացման նեոնային ցուցանակը: Վերնագրերը, որոնք տեղադրված են GT Walsheim Medium-ում՝ 0.8–1.1 տողերի միջև նեղ միջակայքով և ագրեսիվ բացասական տառերի միջակայքով (-0.04em 54px-ի դեպքում), ստեղծում են խտացված, դեկորատիվ տառատեսակ, որը առաջ է մղվում, այլ ոչ թե կոկիկորեն տեղավորվում էջի վրա: Միակ էլեկտրական կապույտը (#0099ff) ապահովում է բոլոր ֆունկցիոնալ շեշտադրումները՝ եզրագծեր, փայլ, պատկերակներ, ակտիվ վիճակներ, մինչդեռ ինտերֆեյսի մնացած մասը մնում է աքրոմատիկ՝ հենվելով նուրբ մոխրագույն անցումների վրա (#111, #171717, #242424)՝ մաքուր սևից խորություն ստեղծելու համար: Բաղադրիչները ավելի շատ մտածված են թվում, քան դեկորատիվ. 8–25px կլորացված շառավղով, բարակ 1px եզրագծերով, նվազագույն ստվերներով և կիսաթափանցիկ մակերեսներով, որոնք թույլ են տալիս դատարկությանը փայլել:
Լրիվ լայնությամբ բաժինները տարածվում են սև կտավից այն կողմ, որի բովանդակությունը սահմանափակվում է առավելագույնը մոտ 1200px լայնությամբ և կենտրոնացված է ներսում։ Գլխավոր բաժինն ունի ձախ կողմում դասավորված վերնագիր և գործողության կոչի (CTA) մեկ կոճակ, իսկ աջ կողմը միտումնավոր դատարկ է՝ ասիմետրիկորեն, ոչ կենտրոնացված։ Բաժինները հերթագայում են միայն տեքստային դասավորությունները (մեծ վերնագիր + ենթատեքստ) և ապրանքի էկրանի պատկերները։ «Գալիս է շրջանակողի հետ» բաժինը օգտագործում է լոգոտիպի պատ 4 սյունակային ցանցում։ Համայնքի բաժնում ապրանքի էկրանի պատկերը տեղադրված է կենտրոնացված, լի լայնությամբ կոնտեյների մեջ՝ կլորացված անկյուններով։ Նավիգացիան նվազագույն է՝ բարակ վերին գոտի՝ ձախ կողմում լոգոտիպով և աջ կողմում դասավորված հղումներով, առանց տեսանելի կառավարման տարրերի։ Բաժնի ռիթմ. բաժինների միջև զգալի 80px ուղղահայաց բացեր, որոնք ստեղծում են դատարկության մեջ լողացող բովանդակության առանձնահատուկ կղզիներ։
Արտադրանքի ինտերֆեյսի էկրանի կադրերը գերակշռում են՝ լուսացույցի կետերով քրոմանման պատուհանով շրջանակված, հավելվածի ներկառուցված էկրանի կադրերը դառնում են գլխավոր պատկերը։ Որակի ապացույց հանդիսացող լոգոները ներկայացված են սպիտակ տառերով՝ սև ֆոնի վրա՝ լայն միջակայքով։ Լուսանկարներ, նկարազարդումներ կամ վերացական գրաֆիկա չեն օգտագործվում. տեսողական լեզուն հենց արտադրանքն է, որը ցուցադրվում է որպես կենդանի ինտերֆեյս։ Պատկերակների ոճը՝ մինիմալիստական, ուրվագծված, մոնոխրոմ և սպիտակ՝ փոքր չափսերով։ Տեքստի խտությունը՝ հիմնականում տեքստ, երբեմն՝ մեծ հատվածներով՝ արտադրանքի էկրանի կադրերի տեսքով։ Տարածքի տեսողական հավասարակշռությունը հստակորեն նախապատվություն է տալիս տպագրությանը պատկերների նկատմամբ։
Պալիտրա
Բրենդ
- Vivid Violet
#0066ff— Հիմնական գործողության կոճակը ինտերֆեյսի միակ տեղն է, որտեղ ցուցադրվում է միագույն կոճակի ֆոն։
Չեզոք
- Bone
#ffffff— Հիմնական վերնագրերը, հիմնական տեքստը մուգ ֆոնի վրա, կոճակի ֆոնը լույսի միակ աղբյուրն է։ - Void
#000000— Էջի կտավը, նավիգացիոն ֆոնը, քարտի մակերեսները, պատկերակների լրացումը՝ այս ամենը անվերջ սև գույն է, որը կլանում է ամբողջ ոչ էական բովանդակությունը։ - Graphite
#111111— Բարձրացված քարտերի մակերեսները դատարկությունից մեկ աստիճան բարձր են՝ մեծ, ֆունկցիոնալ քարտեր և մոդալ տարաներ։ - Obsidian
#171717— Կոճակների, լրացուցիչ քարտերի, UI լցոնումների միջանկյալ մակերես - առանձնացնում է ինտերակտիվ տարրերը կտավից։ - Slate
#242424— Մկնիկի սլաքը պահելու դեպքում, մուտքագրման դաշտերը և խորացված վահանակները տեքստի ձևաչափին անցնելուց առաջ ամենապայծառ չեզոք երանգն ունեն։ - Ash
#333333— Խորը լրացում ոչ ակտիվ ֆոնային պատկերների և կառուցվածքային տարրերի համար։
Տպագրություն
12-ից մինչև 68px · 8 քայլ
- sans-serif — փոխարինում: Inter · ուրվագծեր 400 · sans-serif - հայտնաբերված է արդյունահանված տվյալներում, բայց չի նկարագրվում արհեստական բանականության կողմից։
- GT Walsheim — փոխարինում: Inter Tight · ուրվագծեր 500 · Վերնագրերի և վերնագրերի տառատեսակը ապրանքանիշի տառատեսակն է։ Այն ագրեսիվորեն սեղմված է՝ տողերի միջև 0.8–1.1 միջակայքով և տառերի միջև -0.04em-ից -0.05em միջակայքով՝ 44–68px միջակայքում։ Սա դեկորատիվ տարր չէ. GT Walsheim-ի երկրաչափական ջերմությունը, զուգորդված խիստ չափանիշների հետ, ստեղծում է համակարգի ձայնը՝ վստահ, կոմպակտ և մի փոքր ֆուտուրիստական։ Նմանատիպ երկրաչափական արտահայտչության համար դիտարկեք Inter Tight-ը կամ Space Grotesk Bold-ը։
- Inter Variable — փոխարինում: Inter · ուրվագծեր 400 · Հիմնական տեքստը, նավիգացիան և երկրորդական վերնագրերը հիմնական աշխատանքային ձին են: Inter Variable առանցքը թույլ է տալիս կշիռների սահուն ինտերպոլյացիա: Հետևումը նեղանում է չափի մեծացմանը զուգընթաց՝ -0.001em-ից մինչև 18px և -0.027em-ից մինչև 22px: Փոփոխական տարբերակը թույլ է տալիս կայքի սահուն միկրոանիմացիաներ ստեղծել: Փոխարինում. Inter ( Google) – գործնականում նույնական պահեստային տարբերակ:
Ժամանակահատվածներ և ձև
| Նպատակ | Նշանակություն |
|---|---|
| Խտություն | միջին |
| Հիմնական քայլ | 10px |
| Կոճակի շառավիղ | 9999px |
| Քարտի շառավիղ | 20px |
| Ստվերներ | ստվերների փոխարեն՝ առանց սահմանների |
| Բաժինների միջև | 80px |
| Էջի լայնությունը | 1200px |
Արհեստական բանականությունը կկառուցի ձեր կայքը Framer ոճով և կլրացնի այն
- Լրացրեք ապրանքներով և գրառումներով՝ հղումով - Instagram, TikTok, Facebook:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- Auros — Անապատային տերմինալ՝ բիոլյումինեսցենտային տվյալների գնդիկներով
- Origin Financial — Կեսգիշերային պատկերասրահ՝ լուռ շքեղությամբ։ Լուռ, գրեթե մութ սենյակ, որտեղ մեծ սերիֆ տառատեսակները և մի քանի լուսավորված գունավոր վահանակները ստեղծում են այն զգացողությունը, որ ֆինանսները ուշադիր ընտրված արվեստի գործ են։
- Raycast — Կեսգիշերային հրամանատարական կենտրոն, Coral Neon
- Dimension — մթնշաղով լուսավորված աշխատանքային տարածք՝ սառցե ապակե վահանակներով
- Reflect Notes — Աստղային մանուշակագույն տարածությունը մութ աստղադիտարան է, որտեղ նոտաները լողում են ինչպես համաստեղություններ՝ գրեթե սև ինդիգո դատարկության ֆոնի վրա։
- Ameba — Կեսգիշերին կառավարման սենյակը՝ էլեկտրական կապույտ իմպուլս սառցե ապակե վահանակների ներսում
- Branding — Սև պատկերասրահի պատ, արյան կարմիր շեշտադրումներ - Մեծ սպիտակ տառատեսակները լողում են մուգ կտավի վրա, որը նման է դատարկության, ընդհատվում է մեկ վառ կարմիր շեշտադրմամբ և աչքի ընկնող դեկորատիվ տարրերով, որոնք ավելի շատ նման են պատկերասրահի ցուցանակների, քան վեբ ինտերֆեյսի:
- Harness — Առաքելության վերահսկողությունը կեսգիշերին՝ ֆոսֆորեսցենտ կանաչ շեշտադրումներով
- Koto — Օբսիդիան պատկերասրահը կեսգիշերին։ Գրեթե խավարի պես մութ բեմ, որտեղ միակ տաք լույսի աղբյուրը միակ դեղին մարկերն է, իսկ խտացված տառատեսակները լողում են հսկայական նեգատիվ տարածքում՝ ինչպես ցուցահանդեսային պաստառները։
- Ohzi — Մութ պատկերասրահում կախված լուսարձակող խորանարդ
- Depot — Մութ սերվերի տերմինալ։ Գրեթե սև մշակողի վահանակ՝ աշխատանքի սկիզբը ազդարարող մեկ կանաչ LED-ով, իսկ մնացած ինտերֆեյսը ցուցադրված է գրաֆիտով։
- Maciej Zadykowicz — Կեսգիշերային պատկերասրահն իր կալեյդոսկոպիկ որմնանկարով գրեթե սև արվեստանոցի պատ է, որտեղ մեկ վառ, գունագեղ տպագրական արվեստի գործ ուշադրություն է գրավում, մինչդեռ մնացած ամեն ինչ մնում է լուռ և մտածված։