Sushi Design System - UI Kit

সুশি হল Zomato এর নিজস্ব ডিজাইন সিস্টেম, যা একটি পরিষ্কার এবং সহজ ডিজাইনের ভাষা অনুসরণ করে শক্তিশালী ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। আমরা zomato এ, এটি মাটি থেকে তৈরি করেছি। এটি আমাদের জন্য শুধুমাত্র একটি ডিজাইন সিস্টেম নয়, এর চেয়েও বেশি এটি আমাদের ব্যবহারকারীদের একটি নতুন এবং উন্নত অভিজ্ঞতা প্রদান করতে সাহায্য করে৷ সুশি আপনাকে একটি পারমাণবিক, পরিষ্কার এবং সহজ ডিজাইনের ভাষা অনুসরণ করে বেস্পোক ইউজার ইন্টারফেস তৈরি করতে সাহায্য করতে পারে। যদিও সুশি তার নিজস্ব ডিজাইনের ভাষা তৈরি করে, এটি সম্পূর্ণরূপে আলিঙ্গন করে এবং অনেক ক্ষেত্রে অভ্যন্তরীণভাবে Google-এর মেটেরিয়াল ডিজাইনের উপাদান ব্যবহার করে।

একটি ডিজাইন সিস্টেম এবং ব্র্যান্ড নির্দেশিকাগুলির জন্য একটি রেফারেন্স হিসাবে, এটি Zomato-এর মধ্যে বিভিন্ন দল দ্বারা ব্যবহার এবং প্রতিনিধিত্ব করা হয়, যেমন - পণ্য, প্রকৌশল, বিপণন এবং ব্র্যান্ডিং।

একটি নকশা সিস্টেম কি?

একটি ডিজাইন সিস্টেম হল পুনঃব্যবহারযোগ্য উপাদানগুলির একটি সংগ্রহ, যা স্পষ্ট মান দ্বারা পরিচালিত হয়, যেগুলিকে যেকোন সংখ্যক অ্যাপ্লিকেশন তৈরি করতে একত্রিত করা যেতে পারে। একটি ডিজাইন সিস্টেম শুধুমাত্র সম্পদ এবং উপাদানগুলির একটি সংগ্রহ নয় যা আপনি একটি ডিজিটাল পণ্য তৈরি করতে ব্যবহার করেন। ইন্টারকমের প্রোডাক্ট ডিজাইনের ডিরেক্টর এমমেট কনোলির মতে, “... বেশিরভাগ ডিজাইন সিস্টেম আসলেই প্যাটার্ন লাইব্রেরি: UI লেগো টুকরাগুলির একটি বড় বাক্স যা প্রায় অসীম উপায়ে একত্রিত করা যেতে পারে। সমস্ত টুকরা সামঞ্জস্যপূর্ণ হতে পারে, কিন্তু এর মানে এই নয় যে একত্রিত ফলাফল হবে। আপনার পণ্যটি কেবলমাত্র পুনঃব্যবহারযোগ্য UI উপাদানগুলির স্তূপের চেয়ে বেশি। এর গঠন ও অর্থ আছে। এটি একটি সাধারণ ওয়েব পৃষ্ঠা নয়, এটি ধারণাগুলির একটি সিস্টেমের মূর্ত প্রতীক।"

সুশি ডিজাইন সিস্টেম

ভিত্তি

ফাউন্ডেশন হল ডিজিটাল ব্র্যান্ড নির্দেশিকা, যা আমাদের ডিজাইন সিস্টেমের টাইপোগ্রাফি, কালার প্যালেট, আইকন, স্পেসিং, ছায়া এবং তথ্য স্থাপত্যকে সংজ্ঞায়িত করে। সুশি, পারমাণবিক নকশা নীতি অনুসরণ করে, কম্পোজযোগ্য উপাদানগুলি ব্যবহার করে নীচের দিকে তৈরি করা হয়, যা পরমাণু ➡️ অণু ➡️ জীব হিসাবে সাজানো হয়।

