Subframe
یک نقاشی گرافیکی روی کاغذ پوستی گرم. کاغذ طراحی، که هر ضربه آن یا گرافیت است یا پاککن، هرگز نقاشی نمیکند - عمق از طریق ضخامت خط و سریفهای پراکنده به دست میآید.
سابفریم فضای کاری یک طراح تکرنگ است: یک بوم گرم و کرمی، جوهر گرافیتی مشکی و فقدان کامل هرگونه تأکید رنگی. کل رابط کاربری به عنوان یک ماده واحد - کاغذ، مداد و سایه - با یک لمس تایپوگرافی جسورانه درک میشود: یک سریف اصلاحشده (Instrument Serif) که در مقابل یک سنسریف سیستماتیک (Inter) قرار گرفته و به تیترها جاذبه سرمقالهای میبخشد. سطوح صاف و قاببندیشده هستند نه برجسته؛ عمق از طریق جداکنندههای نازک با #e5e7eb و هایلایتهای درجشده روی کنترلهای تیره به جای سایهها حاصل میشود. تراکم سخاوتمندانه است: یک ریتم عمودی پهن (۴۸ تا ۶۴ پیکسل فاصله بین بخشها)، طرحبندیهای تمامعرض و متمرکز، و فضای سفید فراوان در اطراف متن. تنها رنگ، تضاد بین تقریباً سفید و تقریباً سیاه است که دکمه تیره را به چشمگیرترین عنصر در هر صفحه تبدیل میکند و نوار آرمهای برند شریک با رنگهای خاکستری تنها عنصر بصری تزئینی است.
طرحبندیهای تمامعرض و متمرکز (1200 پیکسل) با ریتم عمودی سخاوتمندانه. عنصر اصلی یک بلوک واحد و متمرکز است: یک کنترل تیره و تقسیمشده در بالا، یک عنوان بزرگ "Inter"، یک زیرعنوان تکخطی و دو دکمه مجاور (پرشده + شفاف) - بدون تصویر کناری، بدون تفکیک طرح. در زیر عنصر اصلی یک نوار لوگوی خاکستریرنگ متمرکز قرار دارد. هر بخش بعدی از همین الگو پیروی میکند: یک بلوک عنوان و زیرعنوان در سمت چپ، سپس یک قاب ویترین محصول در عرض کامل با فضای ناودان 48 تا 64 پیکسل بین بخشها. پیمایش حداقلی است: یک نوار بالا با لینکهای متمرکز و اقدامات در سمت راست، بدون نوار کناری، بدون مگامنو. صفحه از بالا به پایین به صورت مجموعهای از عبارات متمرکز خوانده میشود که هر کدام فضای کافی دارند - طرحبندی بیشتر شبیه یک نمونه کار سرمقالهای است تا یک صفحه محصول شلوغ.
طراحی بصری مینیمالیستی و کاربردی است. این سیستم از دو حالت بصری استفاده میکند: (1) اسکرینشاتهای قاببندیشده محصول و ماکتهای رابط کاربری که در فریمهایی با شعاع 24 پیکسل محصور شدهاند - آنها اجزای رابط کاربری واقعی (جداول، دکمهها، فرمها) را که در همان پالت تکرنگ رندر شدهاند، نمایش میدهند و باعث میشوند اسکرینشاتها به طور یکپارچه در صفحه ادغام شوند؛ (2) یک نوار واحد از لوگوهای شریک خاکستری به عنوان مدرک اجتماعی عمل میکند، که به صورت مسطح و بدون رنگ یا محفظه رندر شده است. هیچ عکس سبک زندگی، گرادیان انتزاعی یا رندرهای سهبعدی وجود ندارد. تنها عنصر تصویرگر، یک "کاشی" تیره محصول است که در مرکز یک پسزمینه خاکستری گرم با یک آیکون برند قرار دارد - این به عنوان یک نمایش محصول تلقی میشود، نه یک تزئین. همه تصاویر یک طرح مبتنی بر متن را اشغال میکنند، جایی که وزن بصری توسط متن حمل میشود.
پالت
خنثی
- Page Canvas
#fafafa— پسزمینه صفحه، کارت پستال روی بوم، متن روشن روی سطوح تیره - یک رنگ سفید گرم که زیربنای کل سیستم تک رنگ است. - Hairline Border
#e5e7eb— جداکنندهها، حاشیههای کارت، قابهای تصویر، طرح کلی آیکونها - رایجترین نوع طرح کلی در سیستم، ساختار فضایی را تعریف میکنند. - Card Surface
#ededed— پسزمینه برجسته برای کارتها، یک سطح اضافی - یک پله بالاتر از بوم قرار گرفته و یک گروهبندی بدون سایه ایجاد میکند. - Divider Mid
#dadada— جداکنندههای میانرنگ و انتقال بین بخشها - Graphite
#242424— رنگ خنثی با کنتراست بالا برای دکمههای اصلی روی سطوح روشن. - Ink Black
#171717— متن بدنه، سرتیترها، طرح کلی آیکونها - کمی جذابتر از گرافیت، که بیشتر برای تایپوگرافی استفاده میشود تا سطوح.
تایپوگرافی
از ۱۲ تا ۱۲۸ پیکسل · ۷ مرحله
- Inter — جایگزینی: Inter (Google Fonts) · طرح کلی 500, 600, 700 · رابط کاربری سیستم sans-serif - ناوبری، متن بدنه، دکمهها، زیرعنوانها و عناوین بخشها. وزن: ۵۰۰ برای متن بدنه و کنترلها، ۶۰۰ برای زیرعنوانها و عناصر ناوبری و ۷۰۰ برای عناوین بخشها. فاصلهگذاری منفی قوی بین حروف، اشکال هندسی را در هر اندازهای فشرده میکند و به رابط کاربری ظاهری فشرده و فنی میبخشد.
- Instrument Serif — جایگزینی: Playfair Display · طرح کلی 400 · یک فونت سریف که منحصراً برای تیترها و محتوای سرمقاله طراحی شده است. وزن ۴۰۰ و فاصله حروف -۰.۰۲۵em آن، ظاهری زیبا و ایتالیک ایجاد میکند که با هندسه صنعتی Inter در تضاد است - یک تکنیک امضا: یک کلمه یا عبارت سریف در یک صفحه بدون سریف، که به عنوان نقطهگذاری بصری عمل میکند تا یک سبک تیتر.
- Fragment Mono — جایگزینی: JetBrains Mono · طرح کلی 400 · مونو اکسنت برای عناصر درونخطی شبیه کد، برچسبهای تگ و راهنماهای فنی. در صورت استفادهی کم، در لیستهای تابع و حاشیهنویسیهای درونخطی ظاهر میشود، جایی که ابزار طراحی میخواهد نشان دهد "این خروجی ماشین است".
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 8px |
| شعاع دکمه | 16px |
| شعاع کارت | 24px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 64px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Subframe میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- monopo saigon — درخششی مایع و رنگینکمانی در پس سکوت تحریریه - گالری تحریریه تکرنگی که بر نوری مذاب شناور است
- Hyer Aviation — غروب در کابین خلبان بر فراز کاغذ پوستی. آسمان کمرنگ سپیده دم با لوگوی سریف به اندازه بدنه هواپیما تلاقی میکند و یک تکرنگ با رنگ رسی گرم، محدودیت تکرنگی را میشکند.
- OFF+BRAND. — کرهای رنگینکمانی روی پوست کاغذی گرم
- Seed — یک موجود زنده زیر شیشه آزمایشگاهی
- Eindhoven Design District — بروتالیسم تحریریه روی کاغذ سفید، یک مانیفست طراحی شهری است که با حروف بزرگ، با حداقل عکاسی و محدودیت مطلق اجرا میشود.
- Miranda — یک فونت عریض کلاسیک روی پسزمینه کرم روشن - سرمقاله یک روزنامه برای عصر دیجیتال
- Monocle — یک روزنامه عریض با کیفیت بالا روی کاغذ کرم رنگ. یک سرمقاله با دقت انتخاب شده، که در آن هر ستون جایگاه خود را دارد و فقط یک رنگ معنادار در صفحه ظاهر میشود.
- Agencja brandingowa — یک گالری سرمقاله با تُنهای سفید و تایپوگرافی انجام شده با جوهر مشکی
- Websmith Studio — نور صبح روی کاغذ کرم رنگ
- Aspelin Reitan — بایگانی معماری اثر Candlelight - این صفحه مانند مجموعهای از فضاهای ساخته شده به نظر میرسد که به دیواری به رنگ کرم گرم سنجاق شده است و یک خط متن سفید در بالای هر تصویر در تمام عرض صفحه شناور است.
- Public — یک سرمقاله تکرنگ روی مرمر سرد - تقریباً یک بوم تکرنگ، با یک فونت سریف ۳۰۰ و یک تکرنگ بنفش که تمام کار رنگآمیزی را انجام میدهد.
- Motto — یک تکسنگ تایپوگرافیک روی کاغذ - صدایی واحد و مطمئن که خود را بر روی کاغذی به سفیدی برف اعلام میکند