Framer
گالری نئون در فضای خالی
Framer مانند یک بوم نقاشی سیاه تقریباً تاریک عمل میکند - یک بوم نقاشی سیاه که محتوا مانند یک تابلوی نئون در افتتاحیه یک گالری در آن معلق است. تیترها، که در GT Walsheim Medium با فاصله خطوط تنگ 0.8-1.1 و فاصله حروف منفی تهاجمی (-0.04em در 54px) تنظیم شدهاند، یک فونت فشرده و تزئینی ایجاد میکنند که به جای اینکه به طور مرتب روی صفحه قرار گیرد، به جلو حرکت میکند. یک آبی برقی (#0099ff) تمام تأکیدات کاربردی - حاشیهها، درخشش، آیکونها، حالتهای فعال - را فراهم میکند، در حالی که بقیه رابط کاربری بیرنگ باقی میماند و با تکیه بر انتقالهای خاکستری ظریف (#111، #171717، #242424) برای ایجاد عمق از سیاه خالص استفاده میکند. اجزا به جای تزئینی بودن، سنجیده به نظر میرسند: شعاعهای گرد 8-25px، حاشیههای نازک 1px، سایههای افتاده مینیمال و سطوح شفاف که به فضای خالی اجازه میدهند تا از میان آن بدرخشد.
بخشهای تمامعرض فراتر از بوم سیاه امتداد دارند، با محتوایی که حداکثر عرض آن حدود ۱۲۰۰ پیکسل است و در مرکز آن قرار گرفته است. بخش اصلی دارای یک هدر چپچین و یک دکمه فراخوان (CTA) است که سمت راست آن عمداً خالی گذاشته شده است - به صورت نامتقارن، نه در مرکز. بخشها بین طرحبندیهای فقط متنی (هدر بزرگ + زیرمتن) و اسکرینشاتهای محصول به طور متناوب قرار میگیرند. بخش "Comes with Framer" از یک دیوار لوگو در یک شبکه ۴ ستونی استفاده میکند. در بخش انجمن، یک اسکرینشات محصول در یک محفظه تمامعرض و متمرکز با گوشههای گرد قرار گرفته است. ناوبری مینیمال است - یک نوار بالای نازک با لوگو در سمت چپ و لینکها در سمت راست تراز شدهاند، بدون هیچ کنترل قابل مشاهدهای. ریتم بخش: شکافهای عمودی قابل توجه ۸۰ پیکسلی بین بخشها، ایجاد جزایر مجزا از محتوا که در فضای خالی شناور هستند.
تصاویر رابط کاربری محصول غالب هستند - که توسط یک پنجره کروم مانند با نقاط چراغ راهنمایی قاب گرفته شدهاند، تصاویر جاسازی شده از برنامه به تصویر اصلی تبدیل میشوند. لوگوها، به عنوان اثبات کیفیت، با حروف سفید روی زمینه سیاه با فاصله زیاد ارائه میشوند. هیچ عکس، تصویر یا گرافیک انتزاعی استفاده نمیشود - زبان بصری خود محصول است که به عنوان یک رابط زنده نمایش داده میشود. سبک آیکون: مینیمالیستی، طرح کلی، تک رنگ و سفید در اندازههای کوچک. تراکم متن: عمدتاً متن، با قطعات بزرگ گاه به گاه به شکل تصاویر محصول. تعادل بصری فضا به وضوح تایپوگرافی را بر تصاویر ترجیح میدهد.
پالت
برند
- Vivid Violet
#0066ff— دکمهی عملیاتی اصلی تنها جایی در رابط کاربری است که پسزمینهی دکمه با رنگ ثابت نمایش داده میشود.
خنثی
- Bone
#ffffff— عناوین اصلی، متن اصلی روی پسزمینه تیره، پسزمینه دکمه تنها منبع نور است. - Void
#000000— بوم صفحه، پسزمینه ناوبری، سطوح کارت، و آیکونها - همه و همه به رنگ سیاه بیپایانی هستند که تمام محتوای غیرضروری را جذب میکنند. - Graphite
#111111— سطوح برجسته کارتها یک پله بالاتر از فضای خالی هستند - کارتهای بزرگ و کاربردی و ظروف مدال. - Obsidian
#171717— سطح میانی برای دکمهها، کارتهای اضافی، عناصر رابط کاربری - عناصر تعاملی را از بوم جدا میکند. - Slate
#242424— در حالت شناور، فیلدهای ورودی و پنلهای تورفته، قبل از تغییر به قالب متنی، روشنترین رنگ خنثی را دارند. - Ash
#333333— پر کردن عمیق برای تصاویر پسزمینه غیرفعال و عناصر ساختاری.
تایپوگرافی
از ۱۲ تا ۶۸ پیکسل · ۸ مرحله
- sans-serif — جایگزینی: Inter · طرح کلی 400 · sans-serif - در دادههای استخراجشده یافت میشود اما توسط هوش مصنوعی توصیف نشده است.
- GT Walsheim — جایگزینی: Inter Tight · طرح کلی 500 · فونت عنوانها و تیترها، فونت برند است. این فونت به شدت فشرده است، با فاصله خطوط ۰.۸ تا ۱.۱ و فاصله حروف -۰.۰۴em تا -۰.۰۵em در محدوده ۴۴ تا ۶۸ پیکسل. این یک عنصر تزئینی نیست؛ گرمای هندسی GT Walsheim، همراه با معیارهای دقیق، صدای سیستم را ایجاد میکند - مطمئن، جمع و جور و کمی آیندهنگر. برای بیان هندسی مشابه، Inter Tight یا Space Grotesk Bold را در نظر بگیرید.
- Inter Variable — جایگزینی: Inter · طرح کلی 400 · متن اصلی، ناوبری و عناوین ثانویه، نیروی محرکه اصلی هستند. محور متغیر بینمحوری امکان درونیابی روان وزنها را فراهم میکند. با افزایش اندازه، ردیابی باریکتر میشود: از -0.001em تا 18px و از -0.027em تا 22px. نسخه متغیر امکان ریزانیمیشنهای روان سایت را فراهم میکند. جایگزین: بینمحوری ( Google) - یک جایگزین تقریباً یکسان.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 10px |
| شعاع دکمه | 9999px |
| شعاع کارت | 20px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 80px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Framer میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Auros — ترمینال Abyssal با توپهای داده زیستتاب
- Origin Financial — یک گالری نیمهشب از تجمل آرام. اتاقی آرام و تقریباً تاریک که در آن فونتهای بزرگ سریف و چند پنل رنگی روشن، این حس را ایجاد میکنند که امور مالی یک اثر هنری با دقت انتخاب شده است.
- Raycast — مرکز فرماندهی نیمهشب، نئون مرجانی
- Dimension — یک ایستگاه کاری با نور غروب و پنلهای شیشهای مات
- Reflect Notes — فضای بنفش پرستاره، رصدخانهای تاریک است که در آن نتها مانند صورتهای فلکی در پسزمینهای از تهی نیلی تقریباً سیاه شناورند.
- Ameba — اتاق کنترل در نیمهشب - یک پالس آبی الکتریکی درون پنلهای شیشهای مات
- Branding — دیوار گالری مشکی، تزئینات قرمز خونی - فونتهای سفید بزرگ روی یک بوم تیره که شبیه یک فضای خالی است، شناورند و با یک تزئینات قرمز روشن و عناصر تزئینی چشمگیر که بیشتر شبیه تابلوهای گالری هستند تا رابط کاربری وب، قطع شدهاند.
- Harness — مرکز کنترل ماموریت در نیمه شب با تزئینات سبز فسفری
- Koto — گالری ابسیدین در نیمهشب. صحنهای تقریباً کاملاً تاریک، که تنها منبع نور گرم آن یک ماژیک زرد است، و حروف فشرده مانند پوسترهای نمایشگاهی در فضای وسیع منفی شناورند.
- Ohzi — مکعبی درخشان که در گالری تاریک معلق است
- Depot — یک ترمینال سرور تیره. یک کنسول توسعهدهنده تقریباً سیاه، با یک LED سبز که شروع کار را نشان میدهد و بقیه رابط کاربری با گرافیت نمایش داده میشود.
- Maciej Zadykowicz — گالری میدنایت با نقاشی دیواری رنگارنگش، یک دیوار استودیوی تقریباً سیاه است که در آن یک اثر هنری تایپوگرافیک رنگارنگ و پر جنب و جوش توجه را به خود جلب میکند، در حالی که همه چیز دیگر آرام و سنجیده باقی مانده است.