ওয়েব ডিজাইন বনাম ফ্রন্ড এন্ড ডেভেলপমেন্ট(web design vs front end development Bangla blog)

আসসালামু আলাইকুম, ফ্রেন্ড’স আইটি পয়েন্ট (Blog Academy) এর পক্ষ থেকে আপনাকে স্বাগতম। আশাকরি আপনি ভালো আছেন। আজকের এই পোস্টের মাধ্যমে আমরা ওয়েব ডিজাইন বনাম ফ্রন্ড এন্ড ডেভেলপমেন্ট নিয়ে আলোচনা করবো। তো চলুন কথা না বাড়িয়ে শুরু করা যাক।

আলোচ্য বিষয়ঃ ওয়েব ডিজাইন বনাম ফ্রন্ড এন্ড ডেভেলপমেন্ট

“খুব সহজেই কোনো প্রকার পূর্ব অভিজ্ঞতা ছাড়াই  ৩০ দিনে ওয়েব ডিজাইন  শিখে আয় করুন হাজার হাজার ডলার – ইনকাম গ্যারান্টি অথবা ইনকাম পর্যন্ত সাপোর্ট”,

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

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

ওয়েব ডিজাইন শিখতে সহজ,সময় কম লাগে এবং টাকাও আয় করা যায় অনেকগুলা এর সব কথাই কি সত্যি?

যারা অলরেডি ওয়েব ডিজাইন এবং ডেভেলপমেন্ট সম্পর্কে ভালো জানেন তাদের জন্য নয়, যারা একেবারেই নতুন তাদের জন্য অথবা যারা ওয়েব ডিজাইন আর ফ্রন্ট এন্ড ডেভেলপমেন্ট এর মধ্যে পার্থক্য (web design vs front end development bangla writing) ভালোভাবে জানেন না বিশেষ করে  তাদের জন্য বাংলায় আজকের এই লেখাটি।

ওয়েবসাইট সম্পর্কে সামান্য আলোচনাঃ

যারা এতদূর পর্যন্ত এসেছেন তারা অবশ্যই ওয়েবসাইট(Website) সম্পর্কে ধারনা রাখেন, এরপর ও ওয়েবসাইট সম্পর্কে কিছু সামান্য আলোচনা করি। আমাদের সর্বপ্রথম বুঝতে হবে ওয়েব সাইট (web site), ওয়েবসাইট(website) বা শুধু সাইট(site) কি, আমরা ইন্টারনেট(internet) এর দুনিয়ায় গুগল এর নাম শুনি নাই এমন লোক খুজে পাওয়া মুশকিল।

গুগল একটি টেক(Tech Giant) কোম্পানি, google হলো এই কোম্পানির নাম কিন্তু, যখন আমরা কোনো কিছু অনলাইনে খোজ করতে যাই তখন সাধারনত কম্পিউটার অথবা মোবাইলের ব্রাউজারে গিয়ে গুগল ডট কম (www.google.com) লিখি, এরপর এখন ব্রাউজারে যা দেখাচ্ছে সেটা হচ্ছে ওয়েবসাইট। গুগল ডট কম (www.google.com) আমরা ওয়েব ব্রাউজারে দেখতে পাচ্ছি এখন এটি গুগল কোম্পানির ওয়েবসাইট, এবং গুগল ডট কম হলো ডোমেইন(domain) তেমনি করে আমরা যখন ফেসবুক ডট কম(www.facebook.com) আমাদের ব্রাউজারে ব্রাউজ করি তখন যা দেখতে পাই সেটাই হলো ফেসবুক ওয়েবসাইট। এবং ফেসবুক ডট কম হলো ডোমেইন(domain).
তাহলে গুগুল, ফেসবুক, আমাজন, আলি-এক্সপ্রেস ইত্যাদি একেকটি বড় বড় কোম্পানি এবং তাদের রয়েছে ওয়েবসাইট যেখানে আমরা অনলাইনেই তাদের সম্পর্কে জানতে পারছি।

ফ্রন্ট এন্ড ডেভেলপার(Front End Developer) কি এবং ওয়েব ডিজাইনার(Web Designer) এবং ফ্রন্ট এন্ড ডেভেলপার এর মধ্যে পার্থক্য কি (What is the difference between a web designer and a front-end developer)?

এই দুইটি জিনিস এর মধ্যে খুবই সামান্য পার্থক্য, কিন্তু কম্পিউটার ইন্ডাস্ট্রি তার কর্মীদের কাছ থেকে আরও বেশি বেশি দক্ষতার দাবি করে, তাই এই পার্থক্যটি কমে যাচ্ছে দিন দিন এবং সেই কারনেই ওয়েব ডিজাইন ও ফ্রন্ট এন্ড ডেভেলপমেন্ট যে একই, এই ব্যাপারে আপনার বিভ্রান্তিকর ধারনা(ভুল বুঝা) খুবই যুক্তিযুক্ত।

