Medium
روزنامه سفید خامهای در ساعت طلایی
مدیوم مانند یک اتاق مطالعه ادبی که به وب منتقل شده است، عمل میکند: یک پسزمینه گرم و کرمی (#f7f4ed) جایگزین سفید استریل معمول SaaS میشود و باعث میشود متنهای طولانی مانند یک صفحه چاپ شده به نظر برسند. سیستم بصری به شدت تک رنگ است - تقریباً تمام سطوح رابط کاربری، متن و حاشیهها در یک نوار باریک از خاکستریهای گرم از #242424 تا #6b6b6b قرار دارند - بنابراین توجه خواننده کاملاً روی محتوا متمرکز است. تنها حرکت امضا، تیتر serif (GT Super، 120px، weight 400، فاصله حروف -0.055em) است، یک انتخاب عمدی ضد روند: یک فونت serif کتاب انتقالی که برای نمایش مقیاسبندی شده است، به سختی قابل توجه است تا یک sans-serif هندسی جسورانه، سیگنال میدهد: "ما کتاب منتشر میکنیم، نه نرمافزار." دکمهها "قرصهای" کامل تقریباً سیاه هستند - تنها جوهر جامد روی صفحه.
صفحه اصلی دو ستون دارد: سمت چپ تقریباً ۵۵٪ از فضای صفحه را اشغال میکند، با تیتر، زیرمتن و فراخوان عمل که به صورت عمودی با فاصله داخلی زیاد چیده شدهاند؛ سمت راست تقریباً ۴۵٪ از فضای صفحه را اشغال میکند، با یک پنل تصویرسازی. ستون سمت چپ در سمت چپ تراز شده است (در مرکز قرار نگرفته است) و صفحه را به محور خواندن متصل میکند. در زیر صفحه اصلی، صفحه یک نوار کرم رنگ تمام عرض با لینکهای مرکزی در پاورقی است. هیچ شبکه کارتی، بخشهای ویژه یا نوارهای متناوب در صفحه اصلی وجود ندارد - صفحه اصلی یک صفحه است. تراکم محتوا عمداً کم است: یک تیتر، یک جمله، یک دکمه، یک تصویر. این صفحه یک جلد است، نه یک داشبورد.
تصاویر، ویرایشی و اپیزودیک هستند، نه سیستماتیک. صفحه اصلی شامل یک تصویر تکی با دست (یک گل سبز، یک دست هندسی، خطوط صورت فلکی) با سبکی آزاد و کمی ساده است. تصاویر بیشتر شبیه آثار سفارشی هستند که به صورت فصلی تغییر میکنند، نه از یک کتابخانه دائمی. هیچ عکسی در صفحه اصلی وجود ندارد. هیچ آیکونی در صفحه اصلی وجود ندارد - تمام کار توسط لوگوی متنی و متن انجام میشود. زبان بصری در درجه اول متن محور است و تصاویر به عنوان نقطه گذاری عمل میکنند.
پالت
خنثی
- Newsprint Cream
#f7f4ed— بوم صفحه، پسزمینه پنجره اصلی و پسزمینه بخش، سایهای گرم و کمی کرمی دارند که حس یک رابط کاربری چاپی را به جای یک رابط کاربری دیجیتال ایجاد میکند. - Paper White
#ffffff— سطوح مقوایی، پنلهای برجسته، فرمهای ورودی و هر سطحی که باید از بوم کرم رنگ جدا شود. - Ink
#242424— متن بدنه، متن بدنه، لینکها، عنوانها - کمی گرمتر از مشکی خالص، روی پسزمینه کرم رنگ خوب به نظر میرسد. - Body Gray
#333333— رنگ متن ثانویه و رنگ پیشفرض پیشزمینه در جایی استفاده میشوند که رنگی کمی روشنتر از رنگ جوهر بدون از دست دادن کنتراست مورد نیاز باشد. - Button Black
#191919— رنگ خنثی برای عناصر رابط کاربری ثانویه، جداکنندهها و برچسبهای بیرنگ پشتیبانی میشود. این رنگ نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود. - Marginalia Gray
#6b6b6b— پشتیبانی از رنگهای خنثی برای رابط کاربری ثانویه، جداکنندهها و برچسبهای بیصدا.
تایپوگرافی
از ۱۳ تا ۱۲۰ پیکسل · ۵ مرحله
- medium-content-sans-serif-font — جایگزینی: Inter · طرح کلی 400 · فونت medium-content-sans-serif - در دادههای استخراجشده یافت میشود اما توسط هوش مصنوعی توصیف نشده است.
- GT Super — جایگزینی: Playfair Display · طرح کلی 400 · سرتیترها و متن بدنه، یک فونت سریف کتاب انتقالی در مقیاس بسیار بزرگ با فاصله کم حروف و فاصله خط ۰.۸۳ هستند. انتخاب وزن ۴۰۰ (نه پررنگ) در ۱۲۰ پیکسل، یک ویژگی شاخص است: شکل حروف، نه وزن آنها، کار را انجام میدهد. فاصله منفی حروف، شکافهای بصری را کاهش میدهد و باعث میشود «داستانها و ایدههای انسانی» مانند یک بلوک تایپوگرافی منسجم به نظر برسد.
- Söhne — جایگزینی: Inter · طرح کلی 400 · فونت رابط کاربری sans-serif برای ناوبری، دکمهها، زیرعنوانها و عناوین کوچک استفاده میشود. محدوده ۱۳ تا ۱۴ پیکسل برای برچسبها و دکمههای ناوبری است؛ ۲۰ تا ۲۲ پیکسل برای زیرعنوانها و متن ثانویه در عنوان است. یک sans-serif تمیز با تناسبات انسانی در اندازههای کوچک خوانا و در اندازههای بزرگتر نامحسوس است.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 16-24px |
| شعاع دکمه | 9999px |
| شعاع کارت | 0px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 64px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Medium میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Steep — تحلیل فونتهای سریف روی کاغذ گرم
- Newformcap — روزنامه سرمقاله در رختکن
- Claude — اثری چاپشده روی پوست گرم - جوهر روی کاغذ استخوانی، خاک رس به عنوان تنها نفس رنگ
- 11x– Digital workers — یک برهوت سینمایی - عکسهای پانوراما از مناظر در برابر تیترهای ماندگار با حروف سریف که مانند صفحات یک مجله لوکس خوانده میشوند
- Revolut — یک اثر ویرایشی تکرنگ بر اساس عکسی از ابرها - جوهر سفید، دکمههای جعبه قرص، یک نوار رنگی آبی در دنیایی که در غیر این صورت خاکستری بود.
- Scheduling — جوهر تحریریه روی کاغذ کرم رنگ
- Titan — آرشیو تک رنگ با تُن گرم
- Programa — یک استودیوی طراحی سوئیسی در ظهر. دیوار گالری سفید توسط یک چراغ رومیزی زرد روشن شده است - همه چیز در سایههای خاکستری است تا زمانی که یک دکمه، نماد یا عنصر تزئینی توجه را جلب کند، و سپس آن عنصر زرد رنگ، کل اتاق را تعریف میکند.
- Sana Agents — درخشش لیمو روی زمینه سفید در سرمقاله
- Visual — سامیزدات سرمقالهای گرم. کاغذ کرم، پوسترهای سریف، حاشیهنویسی تکرنگ، یک ماژیک زرد.
- Midday — بروشور تحریریه روی پوست گوساله - تیتر ۷۲ پیکسلی سریف روی پسزمینه سنگی گرم، متن بدنه بدون سریف با فاصله، کنترلهای قرصی شکل، بدون سایه
- Chat for impact — یک کلینیک سبز جنگلی با اتاقهایی به رنگ پاستلی