ম্যাটেরিয়াল ডিজাইন কী?

Inspired by Material.io

আমরা অনেকই ম্যাটেরিয়াল ডিজাইন নিয়ে কাজ করছি। তবে অনেকেই ম্যাটেরিয়াল ডিজাইন-এর ভাল আইডিয়া নেই। তাই আজ চেষ্টা করলাম ম্যাটেরিয়াল ডিজাইন নিয়ে কিছু লিখার। আর Android এর ম্যাটেরিয়াল ডিজাইনের বিভিন্ন ফিচার নিয়ে একটি লম্বা পর্ব শুরু করব।

ম্যাটেরিয়াল ডিজাইন (কোডানড কোয়ান্টাম পেপার) একটি ডিজাইনের ভাষা যা গুগল 2014 সালে বিকাশ করেছিল। Google Now দিয়ে গুগল এই ম্যাটেরিয়াল ডিজাইন শুরু করে যেখানে Card এর ব্যবহার করা হয়।

ম্যাটেরিয়াল ডিজাইনে আরও গ্রিড-ভিত্তিক লেআউট (grid-based layouts), প্রতিক্রিয়াশীল অ্যানিমেশন (responsive animations) এবং ট্রানজিশন (transitions), প্যাডিং (padding) এবং ডেপথ ইফেক্ট (depth effects) যেমন আলো (lighting) এবং ছায়া (shadows) ব্যবহার করা হয়।

গুগল ২৪ শে জুন, ২০১৪, গুগল আই / ও কনফারেন্সে ম্যাটারিয়াল ডিজাইনের ঘোষণা দিয়েছে।

বর্তমানে ওয়েব, অ্যান্ড্রয়েড, আইওস ইত্যাদি সকল প্লাটফর্ম-এ ডেভেলপাররা ম্যাটেরিয়াল ডিজাইন নিয়েই কাজ করছে।

ম্যাটেরিয়াল

ম্যাটেরিয়াল হল একটি গাইডলাইন, কম্পোনেন্ট এবং টুলস-এর একটি পরিবর্তন যোগ্য সিস্টেম যা ইউজার ইন্টারফেস (UI) ডিজাইনের সেরা অনুশীলনগুলোকে সমর্থন করে। ওপেন সোর্স কোড দ্বারা সমর্থিত, উপাদান ডিজাইনার এবং বিকাশকারীদের মধ্যে সহযোগিতা প্রবাহিত করে এবং দলগুলিকে দ্রুত সুন্দর পণ্য তৈরিতে সহায়তা করে।

ম্যাটেরিয়াল ডিজাইন

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

ম্যাটেরিয়াল ডিজাইন প্রায় সকল প্লাটফর্মই সাপোর্ট করে। যেমন -

• Android
• iOS
• Web
• Flutter

ম্যাটেরিয়াল ডিজাইন-এর মূলত ৩ টি অংশ -

• কম্পনেন্ট বা উপাদান (Components)
• থিমিং (Theming)
• ইভাশন (Elevation)

কম্পনেন্ট বা উপাদান (Components)

মেটেরিয়াল কম্পনেন্ট হচ্ছে ইউজার ইন্টারফেস তৈরির জন্য ইন্টারেক্টিভ বিল্ডিং ব্লক সাথে built-in states system অন্তর্ভুক্ত করে যা ফোকাস, নির্বাচন, সক্রিয়করণ, ত্রুটি, হোভার, প্রেস, ড্রাগ এবং অক্ষম অবস্থার যোগাযোগ করে।

কম্পনেন্ট ইন্টারফেসের প্রয়োজনীয়তার একটি নিন্মের অংশগুলো অন্তর্ভুক্ত করে-

• ডিসপ্লে (Display): কম্পনেন্ট ব্যবহার করে অ্যাপের সামগ্রী সংরক্ষণ এবং সংগঠিত করা, যেমন- কার্ড (Card) , লিস্ট (List) এবং শিট (Sheet)।
• নেভিগেশন (Navigation): প্যাটার্ন দ্বারা আপনার অ্যাপ এর চলাচল, যেমন- নেভিগেশন ড্রয়ার (Navigation Drawers) এবং ট্যাব (Tab)।
• ক্রিয়া (Actions): Floating Action Button-এর মতো কম্পনেন্ট কার্য সম্পাদন করা।
• ইনপুট (Input): Text Fields, Chips, এবং Selection Controls-এর মতো কম্পনেন্ট ব্যবহার করে তথ্য দেওয়া বা নির্বাচন করা।
• যোগাযোগ (Communication): Snackbars, Banners এবং Dialogs এর মতো কম্পনেন্ট সহ ব্যবহারকারীদের অ্যাপের তথ্য এবং বার্তাগুলি সম্পর্কে সতর্ক করা।

থিমিং (Theming)

ম্যাটারিয়াল থিমিং দিয়ে খুব সহজেই গ্লোবাল স্টাইলের রঙ(Color), টাইপোগ্রাফি এবং আকার (Shape) দ্বারা ম্যাটেরিয়াল ডিজাইন কাস্টমাইজ করা যায়। কম্পনেন্টগুলোতে বিল্টিন বেসলাইন থিম রয়েছে। থিমিং আপনাকে আপনার প্রোডাক্ট এর ডেফাল্ট ডিজাইন খুব দ্রুত এবং প্রর্যায়ক্রমিকভাবে পরিবর্তনগ করা যায়। আপনি কম্পনেন্ট এর স্টাইল কাস্টমাইজও করতে পারবেন।

