The Red Square Method

THE BASICS

ডিজিটাল পণ্য ডিজাইন এবং অডিট করার আমাদের বছরগুলোতে, আমরা সবচেয়ে সাধারণ গ্রিড-সম্পর্কিত কয়েকটি ভুলের রূপরেখা দিয়েছি। স্টেকহোল্ডারদের (সাধারণত নন-ডিজাইনার) কাছে এই সমস্যাগুলি যোগাযোগ করার প্রয়োজনীয়তা আমাদেরকে একটি সহজ সারিবদ্ধতা পরীক্ষার পদ্ধতি তৈরি করতে পরিচালিত করেছে। এটি একটি সামান্য পরিবর্তিত সফট-গ্রিড পদ্ধতি যা দুর্দান্ত ফলাফল দেয় – বিশেষ করে অডিটে।

আমরা এটাকে রেড স্কয়ার পদ্ধতি বলেছি। কেন? একটি স্কয়ার হল একটি পূর্ণ আকৃতি যা যে কারো দ্বারা সহজেই প্রক্রিয়া করা যায়, যখন লাল দেখতে গুরুত্বপূর্ণ করে তোলে।

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

একটি স্ট্যান্ডার্ড গ্রিডের মতো, প্রথম পদক্ষেপ হল সঠিক বেস সংখ্যা নির্বাচন করা। তারপর আমরা আমাদের বেস সংখ্যার সমান পার্শ্ব সহ একটি লাল বর্গ তৈরি করি। তারপর আমরা বর্গগুলোকে দুই দ্বারা গুণ করে বা নিজেই বেস সংখ্যা যোগ করে আরও বর্গ তৈরি করি। আট-বেস দিয়ে শুরু করে, আমরা নীচের সেটআপ পাই:

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

আমাদের বেস-সংখ্যার প্রতিটি গুণিতক একটি ভিন্ন ছায়া লাল ব্যবহার করা উচিত (আপনি পার্থক্য করার জন্য উজ্জ্বলতা বা হিউ ব্যবহার করতে পারেন)। আপনি আলাদা মানের জন্য আলাদা রঙও ব্যবহার করতে পারেন, কেবল বেস মানের জন্য লাল দিয়ে শুরু করুন। আপনি যে পদ্ধতিই বেছে নিন না কেন, আকারগুলি অবশ্যই তাৎক্ষণিকভাবে দৃশ্যমান হওয়া উচিত।

যদি আমরা একটি বিদ্যমান ডিজাইন অডিট করছি, তাহলে আমরা বস্তুগুলোর মধ্যকার দূরত্ব নির্ধারণ করার জন্য আমাদের স্কয়ার ব্যবহার করতে পারি। বেশিরভাগ স্থানে ফিট হবে এমন একটি স্কয়ার আকার খুঁজে নিন এবং এটিকে আপনার বেস সংখ্যা হিসাবে ব্যবহার করুন। আপনার যা খুঁজে বেড়াতে হবে তা হল নিয়ম থেকে বিচ্যুতি – সেট স্পেসিং এবং স্থানচ্যুত জিনিসগুলিতে সামান্য পার্থক্য।

Object

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

আপনি যদি ইন্টারফেস ডিজাইন করার পরিকল্পনা করছেন, তাহলে প্রস্তুত থাকুন যে বেশিরভাগ সময় এটি বিভিন্ন আয়তক্ষেত্রাকার বস্তু চারপাশে সরানো সম্পর্কে হবে। আয়তক্ষেত্র সব ইন্টারফেসে (ডিম্বাকৃতির আগে) সবচেয়ে জনপ্রিয় আকৃতি।

ইউআই ডিজাইনের সাধারণ ধারণাটি শুধু সঠিকভাবে আয়তক্ষেত্র চারপাশে সরানো সম্পর্কে।

এই অধ্যায়টি সমস্ত ইউআই ডিজাইন উপাদানের খুবই মৌলিক বিষয়াবলি অন্তর্ভুক্ত করে।

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

