কিভাবে রং নির্বাচন করবেন এবং বিভিন্ন অবস্থার জন্য শেড নির্ধারণ করবেন: হোভার, সক্রিয়, টিপুন, নিষ্ক্রিয় করুন

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

1. প্রাথমিক রঙ সংজ্ঞায়িত করা

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

2. কালার হারমোনি ব্যবহার করা

রঙগুলি যাতে ভালভাবে মিলিত হয় তা নিশ্চিত করার জন্য, একরঙা, পরিপূরক, ত্রিভুজাকার এবং অন্যান্যগুলির মতো বিভিন্ন রঙের সামঞ্জস্যপূর্ণ স্কিমগুলি ব্যবহার করা উপকারী। তারা একটি সুরেলা রঙের প্যালেট তৈরি করতে সাহায্য করতে পারে যা প্রকল্পের প্রাথমিক রঙের পরিপূরক। আমরা বর্তমানে এমন একটি বিশ্বে বাস করি যেখানে প্রযুক্তি দ্রুত অগ্রসর হচ্ছে এবং এমন বিশেষ পরিষেবা রয়েছে যা সহজেই একটি রঙের স্কিম তৈরি করে৷ উদাহরণস্বরূপ, আমি color.adobe.com ব্যবহার করি।

আমি এটি কিভাবে করি তা এখানে:

এক. ড্রপডাউন তালিকা থেকে পছন্দসই স্কিম নির্বাচন করুন।

দুই বেস রঙ হিসাবে নির্দেশিত ক্ষেত্রে প্রয়োজনীয় রঙের মান লিখুন

তিন. আমার প্রয়োজন অনুসারে কোন রং নির্ধারণ করুন।

চার আমার ক্ষেত্রে, Figma ব্যবহার করে তাদের আমার কর্মক্ষেত্রে স্থানান্তর করুন।

3. টোন নির্বাচন করা

এর পরে, আমাদের প্রতিটি নির্বাচিত রঙের জন্য ছায়াগুলি নির্ধারণ করতে হবে। নির্বাচিত রংগুলির জন্য ছায়াগুলি নির্বাচন করতে, আপনি নির্দিষ্ট পরিষেবাগুলি ব্যবহার করতে পারেন যা এই প্রক্রিয়াটিতে সহায়তা করতে পারে। আপনার রঙের জন্য শেড নির্ধারণ করার দুটি উপায় রয়েছে:

প্রথম পদ্ধতিতে আরও জটিল সূত্র জড়িত:

1. আপনার হেডারের রঙ চয়ন করুন (অগত্যা কালো নয়)।
2. HLS মোডে স্যুইচ করুন।
3. প্রথম ঘরটি এড়িয়ে যান, দ্বিতীয় কক্ষের জন্য 2 দ্বারা মান হ্রাস করুন এবং তৃতীয় কক্ষের জন্য 5 দ্বারা বৃদ্ধি করুন৷

দ্বিতীয় পদ্ধতি হল পরিষেবা ব্যবহার করা (সহজ এবং দ্রুত)

colors.dopely.top

এক. আপনি যে রঙ চান তার মান লিখুন।

দুই শেড এবং ধাপের সংখ্যা নির্বাচন করুন (আমি 5 ব্যবহার করেছি)।

তিন. টিন্ট এবং পদক্ষেপের সংখ্যা চয়ন করুন।

চার ফলস্বরূপ, একটি রঙের জন্য, আমি নিম্নলিখিত টেবিলটি তৈরি করেছি

P = প্রাথমিক,

P 60 = এটি আমাদের প্রাথমিক রঙ,

P 10 থেকে P 50 = এই হালকা টোনগুলি আমরা টিন্টসে সংগ্রহ করেছি,

P 60 থেকে P 100 = এইগুলি হল অন্ধকার শেডগুলি যা আমরা শেডস প্যানেলে সংগ্রহ করেছি।

4. রঙের অ্যাক্সেসযোগ্যতা পরীক্ষা করা হচ্ছে

