Framer
په تشه کې د نیون ګالري
فریمر د نږدې بشپړ تیاره په توګه کار کوي — یو تور کینوس چیرې چې مینځپانګه د ګالري په پرانیستلو کې د نیون نښې په څیر ځړیږي. سرلیکونه، چې په GT والشیم میډیم کې د 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— د غیر فعال شالید انځورونو او ساختماني عناصرو لپاره ژور ډکول.
ټایپوګرافي
له ۱۲ څخه تر ۶۸ پکسله پورې · ۸ ګامونه
- sans-serif — بدیل: Inter · بڼې 400 · sans-serif - په استخراج شوي معلوماتو کې موندل شوی مګر د AI لخوا نه دی تشریح شوی.
- GT Walsheim — بدیل: Inter Tight · بڼې 500 · د سرلیکونو او سرلیکونو لپاره فونټ د برانډ فونټ دی. دا په شدت سره متمرکز دی، د 0.8-1.1 د کرښې فاصله او د 44-68px په حد کې د -0.04em څخه تر -0.05em پورې د لیک فاصله سره. دا یو آرائشی عنصر ندی؛ د GT والشیم جیومیټریک تودوخه، د سخت میټریکونو سره یوځای، د سیسټم غږ رامینځته کوي — باوري، کمپیکٹ، او یو څه راتلونکي. د ورته جیومیټریک اظهار لپاره، انټر ټایټ یا سپیس ګروټسک بولډ په پام کې ونیسئ.
- Inter Variable — بدیل: Inter · بڼې 400 · اصلي متن، نیویګیشن، او ثانوي سرلیکونه د کار هارس دي. د انټر متغیر محور د وزنونو اسانه انټرپولیشن ته اجازه ورکوي. د اندازې زیاتوالي سره تعقیب کمیږي: له -0.001em څخه تر 18px پورې او -0.027em څخه تر 22px پورې. متغیر نسخه د سایټ د اسانه مایکرو انیمیشنونو لپاره اجازه ورکوي. ځای ناستی: انټر ( Google) - په حقیقت کې ورته فال بیک.
وقفې او بڼه
| موخه | معنی |
|---|---|
| کثافت | اوسط |
| اساسي ګام | 10px |
| د تڼۍ وړانګې | 9999px |
| د کارت وړانګې | 20px |
| سیوري | د سیوري پر ځای هیڅ سرحد نشته |
| د برخو ترمنځ | 80px |
| د پاڼې پلنوالی | 1200px |
AI به ستاسو ویب پاڼه په Framer سټایل کې جوړه کړي او ډکه یې کړي
- د لینک له لارې محصولات او پوسټونه ډک کړئ - Instagram ، TikTok ، Facebook.
- له خپل زوړ سایټ څخه مواد انتقال کړئ — یوازې پته مشخص کړئ.
- په غوره انجن کې عصري ډیزاین: د سرور رینډرینګ او SEO اصلاح کولو سره React ( Next.js).
- د لټون پایلو او عصبي شبکې سپارښتنو لپاره په بشپړ ډول اتوماتیک SEO اصلاح کول.
ورته سټایلونه
- Auros — د بایولومینیسینټ ډیټا بالونو سره د ژورې ژورې ټرمینل
- Origin Financial — د نیمې شپې یوه خاموشه او شتمنه ګالري. یوه ارامه، تقریبا تیاره خونه چیرې چې لوی سیریف فونټونه او یو څو روښانه رنګین تختې دا احساس رامینځته کوي چې مالي چارو د هنر یو په احتیاط سره تنظیم شوی کار دی.
- Raycast — د نیمې شپې د قوماندې مرکز، کورل نیون
- Dimension — د ماښام په رڼا کې د کارځای د یخ شوي شیشې تختو سره
- Reflect Notes — ستوري لرونکی بنفش فضا یوه تیاره څارنځای دی چیرې چې یادښتونه د نږدې تور انډیګو تشې شالید په وړاندې د ستورو په څیر تیریږي.
- Ameba — په نیمه شپه کې د کنټرول خونه - د یخ شوي شیشې تختو دننه د بریښنا نیلي نبض
- Branding — تور ګالري دیوال، په وینو سره سور تلفظونه - لوی سپین فونټونه په تیاره کینوس کې تیریږي چې د خلا سره ورته وي، د یو واحد روښانه سور تلفظ او حیرانونکي آرائشی عناصرو لخوا مداخله کیږي چې د ویب انٹرفیس په پرتله د ګالري نښې په څیر ښکاري.
- Harness — د نیمې شپې د ماموریت کنټرول د فاسفورسنټ شنه تلفظونو سره
- Koto — د نیمې شپې د اوبیسیډین ګالري. تقریبا تور سټیج، چیرې چې د ګرمې رڼا یوازینۍ سرچینه یو ژیړ مارکر دی، او کنډنس شوی ډول په پراخه منفي ځای کې د نندارتون پوسټرونو په څیر تیریږي.
- Ohzi — یو ځلیدونکی مکعب په تیاره ګالري کې ځړول شوی
- Depot — یو تیاره سرور ټرمینل. یو تقریبا تور ډویلپر کنسول، د یو واحد شنه LED سره چې د کار پیل سیګنال کوي، او د کارونکي انٹرفیس پاتې برخه په ګرافایټ کې ښودل شوې.
- Maciej Zadykowicz — د نیمې شپې ګالري د خپل کلیډوسکوپیک دیوال سره نږدې تور سټوډیو دیوال دی چیرې چې د هنر یوه روښانه، رنګینه ټوټه پاملرنه راجلبوي پداسې حال کې چې نور هرڅه خاموش او قصدي پاتې کیږي.