FRANKY'S
یک کیوسک بازی قدیمی روی پیشخوان یک فروشگاه اسکیت
زبان بصری فرانکی ترکیبی از بازیهای آرکید قدیمی و فروشگاه اسکیتبورد است: یک بوم رنگ کرم گرم (#f3e5df) که با حاشیههای پیکسلی سفت و سخت، یک صفحه شطرنجی سیاه و سفید فراگیر و یک فونت تک پیکسلی، آرکید، که برای هر کلمه در وبسایت استفاده شده است. پالت رنگ عمداً کم است - فقط دو رنگ کروماتیک باقی مانده است (نارنجی سیگنال #faa21f برای تابلو و سبز پررنگ #128e44 برای دکمه خرید)، و کل سلسله مراتب با افزایش وزن فونت آرکید از 400 به 700 و با استفاده از رنگ سیاه در برابر پسزمینه کرم بیان میشود. سطوح صاف و یکپارچه باقی میمانند. عمق فقط از طریق خط کرم 1 پیکسلی درج شده روی دکمهها و بازی تُنال صفحه شطرنجی حاصل میشود. اجزا یادآور اسپرایتهای ویترین فروشگاههای دهه 1990 هستند: حاشیههای ضخیم سیاه، شعاعهای حاشیهای فشرده 6-12 پیکسلی، پدینگ فشرده 4-8 پیکسلی و دکمههای 3D/AR که بیشتر شبیه آیکونهای پیکسلی هستند تا عناصر کرومی. صفحات جدید قرار است حال و هوای آرکید مانند خود را حفظ کنند: هیچ گرادیانی به جز یک متن طوماری نارنجی، بدون سایههای ملایم، بدون تایپوگرافی تزئینی - فقط کاغذ کرم رنگ، خطوط پیکسلی مشکی و یک رنگ نارنجی گرم.
در دسکتاپ، صفحه محصول یک طرحبندی تمام عرض و متمرکز با حداکثر عرض ۱۲۰۰ پیکسل را نمایش میدهد. ریتم از بالا به پایین به این صورت است: متن پیمایشی نارنجی → هدر کرم رنگ با خط مشکی → تقسیم دو ستونی (۵۵٪ صفحه شطرنجی در صفحه اصلی / ۴۵٪ شبکه دو ستونی کارتهای محصول) → نوار کرم رنگ در پاورقی. در موبایل، صفحه اصلی به یک صفحه شطرنجی تمام عرض تبدیل میشود و شبکه به یک طرحبندی تک ستونی تبدیل میشود. کارتها به طور مساوی در یک شبکه دو ستونی با جداکنندههای پیکسلی خاکستری (#e5e7eb) بین آنها توزیع شدهاند. فاصله بین بخشها حداقل است (۴۳-۶۱ پیکسل) و رابط کاربری هرگز از نوارهای تیره که کل عرض صفحه را میپوشانند استفاده نمیکند - بوم کرم رنگ بدون وقفه نمایش داده میشود.
عکسی از کلاهها در مقابل یک پسزمینه کرم رنگ تمیز، در مرکز و با برش دقیق، با سایهای نرم و مشکی زغالی در زیر آن. نه سبک زندگی، نه مدل، نه زمینه - کلاه ستاره است. یک الگوی شطرنجی در پشت عنصر اصلی به عنوان سطح گرافیکی عمل میکند. هیچ تصویرسازی، هیچ رندر سهبعدی به جز دکمه واقعیت افزوده، هیچ آیکون تزئینی به جز صلیب پیکسلی در لوگو وجود ندارد.
پالت
برند
- Marquee Orange
#faa21f— نوار اعلانها در بالای صفحه، عناصر برجسته، برندسازی. - Buy Green
#128e44— دکمه «افزودن به سبد خرید» پر شده است - تنها اقدام خریدی که با رنگ سبز مشخص شده است.
خنثی
- Arcade Cream
#f3e5df— پسزمینه صفحه، سطوح کارت محصول، دکمههای درج شده. - Ink Black
#000000— متن اصلی، طرح شطرنجی، تمام حاشیههای رابط کاربری، طرح کلی کارت، حاشیههای آیکون. - Pixel Gray
#e5e7eb— حاشیههای نازک، جداکنندههای کارت، قوانین ساختاری بین سلولهای شبکه. - Charcoal
#333333— رنگ سطح ثانویه، مربعهای سایه شطرنجی، رنگ سایه - Carbon
#151515— تُنهای خنثی غنی برای پر کردن تصاویر و متراکمترین کاشیهای شطرنجی. - Muted Gray
#737373— متن غیرفعال/بیصدا روی دکمهها و در متن بدنه
تایپوگرافی
از ۱۰ تا ۱۸ پیکسل · ۴ مرحله
- Arcade — جایگزینی: VT323 · طرح کلی 400, 700 · در سراسر رابط کاربری از یک فونت واحد استفاده شده است - تمام عنوانها، برچسبها، قیمتها، دکمهها، متن بدنه و آیکونها در Arcade هستند. انتقال از ۴۰۰ به ۷۰۰ تنها ابزار برای ایجاد سلسله مراتب است؛ استفاده از فونت دوم، توهم کیوسک را از بین میبرد.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 4-8px |
| شعاع دکمه | 6px |
| شعاع کارت | 12px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 43-61px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک FRANKY'S میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- 099 SUPPLY — یک دیوار گالری پر از اشیاء سیاه و سفید
- teenage engineering — کاتالوگ صنعتی در نورپردازی استودیویی - محصول تنها شیء مهم در صفحه است و هر چیز دیگری پیرامون آن بحث میشود.
- Custo — یک گالری به رنگ برنزی با فونتی یکپارچه. یک نمایشگاه با تُنهای خاکستری-سبز ملایم، جایی که یک شیء تیره و فونت ۵۷ پیکسلی به خودی خود گویا هستند.
- Walden — سکوت کف جنگل - هر محصول سنگ است، هر پیکسل خزه و سکوت
- Fiverr — نقطه کانونی بازار دیجیتال، یک نبض سبز پر جنب و جوش در مقابل صحنههای تاریک تئاتر است. یک نقطه سبز نئونی به عنوان لنگر لوگو عمل میکند؛ بقیه آن تک رنگ است که برای برجسته کردن جذابیت خدمات ارائه شده طراحی شده است.
- Peloton — یک چراغ قرمز در یک باند فرودگاه کاملاً مشکی. یک نمایشگاه تناسب اندام که در آن یک تابلوی CTA قرمز روشن از میان فضای وسیع و تاریک نمایشگاه عبور میکند و به اتاقهای محصولات تمیز و سفید منتهی میشود.
- HOUSEPLANT — کتابفروشی با آجیل روی کاغذ کتانی
- Adam Lippes — یک استودیوی تحریریه تک رنگ روی کاغذ کرم - یک صفحه گسترده Vogue که تنها تزئین آن شبکه طرح بندی است، نه پالت رنگ.
- Elektron — پنل کنترل تجهیزات در نیمهشب تقریباً یک بوم نقاشی سیاه است که در آن عکسهای محصول میدرخشند در حالی که رابط کاربری عملاً نامرئی است.
- Sigmaphoto — گالری تک رنگ ابزار دقیق، اتاقی سفید و آرام است که در آن تنها رنگی که اهمیت دارد، رنگی است که شما را به عمل فرا میخواند.
- Channel Studio — یک آزمایشگاه عکس استودیویی با یک آباژور مرجانی
- Specht Studio — دیواری پر از کنجکاوی پنهان. روکش کرومی مخصوص استودیو، سطحی سفید و حروف مشکی است؛ جلوههای بصری آتشبازی کاملاً در کاشیکاری پروژه متمرکز شدهاند.