ইন্টারফেসের জন্য রং নির্বাচন করার প্রক্রিয়া জটিল হতে পারে, বিশেষ করে যখন বিভিন্ন বোতামের অবস্থা, ফন্ট এবং অন্যান্য UI উপাদান বিবেচনা করা হয়। এই নিবন্ধে, আমি আমার পদ্ধতি এবং নীতিগুলি ভাগ করব যা আপনাকে সফলভাবে আপনার প্রকল্পের জন্য একটি রঙের স্কিম চয়ন করতে সহায়তা করবে।  1. প্রাথমিক রঙ সংজ্ঞায়িত করা  একটি ওয়েবসাইট ডিজাইন করার সময়, প্রায়ই একটি রঙের স্কিম বেছে নেওয়া প্রয়োজন। কখনও কখনও, ক্লায়েন্ট ইতিমধ্যে একটি প্রাথমিক ব্র্যান্ড রঙ আছে. এই ক্ষেত্রে, আপনার কাজ হল অতিরিক্ত রং এবং শেড নির্বাচন করা যা প্রাথমিক রঙের পরিপূরক হবে। মূল রঙ ছাড়াও, সাইটে বিভিন্ন উদ্দেশ্যে অতিরিক্ত রং ব্যবহার করা হয় যেমন ত্রুটির অবস্থা, লিঙ্ক, চিত্র, আইকন বা গ্রাফিক্স এবং ড্যাশবোর্ডে ব্যবহারের জন্য।  2. কালার হারমোনি ব্যবহার করা  রঙগুলি যাতে ভালভাবে মিলিত হয় তা নিশ্চিত করার জন্য, একরঙা, পরিপূরক, ত্রিভুজাকার এবং অন্যান্যগুলির মতো বিভিন্ন রঙের সামঞ্জস্যপূর্ণ স্কিমগুলি ব্যবহার করা উপকারী। তারা একটি সুরেলা রঙের প্যালেট তৈরি করতে সাহায্য করতে পারে যা প্রকল্পের প্রাথমিক রঙের পরিপূরক। আমরা বর্তমানে এমন একটি বিশ্বে বাস করি যেখানে প্রযুক্তি দ্রুত অগ্রসর হচ্ছে এবং এমন বিশেষ পরিষেবা রয়েছে যা সহজেই একটি রঙের স্কিম তৈরি করে৷ উদাহরণস্বরূপ, আমি  color.adobe.com ব্যবহার করি।   আমি এটি কিভাবে করি তা এখানে:    ড্রপডাউন তালিকা থেকে পছন্দসই স্কিম নির্বাচন করুন।  এক.    বেস রঙ হিসাবে নির্দেশিত ক্ষেত্রে প্রয়োজনীয় রঙের মান লিখুন  দুই    আমার প্রয়োজন অনুসারে কোন রং নির্ধারণ করুন। তিন.    আমার ক্ষেত্রে, Figma ব্যবহার করে তাদের আমার কর্মক্ষেত্রে স্থানান্তর করুন। চার  3. টোন নির্বাচন করা  এর পরে, আমাদের প্রতিটি নির্বাচিত রঙের জন্য ছায়াগুলি নির্ধারণ করতে হবে। নির্বাচিত রংগুলির জন্য ছায়াগুলি নির্বাচন করতে, আপনি নির্দিষ্ট পরিষেবাগুলি ব্যবহার করতে পারেন যা এই প্রক্রিয়াটিতে সহায়তা করতে পারে। আপনার রঙের জন্য শেড নির্ধারণ করার দুটি উপায় রয়েছে:  প্রথম পদ্ধতিতে আরও জটিল সূত্র জড়িত:  আপনার হেডারের রঙ চয়ন করুন (অগত্যা কালো নয়)।  HLS মোডে স্যুইচ করুন।  প্রথম ঘরটি এড়িয়ে যান, দ্বিতীয় কক্ষের জন্য 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 পর্যন্ত মানের জন্য, নির্বাচিত অবস্থা এক ধাপ গাঢ় হয়   আপনার ডিজাইন এবং পাঠ্যগুলি পাঠযোগ্য এবং সঠিকভাবে প্রদর্শিত হয়েছে তা নিশ্চিত করতে পরীক্ষা করাও গুরুত্বপূর্ণ। কাজ শেষ করার পরে, বিভিন্ন ইন্টারফেসের অবস্থা এবং পাঠ্যগুলি সঠিকভাবে দেখায় এবং কাজ করে কিনা তা নিশ্চিত করুন।  মনে রাখবেন এইগুলি আমার অভিজ্ঞতার উপর ভিত্তি করে টিপস, আপনি আপনার নিজের পদক্ষেপগুলি যোগ করতে পারেন, ক্রম পরিবর্তন করতে পারেন, তবে অ্যাক্সেসিবিলিটি পরীক্ষা করতে ভুলবেন না যাতে আপনার পাঠ্যের বৈসাদৃশ্য এবং বিভিন্ন ইন্টারফেস অবস্থা যেকোনো ব্যবহারকারী ভালোভাবে পড়তে পারে৷  একটি রঙের স্কিমের সঠিক পছন্দ একটি ব্যবহারকারী-বান্ধব এবং আকর্ষণীয় ব্যবহারকারী ইন্টারফেস তৈরিতে মূল ভূমিকা পালন করে। এই সহজ পদক্ষেপগুলি অনুসরণ করে এবং উপলব্ধ সরঞ্জামগুলি ব্যবহার করে, আপনি আপনার প্রকল্পের জন্য রং নির্বাচন এবং অপ্টিমাইজ করতে সক্ষম হবেন।  আমি আশা করি আপনি আমার নিবন্ধ উপভোগ করেছেন. আপনার যদি কোন প্রশ্ন থাকে বা আরও তথ্যের প্রয়োজন হয়, অনুগ্রহ করে নির্দ্বিধায় মন্তব্য করুন।

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Read my Articles 

Read My Stories

Coveted Careers: Mastering the Art of Securing Top UI/UX Design Roles in 2024

গল্পের মূল ভাষায় এই অডিও তৈরি!

অতিদীর্ঘ; পড়তে

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

মন্তব্য

আসে ট্যাগ

এই নিবন্ধটি উপস্থাপন করা হয়েছে

Related Stories

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

ফোরাম থেকে ফিড পর্যন্ত: কীভাবে সোশ্যাল মিডিয়া অ্যালগরিদম ডিজিটাল ইন্টারঅ্যাকশনকে আকার দেয়

কিভাবে 10X দ্বারা আপনার কর্মপ্রবাহ উন্নত করবেন: 17টি প্রয়োজনীয় অ্যাপ

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

ফোরাম থেকে ফিড পর্যন্ত: কীভাবে সোশ্যাল মিডিয়া অ্যালগরিদম ডিজিটাল ইন্টারঅ্যাকশনকে আকার দেয়

কিভাবে 10X দ্বারা আপনার কর্মপ্রবাহ উন্নত করবেন: 17টি প্রয়োজনীয় অ্যাপ

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps