Shop
صورت فلکی تجاری شناور روی سنگ مرمر سفید
این فروشگاه آنلاین بر اساس مدل «بوم سفید» کار میکند، به طوری که محصولات به جای شبکههایی از تصاویر کوچک، به صورت کارتهای تصویری بزرگ و با انحنای زیاد نمایش داده میشوند. کل رابط کاربری فوقالعاده روان است: شعاعهای 20-28 پیکسلی در سراسر صفحه، کنترلهای قرصی شکل و بدنه جمع و جور 16 پیکسلی GT Standard با ردیابی نگاتیو دقیق که متن را واضح و پررنگ میکند. تنها رنگ پررنگ سیستم، بنفش پررنگ (#5433eb) است که در لوگو، فیلد نتایج جستجوی دایرهای و به عنوان سایه رنگی روی همان دکمه ظاهر میشود. بقیه پالت رنگ خنثی گرم است: سطوح سفید، یک بوم خاکستری سرد ظریف، حاشیههای ظریف و متن تقریباً مشکی. تراکم با ناودانهای 12 پیکسلی فشرده باقی میماند، اما نوارهای قهرمان و دستهبندی به لطف ریتم عمودی سخاوتمندانه 64-80 پیکسلی نفس میکشند و باعث میشوند تجربه تجارت بیشتر شبیه مرور کردن باشد تا یک کاتالوگ.
حداکثر عرض ۱۲۰۰ پیکسل است که در مرکز یک بوم شفاف #f2f4f5 قرار دارد و یک نوار کناری ثابت با عرض ۶۴ پیکسل در سمت چپ وجود دارد که فقط شامل آیکونهای ناوبری است. عنصر اصلی یک نوار تمام عرض است که کارتهای محصول در بالای یک لوگوی بنفش "فروشگاه" در مرکز قرار گرفتهاند و یک نوار جستجوی قرصی شکل مستقیماً در زیر آن قرار دارد. قرصهای دستهبندی در یک ردیف مرکزی در زیر نوار جستجو چیده شدهاند. بخشهای محتوا (زنانه، مردانه، زیبایی، خانه، کودک و نوجوان) به صورت نوارهای تعیینشده دنبال میشوند که هر کدام شامل یک شبکه ۴ ستونی با تصاویر محصول یا یک ترکیب "عنصر اصلی و شبکه" ۲ ستونی هستند. ریتم عمودی سخاوتمندانه است: ۶۴ تا ۸۰ پیکسل بین بخشهای اصلی. پاورقی یک نوار تیره در پایین صفحه با گروههای پیوند ستونی شکل است. فلشهای چرخ فلک در سمت راست پنلهای افقی محصول، محتوای قابل پیمایش را بدون نقاط صفحهبندی نشان میدهند.
عکاسی عنصر بصری غالب است: عکسهای تمام صفحه محصول در پسزمینه سفید، برش ۱:۱، و تصاویر سبک زندگی با تُنهای گرم خاکی (بژ، سفالی، مریم گلی، عاجی). تصاویر محصول رنگ خاص خود را دارند - رابط کاربری بیرنگ باقی میماند و به سایههای محصول اجازه میدهد تنوع بصری ایجاد کنند. لوگوهای برند به جای آیکونهای مجزا، به صورت متن روی تصاویر اصلی تیره یا روشن ظاهر میشوند. در ترکیب اصلی، کارتهای محصول به صورت یک صورت فلکی شناور و کمی همپوشانی در بالای علامت کلمه قرار میگیرند. آیکونها مینیمالیستی و تک رنگ (خطوط سیاه) هستند، به استثنای آیکونهای دستهبندی که از یک رنگ برند واحد استفاده میکنند. در تصاویر محصول هیچ تصویر، جلوههای سهبعدی یا گرادیانی وجود ندارد.
پالت
برند
- Shop Violet
#5433eb— دکمه ارسال، علامت متن نقطهچین و لوگوی برند تنها عناصر تأکیدی هستند که بر روی پسزمینه سفید، عمل و فردیت را برجسته میکنند. - Violet Wash
#c0b5f3— هاله ای شفاف پشت دکمه ارسال بنفش که درخشش خود را بدون تغییر رنگ حفظ می کند.
خنثی
- Canvas Mist
#f2f4f5— پسزمینه صفحه و پرداخت سطحی اضافی پشت کارتهای برجسته. - Pure White
#ffffff— سطح اصلی برای کارتها، فیلدهای ورودی، علائم شناور و دکمههای قرصی شکل. - Ink Black
#000000— متن اصلی، سرتیترها، آیکونها، نمادهای ناوبری و کارتهای محصول در حالت تاریک. - Faint Border
#ebebeb— خطوط جداکننده نازک روی کارتها، خطوط زمینه ورودی و قابهای دکمهای شکل. - Muted Gray
#787574— متن ثانویه، برچسبهای ناوبری، طرح کلی آیکونها در صورت غیرفعال بودن - Cool Stone
#cccccc— متغیرهایی، حالتهای غیرفعال و پسزمینههای آیکون غیرفعال
تایپوگرافی
از ۱۱ تا ۱۶ پیکسل · ۴ مرحله
- GT Standard — جایگزینی: Inter · طرح کلی 400 · فونت اصلی در همه اندازهها - هم برای متن بدنه و هم برای عنوانها. GTStandard-MRegular با اندازه 16px/-0.031em فونت اصلی برای متن بدنه، دکمهها و برچسبها است. GTStandard-MSemibold با اندازه 20px/-0.05em برای چندین عنوان بزرگ استفاده میشود؛ GTStandard-MMedium با اندازه 11-12px برای ریزعنوانها استفاده میشود. هر نوع فونت با وزن نوری 400 نمایش داده میشود - سلسله مراتب فونت از طریق گرادیانهای ظریف و فاصله منفی متراکم بین حروف، به جای کنتراست پررنگ، حاصل میشود. این یک سبک خاص است: Shop با فونتهای پررنگ فریاد نمیزند، بلکه متن را از طریق فاصله حروف شکل میدهد.
- Shopify Sans — جایگزینی: Inter · طرح کلی 400, 700 · برای پیامهای سطح سیستم مانند بنرهای بارگذاری برنامه و متن رضایت کوکی رزرو شده است.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 12px |
| شعاع دکمه | 9999px |
| شعاع کارت | 28px |
| سایهها | سایههای نرم |
| بین بخشها | 64px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Shop میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Cursor — یک کارگاه دنج کاغذ پوستی، روشن شده با زغالهای گداخته
- Slush — دنیای بادی برچسب ها روی کاغذ پاستلی
- MindMarket — یک کتاب افسانهای دنج روی کاغذ کرم - یک بوم تحریریه دوستانه که در آن تیترهای بزرگ اینتر و شخصیتهای کاغذی برشخورده روی سطحی آفتابگیر و نرم به نرمی برچسب، همزیستی میکنند.
- Airbnb — یک دیوار گالری سفید و آرام با یک بوکمارک قرمز مرجانی
- Superr — یک دفترچه یادداشت مدرسه گرم در نور ملایم بعدازظهر. یک صفحه کرم رنگ، یک ماژیک نارنجی بدون درب، و یک دسته برچسب اسم روکشدار که منتظر کنده شدن هستند.
- Apple (España) — گالری موزه، در نور ملایم روز، فضایی سفید، واحد، جذاب و بیوزن است که هر نمایشگاه با نورافکنی در برابر دیواری با رنگ ملایم روشن میشود.
- Lamborghini — رنگ بدنه مشکی در نمایشگاه، زیر نورافکنها - یک ماشین زرد
- Amplemarket — یک محل کار آفتابگیر و پوشیده از کاغذ رنگی
- Getharvest — میزی در ساعت طلایی - بوم نقاشی به رنگ کرم گرم، کارت پستالهای سفید آویزان از بوم، و یک شعله نارنجی روشن
- Agence Foudre — صفحه روی جلد مجله به رنگ صورتی ملایمی است که یادآور رژ لب است.
- Drive Capital — پوستر سفر جادهای قدیمی روی کاغذ گرم
- Apple (España) — ویترین گالری سفید