ওয়েবসাইট ডিজাইন - সম্ভাবনাময় ফ্রিল্যান্সিং ক্যারিয়ার

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

একটি পূর্ণাঙ্গ ওয়েবসাইট দুটি বিষয়ের সংমিশ্রণে তৈরি করা হয়, যার একটি হচ্ছে ওয়েবসাইটি কিভাবে কাজ করবে তার নির্দেশনা দেয়ার জন্য প্রোগ্রামিং এবং অপর অংশ হচ্ছে এর বহিরাবরণ বা ডিজাইন। ওয়েবসাইট নির্দেশনা সাধারণত PHP, ASP, Python, Perl, Ruby ইত্যাদি প্রোগ্রামিং ভাষায় লেখা হয় এবং ডাটাবেইজ হিসেবে MySQL, MS SQL, PostgreSQL ইত্যাদি ব্যবহার করা হয়। অনলাইনে ওয়েবসাইট প্রোগ্রামিং এর কাজই সবচেয়ে বেশি পাওয়া যায়। যারা কম্পিউটার সায়েন্স বা এর সাথে সম্পর্কিত বিষয়ে প্রাতিষ্ঠানিকভাবে পড়ালেখা করেছে তারা ওয়েবসাইট প্রোগ্রামিং করে থাকে। তবে অনেকেই আছেন যারা শুধুমাত্র নিজের চেষ্টায় প্রোগ্রামিং শিখে বর্তমানে বেশ ভাল অবস্থায় আছেন।

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

প্রয়োজনীয় দক্ষতাসমূহ

একটি ওয়েবসাইটে তথ্য কিভাবে বিন্যস্ত থাকবে তার উপর ভিত্তি করে দুটি ভাগে ভাগ করা যায় - স্ট্যাটিক (Static) এবং ডাইনামিক (Dynamic) ওয়েবসাইট। স্ট্যাটিক ওয়েবসাইটে ওয়েবসাইটের তথ্য কখনো পরিবর্তন হয় না, অন্যদিকে ডাইনামিক ওয়েবসাইটের তথ্য ব্যবহারকারীর চাহিদার উপর ভিত্তি করে পরিবর্তিত হয়। স্ট্যাটিক ওয়েবসাইটেকে প্রোগ্রামিং এর মাধ্যমে ডাইনামিক ওয়েবসাইটে পরিণত করা হয়। একটি ওয়েবসাইটের ডিজাইন তৈরি করা থেকে শুরু করে এটিকে একটি স্ট্যাটিক ওয়েবসাইটে পরিণত করতে কয়েকটি ধাপ অতিক্রম করতে হয়। একজন সফল ওয়েবসাইট ডিজাইন ফ্রিল্যান্সার হতে হলে কেবল ডিজাইনের মধ্যে সীমাবদ্ধ না থেকে একটি স্ট্যাটিক ওয়েবসাইট তৈরির অন্যান্য বিষয় যেমন - Template তৈরি, HTML, CSS, Javascript ইত্যাদিতেও দক্ষ হওয়া প্রয়োজন। নিচে পর্যায়ক্রমে বিষয়গুলো আলোকপাত করা হল -

১) টেম্পলেট তৈরি:

ওয়েবসাইটের একটি ডিজাইনকে ওয়েবসাইট টেম্পলেট (Template) বলা হয়। টেম্পলেট সাধারণত Adobe Photoshop, Illustrator, Flash ইত্যাদি সফটওয়্যারের মাধ্যমে তৈরি করা হয়। বর্তমানে ওপেন সোর্স ব্যবহারকারীদের কাছে Gimp নামক সফটওয়্যারটিও টেম্পলেট তৈরির জনপ্রিয় একটি টুলে পরিণত হয়েছে। এদের মধ্যে ফটোশপ সফটওয়্যারই সবচেয়ে জনপ্রিয়। অন্যদিকে ফ্লাশ দিয়ে এনিমেটেড ও দৃষ্টিনন্দন ওয়েবসাইট তৈরি করা যায়। ফ্লাশের কাজেরও ব্যাপক চাহিদা রয়েছে। ফ্লাশের ActionScript নামক নিজস্ব প্রোগ্রামিং ভাষা আছে। শুধুমাত্র ফ্লাশ দিয়েই সম্পূর্ণ একটি ডাইনামিক ওয়েবসাইট তৈরি করা যায়। ওয়েবসাইট ডিজাইনিং এ যারা আসতে আগ্রহী তারা ফটোশপ অথবা ফ্লাশ থেকে যেকোন একটিকে বেছে নিতে পারেন।

একজন ওয়েবসাইট ডিজাইনারের সমসাময়িক ওয়েবসাইটের ডিজাইন সম্পর্কে ভাল ধারণা থাকতে হবে। বর্তমানের বেশিরভাগ ওয়েবসাইটগুলো Web 2.0 নামক একটি স্ট্যান্ডার্ড মেনে চলে। একে দ্বিতীয় প্রজন্মের ওয়েবসাইট ডিজাইনও বলা হয়। সহজভাবে বললে Web 2.0 মানের একটি ওয়েবসাইটির নিচে উল্লেখিত বৈশিষ্ট্যগুলোর কয়েকটি বা সবগুলো থাকতে পারে:

• সাধারণ ও পরিচ্ছন্ন ইন্টারফেস যাতে ওয়েবসাইটের তথ্যগুলো সহজেই পড়া যায়
• মূল ডিজাইন ব্রাউজারের মাঝামাঝি স্থানে অবস্থান করবে, অন্যদিকে অতীতের ওয়েবসাইটগুলো ব্রাউজারের বাম দিকে সরানো থাকত
• ওয়েবপেইজের কলাম সংখ্যা কম থাকবে
• পেইজের উপরের অংশ পরিষ্কারভাবে ওয়েবসাইটের কন্টেন্ট অংশ থেকে আলাদা থাকবে
• সহজে ব্যবহারযোগ্য নেভিগেশন
• লোগো বোল্ড থাকবে
• লেখাগুলো বড় থাকবে যাতে পড়তে আরামদায়ক হয়
• সূচনা লেখা বোল্ড থাকবে
• বাটন এবং ডিজাইনের বিভিন্ন ক্ষেত্রে 3D ও Reflection এফেক্ট নিয়ে আসা
• উজ্জ্বল রঙের সংমিশ্রণ
• Gradient বা গাঢ় থেকে হালকা রঙের সমন্বয়
• সুন্দর ও নজরকাড়া আইকন

২) HTML এ রূপান্তর:

একটি ওয়েবপেইজ অক্ষর, ছবি, লিংক ইত্যাদির সমন্বয়ে গঠিত যা HTML নামক একটি ভাষায় লেখা হয়। এটি কোন প্রোগ্রামিং ভাষা নয়, বরং একটি ওয়েবপেইজকে ব্রাউজারে প্রদর্শন করার ডকুমেন্ট ফরমেট। HTML এর উন্নত সংস্করণ হচ্ছে XHTML যা XML নামক আরেকটি ভাষার নিয়ম অনুসরণ করে। HTML বা XHTML এ দক্ষ হতে এক সপ্তাহের বেশি সময় লাগবে হবে না। অনলাইনে অনেক টিউটোরিয়াল সাইট রয়েছে, তবে সবচেয়ে সহজ ও ভাল টিউটোরিয়াল পাওয়া যাবেwww.w3schools.com নামক ওয়েবসাইটে।