প্রথমেই জেনে আসি ওয়েব ডিজাইন(Web Design) সম্পর্কে।

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

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

ওয়েব ডিজাইনাররা ওয়েবপেজ ডিজাইন করতে যে সকল টুলস ব্যবহার করেঃ

ওয়েবপেজ ডিজাইন করা হয় বিভিন্ন ধরনের ইউ আই(UI)(User Interface) টুলস ব্যবহার করে, যেমনঃ Adobe Photoshop, Adobe XD, Figma ইত্যাদি বহুল ব্যবহৃত টুলসগুলো।
সুতরাং আপনি একটি দৃশ্যমান ওয়েবপেজ পাবেন কোড করার পূর্বেই।

ফ্রন্ড এন্ড ডেভেলপমেন্ট নিয়ে আলোচনাঃ

অপরদিকে যেখানে ওয়েবসাইট ডিজাইন এর কাজ শেষ হয় সেখান থেকে ফ্রন্ট এন্ড ডেভেলপমেন্ট শুরু হয়, ডিজাইনকৃত ফাইল নিয়ে আপনি কোড করা শুরু করবেন HTML, CSS, JS ব্যবহার করে, এবং আপনার কোডিং এর আউটপুট(Output) ডিজাইনটি হতে হবে ডিজাইনকৃত লে-আউট এর একেবারে একই রকম(Same)।
HTML, CSS, JS ব্যবহার করে আপনি যে ফাইলটি তৈরী করবেন সেটা রান করতে হবে ওয়েব ব্রাউজারে এবং যে ফলাফল দেখতে পাবেন সেটিই হবে আপনার ওয়েবসাইটের দৃশ্যমান অংশ যেটা ব্যবহারকারীর(USER) কাছে উপস্থাপন করবে লেখা, ছবি ও ওয়েবসাইটে ব্যবহৃত অন্যান্য তথ্যগুলো।

ফ্রন্ড এন্ড ডেভেলপমেন্টের পূর্বের ধাপঃ ওয়েব ডিজাইন

একটা বাস্তব উদাহরন দিলে ব্যাপারটা স্টেপ বাই স্টেপ আরো স্পষ্ট হয়ে যাবে,ধরুন একজন কাপড় বিক্রেতা তার কাপড় অফলাইনের পাশাপাশি অনলাইনেও বিক্রি করতে চায় সে জন্য তিনি আপনাকে বললেন যে আমার একটি ওয়েবসাইট লাগবে। তিনি আপনাকে বলে দিলো যে আমার ওয়েবসাইটে আমার দোকানের পিকচার থাকবে, আমার কাপড়ের পিকচার থাকবে, আমার সম্পর্কে লেখা থাকবে, আমাদের মিশন, ভিশন, আমাদের কন্টাক্ট ডিটেইলস(Contact Details), আমাদের শপের ভিডিও ইত্যাদি থাকবে। এক্ষেত্রে আপনি একজন ওয়েব ডিজাইনার হিসেবে কাজ করবেন, তাহলে সে জন্য আপনি প্রথমে জেনে নিলেন কিসের ওয়েবসাইট বানাতে চান। এর পর তার তথ্যের ভিত্তিতে আপনাকে আইডিয়া জেনারেট(generate) করতে হবে যে কি কি উপায়ে, কিভাবে, ওয়েবসাইট এর কোন পজিশনে আপনি তার কন্টেন্ট গুলো দেখাতে চান, এবং কিভাবে দেখালে সুন্দর ও ইউজার ফ্রেন্ডলি(User Friendsly) হবে এই চিন্তা। এর পর আপনি খাতা কলমে একে নিলেন ওয়েবসাইট এর লেআউট। অতঃপর সেই ব্যবসায়ীকে দেখালেন যে আপনার ওয়েবসাইট হবে এই রকম, তার যদি লে-আউট পছন্দ হয়ে যায় তাহলে ঠিক আছে, আর যদি বলে যে না এই রকম নয় অথবা কোন সাজেশন দেয় তাহলে সেই অনুযায়ী লে-আউট রেডি করতে হবে। এর পর আপনি কম্পিউটারের ইউ আই(UI) টুলস Adobe Photoshop, Adobe XD, Figma অথবা অন্য যেটার ব্যবহার জানেন, সেটা ব্যবহার করেই আপনি ডিজাইন করলেন আপনার হাতে কলমে আকা লে-আউট টি, অথবা আপনি সরাসরি কম্পিউটার এ কাজ করে দেখালেন।
এক্ষেত্রে ওয়েব পেজ এর ডিজাইন টিকে আকর্ষনীয় করতে নজর দিতে হয় টাইপোগ্রাফি, কালার, স্পেসিং ইত্যাদি বিষয়গুলো। সময় নিয়ে ওয়েব পেজগুলো ডিজাইন করলেন, এইতো আপনার ওয়েবসাইট ডিজাইন হয়ে গেলো, আপনি একটা দৃশ্যমান ওয়েবসাইট লে-আউট পেলেন।

