Steep
تحلیل فونتهای سریف روی کاغذ گرم
Steep تحلیلها را به عنوان محتوای سرمقاله ارائه میدهد - تیترهای Signifier serif بالای یک بوم سفید تقریباً تک رنگ شناور هستند و یک لهجه هلویی گرم (#fbe1d1) سیستم غیررنگی را برجسته میکند. صفحه مانند یک مجله محصول خوانده میشود: فونت بزرگ و خطخطی، فضای متن فراوان، کارتهای بزرگ با لبههای نرم با شعاع 24 پیکسل و کنترلهای قرصی شکل که با سطح همسطح هستند. اجزا آرام و بیوزن به نظر میرسند - سایهها ظریف هستند، مرزها نازک هستند و رنگ برای تأکید عملکردی استفاده میشود (نوشته هلویی، حروف قهوهای تیره روی پسزمینه هلویی). سطوح محصول (جداول منطقهای، نمودارهای فعالسازی، سازندگان هوش مصنوعی) به عنوان عناصر شناور در اطراف هدر ارائه میشوند، نه اینکه در پوسته داشبورد قرار گیرند.
طرحبندی صفحه حداکثر عرض ۱۲۰۰ پیکسل دارد، در مرکز صفحه قرار گرفته است و بخشهای اصلی تقریباً کل عرض صفحه را اشغال میکنند اما درون ظرف باقی میمانند. طرحبندی اصلی شامل یک سربرگ مرکزی با فونت بزرگ serif، یک زیرسربرگ و یک جفت دکمه قرصی است که توسط چهار کارت توضیحات محصول شناور (جدول منطقه در بالا سمت چپ، کارت ثبت نام در سمت راست، نمودار فعالسازی در پایین سمت چپ، ویرایشگر هوش مصنوعی در پایین مرکز) احاطه شده است که با فاصلههای مختلف روی یک بوم سفید قرار گرفتهاند. بخشها بین پسزمینههای Paper White و Card Mist متناوب هستند و ریتمی آرام بدون کنتراست قوی ایجاد میکنند. بخشهای ویژه از یک طرحبندی دو ستونی متن و رابط کاربری با ناودانهای عمودی بزرگ ۸۰ پیکسلی استفاده میکنند. ناوبری یک نوار بالای شفاف (بدون پسزمینه، حاشیه یا سایه) با لوگو در سمت چپ، پیوندهای ناوبری در مرکز و دو فراخوان برای اقدام (لینک متنی + دکمه قرصی پر شده) در سمت راست است. تراکم کلی طرحبندی جادار است - صفحه بین بخشها "نفس میکشد" و محتوا هرگز لبهها را شلوغ نمیکند.
طراحی بصری متمرکز بر محصول است، نه سبک زندگی: عناصر رابط کاربری شناور (جداول منطقهای با دادههای پنج ردیفی، نمودارهای خطی که فعالسازیها را در ماههای آگوست-نوامبر نشان میدهند، حلقههای پیشرفت شعاعی، فیلدهای ورودی هوش مصنوعی) به صورت تصاویر برش خورده در اطراف تیترهای سرمقاله چیده شدهاند. هیچ عکس، تصویرسازی یا گرافیک انتزاعی وجود ندارد. تمام عناصر بصری محصول روی کارتهای شناور سفید با حاشیههای نازک و سایههای نرم قرار گرفتهاند. دایرههای آواتار دارای یک نشانگر جهت کوچک مکاننما هستند - یک موتیف بصری که تعامل در زمان واقعی را نشان میدهد. ترکیب اصلی، به جای یک تیتر مرکزی با یک عکس آماده، ترکیبی از متن و رابط کاربری است.
پالت
خنثی
- Ink Black
#17191c— متن اصلی، پسزمینه دکمههای توپر و لوگوی ناوبری تنها سطوح تیره در سیستم هستند؛ تمام فراخوانها و تیترهای متن اصلی در مقابل این پسزمینه تقریباً سیاه ظاهر میشوند. - Paper White
#ffffff— بوم صفحه، متن دکمه و سطوح برجسته کارت، رنگ زمینه غالب هستند که تقریباً 76 نقطه فرکانس را به خود اختصاص میدهند. - Mist Gray
#f2f2f3— سطوح کارت، پسزمینههای اضافی، پر کردن فیلدهای ورودی - یک لایه نامرئی در زیر کاغذ برای محتوای جاسازیشده. - Fog White
#fafafb— یک پسزمینه صفحه اضافی برای تغییر متناوب بخشها و سطوح هنگام حرکت ماوس - یک پله بالاتر از کاغذ برای ایجاد تغییرات ظریف نواری. - Slate Gray
#777b86— رنگ لینک، متن کمکی بیرنگ، متن پاورقی - یک خاکستری سرد و بدون اشباع که بین متن اصلی و متنی که نمیتواند گنجانده شود قرار میگیرد. - Ash Gray
#979799— برچسبهای اضافی، برچسبهای دستهبندی (بازاریابی، مالی، فروش) - یک درجه روشنتر از رنگ لینک.
تایپوگرافی
از ۱۵ تا ۹۰ پیکسل · ۸ مرحله
- Signifier — جایگزینی: GT Sectra · طرح کلی 400 · یک فونت سریف برای تیترها و عنوانها - که منحصراً برای H1/H2 در سه اندازه استفاده میشود؛ وزن فونت در تمام مقیاسها روی ۴۰۰ (معمولی) باقی میماند، یک انتخاب خاص: یک فونت سریف به جای اینکه مانند یک فونت ضخیم فریاد بزند، نجوا میکند.
- Sohne — جایگزینی: Inter · طرح کلی 400, 430, 450, 480, 500 · فونتهای اصلی، رابط کاربری و ناوبری همهکاره هستند و همه چیز را از فرادادهها گرفته تا زیرعنوانها پوشش میدهند؛ وزنهای نیمپلهای (۴۳۰، ۴۵۰، ۴۸۰) یک سلسله مراتب ظریف ایجاد میکنند بدون اینکه به حالت بولد بروند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 8px |
| شعاع دکمه | 9999px |
| شعاع کارت | 24px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 80px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Steep میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Newformcap — روزنامه سرمقاله در رختکن
- Claude — اثری چاپشده روی پوست گرم - جوهر روی کاغذ استخوانی، خاک رس به عنوان تنها نفس رنگ
- 11x– Digital workers — یک برهوت سینمایی - عکسهای پانوراما از مناظر در برابر تیترهای ماندگار با حروف سریف که مانند صفحات یک مجله لوکس خوانده میشوند
- Revolut — یک اثر ویرایشی تکرنگ بر اساس عکسی از ابرها - جوهر سفید، دکمههای جعبه قرص، یک نوار رنگی آبی در دنیایی که در غیر این صورت خاکستری بود.
- Scheduling — جوهر تحریریه روی کاغذ کرم رنگ
- Titan — آرشیو تک رنگ با تُن گرم
- Programa — یک استودیوی طراحی سوئیسی در ظهر. دیوار گالری سفید توسط یک چراغ رومیزی زرد روشن شده است - همه چیز در سایههای خاکستری است تا زمانی که یک دکمه، نماد یا عنصر تزئینی توجه را جلب کند، و سپس آن عنصر زرد رنگ، کل اتاق را تعریف میکند.
- Sana Agents — درخشش لیمو روی زمینه سفید در سرمقاله
- Visual — سامیزدات سرمقالهای گرم. کاغذ کرم، پوسترهای سریف، حاشیهنویسی تکرنگ، یک ماژیک زرد.
- Midday — بروشور تحریریه روی پوست گوساله - تیتر ۷۲ پیکسلی سریف روی پسزمینه سنگی گرم، متن بدنه بدون سریف با فاصله، کنترلهای قرصی شکل، بدون سایه
- Chat for impact — یک کلینیک سبز جنگلی با اتاقهایی به رنگ پاستلی
- Handhold — پوستی گرم در زیر سریفهای به سختی شنیده شده - صفحهای سرمقالهای، تنظیم دستی بدون نویز کروماتیک، جایی که بهترین فونت سریف ۲۰۰ نقطهای، تمام صدا را منتقل میکند