ফ্রন্ট-এন্ড ডেভলপারদের জন্য কিছু মজার ওয়েবসাইট – (পর্ব ২)

Design Inspiration

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

এ ধরণের তিনটি সাইটের কথা আজকে বলবো-

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

awwwards.com  এ যখন আমি প্রথম ভিজিট করি, তখন আমি ভাবতেছিলাম যে, এলিয়েনের অস্তিত্বের পক্ষে এই সাইটগুলাও মনে হয় একটা প্রমাণ। মানুষের পক্ষে এই টাইপের কাজ কিভাবে সম্ভব! আই মিন- হাউ? (how?)

 

SVG2ICON

আজকের দ্বিতীয় ভাগে আমরা আলোচনা করবো এমন একটি সাইট নিয়ে, যেটা আমাদেরকে SVG থেকে Web Icon Font বানিয়ে দেবে। সাইটটির নাম- fontastic

মনে করুন- আপনি একটি লোগো তৈরি করেছেন। সেটিকে SVG ফর্মেটে সেভ করুন। তারপর এই এই সাইটে সেটিকে আপলোড করুন, দেখবেন আপনার SVG ফাইলটি সেখানে দেখাচ্ছে। ফাইলটিতে ক্লিক করুন, তারপর PUBLISH ট্যাবে গিয়ে দেখুন আপনার এই ফাইলটি ওয়েব আইকন ফন্ট হিসেবে ডাউনলোড হওয়ার জন্য রেডি হয়ে আছে। ডাউনলোড করুন, দেখবেন যে কোন আইকন প্যাকেজের মত আপনার SVG ফাইলটির জন্য বেশ কয়েকটি ফর্মেটের ফন্ট এবং একটি css ফাইল ডাউনলোড হয়ে গেছে। ওয়েব আইকন ফন্ট যেভাবে ব্যবহার করেন, আপনি এখন এটিকে হুবহু সেভাবেই ব্যবহার করতে পারবেন।

সাইটটি ব্যবহার করতে হলে সেখানে একাউন্ট করতে হবে। ফ্রি এবং প্রিমিয়াম- দু’টো সার্ভিসই আছে ওদের, প্রিমিয়ামে কিছু সার্ভিস বেশি আছে- এই যা। ভিজিট করুন, ব্রাউজ করুন- নিজেই বুঝতে পারবেন ক্যামনে কি।

 

Color Combination

তৃতীয় ভাগে আমরা দেখবো কালার নিয়ে কিছু ওয়েবসাইট। যারা ডিজাইনার, তারা তো নিজেরাই কালার সিলেক্ট করে কাজ করতে পারে। তবে যারা আমার মত ধইঞ্চা টাইপ, তাদের জন্য এই সাইটগুলা বিরাট কাজের জিনিস।

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

প্রথমটি হলো – coolors

এটিতে পাঁচটি কালারে কম্বিনেশনে একেকটি কালার স্কীম তৈরি করা থাকে। প্রতিটার কোডসহ দেয়া থাকে।

কোন একটি কালার স্কীম আপনি আলাদা একটি ট্যাবে ওপেন করে সেটিকে নিজের ইচ্ছেমত এডিট করে নিতে পারবেন, এডিট করার সুযোগও দিয়ে দেয়া আছে।

 

কালার কম্বিনেশনের দ্বিতীয় ওয়েবসাইটটি গ্র্যাডিয়েন্ট কালারের জন্য। নাম – uigradients

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

 

এ পর্যন্ত যে সাইটগুলোর কথা আলোচনা করা হলো, সেগুলোর লিঙ্ক-

Design Inspiration

SVG2ICON

Color Combination

 

একটি css snippet শেয়ার করার মাধ্যমে আজকে পোস্টটি শেষ করছি। খুবই সিম্পল একটা snippet …. একটি css ব্লগে পাইলাম আজকে। এটা একটা প্রি-লোডার। বিরাট সিম্পল একটা প্রি-লোডার। ছোটখাট কাজের জন্য ব্যবহার করা যায়।

 

আজকের মত এখানেই শেষ করছি। ভাল থাকুন সবাই।

 

মন্তব্য

মন্তব্য