যদি আপনি ইন্টারফেস ডিজাইন করার পরিকল্পনা করেন, তবে প্রস্তুত থাকুন যে বেশিরভাগ সময়ই এটি বিভিন্ন আয়তাকার বস্তু সরানোর উপর নির্ভর করবে। আয়তক্ষেত্র হলো সবচেয়ে জনপ্রিয় আকৃতি (ডিম্বাকৃতির ঠিক আগে) সব ইন্টারফেসে। 

UI ডিজাইনের সাধারণ ধারণা হলো আয়তক্ষেত্রগুলোকে সঠিকভাবে সরিয়ে নিয়ে যাওয়া। এই অধ্যায়ে UI ডিজাইনের সমস্ত উপাদানের মৌলিক বিষয়গুলো নিয়ে আলোচনা করা হয়েছে।

 “ UI Design is moving rectangles around. “

THE BOX MODEL

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

• Inner margin
• Fill
• Border
• Outer margin

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

বাইরের মার্জিন (প্রায়ই শুধু “মার্জিন” বলা হয়) হলো আমাদের  অবজেক্টের বাইরের এলাকা। এটি আমাদের বস্তুটিকে তার চারপাশের সবকিছুর সাথে যথেষ্ট সেফ স্পেস রেখে অবস্থান করার সুযোগ দেয়। নিচের উদাহরণে, এটি আয়তক্ষেত্রের বাইরের নীল এলাকা।

প্রস্থ এবং উচ্চতা (পয়েন্টে) একটি বস্তুর আকার নির্ধারণ করে। বেশিরভাগ ক্ষেত্রে, আমরা সংক্ষেপে W এবং H ব্যবহার করি। যেহেতু এটি একটি দ্বিমাত্রিক স্থান, প্রস্থ হলো অনুভূমিক অক্ষের স্কেল, এবং উচ্চতা হলো উল্লম্ব অক্ষের স্কেল।

প্রস্থ এবং উচ্চতা সর্বদা সবচেয়ে ছোট আয়তাকার বক্সের হয়, যা আমাদের বস্তুটিকে ধারণ করতে পারে – এমনকি যদি বস্তুর আকার অনিয়মিত হয় তবুও।

বস্তুর অবস্থান হলো X এবং Y অক্ষের উপর নির্ধারিত একটি সংখ্যার সেট, যা এটি ধারণকারী আর্টবোর্ড দ্বারা সংজ্ঞায়িত হয়। X হলো অনুভূমিক অক্ষের উপর বস্তুর অবস্থান, আর Y হলো উল্লম্ব অক্ষের উপর বস্তুর অবস্থান। অনিয়মিত বস্তুর অবস্থান তাদের বাউন্ডিং বক্সের অবস্থান, যা প্রকৃত আকৃতিটিকে ধারণ করে।

অনিয়মিত বস্তুর অবস্থান হলো তাদের বাউন্ডিং বক্সের অবস্থান, যা ভেতরে থাকা প্রকৃত আকৃতিটিকে ধারণ করে।

কোণ আমাদের বস্তুর ঘড়ির কাঁটার দিকে ঘূর্ণনের পরিমাণ নির্ধারণ করে – ডিফল্ট হিসেবে এটি ০°। ঘূর্ণন একটি নেতিবাচক সংখ্যাও হতে পারে। মনে রাখা ভালো যে -১৫° ঘূর্ণন ৩৬০°-১৫° এর সমান, যা ৩৪৫°।

যদি আমরা একটি সঙ্গতিপূর্ণ ইন্টারফেস রাখতে চাই, তবে বস্তুগুলোকে হাতে ঘোরানোর পরিবর্তে কীবোর্ড থেকে সঠিক কোণটি প্রবেশ করানোই সর্বোত্তম, কারণ এটি ম্যানুয়ালি ঘোরানোর চেয়ে অনেক বেশি নির্ভুল।