এটি নিশ্চিত করা গুরুত্বপূর্ণ যে নির্বাচিত রঙগুলি সীমিত ক্ষমতা সহ সমস্ত ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য৷ ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইন ( WCAG ) এর মতো নির্দেশিকা রয়েছে, যেগুলি একটি ইন্টারফেস তৈরি করার সময় অনুসরণ করা যেতে পারে। আপনার রঙের অ্যাক্সেসযোগ্যতা পরীক্ষা করতে, আপনি প্লাগইন বা ওয়েব পরিষেবাগুলির মতো নির্দিষ্ট সরঞ্জামগুলি ব্যবহার করতে পারেন যা নির্বাচিত রঙের বৈসাদৃশ্য এবং অ্যাক্সেসযোগ্যতা যাচাই করবে৷

ফিগমা প্লাগইন - কনট্রাস্ট

ওয়েব পরিষেবা - কুলার্স

5. বিভিন্ন ইন্টারফেস অবস্থার জন্য রং সংজ্ঞায়িত করা

আপনার ওয়েব প্রকল্পের জন্য রঙ প্যালেট ডিজাইন করার চূড়ান্ত পর্যায়ে, নির্দিষ্ট উপাদান অবস্থার জন্য প্রয়োজনীয় পদক্ষেপের সংখ্যা নির্ধারণ করা প্রয়োজন। সাধারণত, আমরা চারটি মূল অবস্থা চিহ্নিত করি:

• সক্ষম (উপাদানের শান্ত এবং স্বাভাবিক অবস্থা)
• হোভার (মাউসওভার)
• সক্রিয় (একটি বোতাম বা অন্য নিয়ন্ত্রণে ক্লিক করা)
• অক্ষম (অবরুদ্ধ উপাদান)

ধাপের সংখ্যা নির্ধারণ করতে, আমরা রঙ প্যানেল ব্যবহার করি, যেখানে আমরা আমাদের প্রধান রঙের মান (প্রাইম) ঠিক করি। তারপর, আমরা হোভার এবং সক্রিয় অবস্থার জন্য ধাপের সংখ্যা গণনা করি। এর পরে, আমাদের বোতামগুলি এবং তাদের মধ্যে থাকা পাঠ্যগুলি সহজেই পাঠযোগ্য কিনা তা নিশ্চিত করার জন্য আমরা অ্যাক্সেসযোগ্যতার জন্য বিভিন্ন রাজ্য পরীক্ষা করি।

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

হোভার স্টেটস

যদি আপনার প্রধান রঙ কালো এবং 70-এর মধ্যে হয় - আপনার হালকা শেডগুলিতে অর্ধেক ধাপ উপরে যাওয়া উচিত।

যদি আপনার প্রধান রঙ 60 এবং সাদা এর মধ্যে হয় তবে আপনার গাঢ় টোনগুলিতে অর্ধেক ধাপ নেমে যাওয়া উচিত।

প্রেস / সক্রিয় অবস্থা

100 থেকে 70 পর্যন্ত মানের জন্য, সক্রিয় অবস্থা দুটি সম্পূর্ণ ধাপ হালকা হয়ে যায়

60 থেকে 10 পর্যন্ত মানের জন্য সক্রিয় অবস্থা দুটি সম্পূর্ণ ধাপ গাঢ় হয়

নির্বাচিত রাজ্য

100 থেকে 70 পর্যন্ত মানের জন্য, নির্বাচিত অবস্থা এক ধাপ হালকা হয়ে যায়

60 থেকে 10 পর্যন্ত মানের জন্য, নির্বাচিত অবস্থা এক ধাপ গাঢ় হয়

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

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

আমি আশা করি আপনি আমার নিবন্ধ উপভোগ করেছেন. আপনার যদি কোন প্রশ্ন থাকে বা আরও তথ্যের প্রয়োজন হয়, অনুগ্রহ করে নির্দ্বিধায় মন্তব্য করুন।