ওয়েব ডিজাইন শেখার পূর্ণাঙ্গ গাইডলাইন

কেমন আছেন সবাই? জানি এই অস্থির পরিস্থিতি সবাইকে বিচলিত করে রেখেছে, তবুও আমাদের বেঁচে থাকার প্রয়োজন মেটাতে হবে; আমরা যে যেখানে আছি সবাই একটু সচেতন হলেই এই অস্থিরতা কিছুটা হলেও কমবে।

তো কথা না বাড়িয়ে আজকের বিষয় নিয়ে আলোচনা শুরু করা যাক। আমাকে প্রায়শই অনেকেই প্রশ্ন করেন- “ওয়েব ডিজাইন শেখার ধারাবাহিকতা কি?” তারই আলোকে আজ আলোচনা করবো “ওয়েব ডিজাইন শেখার ধারাবাহিকতা” নিয়ে। প্রথমেই বলে রাখা ভালো- আমার আট বছরের কর্মজীবনে আমি এখনও নিজেকে শিক্ষার্থী ভাবি, সেই তুলনায় নিশ্চয় এই লেখা দিয়ে আপনার জীবন বদলে যাবার মত ভাবনা নিতান্তই অলীক, সেই জন্য এই লেখাটি শুধু পথ নির্দেশনা হিসেবে বুকমার্ক করুন। হয়তো এই নির্দেশনা আপনার ওয়েব ডিজাইনের কর্মক্ষেত্রের পথটাকে কিছুটা মসৃণ করবে।

আমাদের আজকের আলোচনা শুধু “ওয়েব ডিজাইনের” জন্য, “ওয়েব ডেভেলপের” জন্য নয়। যদিও এই দুটো বিষয় একে অপরের পরিপূরক, ডিজাইন-ডেভেলপ এর মধ্যে পার্থক্য না হয় অন্য কোন দিন আলোচনা করবো।

ওয়েব কি?

এইতো বছর ৩০ আগের কথা, একজন ব্রিটিশ সফটওয়্যার প্রকৌশলী বিজ্ঞানীদের জন্য তথ্য আদানপ্রদানের এক পদ্ধতি উদ্ভাবন করেছিলেন, যা পরবর্তীতে গোটা মানবসমাজের ইতিহাসই পালটে দেয়। এটি এখন পরিচিত ‘ওয়ার্ল্ড ওয়াইড ওয়েব‘ নামে। যোগাযোগ বা তথ্য বিনিময়ের অনেক পদ্ধতি থাকলেও এই ওয়েবের কারণে সেটি আরও সহজ ও সাবলীল হয়েছে। এক প্রান্তের তথ্য নিমেষে পৌঁছে যাচ্ছে পৃথিবীর অন্য প্রান্তে। লাইভ চ্যাট, ভিডিও কনফারেন্স, ভিডিও স্ট্রিমিং, সোশ্যাল কমিউনেকশন, টেলি-মেডিসিন সহ নানান কিছু, এ সকল কিছুই সম্ভব হচ্ছে ইন্টারনেটের মাধ্যমে আর এই ইন্টারনেটের মূল উপাদান হচ্ছে ওয়েব বা অন্য কথায় ওয়েবসাইট। ভেরিসিনের তথ্য অনুযায়ী ২০১৯ সালের শেষ প্রান্তিকে গোটা পৃথিবীতে প্রায় ৩৬০ মিলিয়ন বা ৬০ কোটি .com এবং .net ডোমেইন (ওয়েবের ঠিকানা) আছে বলে প্রতিবেদন প্রকাশ করা হয়। এ থেকে বোঝা যায় গত তিন দশকে কি পরিমাণ ওয়েবের পরিবর্তন ঘটেছে।

আপনি যদি অনলাইনের দুনিয়ায় তৈরি করা প্রথম ওয়েব সইটটি দেখেন তবে খুবই সাদামাটা একটা পাতা দেখবেন, যেখানে টিম বার্নার্স-লি ও তার দল ১৯৯১ সালের ৬ আগস্ট ওয়ার্ল্ড ওয়াইড ওয়েব (www) প্রজেক্টের অংশ হিসেবে সার্ভার কিভাবে তৈরি হয় তার নির্দেশিকা তুলে ধরেছিলেন। এরপর ভাবুন তো তার এই পদক্ষেপ কিভাবেই না পৃথিবী বদলে দিয়েছে। এই লেখাগুলো আপনার মোবাইল, ট্যাব বা কম্পিউটারে পড়তে পারছেন সেটা কেবল মাত্র এই ওয়েবের কল্যাণেই! সহজ কথায়- একে অপরের সাথে ইন্টারনেটের সাহায্যে যোগাযোগ বা তথ্য উপস্থাপনের যে মাধ্যম ব্যবহার করা হয় সেটাকেই আমরা “ওয়েব” বলি।

ওয়েব ডিজাইন কি?

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

