Electronic Materials Office
آتشی درخشان در نگارخانهای مزین به زغال
دفتر مواد الکترونیکی یک کارگاه آموزشی آخر شب است: یک بوم مشکی مات، یک اخگر نارنجی درخشان و یک فونت که به جای اعلام، زمزمه میکند. رابط کاربری با هر صفحه مانند یک استودیوی تاریک رفتار میکند - عکسهای صفحه کلید تنها منبع نور واقعی هستند و رابط کاربری از آن پیروی میکند. تیترها، که با GT-Flexa با وزن ۲۰۰ تنظیم شدهاند، در فضای منفی وسیعی شناور هستند؛ متن بدنه عمداً کوچک و انسانگرایانه است (Times). رنگها اندازهگیری میشوند: سفید خالص برای تایپ، بنفش ملایم (#9e9eff) برای لینکها، و یک دکمه فراخوان عمل نارنجی (#f45500) در صفحه که با درخشش ۳۰ پیکسلی خود میدرخشد. اجزا به طور محکم در شعاع ۲۰ پیکسلی قرار میگیرند، حاشیهها در #9d9d9d به سختی قابل توجه هستند و تنها سایههای موجود در سیستم، دو هاله رنگی در اطراف عمل اصلی هستند.
یک بوم نقاشی تمام عرض و زغالی با محتوای متمرکز و حداکثر عرض (~1200px). صفحه اصلی با یک کارت رسانهای با شعاع 20px حاوی ویدیوی محصول شروع میشود که تقریباً 80٪ از عرض صفحه نمایش را اشغال میکند و بلافاصله پس از آن یک تیتر چند خطی GT-Flexa 200 قرار دارد که تقریباً به اندازه عرض کل محتوا ادامه مییابد. ریتم بخش: یک بخش توضیحات محصول واحد با حروف بزرگ به سبک Tobias، و به دنبال آن یک شبکه 2x2 (در دسکتاپ) از کارتهای توضیحات محصول. کارتها از حاشیههای 1px #9d9d9d و ناودانهای 24px بین آنها استفاده میکنند. تنفس عمودی سخاوتمندانه - بخشها به جای جداکنندهها با فضای منفی زغالی 48 تا 128px از هم جدا میشوند. ناوبری یک پنل شفاف و واحد است که در بالا قرار دارد، با مجموعهای از لینکهای پنهان و یک فراخوان عمل Ember. بدون نوار کناری، بدون مگامنو، بدون ناوبری ثانویه.
تصاویر فقط برای نمایش محصول هستند - یک عکس ماکرو از صفحه کلید Altar I در مقابل یک پس زمینه کاملاً سیاه، با نور پس زمینه از بالا که باعث درخشش بدنه و بازتاب نور از لبههای صفحه کلید میشود. نه سبک زندگی، نه دست انسان، نه زمینه محیطی. تصاویر با کنتراست بالا و تیره هستند؛ تنها رنگ خارج از پالت تک رنگ، کلید پاور نارنجی روی خود صفحه کلید است که یادآور فراخوان Ember Orange است. تصاویر مربعی یا ۱۶:۹ هستند و همیشه در کارتهایی با شعاع ۲۰ پیکسل قرار میگیرند و از لبههای کارت فراتر میروند (هیچ حاشیهای در اطراف عکس وجود ندارد و متن زیر لبه است). سبک آیکون: تنها آیکونوگرافی یک دایره کوچک توپر (●) قبل از لوگو است - یک نقطه نارنجی تک رنگ، با ضخامت حدود ۶ پیکسل.
پالت
برند
- Ember Orange
#f45500— دکمهی عملیاتی اصلی با یک پرکننده، تنها سطح کروماتیک در رابط کاربری است که همیشه با یک هاله نارنجی 30 پیکسلی همراه است و آن را مانند یک رشته میدرخشاند؛ درخشش بیرونی 30 پیکسلی روی دکمهی فراخوان اصلی، نماد ششضلعی Ember Orange را کپی میکند، اما به جای پرکننده، به صورت سایه وجود دارد و باعث میشود دکمه از درون روشن به نظر برسد.
خنثی
- Studio Charcoal
#202020— سطوح بوم و مقوا مانند کف یک گالری تاریک هستند، هرگز کاملاً سیاه نیستند، به طوری که چشم میتواند روی لبههای نرم آنها استراحت کند. - Bone White
#ffffff— متن اصلی، حاشیههای نازک روی تصاویر و یک سطح وارونه نادر. کل سلسله مراتب فونت به طور مستقل حفظ شده است. - Ash Gray
#9d9d9d— متن بیصدا، حاشیههای ظریف کارت و زیرنویسهای غیرفعال، تنها خاکستری میانه در طرح رنگی هستند که وقتی رنگ سفید خیلی پررنگ است، استفاده میشوند. - Mid Felt
#eaeaea— یک رنگ روشن برای سطوح پنلهای معکوس یا شبکههای مودال - سایهای از سفید که بین بژ و بوم تیره قرار میگیرد. - Carbon
#000000— برجستهترین جلوه، خطوط شمایل و قابهای متضاد است که در آنها بوم زغالی بیش از حد روشن است و نمیتواند شکل خود را به خوبی حفظ کند. - Lavender Link
#9e9eff— رنگ لینک تعبیهشده و طرح کلی قاب اکشن اضافی، کنتراست ملایم و سردی با نارنجی گرم دارد و خوانایی اکشنها را در پسزمینهی زغالی تضمین میکند.
تایپوگرافی
از ۱۶ تا ۸۶ پیکسل · ۸ مرحله
- GT-Flexa — جایگزینی: Inter (200/400) or Manrope (200/400) · طرح کلی 200, 400 · فونت اصلی برای عنوانها و عناصر تزئینی. وزن ۲۰۰ برای هر عنوان بالای ۲۴ پیکسل مناسب است - این یک سبک خاص است: در ۶۸ پیکسل و ۸۶ پیکسل، حروف به جای اینکه فریاد بزنند، در فضا حل میشوند. وزن ۴۰۰ برای زیرعنوانها و توضیحات کارت مناسب است، جایی که به سختی قابل شنیدن هستند. فاصله خطوط در بزرگترین اندازهها به ۱.۰ کاهش مییابد، بنابراین فونت تزئینی مانند ستونی از هوا روی یکدیگر قرار میگیرد.
- Tobias-light — جایگزینی: Söhne Buch or Inter Tight · طرح کلی 400 · یک سبک تایپوگرافی ثانویه برای عناوین بخشها و لوگوی پاورقی. این سبک یک پله پایینتر از GT-Flexa 200 برای ایجاد تضاد رنگی استفاده میشود - Tobias حس معماریتر و رساتری دارد، در حالی که GT-Flexa حال و هوای بیشتری دارد. فاصله منفی حروف، تناسبات گسترده Tobias Light را محدودتر میکند.
- Times — جایگزینی: Source Serif 4 or PT Serif · طرح کلی 400 · متن اصلی و پاراگرافهای عنوان، با استفاده از فونتهای سریف، در تضاد آگاهانه با فونتهای هندسی و تزئینی هستند. این سریفها بدون اینکه از اندازه متن اصلی تجاوز کنند، به توضیحات محصول گرما و اقتدار ویرایشی میبخشند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 4-8px |
| شعاع دکمه | 20px |
| شعاع کارت | 20px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 48-128px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Electronic Materials Office میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- OFFFICE : — یک گالری نوآر غرق در فونتهای یکپارچه
- Bibliothèque — یک گالری مکعب شکل سیاه زیر نورافکن - یک صفحه روشن تنها در یک سالن وسیع و تاریک
- 21 TSI — یک فضای خالی سرخ، یک سیلوئت واحد - یک سرمقاله مد روز که در آن رابط کاربری در فضا حل میشود
- Structured — گالری رنسانس روی کاغذ شبیه پلاستیسین
- CHAIBOY — یک دیوار گالری مشکی با یک عکس تکی با نورپردازی از پشت
- Holiday 100 — گالری هدایا در نیمهشب - یک تیتر سریف مانند یک کانون توجه، یک بوم نقاشی تیره مانند یک دیوار مخملی عمل میکند و تصویر هر محصول مانند یک قاب با دقت انتخاب شده آویزان است.
- Apple (España) — گالری موزه، در نور ملایم روز، فضایی سفید، واحد، جذاب و بیوزن است که هر نمایشگاه با نورافکنی در برابر دیواری با رنگ ملایم روشن میشود.
- Analogue — ویترین گالری مشکی - کالاها در فضای خالی معلق هستند
- Apple (España) — ویترین گالری ابسیدین، یک سالن نمایشگاهی تاریک است که در آن یک شیء تیتانیومی واحد در برابر پسزمینهای کاملاً سیاه میدرخشد.
- Studio Oker — یک گالری تاریک با تزئینات سرخابی - یک اتاق نمونه کارها با دیوارهای سیاه، جایی که حروف سفید به نظر شناور میرسند و یک زمزمه قرمز سکوت را میشکند.
- 099 SUPPLY — یک دیوار گالری پر از اشیاء سیاه و سفید
- Retool — یک کارگاه گرم ابسیدین - سطحی برای ابزارهای دقیق، روشن شده با زغالهای گداخته، جایی که همه چیز خلق میشود