পিক্টোগ্রাম
ছোট, সহজ গ্রাফিক্যাল উপাদান যা মূল ওয়েব কম্পোনেন্টগুলোকে উন্নত করে, দ্রুত ও কার্যকরভাবে ধারণা প্রকাশ করে।
আক্ষরিক, কার্যকরী এবং জ্যামিতিক — আমাদের pictograms ধারণাগুলোকে তাদের সবচেয়ে বিশুদ্ধ রূপে সংক্ষিপ্ত করে, স্পষ্ট উদ্দেশ্য এবং কালজয়ী সরলতা প্রকাশ করে।
ধরন
Spaceship pictograms দুই ধরনের হয়: regular এবং comp। comp type একটি regular pictogram-কে Spaceship-এর Iconography Library-এর একটি icon-এর সঙ্গে একত্রিত করে, যা আমাদের আরও জটিল এবং নির্দিষ্ট ধারণা প্রকাশ করতে সাহায্য করে।
সংস্করণ
সব Spaceship pictograms দুইটি version-এ উপলভ্য: filled (primary) এবং outlined (secondary)। outlined version শুধুমাত্র তখনই ব্যবহার করা উচিত, যখন কোনো pictogram-এর visual weight কাছাকাছি থাকা pictograms, text বা UI component-এর তুলনায় কম হওয়া প্রয়োজন। এটি জটিল layout-এ visual hierarchy প্রতিষ্ঠা করতে সাহায্য করে।
গঠন
সামঞ্জস্যপূর্ণ এবং ভারসাম্যপূর্ণ ফলাফল নিশ্চিত করতে pictograms একগুচ্ছ নিয়মের ওপর ভিত্তি করে তৈরি, base grid থেকে gradient এবং stroke parameter পর্যন্ত।
আকার
Spaceship pictograms-কে scalable হওয়ার জন্য ডিজাইন করা হয়েছে, যাতে visual consistency বজায় থাকে এবং সর্বোত্তম legibility নিশ্চিত হয়। আমাদের design system-এ pictogram-এর পাঁচটি size রয়েছে।
রঙ
Pictograms সাধারণত একটি একক রঙ ব্যবহার করে। একমাত্র ব্যতিক্রম হলো comp type, যেখানে brand বা notification colors অন্তর্ভুক্ত থাকতে পারে; এ সম্পর্কে আরও তথ্য আপনি নিচে পাবেন। UI context-এ সামঞ্জস্য নিশ্চিত করতে, pictograms Spaceship Design System-এর color references অনুসরণ করে।
ডিফল্ট রঙ
Gray হলো pictograms-এর ডিফল্ট রঙ এবং এটি message, action বা feature উপস্থাপনের জন্য ব্যবহার করা উচিত। ব্যতিক্রমী ক্ষেত্রে, এটি product-এর জন্যও ব্যবহার করা যেতে পারে। Outlined pictograms শুধুমাত্র ডিফল্ট রঙেই উপলভ্য।
ব্র্যান্ডের রঙ
SPS Blue, SPS Dark Gray, অথবা white-ও ডিফল্ট রঙের পরিবর্তে ব্যবহার করা যেতে পারে, যখন আরও বেশি visual impact প্রয়োজন হয় বা Spaceship পরিচয়কে আরও জোরদার করতে হয়। আরও বিস্তারিত জানতে color page দেখুন।
পণ্যের রঙ
বর্তমান এবং আসন্ন সব product-এর জন্য product-নির্দিষ্ট context-এ (product page, product card ইত্যাদি) pictograms-এর ক্ষেত্রে প্রধান product color ব্যবহার করা উচিত।
নোটিফিকেশনের রঙ
এই রঙগুলো notification message-কে আরও জোরদার করতে ব্যবহার করা উচিত। comp version শুধুমাত্র generic system message-এ ব্যবহার করা উচিত, warning state-এ নয়।
নির্দেশনা
pictograms তৈরি ও ব্যবহারের সময় কী কী এড়িয়ে চলতে হবে, তার কিছু উদাহরণ এখানে দেওয়া হলো।
regular pictogram-এর মূল উপাদানগুলোকে নিচের ডান কোণে পড়তে দেবেন না।
filled version-এ জটিল বা বহু রঙের gradient ব্যবহার করবেন না।
comp type-এ filled এবং outlined element একসঙ্গে মিশিয়ে ব্যবহার করবেন না।
filled version-এ উপরে চিহ্নিত রঙগুলো ছাড়া অন্য কোনো রঙ ব্যবহার করবেন না।
outlined version-এ ডিফল্ট রঙ ছাড়া অন্য কোনো রঙ ব্যবহার করবেন না।
Spaceship brand primary এবং Notification colors ছাড়া অন্য কোনো রঙের সঙ্গে ডিফল্ট রঙ একত্রে ব্যবহার করবেন না।