ওয়েব ডিজাইনারদের প্রয়োজনীয় ২০ টি টুলস ও অ্যাপস

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

আজ যে টুলসগুলো নিয়ে আলোচনা করবো সেগুলো হচ্ছেঃ

• CSS STATS
• HTTTML
• Purify CSS
• Email Lab
• Layers for WordPress
• spaceBase
• Font Library
• .resizr
• Libraries
• Libscore
• First and Git
• Angular Interactive box-model Diagram
• CSS Gradient Animator
• Localfont
• Epic Favicon Generator
• UX Recipe
• Visual Guide to CSS3 Flexbox Properties
• CSS Font Sizing
• Typography Cheatsheet
• Device Metrics

১। CSS STATS:

চমৎকার এই অ্যাপসটি আপনার CSS ফাইলগুলোর সঠিক পরিসংখ্যান জানিয়ে দিবে! এটি ফ্রন্ট-এন্ড ডিজাইনারদের জন্য একটি অতি গুরুত্বপূর্ণ অ্যাপস।

২। HTTTML:

Vanilla HTML এর পরিবর্তে HTTTML দিয়ে ওয়েব ডিজাইনাররা একঘেয়েমিপূর্ণ স্ট্যান্ডার্ড মার্কআপ পরিবর্তন করতে পারেন অতি সহজেই! মজার ব্যাপার হচ্ছে এই স্ট্যান্ডার্ড মার্কআপগুলো কাস্টোমাইজ করে সুন্দর সুন্দর ইউনিক ও মজার নাম দিয়ে পরিবর্তন করা যায়। OOCSS টুলকিটস যেমন Basscss এ এটি ভাল কাজ করে।

৩। Purify CSS:

Purify CSS একটি চমৎকার টুলস ওয়েব ডিজাইনারদের জন্য! এটি আপনাকে জানিয়ে দিবে আপনার অ্যাপসে কোন কোন CSS সিলেক্টর ব্যবহৃত হয়েছে। এছাড়াও এটি অপ্রয়োজনীয় CSS বাদ দিয়ে ফাইল তৈরি করতে সাহায্য করে।

৪। Email Lab:

Email Lab হচ্ছে HTML email এর জন্য একটি ওপেনসোর্স স্টার্টার কিট। এছাড়াও এটি Grunt নামের কমান্ড লাইন বিল্ড টুল ব্যবহার করে যা ইমেইল টেম্পলেট তৈরিকে সহজ করে দেয়। এই টেম্পলেটগুলো পুনরায় ব্যবহারের যোগ্য কম্পোনেন্ট দিয়ে তৈরি হয়, যা ট্র্যাডিশনাল CSS বা SASS দিয়েও ডিজাইন করা যায়।

৫। Layers for WordPress:

Layers for WordPress হচ্ছে একটি ওপেনসোর্স সাইট বিল্ডার যা দিয়ে অতি দ্দ্রুততার সাথে ওয়ার্ডপ্রেস টেমপ্লেট তৈরি করে সাহায্য করে। তাই ওয়ার্ডপ্রেস ডেভেলপাররা নির্দ্বিধায় ব্যবহার করতে পারেন এই টুলসটি!

৬। spaceBase:

Spacebase হচ্ছে SASS বেজড রেস্পন্সিভ CSS ফ্রেমওয়ার্ক যা দিয়ে ওয়েব ডিজাইনাররা তাদের রেস্পন্সিভ কাজগুলো অতি সূক্ষ্মভাবে সম্পাদন করতে পারেন। এটি প্রত্যেক প্রজেক্টে থাকা কোর কম্পোনেন্টসের সাথে রেস্পন্সিভ ওয়েব ডিজাইনের এক দারুণ সমন্বয় সাধন করেছে।

৭। Font Library:

Font Library গুগল ফন্টস ব্রাউজ করার জন্য একটি অত্যাবশ্যকীয় টুলস। এই ওপেন সোর্স প্রজেক্ট দিয়ে ট্যাগ, অরগানাইজ ও গুগল ফন্টস অতি দ্রুততার সাথে ব্রাউজ করতে সহায়তা করে।

৮। .resizr:

বিভিন্ন স্ক্রিন সাইজে আপনার সাইটটি কেমন দেখা যায় তা দেখতে .resizr টুলসটি ব্যবহৃত হয়। এছাড়াও এটি বিভিন্ন ধরণের মিডিয়া কুয়েরি টেস্ট করতে সহায়তা করে।

৯। Libraries:

