ওয়েবসাইটের ডিজাইন এলিমেন্ট চেক করার টুলস (ওয়েব ডিজাইনের ফাইন ডিটেইল শিখুন)

আকর্ষণীয় দেখানোর ওয়েবসাইটগুলো ইন্টারনেট যুগের একটি মিনি-মাস্টারপিস (mini-masterpiece) আপনাদের আপনাস্বভাবে। কাস্টোমাইজেশন (customization) আপনার ইচ্ছা অনুযায়ী সহজ বা জটিল হতে পারে — ওয়ার্ডপ্রেস থিম মডিফাই (modify) করার থেকে একটি সাইটের আপিয়ারেন্স (appearance) শুরু থেকে শেষে ডেভেলপ (develop) করা পর্যন্ত।

পরে আপনি এমন এলিমেন্ট (elements) এবং কালার (colours) খুঁজে পাবেন যা আপনার পছন্দ এবং আপনি আপনার প্রোজেক্টে পুনরায় ব্যবহার করতে চান। এই আর্টিকেলে আমরা আপনাকে দেখাবো ওয়েবসাইট থেকে আপনার প্রয়োজনীয় সব তথ্য বের করার এসেনশিয়ালস (essentials)।

কালার (Colour) কী?

ColorZilla

মূলত ফায়ারফক্সের জন্য তৈরি, ColorZilla এরপর ক্রোম এবং এর সংশ্লিষ্ট ব্রাউজারগুলোর জন্যও উপলব্ধ হয়েছে।

ইনস্টলেশনের পর আপনি দুটো ব্রাউজারের UI-তে একটি এক্সট্রা বাটন পাবেন। এই বাটন আপনাকে অনলাইনের প্রায় সব জিনিসের কালার বের করার ক্ষমতা দেয়। আপনি দ্রুত বুঝতে পারবেন ColorZilla শুধু কালার আইডেন্টিফাই (identify) করার বাইরে অনেক কিছু করে কারণ এতে প্যালেটস (palettes) সাপোর্টও রয়েছে।

ফন্ট (Font) কী?

WhatFont? (Chrome)

স্ট্রিক্টলি স্পিকিং (strictly speaking), আপনার ওয়েবসাইটের ফন্ট বের করার জন্য WhatFont? এক্সটেনশন দরকার নেই, কিন্তু এটি কোনো সন্দেহ নেই সবচেয়ে দ্রুত পদ্ধতি। বিকল্প হচ্ছে স্টাইলশিট (stylesheet) খুলে সেটি খুঁজে বের করা।

WhatFont? ইনস্টল করুন এবং আপনি আপনার ব্রাউজার UI-তে একটি নতুন আইকন দেখবেন। যদি আপনি ব্রাউজার সম্পূর্ণ রিস্টার্ট না করেন, তবে আপনাকে সেই পেজটি রিফ্রেশ করতে হবে যেখানে আপনি ফন্ট আইডেন্টিফাই করতে চান। একবার হলে আপনার ব্রাউজারের বাটনে ক্লিক করুন।

ওয়েবপেজের উপরে ডান কোণে একটি নতুন বাটন দেখাবে, এবং আপনি টেক্সটের ওপর মাউস হভার করলে ফন্টের নাম দেখাবে। ফন্টে ক্লিক করলে সাইজিং (sizing)-এর সাথে সম্পর্কিত অতিরিক্ত ইনফরমেশন मिलবে। এতে "স্ট্যাক" (stack)-এ থাকা অন্যান্য ফন্টও আইডেন্টিফাই করা যায় যা সুবিধাজনক যদি আপনি দেখতে চান ওয়েব ডেভেলপাররা তাদের ইনটেন্ডেড টাইপফেস (intended typeface)-এর জন্য কী অল্টারনেটিভ (alternatives) কনসিডার করে।

Font Finder (Firefox)

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

এক্সটেনশন ইনস্টল করুন, এবং আপনি রাইট-ক্লিক কনটেক্সট মেনুতে একটি নতুন অপশন পাবেন।

আপনি যেটি আইডেন্টিফাই করতে চান সেটি হাইলাইট করুন, তারপর আপনার উপলব্ধ অপশনগুলো আনায়। "Analyse Selection" আপনাকে সেটি সম্পর্কে সবকিছু বলে দেবে যা আপনি কখনো জানতে চেয়েছিলেন।

এটি যে ডিটেইল (detail) দেয় সেটি জয়-ড্রপিং (jaw-dropping) লেস। যদি টেক্সট "(stack)" হিসেবে মার্ক করা থাকে, তবে এটি স্ট্যাকের প্রথম ফন্টটি বেছে নেবে যা আপনার ইনস্টল্ড আছে। স্ট্যাকস সাধারণত একটি জেনারিক টার্ম (generic term) দিয়ে এন্ড হয়, যেমন উপরের উদাহরণে "sans-serif"। অনসম্ভব ঘটনা যদি স্ট্যাকের অন্য ফন্ট ইনস্টল্ড না থাকে, তবে এটি আপনার সিস্টেমের ডিফল্ট sans-serif ফেসে ফলব্যাক (fall back) করবে।

আপনি এলিমেন্ট কাস্টোমাইজও করতে পারেন "Adjust Element" অপশন দিয়ে। এক্সটেনশন আপনাকে ফন্ট ফ্যামিলি (font family) এন্টার করতে বললে আপনি যা ইচ্ছা করুন। আমাদের উদাহরণে আমরা উইকিপিডিয়ার (Wikipedia) প্রায় সব ফন্ট পরিবর্তন করলাম কিছু ভিন্ন জিনিসে, ফলে विचিত্র ম‍‍্যাশ-আপ (mash-up) তৈরি হয়েছে। এই চেঞ্জেস (changes) পারম্যানেন্ট (permanent) নয় এবং পেজ রিলোড করলে চলে যাবে।

"Replace font (entire DOM)" আপনাকে পেজের প্রতিটি ফন্ট ইনস্ট্যান্স পরিবর্তন করতে দেয়। Roboto পছন্দ নয় (যেটি আমরা আমাদের মেইন sans-serif হিসেবে ব্যবহার করি)? এই অপশন হাইলাইট করুন, পেজে উপস্থিত ফন্ট লিস্ট থেকে "Roboto" ক্লিক করুন, এবং আপনি যে ফন্ট দেখতে পছন্দ করবেন তার নাম ইনপুট করুন। আবারো, এটি পারম্যানেন্ট নয়, কিন্তু আপনাকে আপনার প্রিয় ওয়েবসাইটের ডিজাইন সাথে খেলার সুযোগ দেয়, অস্থায়ীভাবে সঠিক।

সাইট মেজারমেন্ট (Site Measurement)

Page Ruler (Chrome)

"একটি রুলার (ruler)? সত্যি?" — আমরা জানি আপনার প্রশ্ন। Page Ruler একটি স্ক্রিন রুলার (screen ruler) যা শোনার চেয়ে কিছুটা ভিন্ন। আমরা যেকোনো প্রারম্ভিক সসপিশন (skepticism) বুঝতে পারি।

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

অন্য এক্সটেনশন처럼 ইনস্টল করুন, এবং আপনার ব্রাউজার UI-তে আরেকটি বাটন পাবেন। মনে রাখবেন আপনাকে একটি ওয়েব পেজ খুলতে হবে এক্সটেনশন টেস্ট করার জন্য — ক্রোমের বিল্ট-ইন ওয়েব পেজগুলো সিকিউরিটি কারণ থেকে ব্যবহার করা যাবে না।