ওয়েব ডিজাইনের পরের ধাপঃ ফ্রন্ড এন্ড ডেভেলপমেন্ট

এর পরের ধাপ ফ্রন্ট এন্ড ডেভেলপমেন্ট(Front End Development) বা কোডিং(Coding) স্টেপ, এই পর্যায়ে আপনাকে ওয়েব পেজটিকে ব্রাউজার এর বোধগম্য ভাষায় (HTML,CSS,JS) কোডিং ব্যবহার করে আপনার তৈরীকৃত ডিজাইন লে-আউট এর মত করতে হবে।

আশা করি অল্প কথায় ওয়েব ডিজাইন সম্পর্কে ভ্রান্ত ধারনা দূর হয়েছে, এবং ওয়েব ডিজাইন ও ফ্রন্ড এন্ড ডেভেলপমেন্ট এর পার্থক্য স্পষ্ট হয়েছে। যারা শুধু HTML,CSS,JS নিয়ে কাজ করছেন তারা নিজেকে ফ্রন্ড এন্ড ডেভেলপার ও বলতে পারেন।

কিন্তু বর্তমান সময়ের ট্রেন্ড এবং কম্পিউটার ইন্ডাস্ট্রির চাহিদা অনুযায়ী ওয়েব ডিজাইনার দের ফ্রন্ট এন্ড ডেভেলপমেন্ট ও শিখে রাখা টা ভালো হবে।

ওয়েব ডিজাইন বা ফ্রন্ট এন্ড ডেভেলপমেন্ট শিখতে কেমন সময় লাগে(How it takes time to learn the front end development of web design)?

শিখতে সময় তুলনামুলক কম লাগে কথা সত্যি, কিন্তু ভালোভাবে শিখতে গেলে ভালো সময় দিতে হয়, এবং আয়ত্বে নিয়ে আসতে একটা ভালো সময় দিতে হয়। এটা নির্ভর করে ব্যাক্তি বিশেষ এর উপর। কারো ৪-৬ মাস এর মধ্যে একটা ভালো ধারনা তৈরী হয়, আবার কারো ক্ষেত্রে আরো বেশি সময় লাগে ১ – ১.৫ বছর বা ঠিকমতো নিয়মিত কাজ না করলে আরো বেশি লাগবে, এটা সম্পূর্ন নির্ভর করবে আপনার শেখার ক্যাপাসিটির উপর, আপনি যদি কুইক এবং স্মার্ট লার্নার হন তাহলে ভালোভাবে পূর্নাজ্ঞ(দৈনিক ৮-১০ ঘন্টা) সময় দিয়ে কাজ করলে ৬-৮ মাসই ওয়েব ডিজাইন অথবা ফ্রন্ট এন্ড ডেভেলপমেন্ট এর যেকোনো একটার সবকিছু বুঝে এপ্লাই করার জন্য যথেষ্ট। এই সময়ে আপনাকে সুন্দর কিছু পোর্টফোলিও তৈরী করতে হবে যাতে আপনি চাকরি অথবা ক্লাইন্ট এর কাজ করতে গেলে আপনার কাজের পূর্ব অভিজ্ঞতা অথবা কাজের স্যাম্পল হিসেবে আপনার পোর্টফোলিও দেখাতে পারেন।
এর পরে আপনি লাইভ প্রজেক্ট অথবা ক্লাইন্ট এর প্রজেক্টে কাজ করে অথবা চাকরির জন্য ও এপ্লাই করতে পারেন।

ওয়েব ডিজাইন অথবা ফ্রন্ট এন্ড ডেভেলপমেন্ট সেক্টরে ইনকাম কেমন(What is the salary a front end developer)?