Libraries একটি ওপেনসোর্স ওয়েব অ্যাপস বিভিন্ন নতুন নতুন ওপেনসোর্স লাইব্রেরি খুঁজতে সাহায্য করে। এছাড়াও মডিউল, ফ্রেমওয়ার্ক ও ট্র্যাক সংরক্ষণ করতেও সহায়তা করে এই ওয়েব অ্যাপসটি।

১০। Libscore:

Libscore অ্যাপসটি ওয়েব জগতের সেরা সেরা সাইটগুলো খুঁজে বের করতে সাহায্য করে, এরপর এটি এসব সেরা সেরা সাইটে ব্যবহৃত জাভাস্ক্রিপ্ট লাইব্রেরি খুঁজে পেতে সাহায্য করে।

১১। First and Git:

গিট নিয়ে অনেকের মনেই অনেক প্রশ্ন ঘোরাঘুরি করে। এসব প্রশ্ন করার সেরা প্ল্যাটফর্ম হচ্ছে First and Git।

১২। Angular Interactive box-model Diagram:

নাম শুনেই এই টুলসটি সম্পর্কে ধারণা হয়ে যাওয়ার কথা। Angular Interactive box-model Diagram টুলসটি বিভিন্ন বক্স ভিজুয়ালাইজ করতে সহায়তা করে। 

১৩। CSS Gradient Animator:

CSS Gradient Animator টুলসটি অতি দ্রুততার সাথে CSS গ্র্যাডিয়েন্ট তৈরি করতে সহায়তা করে।

১৪। Localfont:

Localfont হচ্ছে ওয়েব ভিত্তিক একটি Vanilla JS টুল। এটি ফন্ট ফ্যামিলিকে কনভার্ট করে লোকাল স্টোরেজে ওয়েব ফন্ট ক্যাশিং হিসেবে ব্যবহার করতে সহায়তা করে।

১৫। Epic Favicon Generator:

এই টুলসটি আপনার সাইটে আলাদা আলাদা ২০ ধরণের ফেভিকন তৈরি করতে সাহায্য করে। 16 x 16 px থেকে শুরু করে 196 x 196 px পর্যন্ত!

১৬। UX Recipe:

এটি মূলতঃ একটি চেকলিস্ট। এখানে আপনি আপনার পরবর্তী UX  প্রজেক্ট খুঁজে পেতে, পছন্দ করতে পারবেন!

১৭। Visual Guide to CSS3 Flexbox Properties:

Visual Guide to CSS3 Flexbox Properties টুলসটি CSS ফ্ল্যাক্সিবল বক্স লেআউট মডিউল নামেও বহুল পরিচিত। এটি CSS3 এর নতুন লেআউট মডিউল। ডাইনামিক আইটেমগুলির অ্যালাইন, ডিরেকশন এবং ক্রমান্নয়ে রেখে মান উন্নত করতে সাহায্য করে এই টুলসটি। ফ্লেক্স কনটেইনারের প্রধান বৈশিষ্ট্য হলো বিভিন্ন স্ক্রিনের সাইজে সম্ভাব্য উপলব্ধ স্থানটি পূরণ করে প্রস্থ বা উচ্চতা সংশোধন করার ক্ষমতা।

১৮। CSS Font Sizing:

এই টুলসটি আপনাকে বিভিন্ন ধরণের ফন্ট তাদের সাইজ অনুযায়ী ডিক্লেয়ার করার মেথড জানাবে। অন্যান্য ফন্টের সাথে সেরা ফন্টটি বাছাই করে সেটা CSS এ ডিক্লেয়ার করার জন্য ওয়েব ডিজাইনারদের কাছে CSS Font Sizing টুলসটি অত্যন্ত জনপ্রিয়।

১৯। Typography Cheatsheet:

Typography Cheatsheet নামের টুলসটির নির্মাতা Type Wolf। স্মার্ট কোট’স, ড্যাস ও অন্যান্য টাইপোগ্রাফিক ক্যারেক্টারগুলোর ম্যাক কিবোর্ডের শর্টকাট, উইন্ডোজ কিবোর্ডের শর্টকাট ও HTML এন্টিটি জানতে এই টুলসটির জুড়ি নেই।

২০। Device Metrics:

Google Design এর অত্যন্ত চমৎকার একটি রিসোর্স এই Device Metrics নামের হ্যান্ডি রিসোর্সটি। এটি আপনাকে বিভিন্ন ডিভাইসের সাইজ, রেজুলেশন, অ্যাসপেকট রেশিও প্রভৃতি তথ্যগুলো দিয়ে সাহায্য করবে।

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

তথ্যসূত্রঃ

https://envato.com/blog/free-tools-apps-web-designers/

https://www.youtube.com/