Dub
پنل کنترل کاغذ برنج مات لینک
سیستم بصری داب، زیباییشناسی SaaS مهار شده و تقریباً ویرایشی دارد: یک بوم تقریباً سفید که به جای عناصر بیرونزده، توسط حاشیههای نازک نگه داشته شده است، با تایپوگرافی تکرنگ متراکم که پشتیبانی ساختاری را فراهم میکند و یک رنگ آبی روشن واحد (#2563eb) که جلوهای خاص به آن میبخشد. سطوح در نگاه اول صاف و بدون قاب باقی میمانند، اما هر ظرف دارای حاشیه ۱ پیکسلی #e5e5e5 است که حس یک سند چاپ شده را تداعی میکند. شخصیت از طریق مجموعهای کوچک از لهجههای رنگی "قرصی" (نارنجی، سبز، بنفش) که بالای پالت خنثی شناور هستند، و هدرهایی که بدون زرق و برق، حس اعتماد به نفس و مدرنی را القا میکنند، به دست میآید. اجزا جمع و جور و متراکم هستند: ناودانهای ۸ پیکسلی، شعاع کارت ۱۲ پیکسلی، برچسبهای قرصی شکل در ۹۹۹۹ پیکسل، و کنترلهای نامرئی به جای دکمههای سنگین و توپر.
این صفحه بر اساس یک طرحبندی متمرکز با حداکثر عرض تقریبی ۱۲۰۰ پیکسل ساخته شده است. عنصر اصلی یک بلوک متنی متمرکز با سه عنصر شناور (برنامههای وابسته، تجزیه و تحلیل تبدیل، لینکهای کوتاه) است که به صورت افقی بالای یک طرحبندی بزرگ محصول قرار گرفتهاند. بخشها به صورت عمودی با ناودانهای ثابت ۶۴ پیکسلی مرتب شدهاند و بین بوم سفید و کاغذ مات #f5f5f5 برای جداسازی تُنها متناوباً قرار گرفتهاند. بخش پایینی از یک طرحبندی Z شکل استفاده میکند: متن سرمقاله در یک سوم میانی متمرکز شده است و کارتهای رابط کاربری شناور در حاشیههای چپ و راست لنگر انداخته شدهاند و ریتمی نامتقارن و مجلهمانند ایجاد میکنند. ابر لوگو یک شبکه ساده ۵x۲ است که در مرکز صفحه قرار دارد. ناوبری یک نوار بالای مینیمالیستی است - لوگو در سمت چپ، ناوبری در مرکز، گروهی از دو دکمه (یک دکمه "ورود" در حالت شبح + یک دکمه "ثبت نام" پر شده) در سمت راست - بدون یک منوی ثابت یا مگامنو. طرح داشبورد پنجره اصلی، یک طرح کلاسیک دو ستونی برنامه را نشان میدهد: یک نوار کناری ثابت (شبیه به ۲۴۰ پیکسل) + یک ناحیه محتوا که تراکم اطلاعات محصول را برای بازدیدکنندگان قبل از شروع پیمایش تعریف میکند.
تصاویر متمرکز بر محصول هستند، نه سبک زندگی. صفحه اصلی بر روی یک اسکرینشات بزرگ داشبورد متمرکز شده است که یک ماکت محصول واقعی را با نوار ناوبری کناری، جدول دادهها و عناصر رابط کاربری شناور نشان میدهد که به صورت یک پنل تخت روی یک بوم سفید چیده شدهاند. لوگوهای مشتری در یک شبکه خاکستری رنگ اشباع نشده (beehiv، superpower، Chatbase و غیره) نمایش داده میشوند تا عملکرد رسانههای اجتماعی آنها را تأیید کنند، و رنگ آنها حذف شده است تا لهجه آبی تک صفحه همچنان غالب بماند. کارتهای شناور شرکا (پروفایلها و کاشیهای کوچک با دادههای درآمد/پرداخت) در اطراف بلوکهای متن سرمقاله در پایین حرکت میکنند و بدون استفاده از سایه روی خود متن، حس عمق ایجاد میکنند. الگوی پسزمینه شبکه نقطهچین یک ویژگی شاخص است: یک ردیف نازک از نقاط کوچک با شفافیت بسیار کم، بافت و حس یک سیستم طراحی/سطح ترسیم را ایجاد میکند و بر موقعیت سایت به عنوان یک "پلتفرم انتساب لینک مدرن" تأکید میکند. آیکونوگرافی مینیمال است، با خطوط و پر کردنها، و از یک پالت رنگی (نارنجی نارنگی، بنفش کمرنگ، سبز نعنایی) برای برچسبهای ویژگی استفاده میکند. هیچ عکس، تصویر یا مدل سهبعدی استفاده نشده است - رابط کاربری محصول خود یک زبان بصری است.
پالت
برند
- Electric Blue
#2563eb— رنگ اصلی برند - لوگو، لینکها، شاخصهای کلیدی عملکرد، وضعیتهای فعال و آیکونهای برجسته - استفاده شده است. آبی پررنگ روی پسزمینه سفید، تنها جذابیت بصری سیستم را ایجاد میکند. - Deep Sapphire
#1e40af— پسزمینه اصلی دکمه عمل، یعنی رنگ پررنگ دکمه فراخوان عمل - تنها رنگی که نشاندهنده عمل است - به طور محدود برای جلب توجه استفاده شده است.
خنثی
- Canvas White
#ffffff— پسزمینه صفحه، سطح کارت، پنلهای پاپآپ، پایه و اساس مطلق هر صفحه نمایش هستند. - Paper Mist
#f5f5f5— تغییر رنگ نامحسوس با موس برای کارتهای تو در تو، پنلهای اضافی و فیلدها. - Ash
#e5e5e5— حاشیههای نازک روی کارتها، کانکتورهای ورودی و جداکنندهها، خطوط ساختاری هستند که سیستم را در کنار هم نگه میدارند. - Smoke
#d4d4d4— حاشیههای واضحتر برای بخشهای انتخابشده و طرح کلی دکمههای اضافی. - Pebble
#c8c8c8— حاشیهها، خطوط کنترل و جداکنندههای ساختاری با کنتراست متوسط. این رنگ نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل استفاده شود. - Midnight Ink
#0a0a0a— متن اصلی دکمهها، دکمههای هایلایت شده و متن ناوبری برای حداکثر کنتراست تقریباً مشکی هستند.
تایپوگرافی
از ۱۱ تا ۴۸ پیکسل · ۹ مرحله
- Satoshi — جایگزینی: Inter (weight 500 · طرح کلی 500 · نمایش عنوانها - فقط در خطوط ۳۶ تا ۴۸ پیکسلی برای عناوین عنوان و بخشها استفاده میشود. وزن فونت - ۵۰۰ (متوسط، نه پررنگ): عنوانها مطمئن و مدرن به نظر میرسند، اما هرگز بیش از حد قدرتمند نیستند. تناسبات هندسی ساتوشی به فونت کمی حس سرمقالهای و مدرن میدهد که متن بدنه اینتر نمیتواند آن را تکرار کند.
- Inter — جایگزینی: Inter (native) · طرح کلی 400, 500, 600 · متن بدنه، برچسبهای رابط کاربری، ناوبری، زیرعنوانها و عنوانهای فرعی. اینتر ابزار اصلی است که همه چیز را از برچسبهای کوچک ۱۱ پیکسلی تا عنوانهای ثانویه ۳۰ پیکسلی مدیریت میکند. وزن ۴۰۰ به طور پیشفرض برای متن بدنه، ۵۰۰ برای عناصر برجسته و برچسبهای دکمه و ۶۰۰ برای برچسبهای مهم رابط کاربری رزرو شده است. ۱۶ پیکسل با ارتفاع خط ۱.۵، رایجترین اندازه تک مرحلهای (۱۲۲۰ مورد) است که تأیید میکند ۱۶ پیکسل، اندازه متعارف متن بدنه است.
- Geist Mono — جایگزینی: JetBrains Mono or IBM Plex Mono · طرح کلی 400, 500 · قطعه کدهای کوتاه، فرادادههای فنی و توکنهای تکفاصله تعبیهشده در بلوکهای کد با اندازه ۱۲ تا ۱۴ پیکسل و در عناصر نمایش کد بزرگ با اندازه ۲۴ پیکسل استفاده میشوند. این امر اعتبار ابزار توسعهدهنده را تضمین میکند و با جایگاه محصول Dub سازگار است.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 8px |
| شعاع دکمه | 8px |
| شعاع کارت | 12px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 64px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Dub میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- ElevenLabs — یک مقاله تصویری با تُنهای کرم گرم با تیترهای ظریف. یک دفترچه یادداشت به سبک باوهاوس - کاغذ به رنگ پوست تخممرغ، جوهر مشکی و یک تکه رنگ بنفش و نارنجی برای نمایش محصول.
- Awesomic — توری زینک تحریریه با علائم نگارشی نارنجی که یادآور پولکهای رنگی است
- Monad — مجله فنی سرمقاله در مورد پوست گرم
- Seline Analytics — یک میز تحلیلی آرام روی کاغذ گرم
- Notion — یک دفترچه یادداشت کاغذی گرم در آفتاب ظهر
- Anthropic — یک ژورنال علمی میدانی روی پوست گرم - سطوح عاجی آرام، سربرگهای سرصفحهدار و یک لهجه گلی که فقط در صورت نیاز به اقدام ظاهر میشود.
- Calendly — جوهر آبی تیره روی مرمر سرد
- Augen Pro — ارائه سفید اپل، آبی الکتریکیِ بالینی، بیوزن و ملایم را به عنوان تنها عنصر تأکیدی در فضایی تکرنگ به نمایش میگذارد.
- Antimetal — شرح وقایع سرمقالهای روی کاغذ کرمرنگ - صبحی آرام در یک مجله علمی، جایی که خویشتنداری، اعتماد به نفس را منتقل میکند و حروف سریف بار سنگین را به دوش میکشند
- Perk — لیموی برقی روی کاغذ روغنی گرم
- Ditto — کارگاهی زیر نور خورشید که نمونههایی از گلهای وحشی خلق میکند. سطوح کرم گرم، رنگ پایه زرد پر جنب و جوش، جوهرهای سرمهای تیره، و اشکال رنگی ارگانیک که در پشت اثر شکوفا شدهاند.
- Officevibe — یک مجلهی سرمقالهای با کاغذ کرمرنگ گرم. یک مقالهی متفکرانه در مورد مدیریت منابع انسانی را تصور کنید که به عنوان یک محصول ارائه میشود - یک فونت سریفِ کجخطی که از طریق یک رابط کاربری آبی مدرن زمزمه میشود.