পারমাণবিক নকশা

পারমাণবিক ডিজাইন (ব্র্যাড ফ্রস্ট দ্বারা বর্ণিত) আমাদের সিস্টেমে ম্যাপ করা হয়েছে।

#পরমাণু

ক্ষুদ্রতম অবিভাজ্য একক হল পরমাণু। অ্যান্ড্রয়েডে (বা যেকোনো মোবাইল UI) টেক্সট লেবেল, বোতাম এবং ইমেজ হোল্ডার হল পরমাণু।

#অণু

যে দৃশ্যগুলি গঠন করতে একাধিক পরমাণু জড়িত, কিন্তু তবুও ব্যবহারকারীর কাছে একটি একক সত্তার মতো দেখতে এবং আচরণ করে সেগুলি হল অণু৷ উদাহরণস্বরূপ, ইনপুট ক্ষেত্রগুলিতে ইনপুট বাক্স, ত্রুটি ক্ষেত্র এবং একটি পরিষ্কার বোতাম রয়েছে, কিন্তু একসাথে এটি একটি একক সত্তা।

#জীব

জটিল, কিন্তু পুনঃব্যবহারযোগ্য উপাদান, যেগুলো একত্রে একত্রিতভাবে কাজ করে। একাধিক পরমাণু ও অণুর সমন্বয়ে গঠিত। একটি কেস ইন পয়েন্ট রেটিং বার, যা ট্যাগ নিয়ে গঠিত, প্রতিটিতে একটি নম্বর এবং একটি আইকন রয়েছে। বিভিন্ন রেটিং নির্বাচন করা হলে ট্যাগগুলিও রঙ পরিবর্তন করে। প্রতিটি ট্যাগ পৃথকভাবে অন্যান্য স্থানেও ব্যবহার করা হয়, তবে একটি রেটিং বার হিসাবে, এটি নতুন অর্থ তৈরি করতে একসাথে কাজ করে।

টাইপোগ্রাফি

টাইপোগ্রাফি, আপনি হয়তো জানেন, লিখিত ভাষাকে সুস্পষ্ট, পঠনযোগ্য এবং প্রদর্শিত করার সময় আবেদনময় করার জন্য টাইপ সাজানোর শিল্প। টাইপের বিন্যাসে টাইপফেস, বিন্দুর আকার, লাইনের দৈর্ঘ্য, লাইন-স্পেসিং এবং অক্ষর-স্পেসিং এবং অক্ষরের জোড়ার মধ্যে স্থান সামঞ্জস্য করা জড়িত।

আমরা নিম্নলিখিত টাইপফেস বৈচিত্রগুলি সমর্থন করি -

অতিরিক্ত আলো

আলো

নিয়মিত

মধ্যম

সেমিবোল্ড

সাহসী

অতিরিক্ত বোল্ড

আপনি যে কোনো ফন্ট ব্যবহার করতে পারেন যার 8টি ফন্ট ওজন আছে এবং এই উপনামগুলি থেকে সেগুলি বরাদ্দ করুন৷ আমাদের কাছে ডেমোর জন্য Metropolis, Okra এবং Roboto আছে, আপনি আপনার ব্র্যান্ডের সাথে যায় এমন যেকোনো ফন্ট ব্যবহার করতে পারেন।

রঙ

সুশি তার প্যালেটে পূর্বনির্ধারিত রঙের একটি সেটও প্রদান করে। অত্যন্ত অনন্য ক্ষেত্রে, নির্দ্বিধায় আপনার নিজস্ব রং ব্যবহার করুন, কিন্তু অন্যথায়, আমরা আপনার পণ্যের সমস্ত উপাদানের জন্য এই প্যালেট থেকে রং ব্যবহার করার পরামর্শ দিই।

কোড সংগ্রহস্থল