ফটোশপ দিয়ে তৈরি করা ওয়েবসাইটের টেম্পলেটকে সাধারণত PSD ফরমেটে সেইভ করা হয়। প্রকৃতপক্ষে PSD ফাইলে টেম্পলেটকে সংরক্ষণ করা পর্যন্ত একজন ডিজাইনারের কাজ শেষ হয়ে যায়। তবে ফ্রিল্যান্সার হিসেবে বাড়তি আয় করতে চাইলে HTML জানাটাও জরুরী। ডিজাইনকে ওয়েবপেইজে রূপান্তর করতে হলে HTML দিয়ে কোডিং করতে হবে। এই রূপান্তরের প্রক্রিয়া ডিজাইন ভেদে ভিন্ন ভিন্ন হতে পারে। সাধারণত ফটোশপে Slice নামক একটি টুল আছে যা দিয়ে ডিজাইনকে HTML এ রূপান্তর করা যায়। কেবলমাত্র PSD থেকে HTML এ রূপান্তর করার কাজও ফ্রিল্যান্স মার্কেটপ্লেস সাইটগুলোতে পাওয়া যায়।

৩) CSS প্রয়োগ:

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

CSS দিয়ে HTML ডকুমেন্টে স্টাইল বা ডিজাইন তৈরি করার অনেকগুলো সুবধা রয়েছে। উল্লেখযোগ্য দুটি সুবিধার একটি হচ্ছে, HTML এর বিভিন্ন অংশে বা বিভিন্ন পৃষ্ঠায় খুব সহজে একই স্টাইল দেয়া যায়। অন্য আরেকটি সুবিধা হচ্ছে কেবলমাত্র CSS ফাইলকে পরিবর্তন করে একটি ওয়েবসাইটের চেহারা মুহূর্তের মধ্যে পরিবর্তন করা সম্ভব। CSS এর প্রথমিক ধারণা পেতে কয়েক ঘন্টা সময়ের প্রয়োজন এবংwww.w3schools.com সাইটিই যথেষ্ঠ। তবে CSS এ পূর্ণ দখল আনতে কিছুটা সময়ের প্রয়োজন। 

৪) Javascript:

জাভাস্ক্রিপ্ট হচ্ছে একটি প্রোগ্রামিং ভাষা যাকে ব্রাউজার সাইড স্ক্রিপ্টিং ভাষা বলা হয়। অন্যদিকে PHP বা ASP হচ্ছে সার্ভার সাইড স্ক্রিপ্টিং ভাষা। জাভাস্ক্রিপ্টের সুবিধা হচ্ছে এটি সরাসরি ব্যবহারকারীর কম্পিউটারের রিসোর্স ব্যবহার করে দ্রুততার সাথে কাজ করে। যা একটি ওয়েবসাইটকে ইউজার ফ্রেন্ডলি করে তোলে। জাভাস্ক্রিপ্টে দক্ষ হতে অবশ্যই ভাল প্রোগ্রামিং জ্ঞানের প্রয়োজন রয়েছে। তবে ডিজাইনাররাও জাভাস্ক্রিপ্টের কিছু সুবিধা গ্রহণ করে ডিজাইনকে আরো প্রাণবন্ত করে তুলতে পারেন। জাভাস্ক্রিপ্ট প্রোগ্রামিংকে সহজ করতে বেশ কিছু ফ্রেমওয়ার্ক বা কোডিং লাইব্রেরি পাওয়া যায়। এগুলোর মধ্য সবচেয়ে জনপ্রিয় হচ্ছে jQuery নামক লাইব্রেরিটি। এটি দিয়ে খুব সহজেই বিভিন্ন ধরনের এনিমেশন, নজরকাড়া এফেক্ট, দরকারী টুল ইত্যাদি তৈরি করা যায়। এটি সম্পর্কে বিস্তারিত তথ্য পাবেন www.jQuery.com ওয়েবসাইট থেকে। jQuery দিয়ে তৈরি অসংখ্য টুল অনলাইনে ফ্রি পাওয়া যায়।

ডিজাইন শেখার কয়েকটি সাইট পরিচিতি

নিচে ফটোশপ দিয়ে ওয়েবসাইট ডিজাইনিং শেখার কয়েকটি জনপ্রিয় সাইটকে তুলে ধরা হল -