কালার (Color)

ম্যাটারিয়াল এর রঙ ব্যবস্থাটি (color system) হচ্ছে UI-তে রঙ এপ্লাই করার জন্য একটি সংগঠিত পদ্ধতি। গ্লোবাল রঙের স্টাইল-এর কম্পোনেন্ট গুলোর নাম — প্রাথমিক (Primary), মাধ্যমিক (Secondary)(ব্র্যান্ডের রং), সার্ফেস (Surface), ব্যাকগ্রাউন্ড (Background) এবং ইরর (Error)।

যখন “Primary” রঙের স্টাইল (1) একটি ধারক রঙ হিসাবে ব্যবহৃত হয়, তখন “On Primary” রঙ (2) অভ্যন্তরীণ সামগ্রীর জন্য ব্যবহার করা যেতে পারে।

টাইপোগ্রাফি (Typography)

ম্যাটেরিয়াল ডিজাইনের type scale, শিরোনাম থেকে শুরু করে বডি টেক্সট এবং ক্যাপশনগুলোর জন্য প্রতিটি ক্ষেত্রে 13 টি টাইপোগ্রাফি স্টাইল প্রদান করে। প্রতিটি স্টাইলে একটি ইন্টারফেসের মধ্যে একটি স্পষ্ট অর্থ এবং উদ্দেশ্যযুক্ত অ্যাপ্লিকেশন থাকে।

টাইপফেস, ফন্টের ওয়েট (weight) এবং লেটার কেসের মতো গুরুত্বপূর্ণ বৈশিষ্ট্যগুলি আপনার ব্র্যান্ড এবং ডিজাইনের সাথে মেল করে পরিবর্তন করা যায়।

আকার (Shape)

Shape-এর স্টাইল, তাদের অবস্থা যোগাযোগ করতে এবং আপনার ব্র্যান্ড-এর দৃষ্টি আকর্ষণ বা উপাদানগুলি সনাক্ত অথবা প্রকাশ করতে সহায়তা করে।

সমস্ত ম্যাটেরিয়াল কম্পনেন্ট তাদের আকার (ছোট, মাঝারি, বৃহত্তর) এর উপর ভিত্তি করে shape categories করা হয়েছে। এই global style একই আকারের কম্পনেন্টগুলোর আকৃতি পরিবর্তন করার একটি উপায় সরবরাহ করে।

আপনি shape customization tool দিয়ে নিজের shape-এর style তৈরি করতে পারবেন।

Shape-এর বিভাগগুলি একটি একক স্টাইলকে, যেমন একটি কাটা কোণার, উপাদান আকারের উপর ভিত্তি করে বিভিন্ন আকারে প্রয়োগ করার অনুমতি দেয়।

ইভাশন (Elevation)

তাদের x এবং y-এর ভ্যালু-গুলো ছাড়াও, প্রতিটি ম্যাটারিয়াল কম্পনেন্ট-এর z স্পেসে অবস্থান থাকে, যা উচ্চতা হিসাবে উল্লেখ করা হয়। ইন্টারফেসগুলি প্রায়ই একে অপরের উপরে লেয়ারিং উপাদানগুলির মাধ্যমে তৈরি করা হয়। ম্যাটারিয়াল ইন্টারফেসে, পর্দার সর্বাধিক গুরুত্বপূর্ণ আইটেমগুলির মধ্যে সর্বোচ্চ elevation রয়েছে।

১। অ্যাপ্লিকেশন বার (A), কার্ড (B) এবং একটি ভাসমান অ্যাকশন বাটন © এর মতো সমস্ত উপাদানগুলির x এবং y মান রয়েছে যা 2-ডি স্পেসে তাদের অবস্থান নির্ধারণ করে
২। যখন UI-টি পাশ থেকে দেখা যায়, 3-ডি স্পেসে, প্রতিটি উপাদানগুলির z মান বা উচ্চতা স্পষ্ট হয়। পর্দার সর্বাধিক গুরুত্বপূর্ণ ক্রিয়া ভাসমান অ্যাকশন বোতামটির এই UI-তে সর্বোচ্চ উচ্চতা রয়েছে (6 ডিপি)।

একটি উপাদান-এর elevation ০ থেকে ২৪ ডিপি পর্যন্ত হতে পারে এবং প্রতিটি elevation এর shadow স্টাইল থাকে যা বাস্তব-বিশ্ব আলোকিত নীতি অনুসরণ করতে ডিজাইন করা হয়। উদাহরণস্বরূপ, নিম্ন elevation-এর মানগুলোর অর্থ স্তরগুলির মধ্যে যেটির দূরত্ব ছোট হয়, এর ছোট ছায়া ফেলে। উচ্চতর মানগুলির অর্থ স্তরগুলির মধ্যে বৃহত্তর দূরত্ব এবং আরও বিস্তৃত এবং আরও ছড়িয়ে ছায়ার ছায়া।

আজ এ পর্যন্তই। ইন শা আল্লাহ্‌, খুব শীঘ্রই এর Android বিষয়ক ম্যাটেরিয়াল ডিজাইনের পর্বগুলো চালিয়ে যাব। :)

ভাল লাগলে clap ও শেয়ার দিয়ে উৎসাহিত করবেন।

This blog is inspired and image taken from Material.io