Figma
մոնոխրոմ շասսի՝ քրոմատիկ քաոսի համար
Ինտերֆեյսը գործում է որպես խիստ, բարձր կոնտրաստային կառուցվածքային տարա, որը լիակատար տեսողական գերիշխանություն է հաղորդում օգտատիրոջ կողմից ստեղծված բովանդակությանը: Հիմքը խիստ #000000-ից մինչև #ffffff պալիտրա է, որը խուսափում է մոխրագույնի նուրբ երանգներից՝ հիմնական սահմանների և տեքստի համար բացարձակ առավելագույն կոնտրաստի օգտին: Տպագրական հիերարխիան գրեթե ամբողջությամբ հիմնված է չափի և տառերի միջև ագրեսիվ բացասական հեռավորության վրա, այլ ոչ թե գունային տատանումների, տեքստի մեծ տողերը վերածելով խիտ գրաֆիկական բլոկների: Սահմանների շառավղի տրամաբանությունը ստեղծում է խիստ երկատվածություն. գլոբալ նավիգացիոն տարրերի 50px արտաքին «մեխերը» դիտավորյալ հակադրվում են բովանդակության տարաների խիստ 0px անկյուններին:
Կոմպոզիցիաները հիմնված են դիտման պատուհանը կենտրոնացնող ծայրահեղ առավելագույն լայնության սահմանների վրա (առավելագույնը՝ 1440px) և ներառում են բովանդակության խիտ կլաստերներ, որոնք բաժանված են առատ մակրոտարածությամբ (բաժինների միջև 96-120px սպիտակ տարածություն): «Հերոսի» նախատիպը հաճախ օգտագործում է պատկերների ասիմետրիկ պատկերասրահ, որը դինամիկ կերպով խարսխված է լողացող, կատարյալ կենտրոնացված UI բլոկի տակ: Ծալքի տակ տեղեկատվությունը անմիջապես համապատասխանում է խիստ չորս սյունակային ցանցի՝ առանց լուսանցքների, շրջանակելով քարտերի կրկնվող կլաստերներ, առավելագույնի հասցնելով օբյեկտների խտությունը՝ միաժամանակ վերացնելով լուսանցքները շրջանակից:
Տեսողական դիզայնը հիմնված է օգտատիրոջ վրա կենտրոնացած արդյունքների վրա: Պատկերները ցուցադրվում են որպես հարթ, շրջանակազուրկ քառակուսիներ կամ ցրված, վերադրվող բեկորներ, որոնք հիշեցնում են ֆիզիկական առարկաներ, կոշտ, դատարկ ֆոնի վրա: Պատկերները կայքում գույնի միակ աղբյուրն են: Կայքում չկան կենսակերպի լուսանկարչական տարրեր կամ ստանդարտ կորպորատիվ նկարազարդումներ. յուրաքանչյուր գրաֆիկական տարր թվային կտավի ճշգրիտ, բառացիորեն պատկեր է, որը միաժամանակ գործում է որպես ապրանքի ապացույց և հիմնական գեղագիտական տարր:
Պալիտրա
Բրենդ
- Context Action Violet
#4d49fc— Ենթավահանակների ներսում տեղայնացված հիմնական կոչ՝ մեկ ընդհատող գույնով, որը սահմանում է կիզակետը։
Չեզոք
- Absolute Canvas
#ffffff— Էջի ֆոն, լողացող գործիքագոտիներ, բարձրացված վահանակների հիմքեր։ - Structural Ink
#000000— Հիմնական տառատեսակ, կոճակի միատարր ֆոն, կոճակի ուրվագծեր։ - Graphite Metadata
#595959— Երկրորդական հեղինակային տեքստ, տեղայնացված ենթատեքստ, տեղապահ արժեքներ - Boundary Frame
#e2e2e2— Նուրբ բաժանիչներ և ոչ ակտիվ մուտքային դաշտերի սահմաններ։ - Angular Teal
#33dfdf— Դեկորատիվ էֆեկտներ, բեռնման ցուցիչներ և ակտիվ կուրսորի վիզուալիզացիա։
Տպագրություն
12-ից մինչև 72px · 6 քայլ
- figmaSans — փոխարինում: Inter · ուրվագծեր 320, 330, 340, 400, 450, 480, 520, 700 · Բազմակողմանի գործիք, որը կառավարում է ամեն ինչ՝ սկսած ցուցադրման վերնագրերից մինչև նավիգացիոն պիտակներ: Այն ստեղծում է եզակի տեսք՝ փոփոխելով օպտիկական բացասական հետևումը:
- figmaMono — փոխարինում: JetBrains Mono · ուրվագծեր 400 · Միկրոտեգեր, կոորդինատների հետևում և տեխնիկական երանգներ, որոնք ավելի շատ գործում են որպես օգտագործողի ինտերֆեյսի տարրեր, քան որպես բովանդակություն։
Ժամանակահատվածներ և ձև
| Նպատակ | Նշանակություն |
|---|---|
| Խտություն | խիտ |
| Հիմնական քայլ | 24px |
| Կոճակի շառավիղ | 8px |
| Քարտի շառավիղ | 12px |
| Ստվերներ | ստվերների փոխարեն՝ առանց սահմանների |
| Բաժինների միջև | 96-120px |
| Էջի լայնությունը | 1440px |
Արհեստական բանականությունը կկառուցի ձեր կայքը Figma ոճով և կլրացնի այն
- Լրացրեք ապրանքներով և գրառումներով՝ հղումով - Instagram, TikTok, Facebook:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- Caldera — Կրակ կռեք տաք կրաքարի վրա։ Կտավը հում, տաք սվաղ է, և յուրաքանչյուր նարնջագույն տարր նման է մակերեսին սեղմված ծխացող ածուխի։
- Vercel — Տերմինալը տպված է սպիտակ թղթի վրա
- Dylanbrouwer — Բրուտալիստական ձուլարան մայրամուտին
- Headspace — Արևոտ առողջարանային անկյուն տաք թղթի վրա
- WHOOP — Ներկայացման լաբորատորիա կեսգիշերին՝ սպիտակ կլինիկական լաբորատոր սեղաններ սև թատերական դատարկության տակ, էլեկտրականության միակ մանուշակագույն զարկերակ։
- (dot)connect — Շվեյցարական ճարտարագիտական նկար՝ ածուխի մեկ կտորով
- Together AI — Հետազոտական կոնսոլ սառցադաշտային թղթի վրա
- Vivid+Co — Պրիզմատիկ լույս օբսիդիանի միջոցով
- Sequel — Մութն ընկնելուց հետո մասնավոր ցուցադրությունը միակ տաք լույսն է այլապես մութ կինոթատրոնում։
- v0 by Vercel — Խառատային գծագրություն։ Ճշգրտությունն ու ֆունկցիոնալությունը գերակա են, որտեղ յուրաքանչյուր տարր ծառայում է հստակ նպատակի մաքուր, տեխնիկապես կատարյալ մակերեսի վրա։
- ThoughtLab — Օբսիդիանե հուշարձան՝ կարմիր ազդանշանով։ Սև դատարկության կտավ, որտեղ տաճարի միակ հագեցած կարմիր առարկան, որը տպագրված է մեծ սպիտակ տառերով, միակ գունային պատկերն է։
- Dovetail — Սև լուսնի տակ նախագիծ՝ հազիվ տեսանելի գրաֆիկական գծեր, սպիտակ տառատեսակ, մեկ մանուշակագույն փայլ