www.psdtuts.com

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

www.psdfan.com

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

www.pslover.com

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

www.nettuts.com

এটি ওয়েবসাইট ডিজাইনার এবং প্রোগ্রামার উভয়ের জন্য খুবই সাহায্যকারী একটি টিউটোরিয়াল সাইট। HTML, CSS, Javascript, Ajax, jQuery, PHP, Ruby, Wordpress ও ডিজাইন সংক্রান্ত আরো অনেক বিষয়ের উপর ছবি সহকারে এবং সহজ ভাষায় টিউটোরিয়াল পাওয়া যায়। এই সাইটে ভিডিওর মাধ্যমে অনেক টিউটোরিয়াল প্রকাশ করা হয়। ডিজাইনারদের জন্য সাহায্যকারী অনেক টুল সাইট থেকে ফ্রি ডাউনলোড যায়। এই সাইট থেকেও টিউটোরিয়াল লিখে প্রতিটির জন্য ১৫০ ডলার করে আয় করা যায়।

www.photoshopstar.com

ফটোশপ দিয়ে দৃষ্টিনন্দন এফেক্ট তৈরির টিউটোরিয়াল নিয়ে জনপ্রিয় এই সাইটটি সাজানো হয়েছে। সাইটটিতে ফটোশপের এফেক্ট, গ্রাফিক্স ডিজাইন, ফটো এফেক্ট, টেক্সট এফেক্ট, ওয়েব গ্রাফিক্স, ওয়েবসাইট ডিজাইন ইত্যাদি বিষয়ের উপর টিউটোরিয়াল পাওয়া যায়। ওয়েবসাইট ডিজাইন বিভাগে একটি সম্পূর্ণ ওয়েবসাইট কিভাবে তৈরি করতে হয় তা ছবি সহকারে বর্ণনা করা হয়েছে।

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

1. www.good-tutorials.com
2. www.psdvibe.com 
3. www.tutorialized.com/tutorials/Photoshop/6 
4. www.actionfx.com 
5. www.stockvault.net/tutorials.php 
6. www.photoshoproadmap.com 
7. www.pixel2life.com 
8. www.totaltutorials.com
9. www.deviantart.com 
10. www.teamphotoshop.com 
11. www.photoshoptopsecret.com 
12. www.planetphotoshop.com
    
    

অনলাইনে টিউটোরিয়ালের পাশাপাশি বাজারে ফটোশপের মানসম্মত ভিডিও টিউটোরিয়াল সিডি, বই ইত্যাদি পাওয়া যায়, যা থেকে ফটোশপের প্রাথমিক কৌশল রপ্ত করতে পারেন। তবে ভাল ওয়েবসাইট ডিজাইনার হতে হলে বেশি করে অনলাইনে বিভিন্ন ওয়েবসাইটের ডিজাইন দেখতে হবে। উন্নতমানের ডিজাইন বিক্রি করে এরকম ওয়েবসাইটের মধ্যে রয়েছে - www.dreamtemplate.com,www.templatemonster.com , www.templateworld.com ইত্যাদি। এই সাইটগুলোতে ডিজাইনের প্রিভিউ দেখা যায়। নতুন ডিজাইনাররা প্রথম অবস্থায় চেষ্টা করুন ঠিক একই ধরনের ডিজাইন আপনিও তৈরি করতে পারছেন কিনা। এভাবে শিখতে থাকলে একদিকে যেমন সমসাময়িক ওয়েবসাইট ডিজাইন সম্পর্কে ভাল ধরাণা তৈরি হবে, অন্যদিকে সম্পূর্ণ নতুন একটি ওয়েবসাইট ডিজাইন তৈরির আইডিয়াও পাবেন। ওয়েবসাইট ডিজাইন থেকে অনলাইনে আয় করা যায় এরকম সাইট নিয়ে পরবর্তী লেখায় আলোচনা করা হবে।