বাটনে ক্লিক করলে অ্যাড্রেস বারের নিচে সরাসরি একটি এক্সট্রা স্ট্রিপ (strip) অফ ইনফরমেশন পাবেন, এবং আপনি মাউস ব্যবহার করে ক্লিক এন্ড ড্র্যাগ (click and drag) করে একটি শেপ (shape) বের করতে পারেন, যার ডাইমেনশন (dimensions) ক্যালকুলেট হয়ে উপরে কহা বারের পাশে ডিসপ্লে হবে। এর বাইরে আপনার গ্রিড (grid) ইনেবল বা ডিজেবল করার অপশনও রয়েছে, যদিও এটি অ্যাকিউরেসি (accuracy)-এ সাহায্য করতে পারে।

আপনি চাইলে রেক্ট্যাঙ্গেলের (rectangle) কালার ডিফল্ট ব্লু (blue) থেকে পরিবর্তন করতে পারেন। আপনি যেকোনো কালার বেছে নিন, এটি অটোমেটিক্যালি একটি ডিগ্রি ট্রান্সপেরেন্সি (transparency) অ্যাড করবে যাতে আপনি নিচের কন্টেন্ট দেখতে পারেন।

Page Ruler কর্তব্য বাধ্য তার নির্দিষ্ট মিনিমালিস্ট (minimalist) অ্যাপ্রোচের জন্য ফিচারগুলোর পাশে, সকল এসেনশিয়াল ইনফরমেশন একটি ছোট বারে প্যাক করে উইন্ডোর টপে।

MeasureIt (Firefox এবং Chrome)

MeasureIt Page Ruler-এর মতো একই টাস্ক করে এবং ফায়ারফক্স ও ক্রোম দুটোর জন্যও উপলব্ধ।

ইনস্টল করুন, বাটনে ক্লিক করুন, এবং আপনি ক্লিক এন্ড ড্র্যাগ করে একটি রেক্ট্যাঙ্গেল বানাতে পারবেন। রেক্ট্যাঙ্গেলের পাশে একটি পিক্সেল কাউন্ট (pixel count) থাকবে, অর্থায় আপনি পজিশনিং-এর জন্য সঠিক মেজারমেন্ট পাবেন।

আপনি যদি চিন্তিত হন মাউস দিয়ে সঠিক মেজারমেন্ট পাওয়ার জন্য, তবে আপনি অ্যারো কী (arrow keys) ব্যবহার করে হাইলাইটেড এরিয়ার সাইজ এডজাস্ট (adjust) করতে পারেন, যাতে প্রিসিশন (precision) অনেক সহজ হয়ে যায়। আমরা "Area" অপশন সেটিংসে চেক করার পরামর্শ দিচ্ছি; এটি সফটওয়্যার কীভাবে কাজ করে সেটি বদলায় না, শুধু আপনার আকৃতির এরিয়া কতটুকু নেয় সেটি একটি আইডিয়া দেয়।

আপনি চকিত হবেন দেখে স্ক্রিনে কতটুকু পিক্সেল রয়েছে এবং হাইলাইট করলে সে কতটুকু এরিয়া তৈরি করে। যদি অন্য কিছু নয়, তবে এটি অবশ্যই "screen real estate" টার্মকে পারস্পেক্টিভে (perspective) রাখবে।

উপসংহার

এই এক্সটেনশনগুলো থেকে সেরা আউটপুট পেতে কিছু সময় লাগে, কিন্তু এগুলো কিছু চমৎকার ইনফরমেশন সহজে আপনার হাতে দিয়ে দেয়। আপনি দ্রুত এগুলোকে বুঝতে পারবেন, কিন্তু যদি ফন্ট সাবস্টিটিউট (substitute) করতে কঠিন হয়, মনে রাখবেন নামগুলো একজাক্ট (exact) হতে হবে। "Comic Sans" কাজ করবে না, কিন্তু "Comic Sans MS" (যে আপনার অফিসে দেখতে পাবেন) কাজ করবে।

মনে রাখবেন এই সকল এক্সটেনশন আপনার দেওয়া ইনফরমেশনে এই টাইপের অ্যাকিউরেসি (accuracy) চায়, এবং আপনি সেগুলো পূরণ করলে সেগুলো সফলভাবে ব্যবহার করতে পারবেন।