Shopify
گلخانه نیمهشب - علائم تجاری در پسزمینهای فیروزهای پررنگ، که با جرقهای از نعناع روشن شده، شکوفا میشوند.
سیستم طراحی Shopify یک کارگاه نیمهشب برای تجارت است: یک بوم تقریباً مشکی با رنگ سبز فیروزهای تیره، یک فونت sans-serif پهن و مطمئن، و یک لهجه نعناعی پر جنب و جوش که لحظات تعاملی را فعال میکند. رابط کاربری شبیه یک اتاق تاریک است، جایی که محصولات و برندها منبع نور هستند - عکسها و ویترین فروشگاهها در برابر سطوح تقریباً مشکی میدرخشند، در حالی که عناصر کرومی عقبنشینی میکنند. اجزا هندسی اما نرم هستند: کارتهایی با شعاع ۱۲ پیکسل با حاشیههای نازک، دکمههای قرصی شکل و یک فونت با وزن ۳۳۰ که مقیاس را زمزمه میکند نه فریاد. یک علامت نگارشی رنگی (#۳۶f۴a۴) به طور محدود روی لینکها، برچسبها و حالتهای فوکوس استفاده میشود و رنگ را برای لحظات کاربردی نگه میدارد تا اطمینان حاصل شود که داستانهای تجاری همچنان نقطه کانونی بصری باقی میمانند.
حداکثر عرض حدود ۱۲۸۰ پیکسل، در مرکز صفحه است و بلوکهای اسپلش تمامعرض آن از قاب عکس فراتر میروند. ریتم صفحه متناوب است: (۱) یک صفحه اسپلش تیره تمامعرض با تیتر و دکمههای فراخوان عمل روی هم، (۲) بخشهای تیره راحت با بلوکهای متن و تصویر با حداکثر عرض در ۲ ستون یا شبکههای تصویر در ۳ ستون، (۳) پنلهای ویترین تعاملی (کارت محصول، ماشین حساب حمل و نقل، نقشه جهان) که به صورت کارتهای برجسته روی یک بوم عمیقتر نمایش داده میشوند. ناوبری یک نوار بالایی ثابت با لوگو + ۳ عنصر ناوبری + لینکهای ثانویه + دکمه فراخوان عمل اصلی است که همگی در سمت راست تراز شدهاند. ریتم عمودی از فاصلههای ۸۰ پیکسلی بین بخشها با انتقال روان استفاده میکند - بدون جداکننده بین بخشهای تیره، فقط تغییر در تُن سطح.
طراحی بصری در درجه اول بر خردهفروش متمرکز است: عکسهای تمامقد محصولات و عکسهایی از رویدادهای برند، بخش عمدهای از وزن بصری را به خود اختصاص میدهند، که اغلب به شکل پسزمینههای بزرگ با متن سفید روی هم قرار گرفتهاند. تصاویر به طور فشرده برش داده شدهاند، کنتراست بالایی دارند و ماهیت جشنگونهای دارند (صدای زنگ نزدک، تبریکهای گروهی، نمای نزدیک از محصولات در دست). پسزمینه تیره این تصور را ایجاد میکند که این عکسها توسط نورافکنها روشن شدهاند. تصاویر مینیمالیستی هستند - کار توضیحی اصلی توسط تصاویر محصول جاسازیشده و اسکرینشاتهای ویترین فروشگاهها انجام میشود. آیکونها تکرنگ هستند، با عرض خط ۱.۵ تا ۲ پیکسل، معمولاً سفید یا #۳۶f۴a۴ برای حالتهای فعال.
پالت
برند
- Shopify Mint
#36f4a4— نشانگرهای ناوبری فعال، حلقههای فوکوس، هایلایتهای تگ و هایلایتهای هاور روی لینکها تنها درخششهای رنگی هستند که حس تعامل فعال را در پسزمینهای تاریک ایجاد میکنند.
خنثی
- Midnight Forest
#02090a— بوم صفحه، تصاویر پسزمینه سربرگ، تصاویر پسزمینه بخش - Deep Lichen
#061a1c— سطوح اصلی کارت، پنلهای برجسته، بلوکهای محتوا. - Shaded Fern
#072720— پنل ناوبری، کارتهای اضافی، بالا آمدن پنل که به سختی قابل توجه است. - Spruce Border
#1e2c31— حاشیههای نازک برای کارتها، خطوط جداکننده، خطوط زمینه ورودی. - Abyss Indigo
#000a1e— سطح اضافی برای جاسازی محصولات/نمایشها، پنلهایی با شرح عملکردها. - Pure White
#ffffff— متن اصلی، پر کردن دکمه، عنوان، لوگوها.
تایپوگرافی
از ۱۲ تا ۷۰ پیکسل · ۸ مرحله
- Neue Haas Grotesk — جایگزینی: Inter · طرح کلی 330, 400, 500, 550, 600 · سیستم تایپوگرافی اصلی شامل تیترهایی با وزن فونت ۷۰ تا ۹۶ پیکسل (۳۳۰ تا ۴۰۰) است که به جای پر سر و صدا بودن، ظریف هستند؛ متن بدنه با وزن فونت ۱۶ تا ۱۸ پیکسل (۴۰۰ تا ۵۰۰)؛ و ناوبری و رابط کاربری با وزن فونت ۱۴ تا ۱۶ پیکسل (۵۰۰ تا ۵۵۰). وزن فونت فوقالعاده سبک ۳۳۰ در اندازههای بزرگ صفحه نمایش، یک ویژگی متمایز است: این فونت اعتماد به نفس را از طریق خویشتنداری به جای حجم زیاد منتقل میکند.
- Inter Variable — جایگزینی: Inter · طرح کلی 400, 420, 450, 550 · یک نوع فونت ثانویه که در عناصر رابط ناوبری، یادداشتهای کوچک، کنترلهای تب و ریزمتن در پاورقیها استفاده میشود. حروف کوچک آن کمی بزرگتر و فاصله حروف آن استانداردتر است و باعث میشود در اندازههای جمع و جور خواناتر باشد. همچنین برای موقعیتهایی که یک فونت با وزن ۴۲۰ فاصله بین یک فونت معمولی و متوسط را پر میکند، مناسب است.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 12px |
| شعاع دکمه | 9999px |
| شعاع کارت | 12px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 80px |
| عرض صفحه | 1280px |
هوش مصنوعی وبسایت شما را به سبک Shopify میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Retool — یک کارگاه گرم ابسیدین - سطحی برای ابزارهای دقیق، روشن شده با زغالهای گداخته، جایی که همه چیز خلق میشود
- Elektron — پنل کنترل تجهیزات در نیمهشب تقریباً یک بوم نقاشی سیاه است که در آن عکسهای محصول میدرخشند در حالی که رابط کاربری عملاً نامرئی است.
- REKKI — پنل کنترل پرواز در آزمایشگاه عکاسی
- OFFFICE : — یک گالری نوآر غرق در فونتهای یکپارچه
- Clyde — این نمایشگاه، با تک نورافکنش، یک گالری تقریباً تاریک است که تنها رنگ موجود در اتاق، یک توپ گرادیان گرم است.
- Channel Studio — یک آزمایشگاه عکس استودیویی با یک آباژور مرجانی
- Electronic Materials Office — آتشی درخشان در نگارخانهای مزین به زغال
- ORYZO AI — یک انشا تصویری درباره یک تاریکخانه. یک شیء تنها که در تاریکی گرم معلق است، و فونت کرم تنها تزیین آن است.
- Factory — ترمینال «اتاق جنگ» در نیمهشب. «کارخانه» یک صفحه کنترل کاملاً سیاه است که یک کارت سفید مانند یک اعلان روشن با چراغ قوه روی آن قرار میگیرد - تنها شیء موجود در اتاق، خودِ کار است.
- Hungry Tiger — گرافیتی به رنگ زردچوبه روشن روی دیوار تنور. ترکیبی یکپارچه از طلایی و قهوهای زنگزده، با فونتی آنقدر بزرگ که بیشتر شبیه تابلوی بازار ادویه است تا یک وبسایت.
- Bibliothèque — یک گالری مکعب شکل سیاه زیر نورافکن - یک صفحه روشن تنها در یک سالن وسیع و تاریک
- Apple (España) — تئاتر سیاه با لوازم روشنایی