কেন শিখবেন ওয়েব ডিজাইন?

অমুক ভাই তো ওয়েবে কাজ করে গাড়ি-বাড়ি করছে আমাকেও শিখতে হবে বা শুনেছি ওয়েবে কাজ করলে নাকি অনেক ডলার ইনকাম করা যায়, সেই কারনে…

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

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

আমি কি ওয়েব ডিজাইন শিখতে পারবো?

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

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

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

আর যদি আপনার মার্ক ০ থেকে ১০ হয়ে থাকে তবে- আপাতত ডিজাইনের দৌড়ে সব’চে পেছনের মানুষ আপনি! শুধু ইচ্ছেকে পুঁজি করে সামনে এগুনো ঠিক হবে না বস্! সময় থকতে “ক্রিয়েটিভটির” ভিটামিন খেয়ে নেমে পড়ুন এই মহাযগ্গে! আর সমস্ত শক্তি খাটিয়ে সামনের দিকে দৌড় লাগান; কে জানে এক সময় আপনিই হয়ে যেতে পারেন ইনভাটো (envato) গ্রুপের একজন গর্বিত সদস্য!

শুরু করবেন কিভাবে?

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

ডিজাইনের সাহেবি ভাষা গ্রাফিক। ভালো একজন ওয়েব ডিজাইনার হতে অবশ্যই আপনার গ্রাফিক সম্পর্কে ধারনা থাকতে হবে। এছাড়াও কি কি থাকতে হবে একটু পয়েন্ট করে নেই-

মানুষিক ইচ্ছা: মনে করুন গ্রাফিক্সের ধারনা আপনার প্রবল, কিন্তু এই বিষয়গুলো আপনার চলমান জীবনে কোনই প্রভাব ফেলে না। কিংবা ভবিষ্যতেও কোন প্রভাব ফেলবে বলে আপনি মনে করেন না! কিন্তু আপনার হাই রেজুলেশন/গ্রাফিক্সের গেম ছাড়া খেলতে ইচ্ছে করে না, HD প্রিন্টের সিনেমা/ছবি ছাড়া আপনার ভালো লাগে না, LCD/LED স্ক্রীন ছাড়া আপনার দেখতে সমস্যা হয়, পিসির কনফিগারেশনের সাথে ভালো মানের জিপিইউ (Graphics Processing Unit) আপনার চাই-ই-চায়! তাহলে আমি বলবো আপনি মাছ খেতেই ভালোবাসেন- ধরতে না। কোন কিছু শেখার পেছনে মানুষিক ইচ্ছাটা বেশ প্রাধান্য পায়, তবে এই ইচ্ছাটা কোন দিকে প্রবাহিত করবেন সেটা একান্তই আপনার উপর নির্ভর করে।

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

রিসোর্স: ওয়েব ডিজাইনের জন্য খুবই গুরুত্বপূর্ণ অংশ। গ্রাফিক্স & ওয়েব রিলেটেড যা যেখানে পান সংগ্রহ করুন, যেমন ডকুমেন্ট, ই-বুক, ভিডিও টিউটোরিয়াল, বিভিন্ন এলিমেন্ট ইত্যাদি। এরপর? এরপর আবার কি! হার্ডডিক্সের বিভিন্ন পার্টিশনে ভাজ করা কাপড়ের মত সাজিয়ে রেখে দিন!!

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

ধৈর্য: আপনি হয়তো ভাবছেন এতক্ষণে ধৈর্য্যের কথা কেন বললাম! আসলে এই পয়েন্টে এসেই আপনার ধৈর্যের মূল পরীক্ষাটা হবে! যেটাতে এখনো আমি পাশ করতে পারিনি!! ধারনার ট্যালেন্টে ছড়াছড়ি সাথে হিমালয় সমান মানুষিক ইচ্ছা ও পৃষ্ঠার পর পৃষ্ঠা পরিকল্পনা, সঙ্গে আছে প্রায় ১ টেরাবাইট (১ হাজার গিগাবাইট) রিসোর্স! কিন্তু এইগুলা সঠিক ভাবে সঠিক সময়ে কাজে না লাগানোর বদ অভ্যাস আমার মত অনেকের ভেতরেই বিদ্যমান। মনে রাখবেন- টক আঙ্গুর মিষ্টি কি না সেটা খেলেই বোঝা যাবে! তার আগে নয়! মিছামিছি মনকে সান্ত্বনা দেয়া থেকে বিরত থাকুন!

