কম্পিউটার

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

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

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

রঙ কি?

ColorZilla

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

মূলত ফায়ারফক্সের জন্য তৈরি, ColorZilla এর পর থেকে Chrome এবং এর সাথে সম্পর্কিত ব্রাউজারেও উপলব্ধ হয়েছে।

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

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

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

ফন্ট কি?

কি ফন্ট? (Chrome)

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

কঠোরভাবে বলতে গেলে, আপনার কী ফন্টের প্রয়োজন নেই? একটি ওয়েবসাইটের ফন্ট খুঁজে বের করার জন্য এক্সটেনশন, কিন্তু এটি করার জন্য এটি এখন পর্যন্ত দ্রুততম উপায়। বিকল্পটি হ'ল স্টাইলশীটটি খুলুন এবং এটির মাধ্যমে শিকারে যান৷

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

WhatFont ইনস্টল করবেন? এবং আপনি আপনার ব্রাউজার UI এ একটি নতুন আইকন দেখতে পাবেন। আপনি ব্রাউজারটি সম্পূর্ণরূপে পুনরায় চালু না করা পর্যন্ত, আপনাকে সেই পৃষ্ঠাটি রিফ্রেশ করতে হবে যেখানে আপনি ফন্টগুলি সনাক্ত করতে চান। একবার আপনি এটি সম্পন্ন করলে, আপনার ব্রাউজারে বোতামটি ক্লিক করুন৷

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

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

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

ফন্ট ফাইন্ডার (ফায়ারফক্স)

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

Chrome-এর WhatFont-এর মতো একই শিরায় ফায়ারফক্স-এক্সক্লুসিভ এক্সটেনশন?

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

এক্সটেনশনটি ইনস্টল করুন, এবং আপনার কাছে ডান-ক্লিক প্রসঙ্গ মেনুতে একটি নতুন বিকল্প থাকবে।

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

যখন আপনি এমন কিছু খুঁজে পান যা আপনি সনাক্ত করতে চান, এটি হাইলাইট করুন, তারপর আপনার জন্য উপলব্ধ বিকল্পগুলি আনুন। "বিশ্লেষণ নির্বাচন" আপনাকে সব কিছু বলবে যা আপনি কখনও জানতে চেয়েছিলেন৷

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

এটি যে বিশদটি সরবরাহ করে তা চোয়াল-ড্রপিং থেকে কম নয়। যদি পাঠ্যটিকে "(স্ট্যাক)" হিসাবে চিহ্নিত করা হয় তবে এটি আপনার ইনস্টল করা স্ট্যাকের প্রথম ফন্টটি বেছে নেবে। স্ট্যাকগুলি সাধারণত একটি সাধারণ শব্দ দিয়ে শেষ হয়, যেমন উপরের উদাহরণে "sans-serif"। অসম্ভাব্য ইভেন্টে স্ট্যাকের অন্যান্য ফন্টগুলির মধ্যে একটি ইনস্টল করা না হলে, এটি আপনার সিস্টেমের ডিফল্ট সান-সেরিফ ফেসে ফিরে আসবে৷

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

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

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

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

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

সাইট পরিমাপ

পৃষ্ঠা শাসক (Chrome)

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

"একজন শাসক? সত্যিই?” আমরা আপনাকে জিজ্ঞাসা শুনতে শুনতে. পেজ রুলার হল একটি স্ক্রিন রুলার যেটি শব্দের থেকে একটু আলাদা। প্রকৃতপক্ষে, আমরা যেকোন প্রাথমিক সংশয়কেও সম্পূর্ণরূপে বুঝতে পারি।

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

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

আপনি অন্য কোনো এক্সটেনশনের মতো এটি ইনস্টল করুন এবং আপনার ব্রাউজার UI-তে আপনার আরেকটি বোতাম থাকবে। মনে রাখবেন যে এক্সটেনশনটি চেষ্টা করার জন্য আপনাকে একটি ওয়েব পৃষ্ঠা খুলতে হবে – আপনি নিরাপত্তার কারণে Chrome এর অন্তর্নির্মিত ওয়েব পৃষ্ঠাগুলির একটি ব্যবহার করতে পারবেন না৷

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

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

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