যদি আমরা বস্তুটিকে ফ্ল্যাট করি, এটি কোণকে ০° এ রিসেট করে, তবে তা এখনও ঘোরানো অবস্থায় থাকে – কেবলমাত্র নতুন দৃষ্টিভঙ্গি পরবর্তী ঘূর্ণনের জন্য ভিত্তি হয়ে যায়।

Border Radius

বর্ডার-রেডিয়াস একটি সংখ্যা। প্রস্থ এবং উচ্চতার মতো এটিও পয়েন্টে প্রকাশ করা হয়। সংখ্যাটি যত বড় হবে, আমাদের আকৃতির কোণগুলোর গোলাকৃতি তত বড় হবে। আপনি এটি সব প্রান্তে একসঙ্গে ব্যবহার করতে পারেন অথবা প্রতিটি প্রান্ত আলাদাভাবে সেট করতে পারেন।

সাধারণভাবে, হালকা গোলাকৃতির কোণ (২ থেকে ৬ পয়েন্টের মধ্যে) তীক্ষ্ণ কোণের (০ পয়েন্ট) চেয়ে বেশি বন্ধুত্বপূর্ণ মনে করা হয়। তবে, গোলাকৃতিতে সামঞ্জস্য রাখা গুরুত্বপূর্ণ। আমরা যে গ্রিড বেস ইউনিটটি নির্বাচন করি, সেটিই বর্ডার-রেডিয়াস নির্ধারণ করা উচিত এবং এটি এর আশপাশের এলিমেন্ট গুলোর সাথে মানানসই হওয়া উচিত।

একই বস্তুর ভিন্ন বর্ডার-রেডিয়াস একটি চমৎকার বাটন তৈরি করতে পারে, যদি এটি ব্র্যান্ড নির্দেশিকার সাথে মানানসই হয় (যেমন, লোগোতেও একই ধরনের প্যাটার্ন থাকে)। যদি আপনি এইভাবে আপনার বোতাম তৈরি করার সিদ্ধান্ত নেন, তবে সমস্ত স্ক্রিন জুড়ে সেগুলির সাথে সামঞ্জস্য রাখার কথা মনে রাখবেন।

FILL

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

আপনি একই বস্তুর উপর একাধিক ফিল সংযোজন করতে পারেন – উদাহরণস্বরূপ, একটি ছবিতে একটি স্বচ্ছ রং যোগ করলে ফলাফলটি রঙিন হবে যাতে এটি আপনার UI-এর বাকি অংশের সাথে মানানসই হয়।

BORDER

বর্ডার বিভিন্ন পয়েন্টে ভিন্ন ভিন্ন ওয়েট (প্রস্থ) থাকতে পারে এবং এটি একটি ড্যাশযুক্ত বা ডটেড লাইন হতে পারে। আমরা এটি রঙ বা গ্রেডিয়েন্ট দিয়ে পূরণ করতে পারি।

বেশিরভাগ ডিজাইন টুল আপনাকে আপনার লাইনগুলির শেষ এবং জয়েন্টগুলিকে পরিবর্তন করার সুযোগ দেয়। লাইনগুলির শেষ অংশগুলি খোলা, ফ্ল্যাট, বা গোলাকার হতে পারে, আর জয়েন্টগুলো তীক্ষ্ণ, গোলাকার, বা কোনাকৃতি হতে পারে।

DROP SHADOW

একটি  বাস্তব সম্মত শ্যাডো ডিজাইনে সবচেয়ে প্রভাবশালী উপাদানগুলির মধ্যে একটি। ডিজাইনকে ন্যাচারাল  দেখানোর জন্য সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো সম্পূর্ণ কালো শ্যাডো এড়িয়ে

চলা এবং এর পরিবর্তে আমাদের প্রাইমারি  রং থেকে প্রাপ্ত একটি শ্যাডো ব্যবহার করা। সম্পূর্ণ কালো রং ব্যাকগ্রাউন্ডের  সাথে এমন একটি কনট্রাস্ট তৈরি করে যা রিয়েলিস্টিক মনে হয় না।

যদি আপনি বাস্তব জীবনের শ্যাডো নিয়ে কাজ করেন, আপনি লক্ষ্য করবেন যে সেগুলো প্রায়ই শেড এবং টোনে পরিবর্তিত হয়।

যদি আমাদের প্রাথমিক রং সবুজ হয়, তাহলে একটি সবুজ বাটন একটি ঝাপসা গাঢ় সবুজ ছায়া ফেলতে পারে। যথেষ্ট বড় ঝাপসা এবং একটি নেতিবাচক স্প্রেড ভ্যালু ব্যবহার করলে আমরা একটি সুন্দর ফলাফল পাই।

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

যদি আমরা কালো রঙটি পরিবর্তন করে আমাদের প্রাথমিক রঙের একটি গাঢ় শেডে রূপান্তর করি, তাহলে এটি আরও প্রাকৃতিক এবং মসৃণ দেখাতে শুরু করে।

একটি নেতিবাচক স্প্রেড ভ্যালু ব্যবহার করলে, আমরা ছায়ার অতিরিক্ত অংশকে সরিয়ে দিয়ে এটিকে আরও বাস্তবসম্মত দেখাতে পারি।

Inner shadows

ইনার শ্যাডো UI-তে তুলনামূলকভাবে বিরল। এর প্যারামিটারগুলো ড্রপ শ্যাডোর মতোই, তবে এটি অবজেক্টের ভিতরে প্রদর্শিত হয়। 

ইনার শ্যাডো ততটা জনপ্রিয় নয় কারণ বেশিরভাগ ইন্টারফেসে বিভিন্ন স্তরের বস্তু একটির ওপর আরেকটি স্তূপ করা থাকে। সেই ক্ষেত্রে, একটি আউটার শ্যাডো যুক্তিযুক্ত, কারণ এটি গভীরতা প্রদান করে। অন্যদিকে, একটি ইনার শ্যাডো মনে করাবে যে অবজেক্টের মধ্যে একটি গর্ত রয়েছে।

এই স্টাইলের ব্যবহারিক ক্ষেত্রগুলো হলো ফর্ম ইনপুট (যেমন ফর্ম ফিল্ড, চেকবক্স, বা রেডিও-বাটন) এবং নিউমরফিজম পদ্ধতিতে এক্সট্রুড শেপগুলো। এগুলো কিছু ক্ষেত্রে বস্তুগুলোকে আরও জীবন্ত দেখাতে ব্যবহার করা যেতে পারে, তবে সতর্কতার সঙ্গে এবং সীমিত পরিমাণে ব্যবহার করা উচিত।

GAUSSIAN BLUR

বর্তমানের বেশিরভাগ ডিজাইন টুলে গসিয়ান টাইপ ব্লার থাকে, যা প্রভাবটি সব দিকেই সমানভাবে বিস্তৃত করে। এর প্রধান মান হলো রেডিয়াস। এটি যত বড় হবে, ব্লার ইফেক্ট তত বেশি দৃশ্যমান হবে।

গসিয়ান ব্লার হলো সবচেয়ে বেশি ব্যবহৃত UI ইফেক্ট। আপনি এটি স্ক্রিনগুলোর মধ্যে ট্রানজিশনে ব্যবহার করতে পারেন বা ব্যাকগ্রাউন্ড সিলেক্টিভলি ব্লার করে কিছুটা বাস্তবসম্মত ডেপথ অফ ফিল্ড প্রদর্শন করতে পারেন।

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

এই ধরনের ব্লার আপনাকে বস্তুগুলোর নিচে নন-স্ট্যান্ডার্ড পয়েন্ট-শ্যাডো তৈরি করতে সাহায্য করতে পারে। এটি অর্জনের সবচেয়ে সহজ উপায় হলো একটি এলিপ্স ব্লার করা এবং এটি ছায়া ফেলানো বস্তুর নিচে স্থাপন করা।