
Superhuman
پنل سرمقاله ساعت طلایی
سوپرهیومن در تقاطع عکاسی سرمقالهای و رابط کاربری نرمافزار قرار دارد - یک بوم نقاشی گرم و پوستمانند (هرگز سفید خالص نیست) عناصر برندسازی خرمایی و لهجههای بنفش پر جنب و جوش را قاب میکند. تیترها، که با فونت ۴۶۰ تنظیم شدهاند، به جای فریاد زدن، زمزمه میکنند و به عکاسی سینمایی تمام صفحه اجازه میدهند تا بار سنگین را به دوش بکشد، در حالی که کارتهای رابط کاربری محصول شفاف مانند شیشه بالای تصاویر شناور هستند. پالت رنگی بیشتر اوقات آرام و سرمقالهای باقی میماند: سطوح کرم، متن زغالی، حاشیههای خاکستری گرم ظریف و فاصله زیاد بین عناصر، با رنگی که برای نقطهگذاری عمدی برند در نظر گرفته شده است - یک فراخوان به اقدام خرمایی، لینکهای بنفش، یک دکمه افزودنی یاسی روشن. این سیستم عمداً از سایهها و گرادیانهای قوی روی سطوح رابط کاربری اجتناب میکند. عمق از طریق عکاسی لایهای و تاری ظریف پسزمینه در عنوان، به جای اثر انباشتگی، به دست میآید.
عنصر اصلی یک عکس تمام عرض با یک تیتر مرکزی (۴۸-۶۴ پیکسل/۴۶۰) و یک فراخوان عمل واحد پر از تصویر شراب است، با کارتهای رابط کاربری محصول شفاف شناور که در لبههای چپ و راست قرار گرفتهاند. در زیر عنصر اصلی یک نوار لوگوی راه راه سفید (۶ سلول در هر ردیف، حداکثر عرض محدود) قرار دارد، سپس یک بخش تب با سطوح کارت سفید روی بوم کاغذ پوستی. یک نوار فیروزهای تیره ریتم را حدود دو سوم صفحه میشکند - تمام عرض، دو ستون (تصویر در سمت چپ، متن در سمت راست) - و تنها تضاد رنگی را هنگام پیمایش ایجاد میکند. یک نوار جوی گرادیانی در ادامه میآید. فاصله عمودی بین بخشها ۶۴-۹۶ پیکسل است. حداکثر عرض محتوا حدود ۱۲۰۰ پیکسل در مرکز است، و عنصر اصلی و نوار تیره در تمام عرض نمای دید قرار دارند. ناوبری یک هدر ثابت با پسزمینه تار است؛ بدون نوار کناری، بدون مگا منو. پاورقی یک صفحه تمام عرض به رنگ شرابی با طرح چند ستونی از لینکها است. ریتم کلی عبارت است از: قاب اصلی → محتوای سفید/کرم ملایم → نوار تیره با تصویر اصلی → گرادیان اتمسفریک → پاورقی شرابی، نوارهای روشن و تیره به طور متناوب برای ایجاد یک تمپوی سرمقالهای.
عنصر بصری اصلی، عکاسی سینمایی است: یک پرتره تمامعرض در برابر آسمان باز به عنوان نقطه کانونی عمل میکند، و یک نوار اتمسفریک دوم در پایین صفحه قرار گرفته است. تصویر با تُن گرم، با ظرافت بیصدا و به صورت نیمرخ گرفته شده است که یادآور یک ساعت طلایی است و حس سرمقالهای بیشتری نسبت به حس شرکتی ایجاد میکند. یک نوار تیره با مستطیلهای هندسی شفاف و نوشتههای دستنویس روی عکسی از مردی غرق در فکر قرار گرفته است - کلاژ سطوح به جای یک تصویر واحد. رابط کاربری به صورت کارتهای شیشهای شناور ارائه میشود که مستقیماً روی عکس قرار گرفتهاند، نه به صورت اسکرینشاتهای جداگانه. هیچ تصویر آماده، هیچ رندر سهبعدی و هیچ فرم تزئینی انتزاعی وجود ندارد، به جز نوار اتمسفریک گرادیان. آیکونها، آیکونهای خطی تکرنگ مینیمالیستی هستند، با عرض حدود ۱۶ تا ۲۰ پیکسل، با یک عرض واحد که مربوط به وزن متن ۴۶۰ پوینت است.
پالت
برند
- Midnight Wine
#421d24— دکمههای اصلی عملیات، بنر تبلیغاتی و پاورقی به رنگ شرابی گرم و تقریباً مشکی هستند که بیشتر شبیه جوهر است تا قرمز، و پالت رنگ را بدون اینکه بیش از حد قوی باشد، تثبیت میکنند. - Royal Violet
#714cb6— بنفش برای برجسته کردن لینکها، برچسبها و عبارات کوتاه استفاده میشود. نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود.
خنثی
- Lilac Mist
#d4c7ff— رنگآمیزی ثانویه، آیکونهای روشن و پسزمینه دکمههای شبحوار، همگی دارای رنگ بنفش ملایمی هستند که بدون جلب توجه بیش از حد، به سبک برند اشاره دارد. - Deep Lagoon
#0c4243— پسزمینه تیره برای نوار، که به عنوان عنصر اصلی روایت استفاده میشود، تنها سطح تیره در این سیستم است که با یک الگوی هندسی روکشدار ترکیب شده است. - Warm Parchment
#f2f0eb— سطح کار صفحه عنصر غالب است؛ یک رنگ کرم گرم جایگزین رنگ سفید به عنوان پایه شده و به کل سیستم گرمای تحریریه میبخشد. - Soft Mist
#e3e3e2— حاشیههای ظریف، خطوط بیرونی کارت، خطوط جداکننده - خاکستری گرم و روشنی که با کاغذ پوستی ترکیب میشود اما لبهها را به وضوح مشخص میکند. - Ink Charcoal
#292827— متن بدنه، سرتیترها، طرح کلی آیکونها - رنگی گرم و تقریباً مشکی با قهوهای کافی که مانند جوهر روی کاغذ به نظر برسد، هرگز سرد نباشد #۰۰۰ - Stone Gray
#666666— متن بدنه فرعی، متون پشتیبان، توضیحات مختصر - یک رنگ خاکستری متوسط، که به طور محدود استفاده شده تا هرگز با متن اصلی رقابت نکند.
تایپوگرافی
از ۱۲ تا ۶۴ پیکسل · ۸ مرحله
- Super Sans VF — جایگزینی: Inter (closest open equivalent for variable weight range) · طرح کلی 460, 500, 540, 600, 700 · یک فونت واحد در کل سیستم. متغیرهای محور از ۴۶۰ (یک فونت امضا، کمی برش خورده برای تمام متنهای بزرگ عنوان) تا ۵۴۰ (متن بدنه برجسته) و ۷۰۰ (زیرنویسهای کوچک و پررنگ) را در بر میگیرند. یک VF با طراحی ویژه باعث میشود عنوانهای با وزن ۴۶۰ بیشتر عمدی به نظر برسند تا تصادفی - در ۴۸-۶۴ پیکسل با فاصله حروف کم، اثر «کمی برش خورده» به جای نازک بودن، به عنوان یک اثر مطمئن تلقی میشود.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 8px |
| شعاع دکمه | 16px |
| شعاع کارت | 16px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 64-96px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Superhuman میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- AI for Business — نمایشگاه تحریریه سبک بروتالیست با تُنهای خاکستری گرم
- Jeton — سرمقالهای درباره فینتک روی سنگ مرمر گرم
- Airtable — سمیناری دنج با فصلهایی که با رنگهای مختلف مشخص شدهاند
- Osmo — موزه توسعهدهندگان روی بتن خاکستری
- Linktr — پوسترهای تحریریه مثل نقل و نبات روی هم چیده شدهاند. وبسایت با بلوکهای رنگی طراحی شده است، با تیترهای سبز روشن که در مقابل دیوارهای آبی کبالت قرار گرفتهاند، و عناصر ناوبری قرصشکل سفید که بر فراز مزارع زرشکی شناورند.
- Outsource Consultants — یک برگه معماری در ابعاد بزرگ روی کاغذ استخوانی. یک زیباییشناسی تکنگاری، که در آن یک تکه نیلی روشن، شبکهای را که در غیر این صورت گرم و از نظر تایپوگرافی ماکسیمالیستی بود، قطع میکند.
- Streamtime — تابلوی خلق و خوی خلاقانه لمسی - میز اسکرپبوکینگ طراح
- Switch-Lit — شبکه تحریریه چاپ شده با جوهر روی کاغذ کرم رنگ
- HubSpot — یک کاغذ به رنگ کرم گرم با یک رگه نارنجی. هاباسپات شبیه یک مجله طراح است که روی کاغذ ضخیم چاپ شده است - تیترهای سریف، صفحات کرم گرم و یک رگه نارنجی آتشین که فقط مهمترین نکات را برجسته میکند.
- Granola — یادداشتهای میدانی روی پوست گرم—گرانولا مانند یک دفترچه یادداشت کهنه مولسکین است که روی میزی آفتابگیر باز شده باشد: سرتیترهای سریف حس استحکام، تزئینات سبز ارگانیک مانند جوهر گیاهی و خطوط ظریف در حاشیه کارتها که شبیه یادداشتهای دستنویس هستند، به آن میدهند.
- Secure — مکالمه در یک کافه اروپایی در نور ملایم روز، برداشتی گرم و شیک از تماس ویدیویی است، جایی که تیترهای سریف مانند یک مقاله مجلهای متفکرانه به نظر میرسند تا یک صفحه محصول فناوری.
- Mockups made easy — استودیوی طراحی تحریریه روی کاغذ سفید