Superlist
یک فضای کاری شبانه با خاکسترهای مرجانی - یک سطح اپلیکیشن بادمجانی آرام که در آن یک جرقه نارنجی گرم، هر عملی را نشان میدهد
سوپرلیست از زبانی با بهره وری بالا در تُنهای بنفش نیمهشب استفاده میکند: بادمجانی پررنگ، مرجانی گرم به عنوان تنها رنگ اصلی و تیترهای بزرگ بدون سریف که کل فضا را به تصویر میکشند. رابط کاربری حس کار متمرکز در اواخر شب را تداعی میکند - آرام، لایه لایه و با اعتماد به نفس، با رنگی که فقط به عنوان نقطهگذاری کاربردی در فراخوانهای اقدام، حالتهای فعال و نکات کلیدی استفاده میشود. سطوح با تُنهای تیره ظریف با ته رنگ بنفش (#181824 → #26253b) لایه بندی شدهاند و از سیاه خالص اجتناب میشود تا عمق به جای بیروح، گرم به نظر برسد. اجزا دارای اشکال گرد فراوان (کارتهای 20 پیکسلی، دکمههای قرص)، سایههای نرم و "تنفس" از طریق شکافهای راحت 10-16 پیکسلی به جای شبکههای تنگ هستند. صدای تیتر همه چیز را نشان میدهد: وزن 600 نقطهای در 70-88 پیکسل با فاصله حروف کم -0.02em متن را به عنوان تایپوگرافی به جای رابط کاربری در نظر میگیرد - این متن به متن سرمقاله نزدیکتر است تا SaaS.
بخشهای تیره، تمام عرض صفحه را در بر میگیرند و محتوای آنها در مرکز صفحه و با حداکثر عرض قرار گرفته است. بخش اصلی به صورت عمودی در مرکز صفحه قرار گرفته و شامل یک تیتر، زیرمتن و فراخوان عمل (CTA) است و پس از آن یک اسکرینشات بزرگ از محصول قرار دارد که با بخش بعدی همپوشانی دارد. بخشهای بعدی به طور متناوب بین بلوکهای متنی متمرکز و شبکههای کارتی قرار میگیرند. بخش نقد و بررسیها از یک شبکه سه ستونی با کارتهای نقد و بررسی و ۱۶ ناودان استفاده میکند. ناوبری یک نوار بالا با یک لوگو در سمت چپ، لینکهای متمرکز و عملیات ورود در سمت راست است - بدون نوار کناری ثابت یا مگامنو. ناودانهای بین بخشها سخاوتمندانه هستند (۱۶ ناودان)، که به جای یک شبکه محصول متراکم، یک ریتم ویرایشی جادار ایجاد میکنند.
فضای بصری تحت سلطه اسکرینشاتهای محصول است - یک قاب بزرگ با گوشههای گرد که رابط کاربری واقعی برنامه را نشان میدهد، بخشهای اصلی و فرعی را پر میکند. عکسها مینیمال هستند و فقط به عنوان آواتار کاربر یا پیشنمایش رسانههای درون برنامه استفاده میشوند (برای مثال، تصویر کنسرت در پنل سمت راست ماکت محصول). لوگوهای روی نوار اعتماد، نمادهای متنی سفید و بیرنگ هستند. هیچ تصویرسازی تزئینی، گرافیک انتزاعی یا رندر سهبعدی وجود ندارد. استراتژی بصری این است که محصول را در مقیاس واقعی نمایش دهد، اجازه دهد تایپوگرافی کار احساسی را انجام دهد و از رنگ مرجانی به عنوان تنها رنگ تأکیدی استفاده کند.
پالت
برند
- Coral Ember
#ff4a36— نارنجی به عنوان یک رنگ ثانویه برای جزئیات تزئینی و برجسته کردن نشانههای نادر استفاده میشود. نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود.
خنثی
- Aubergine Canvas
#181824— پسزمینه صفحه، بوم اصلی، یک سایه گرم و تیره است که جایگزین رنگ مشکی خالص شده و باعث میشود رابط کاربری به جای مسطح، لایه لایه به نظر برسد. - Elevated Plum
#26253b— سطوح کارت، فیلدهای ورودی، کانتینرهای ناوبری - ایجاد عمق بدون مرز قابل مشاهده، یک قدم آسانتر از بوم نقاشی است. - Pure White
#ffffff— عناوین اصلی، متن دکمه و طرح کلی آیکونها - حداکثر کنتراست روی یک بوم تیره. - Fog Text
#696f81— متن اصلی، تیترهای فرعی و حاشیههای کمرنگ، همگی دارای نسبت کنتراست ۷:۱ هستند که خوانایی راحت را در پسزمینهای به رنگ بادمجانی فراهم میکند. - Ash Text
#8e8da0— رنگ خنثی برای عناصر رابط کاربری ثانویه، جداکنندهها و برچسبهای بیرنگ پشتیبانی میشود. این رنگ نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود. - Mist Highlight
#a3a3a7— حاشیههای ظریف، جداکنندهها و عناصر ناوبری غیرفعال، یک تُن خنثی ظریف ایجاد میکنند که همچنان در مقابل بوم برجسته است.
تایپوگرافی
از ۱۲ تا ۸۸ پیکسل · ۹ مرحله
- sans-serif — جایگزینی: Inter · طرح کلی 400 · sans-serif - در دادههای استخراجشده یافت میشود اما توسط هوش مصنوعی توصیف نشده است.
- Haffer XH SemiBold — جایگزینی: Inter Tight · طرح کلی 400, 600 · فونت اصلی برای نمایش و عنوانها. این فونت با اندازه ۷۰ تا ۸۸ پیکسل برای عنوانهای اصلی با فاصله حروف -۰.۰۲em و وزن ۶۰۰ استفاده میشود. فاصله کم حروف و ارتفاع زیاد حروف، به عنوانها وزن سرمقالهای میدهد و باعث میشود رابط کاربری تیره بیشتر شبیه جلد مجله باشد تا داشبورد. آن را با Inter Tight یا General Sans با وزن پررنگ جایگزین کنید.
- Jersey 10 — جایگزینی: Anybody · طرح کلی 400 · یک فونت بزرگ و تزئینی برای اعداد و هایلایتهای برجسته. به ندرت در اندازههای بسیار بزرگ برای ایجاد لهجههای تایپوگرافی استفاده میشود. میتوان آن را با Anybody یا Cabinet Grotesk جایگزین کرد.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 10-16px |
| شعاع دکمه | 100px |
| شعاع کارت | 20px |
| سایهها | سایههای نرم |
| بین بخشها | 80px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Superlist میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- DNA — رصدخانه نیمهشب از نگاه یک عدسی ذرهای
- Abetterlou — جرقههایی روی چرم زین - یک فونت گرم و کرمی که در پسزمینهای به رنگ قهوهای-مشکی میدرخشد، با دکمههای طلایی-کهربایی که احساسی شبیه به فلز داغ فشرده شده در صفحه را القا میکنند.
- Galileo-ft — یک عرشه فرماندهی در اعماق فضا با سیگنالهای آبی الکتریکی
- Decide AI — رصدخانه در نیمه شب - سیگنال نعناع
- Redis Agency — کارگاه ویراستاری که بعد از ساعات کاری باز است، مکانی کاملاً تاریک است که در آن تمام کارهای مربوط به برندسازی با فونتهای سریف و یک تربچه قرمز انجام میشود.
- Spellbook — دادگاهی در نیمهشب که با جوهر مرجانی روشن شده است - صفحهای تاریک برای تحریریه که تنها صدای آن، صدای قلم نارنجی گرم است
- Linear — ابزار دقیق نیمهشب
- Origin Financial — یک گالری نیمهشب از تجمل آرام. اتاقی آرام و تقریباً تاریک که در آن فونتهای بزرگ سریف و چند پنل رنگی روشن، این حس را ایجاد میکنند که امور مالی یک اثر هنری با دقت انتخاب شده است.
- Hyperstudio — طرح روی سنگ ابسیدین تراشیده شده است. متن و خطوط ظریف، فضایی سفید به رنگ سیاه خالص را قاب میگیرند و گهگاه علائم قطبنمای طلایی، راه را نشان میدهند.
- Air — مجسمه "آسمان نیمه شب از میان شیشه"
- Raycast — مرکز فرماندهی نیمهشب، نئون مرجانی
- dope.security — ترمینال نیمهشب با چراغهای بنفش