মার্কআপ: এবার ধারণকৃত ধৈর্যের ঝুলি নিয়ে শুরু করুন PSD তৈরি, সেটাকে HTML এবং CSS দিয়ে রুপান্তর করা শিখুন। সেই সাথে java বা jQuery এর ব্যাবহার শিখে রাখুন আর ঝাঁপিয়ে পড়ুন কোডিং এর দুনিয়ায়! প্রাথমিক ভাবে ভালো কোন ডিজাইনারের ডিজাইন দেখে নিজের মত করে সেটা তৈরি করতে চেষ্টা করুন, চেষ্টার ভেতর যেগুলো বাধা আসে সেগুলো সমাধানে তৎপর হোন। শুরুতেই PHP, Javascript, jQuery এইগুলার মধ্যে মাথা ঢোকানোর কোন যুক্তি নেই, প্রয়োজনে এগুলো ব্যাবহার করুন, মার্কআপে হাতেখড়ি হয়ে গেলে এ্যাডভান্স লেভেলে এইগুলো শেখার অনেক সময় পাবেন। আরো প্রয়োজনে এ বিষয়ে যাদের অভিজ্ঞতা আছে তাদের পরামর্শ নিতে পারেন।

বাস্তবায়ন: গ্রাফিক্সের বর্ণিল দুনিয়াই আপনাকে স্বাগতম! যদি আপনি উপরের পয়েন্ট গুলো ঠিকঠাক ভাবে পার করে আসেন তবে জেনে রাখুন আপনার ১৮” মনিটরে (ক্ষেত্র বিশেষে বড় বা ছোট হতে পারে) পৃথিবীর সমস্ত রঙ নিয়ে দিয়ে ভরে দিতে পারবেন (তাই বলে বাজার থেকে রঙ কিনে নিয়ে এসে লাগাইলে আমার কোনো দোষ নাই 😛 ); রাঙ্গিয়ে তুলতে পারবেন ওয়েবের বিশাল দুনিয়াকে!

পরিশেষ

এতক্ষণে নিশ্চয় বোরিং ফিল করছেন? ঘুরে ফিরে তো এই সবই বলে সবাই, আসলে কাজের কাজ কিছুই হয় না এই টাইপের চিন্তা আপনার মনেও বোধয় উঁকি-ঝুকি দিচ্ছে! আচ্ছা, উপরের পয়েন্টগুলো যদি আরো সহজ করে দেই কেমন হয়? বলতে গেলে মুখে তুলে খাইয়ে দেয়ার মত আর কি! তো চলুন শুরু থেকে শেষ করি-

HTML CSS প্র্যাকটিসের জন্য হাতে দুই তিন মাস সময় নিয়ে w3schools.com থেকে শুরু করুন। বুঝতে কষ্ট হলে webcoachbd.com বাংলাতে এখানেও HTML শেখার রিসোর্স রয়েছে, শুরু করে দিন। HTML এর ব্যাসিক ট্যাগগুলো রপ্ত করার পাশাপাশি CSS এর প্রোপার্টি সম্পর্কে সাবলীল হবার চেষ্টা করুন। হাতেখড়ি নিতে ইউটিউবে https://cutt.ly/Lf8YSkP এই প্লেলিস্ট অনুসরণ করতে পারেন।

গ্রাহক তার ওয়েবসাইটের ধারণা ছবিতে প্রকাশ করবেন, এই ছবিকে ওয়েবসাইটে রুপান্তর শিখতে PSD to HTML তৈরির কৌশল শিখতে হবে। PSD টেমপ্লেট ফ্রীতে পেতে গুগল করুন, সেখান থেকে মনোমত ব্যাসিক টেমপ্লেট ডাউনলোড করুন। টার্গেট করুন এক মাসে অন্তত ৫টি টেমপ্লেট রেডি করার।

মনে রাখবেন HTML ট্যাগ হাতে গোনা কয়েকটা, কিন্তু CSS সিনট্যাক্স প্রচুর। যে যত বেশি CSS এ পারদর্শী হবে সে তত ওয়েব ডিজাইনের দুনিয়াই রাজত্ব করবে। যতটা পারা যায় CSS নিয়ে ঘাটাঘাটি করুন, রিসোর্স দেখুন, নিজে ইমপ্লিমেন্ট করার চেষ্টা করুন। CSS এর মজার মজার ট্রিক্স শিখতে codepen.io/tag/css বা css-tricks.com এই সাইট অনুসরণ করুণ।

প্রায় ৯০ শতাংশ মানুষ মোবাইল দিয়ে ইন্টারনেট ব্যাবহার করেন, তাদের কথা মাথায় রেখে ওয়েবসাইটকে রিসপন্সিভ ডিজাইন করতে হয়, এই জন্য Bootstrap ফ্রেমওয়ার্ক শিখে রাখুন, বিশেষ করে গ্রিড সিস্টেম। এছাড়া এর বিভিন্ন কম্পোনেন্ট নিয়ে নাড়াচাড়া করুন। হাতেখড়ি নিতে ইউটিউবে https://cutt.ly/Bf8Y0jn এই প্লেলিস্ট অনুসরণ করতে পারেন। এছাড়া মজার মজার রেডি প্রযেক্ট বা কম্পোনেন্ট পেতে https://bootsnipp.com/ এই সাইট ভিজিট করুন।

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

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