আপনি চাইলে আয়তক্ষেত্রের রঙ ডিফল্ট নীল থেকে পরিবর্তন করতে পারেন। আপনি যে রঙটিই বেছে নিন না কেন, এটি স্বয়ংক্রিয়ভাবে স্বচ্ছতার একটি ডিগ্রী যোগ করবে যাতে আপনি এটির নীচের বিষয়বস্তু দেখতে পারেন।

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

পৃষ্ঠা শাসক তার বৈশিষ্ট্যগুলির জন্য একটি বিশেষভাবে ন্যূনতম পদ্ধতির জন্য কিছু কৃতিত্বের যোগ্য, সমস্ত প্রয়োজনীয় তথ্য উইন্ডোর শীর্ষ বরাবর একটি ছোট বারে প্যাক করে৷

MeasurIt (Firefox এবং Chrome)

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

MeasureIt পেজ রুলারের মতো একই কাজ করে এবং ফায়ারফক্স এবং ক্রোম উভয়ের জন্যই উপলব্ধ৷

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

একবার ইনস্টল হয়ে গেলে, বোতামটি ক্লিক করুন, এবং আপনি একটি আয়তক্ষেত্র তৈরি করতে ক্লিক করতে এবং টেনে আনতে সক্ষম হবেন। আয়তক্ষেত্রের পাশাপাশি একটি পিক্সেল গণনা হবে, যার অর্থ আপনি অবস্থানের জন্য সঠিক পরিমাপ পেতে পারেন।

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

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

ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার জন্য দরকারী টুল (এবং ওয়েব ডিজাইনের সূক্ষ্ম বিবরণ জানুন)

আমরা বাজি ধরতে পারি যে আপনি যখন দেখবেন যে অন-স্ক্রীনে কতগুলি পিক্সেল রয়েছে এবং হাইলাইট করার সময় সেগুলি তৈরি করা হয়েছে। অন্য কিছু না হলে, এটি অবশ্যই "স্ক্রিন রিয়েল এস্টেট" শব্দটিকে পরিপ্রেক্ষিতে রাখা উচিত।

উপসংহার

এই এক্সটেনশনগুলি থেকে সেরাটি পেতে কিছু সময় লাগে, তবে তারা সহজ নাগালের মধ্যে কিছু দুর্দান্ত তথ্য রাখে। আপনি দ্রুত তাদের সাথে আঁকড়ে ধরবেন, কিন্তু যদি আপনি ফন্ট প্রতিস্থাপন করা কঠিন মনে করেন, মনে রাখবেন নামগুলি সঠিক হওয়া দরকার। "কমিক সানস" কাজ করবে না, যেখানে "কমিক সানস এমএস" (যেমন এটি অফিসে প্রদর্শিত হয়) কাজ করবে৷

মনে রাখবেন যে এই সমস্ত এক্সটেনশনগুলির জন্য আপনার দেওয়া তথ্যে এই ধরনের নির্ভুলতার প্রয়োজন, এবং আপনি সেগুলিকে সম্পূর্ণরূপে ব্যবহার করতে সুসজ্জিত হবেন৷


  1. বিষয়বস্তু সংরক্ষণ এবং সংগঠিত থাকার জন্য আপনার জন্য 5টি দরকারী ওয়েব-ক্লিপিং অ্যাপ

  2. বেকারত্বকে হারাতে এবং আপনার স্বপ্নের চাকরি পেতে দরকারী প্রযুক্তি সরঞ্জাম

  3. ওয়েব ব্রাউজ করার জন্য দৃষ্টি-প্রতিবন্ধী এবং অন্ধদের জন্য 3টি বিনামূল্যের টুল

  4. 5টি সেরা বিনামূল্যের অফলাইন ব্রাউজার যা আপনাকে অফলাইনে ওয়েব সামগ্রী দেখতে সাহায্য করে