ইনকামের কথা বলতেই হয়, আপনি একটা স্মার্ট ইনকাম জেনারেট করতে পারেন, যদি দক্ষ হয়ে থাকেন, দক্ষতা এবং অভিজ্ঞতার উপর নির্ভর করবে আপনার স্যালারি।
পেস্কেল(payscale) এর তথ্য অনুযায়ী আন্তর্জাতিক বাজারে দক্ষ ফ্রন্ট এন্ড ওয়েব ডেভেলপারদের এভারেজ(Average) স্যালারী(Sallary) প্রতি বছর $৭৬,৯২৯(ডলার), যা টাকায় হিসাব করলে ৬০ লক্ষ প্লাস।
বাংলাদেশি স্যালারী হিসাব করলেও প্রাইমারি লেভেল এর একজন ফ্রন্ট এন্ড ডেভেলপার এর সর্বনিম্ন স্যালারী প্রতি মাসে ২০ হাজার টাকা, কিন্তু আমাদের দেশের চাকুরীর বাজারে এমন অবস্থা যে হাজার হাজার কম্পিটিটর এর মধ্যে ২০ হাজার টাকা দিয়ে সাধারনত নতুন প্রতিষ্ঠিত কোম্পানিগুলো এত স্যালারী দেয় না। তবে ভালো নামকরা কোম্পানিগুলো অনেক ভালো স্যালারী দেয়। একজন ফ্রন্ট এন্ড ডেভেলপার এর মাসিক স্যালারী রেঞ্জ ২০ হাজার থেকে শুরু করে ১০ লাখ বা তার ও বেশি।

ওয়েব ডিজাইন এর ক্ষেত্রেও প্রায় কাছাকাছি ব্যাপারটা, পেস্কেল(payscale) এর তথ্য অনুযায়ী আন্তর্জাতিক বাজারে দক্ষ ওয়েব ডিজাইনারদের এভারেজ(Average) স্যালারী প্রতি বছর $৫০,৫২৪(ডলার), যা টাকায় হিসাব করলে ৪০ লক্ষ প্লাস।

দক্ষ ওয়েব ডিজাইনার হতে কি কি শিখতে হবে(What do you need to learn to be a skilled web designer)?

একজন ওয়েব ডিজাইনার এর যেসব সফটওয়্যার উপর আধিপত্য বিস্তার করতে হবে তার মধ্যে বহুল ব্যবহৃত হলঃ

• Adobe Photoshop/XD or Figma
• Adobe Illustrator
• Adobe InDesign

এছাড়াও ব্যাক্তিগত যেসব গুনাবলি থাকা একজন সফল ওয়েব ডিজাইনার(Web Designer) এর জন্য জরুরীঃ

• সৃজনশীলতা
• কমিউনিকেশন দক্ষতা
• দলীয় ও এককভাবে কাজ করার মানসিকতা ও ক্ষমতা
• সময় ম্যানেজমেন্ট
• আইটি তে দক্ষতা
• বিশ্লেষণ এ দক্ষতা

বুঝতে অসুবিধা অথবা আরো ভালোভাবে বিস্তারিত জানতে গুগল সার্চ করে দেখতে পারেন।

দক্ষ ফ্রন্ট এন্ড ডেভেলপার(Front End Developer) হতে কি কি শিখতে হবে?

কন্টেন্ট প্লেস করার জন্য HTML,
ডিজাইন স্ট্রাকচারড তৈরী, এবং ডিজাইনার এর করা ডিজাইন হুবহু করার জন্য CSS এর দক্ষতা,
ক্লাইন্ট সাইড ইন্টারেকশন এর জন্য JS

এছাড়াও বিভিন্ন রেস্পন্সিভ ফ্রেমওয়ার্ক এর মধ্যে বেশি পরিচিত বুটস্ট্রাপ অথবা এইরকম কিছু একটা শিখে নিতে হবে।
জাভাস্ক্রিপ্ট(JS) এর যেকোনো একটা লাইব্রেরী খুব ভালো ভাবে শিখতে হবে হাই ডিমান্ড এর জন্য। এর মধ্যে রয়েছে, যেমন রিয়াক্ট জে এস(React Js), এংগুলার জেএস(Angular Js), (ভিউ জে এস)Vue.js

তবে এই পোষ্ট এর মধ্যে আর বিস্তারিত লিখলাম না, অন্য একটা লেখায় লিখব ফ্রন্ট এন্ড ডেভেলপার হতে কি কি শিখতে হবে, কিভাবে শিখতে হবে, কোথা থেকে শিখতে হবে ইত্যাদি বিস্তারিত।

ওয়েব ডিজাইন বনাম ফ্রন্ড এন্ড ডেভেলপমেন্ট নিয়ে কোনো প্রশ্ন বা পরামর্শ থাকলে, আমাদেরকে নিচে কমেন্টের মাধ্যমে জানাতে ভুলবেন না।