
Shop
সাদা মার্বেলের উপর একটি ভাসমান বাণিজ্য নক্ষত্রপুঞ্জ
অনলাইন স্টোরটি একটি "সাদা ক্যানভাস" মডেলে কাজ করে, যেখানে পণ্যগুলি থাম্বনেইলের গ্রিডের পরিবর্তে বড়, বেশ বাঁকানো ইমেজ কার্ড হিসাবে প্রদর্শিত হয়। পুরো ইন্টারফেসটি অবিশ্বাস্যভাবে মসৃণ: সর্বত্র ২০-২৮ পিক্সেল ব্যাসার্ধ, পিল-আকৃতির কন্ট্রোল এবং একটি কম্প্যাক্ট ১৬ পিক্সেল জিটি স্ট্যান্ডার্ড বডি, যাতে টাইট নেগেটিভ ট্র্যাকিং রয়েছে যা টেক্সটকে স্পষ্ট ও বোল্ড করে তোলে। সিস্টেমটির একমাত্র বোল্ড অ্যাকসেন্ট হলো একটি উজ্জ্বল বেগুনি রঙ (#5433eb), যা লোগোতে, বৃত্তাকার সার্চ রেজাল্ট ফিল্ডে এবং একই বাটনের উপর একটি হালকা আভাযুক্ত ছায়া হিসাবে দেখা যায়। বাকি রঙের প্যালেটটি উষ্ণ নিউট্রাল: সাদা সারফেস, একটি হালকা শীতল ধূসর ক্যানভাস, সূক্ষ্ম বর্ডার এবং প্রায়-কালো টেক্সট। ১২ পিক্সেল গাটারের কারণে ঘনত্ব কম্প্যাক্ট থাকে, কিন্তু হিরো এবং ক্যাটাগরি স্ট্রাইপগুলি ৬৪-৮০ পিক্সেলের একটি উদার উল্লম্ব ছন্দের কারণে শ্বাস ফেলার সুযোগ পায়, যা কেনাকাটার অভিজ্ঞতাকে ক্যাটালগের চেয়ে ব্রাউজিংয়ের মতো বেশি করে তোলে।
এর সর্বোচ্চ প্রস্থ ১২০০ পিক্সেল, যা একটি স্বচ্ছ #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) ব্যবহৃত হয়। প্রতিটি ফন্ট ভ্যারিয়েন্ট ৪০০ অপটিক্যাল ওয়েটে প্রদর্শিত হয়—বোল্ড কনট্রাস্টের পরিবর্তে, সূক্ষ্ম গ্রেডিয়েন্ট এবং ঘন নেগেটিভ লেটার স্পেসিংয়ের মাধ্যমে ফন্টের স্তরবিন্যাস তৈরি করা হয়। এটি একটি স্বতন্ত্র শৈলী: শপ বোল্ড ফন্ট দিয়ে জাহির করে না, বরং লেটার স্পেসিংয়ের মাধ্যমে লেখাকে একটি নির্দিষ্ট আকার দেয়।
- Shopify Sans — প্রতিস্থাপন: Inter · রূপরেখা 400, 700 · সিস্টেম-স্তরের বার্তা, যেমন অ্যাপ লোডিং ব্যানার এবং কুকি সম্মতির বার্তার জন্য সংরক্ষিত।
ব্যবধান এবং ফর্ম
| উদ্দেশ্য | অর্থ |
|---|---|
| ঘনত্ব | গড় |
| প্রাথমিক পদক্ষেপ | 12px |
| বোতামের ব্যাসার্ধ | 9999px |
| কার্ডের ব্যাসার্ধ | 28px |
| ছায়া | নরম ছায়া |
| বিভাগগুলির মধ্যে | 64px |
| পৃষ্ঠার প্রস্থ | 1200px |
এআই আপনার ওয়েবসাইটটি Shop স্টাইলে তৈরি করবে এবং তাতে তথ্য যোগ করবে।
- Instagram, TikTok, Facebook লিঙ্কের মাধ্যমে পণ্য এবং পোস্ট দিয়ে পূরণ করুন।
- আপনার পুরোনো সাইট থেকে কন্টেন্ট স্থানান্তর করুন—শুধু ঠিকানাটি উল্লেখ করুন।
- সেরা ইঞ্জিন React ( Next.js)-এ তৈরি আধুনিক ডিজাইন, সাথে রয়েছে সার্ভার রেন্ডারিং এবং এসইও অপটিমাইজেশন।
- সার্চ রেজাল্ট এবং নিউরাল নেটওয়ার্ক সুপারিশের জন্য সম্পূর্ণ স্বয়ংক্রিয় এসইও অপ্টিমাইজেশন।
একই রকম শৈলী
- Apple iPhone Duo — একটি সাদা গ্যালারিতে একটি ফোল্ডেবল ডিভাইস। মাঝখানে পণ্যটির ভিজ্যুয়াল রেন্ডারিং রয়েছে, এবং টাইপোগ্রাফি ও নীল রঙের কন্ট্রোলগুলো ইচ্ছাকৃতভাবে অনুজ্জ্বল রাখা হয়েছে।
- AYOCIN — সুস্থতার এক সৌর প্রতীক। একটি উষ্ণ অন্দরসজ্জার ছবির কথা মনে করিয়ে দেয় এমন স্ক্রিন তৈরি করুন: বিশাল আকারের টাইপফেস, হালকা ঝাপসা স্থাপত্যের ছায়া, এবং একটি শান্ত, স্নিগ্ধ পরিবেশে স্থাপিত একটিমাত্র আলোকিত বস্তু।
- Apple AirPods 5 — অ্যাপল — সাদা পটভূমিতে সিনেমা। সম্পাদনার জন্য ব্যবহৃত বিশাল সাদা স্থানকে জায়গা করে দেয় পূর্ণদৈর্ঘ্যের বিজ্ঞাপন, যেখানে চলমান বস্তুর ছায়ামূর্তি এবং তীব্র আলো এক দৃশ্যগত নাটকীয়তা সৃষ্টি করে।
- Hopper — গোধূলি বেলায় সান্তোরিনির একটি জানালা। গন্তব্যস্থলটির একটি স্নিগ্ধ ছবি আবহ তৈরির আবরণ হিসেবে কাজ করছে, যার উপরে রয়েছে ছোট সাদা নেভিগেশন এবং বুকিং কন্ট্রোল।
- Bose — উপকূলের একটি সাউন্ডস্টেজ। বাতাসে ওড়া একটি বিজ্ঞাপনের ছবি ফ্রেমটি জুড়ে রয়েছে, আর তার চারপাশে নিখুঁত খুঁটিনাটির মতো সাজানো আছে প্রচারণার স্পষ্ট সাদা-কালো কন্ট্রোলগুলো।
- Bauhaus Clock — বাউহাউস-অনুপ্রাণিত ঘড়ি – ফিরোজা রঙের যান্ত্রিক দ্যুতি। শান্ত, উজ্জ্বল পৃষ্ঠতলকে একটি গাঢ়, সিনেম্যাটিক ঘড়ির ছবি দিয়ে ফ্রেমবন্দী করুন এবং ফিরোজা রঙকে একটি বিরল উজ্জ্বল অলঙ্কার হিসেবে ব্যবহার করুন।
- Cursor — ধিকিধিকি জ্বলতে থাকা কয়লার আলোয় আলোকিত একটি আরামদায়ক পার্চমেন্ট কর্মশালা।
- Slush — প্যাস্টেল কাগজের উপর স্টিকার দিয়ে তৈরি স্ফীত মহাবিশ্ব
- MindMarket — ক্রিম রঙের কাগজে ছাপা একটি আরামদায়ক রূপকথার বই — এক বন্ধুত্বপূর্ণ সম্পাদকীয় ক্যানভাস, যেখানে রোদ ঝলমলে ও স্টিকারের মতো নরম এক পৃষ্ঠতলে ইন্টার-এর বড় বড় শিরোনাম আর কেটে বানানো কাগজের চরিত্রগুলো সহাবস্থান করে।
- Airbnb — একটি শান্ত সাদা গ্যালারি দেওয়াল, যেখানে একটিমাত্র প্রবাল লাল রঙের বুকমার্ক রয়েছে।
- Superr — বিকেলের নরম আলোয় একটি উষ্ণ স্কুলের খাতা। একটি ক্রিম রঙের পাতা, ঢাকনাবিহীন একটি কমলা রঙের মার্কার, আর তুলে ফেলার অপেক্ষায় থাকা ল্যামিনেট করা নামের স্টিকারের একটি স্তূপ।
- Apple (España) — দিনের নরম আলোয় জাদুঘরের গ্যালারিটি একটি একক, মনোমুগ্ধকর, ওজনহীন সাদা স্থান, যেখানে হালকা রঙের দেওয়ালের ওপর স্পটলাইটের আলোয় প্রতিটি প্রদর্শনী আলোকিত।