ডিজাইন স্কিল ছাড়াই ওয়েবসাইট লেআউট ও ডিজাইন করা (বिना কোনো ডিজাইন স্কিল!)

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

ওয়েব ডিজাইন স্কিল ছাড়া ওয়েবসাইট কীভাবে বানাবেন?

এখানে কিছু অপশন আছে:

• আপনি একটি ওয়েব ডিজাইনার হায়ার করতে পারেন ডিজাইন তৈরি করার জন্য—কিন্তু (ভালো) ডিজাইনাররা সস্তা নয়।
• আপনি Fiverr বা Upwork-এ সস্তা ডিজাইনার খুঁজে পেতে পারেন—কিন্তু আপনি জানেন এটি রিস্কি হতে পারে।
• অথবা আপনি একটি ফ্রি বা প্রিমিয়াম থিম বা টেমপ্লেট ডাউনলোড করতে পারেন—কিন্তু কখনও কখনও সেগুলো আপনার চাওয়া সব কিছু করে না।

আপনার জন্য আরেকটি অপশন হলো ওয়েবসাইট লেআউট ও ডিজাইন করার কিছু বেসিক স্কিল শিখে, এবং নিজের ফ্রন্ট এন্ড বিল্ড আপ করা।

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

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

এই পদ্ধতিতে রয়েছে:

• ওয়েবসাইট ভিজুয়ালি কীভাবে তৈরি হয় তার বেসিকস শিখা,
• এবং এক্সিস্টিং ওয়েব ডিজাইন রিসার্চ করে নিজের জন্য অনুপ্রেরণা ও আইডিয়া পেতে।

আসলে এটি वही স্ট্র্যাটেজি যা আমি Coder Coder ওয়েবসাইট বানাতে ব্যবহার করেছিলাম! মाना, এটি একটি খুব সিম্পল ডিজাইন, কিছু এক্সট্রা ফ্যান্সি নয়। কিন্তু কখনও কখনও সিম্পলই আপনার প্রয়োজন।

একবার আপনি ওয়েবের জন্য লেআউট ও ডিজাইন করার বেসিকস জানলে, আপনি কাস্টম ওয়েবসাইট বানাতে পারবেন যা আপনি আপনার পোর্টফোলিও এবং ফ্রিল্যান্স ক্লায়েন্টের জন্য ব্যবহার করতে পারবেন।

এবং, অবশ্যই, আপনি যা যা ওয়েবসাইট বানাবেন সেটি আপনাকে অভিজ্ঞতা দেবে। সময়ের সাথে সাথে, আপনি আরও জটিল ডিজাইন তৈরি করতে পারবেন আপনার শিল্প অনুশীলন চালিয়ে যেতে।

এই প্রক্রিয়ার প্রধান ধাপগুলো:

• আপনার ওয়েবসাইটের বেসিক্স ডিসাইড করুন
• আপনার ওয়েবসাইটের লেআউট প্ল্যান করুন
• ডিজাইন একসাথে রাখুন
• ফাইনাল প্রোডাক্ট বিল্ড আউট করুন

প্রতিটি ধাপ রিসার্চ দ্বারা চালিত হবে—অন্য ওয়েবসাইটগুলো দেখে সেগুলো কী করে, এবং আপনার ওয়েবসাইটের জন্য যেসব অংশ আপনি রি-ইউজ করতে চান সেগুলো বের করা।

একটি গুরুত্বপূর্ণ নোট: আমি কখনো আপনাকে আপনার নয় এমন CSS বা ইমেজ চুরি করার পক্ষে নই। (একটা কারণ, কপি-পেস্ট কাজে আপনি কিছু শিখবেন না।) এখানে ধারণা হলো ক্রিয়েটিভ আইডিয়া ও কনসেপ্ট পেতে, এবং সেগুলো ব্যবহার করে কিছু সিমিলার তৈরি করতে।

১. আপনার ওয়েবসাইটের বেসিক্স ডিসাইড করুন

কালার বা ফন্ট পিক করার আগে, এই ওয়েবসাইট সম্পর্কে কিছু জেনারেল প্রশ্নের উত্তর দিই:

১. কী ধরনের ব্যবসা ওয়েবসাইটটি প্রোমোট করবে?

একটি পিজা প্লেস, ফটোগ্রাফারের স্টুডিও, বা বুকস্টোর? যেকোনো ধরনের ব্যবসা ওয়েবসাইট থেকে সুবিধা পেতে পারে, তাই আপনি যেকোনো কিছু বেছে নিতে পারেন।

আমাদের উদ্দেশ্যের জন্য, আমরা একটি কাল্পনিক কফি শপ বেছে নিবCentral Coffee। কারণ সবাই কফি পছন্দ করে, ঠিক না?

২. ওয়েবসাইটে কী কী পেজ থাকবে?

সাধারণ পেজগুলো হয়—হোমপেজ, এবাউট পেজ, কন্ট্যাক্ট পেজ, এবং ব্যবসার ধরন অনুযায়ী স্পেসিফিক পেজ।

পেজ এবং ওয়েবসাইটের অন্যান্য জেনারেল স্ট্রাকচারাল দিকগুলো বুঝতে সেরা উপায় হলো কিছু কুইক অনলাইন রিসার্চ করা।

২. এক্সিস্টিং ওয়েবসাইট রিসার্চ করুন

সमान ধরনের ব্যবসার অন্যান্য এক্সিস্টিং ওয়েবসাইট চেক আউট করুন। ৩-৪টি এইরকম ওয়েবসাইট দেখুন এবং সেগুলোর কী কী পেজ আছে সেটি দেখুন।

কোশিশ করুন ওয়েবসাইট কীভাবে ডিজাইন করা হয়েছে সেটি লক্ষ্য করতে এবং নোট করুন:

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

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

এখানে একটি কফি শপ উদাহরণ একটি থিম থেকে যা আমি খুঁজে পেলাম।

The7

পেজ:
সেকশন সহ এক পেজ ওয়েবসাইট: হোম, এবাউট, লোকেশন, অফার, মেনু, নিউজ, প্রেস, ব্লগ পোস্টস

স্টাইল:
মডার্ন এবং ক্লিন, ভালো ফটোগ্রাফস সহ

নেভিগেশন:
সহজে নেভিগেট করা যায়

এবং এখানে কিছু ওয়েবসাইট যা আমি "শিকাগোতে কফি শপ" সার্চ করে খুঁজে পেলাম:

The Wormhole Coffee

পেজ:
হোমপেজ, ব্লগ, লোকেশন/কন্ট্যাক্ট, জব অপারচিউনিটি

স্টাইল:
একটু মডার্ন; শপের ফটোগ্রাফগুলো আর নостালজিক

নেভিগেশন:
তৎক্ষণিক বোঝা যায় না যে এটি একটি কফি শপ। সাইট নেভিগেট করা একটু কঠিন।

Caffe Streets

পেজ:
এক পেজ ওয়েবসাইট, সেকশনগুলো হলো: হোম, Caffe (এবাউট), মেনু, রোস্টিং, টাইম মেশিন (জুস), কন্ট্যাক্ট ফর্ম

স্টাইল:
সিম্পল এবং মডার্ন (Squarespace)

নেভিগেশন:
খুব সহজে নেভিগেট করা যায়; উপরে স্টিকি মেনু বারটি আমার পছন্দ যা স্ক্রলে সেকশনে নিয়ে যায়।

Build Coffee

পেজ:
এক পেজ ওয়েবসাইট, সেকশনগুলো হলো: হোমপেজ, এবাউট, আওয়ার্স, লোকেশন, শপ, ক্যাটারিং, ইভেন্টস, কন্ট্যাক্ট

স্টাইল:
সিম্পল, ডিজাইন হলো ফুল-উইডথ ফটোগ্রাফের কম্বিনেশন সেকশনগুলোর মাঝপথে সাদা ব্যাকগ্রাউন্ড ও টেক্সটের সাথে।

নেভিগেশন:
খুব সহজে নেভিগেট করা যায়

Sawada Coffee

পেজ:
হোমপেজ, এবাউট, ফুড & ড্রিংক, প্রেস, কন্ট্যাক্ট & আওয়ার্স, আवर রেস্টুরেন্টস, জবস

স্টাইল:
ডিজাইন মূলত ফটোগ্রাফি সম্পর্কে, এবং টেক্সট মনে হয় প্রায় আফটারথট

নেভিগেশন:
একটু কঠিন নেভিগেট করা—ডান কোণে হ্যামবার্গার মেনু আসলেই দেখা যাচ্ছিল না।

৩. আপনার নিজস্ব ওয়েবসাইটের জন্য নোট লিখুন

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

আপনার রিসার্চের ভিত্তিতে, আপনি এখন আপনার নিজস্ব সাইটের জন্য নোট লিখতে শুরু করতে পারেন।

Central Coffee-এর জন্য, আমি মনে করি আমরা একটি সিম্পল এক পেজ ওয়েবসাইট ব্যবহার করব, নিচের সেকশনগুলো সহ:

• হেডার
• হোম
• এবাউট
• মেনু
• লোকেশন/কন্ট্যাক্ট
• ফুটার

৪. আপনার ওয়েবসাইটের লেআউট প্ল্যান করুন

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

ওয়ারফ্রেমে, আমরা একদম ডিজাইন করছি না, অর্থাৎ ফন্ট, কালার, বা ফটো নয়। আমরা শুধু বুঝছি আমরা কী কন্টেন্ট চাই, এবং রफ़লি সেটি পেজে কোথায় থাকবে। এটি এই পয়েন্টে একটি ব্লুপ্রিন্ট বা ডায়াগ্রামের মতো।

হেডার

মुझे Seven Coffee ডেমো পেজ এবং Caffe Streets ওয়েবসাইটের টপ নেভিগেশন বার পছন্দ।

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

এটা ডেস্কটপ ভার্সনের জন্য। ট্যাবলেট এবং মোবাইলের জন্য, আমরা শুধু হেডারে লোগো এবং হ্যামবার্গার মেনু রাখব ডিফল্টরূপে।

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

হোম

যেহেতু এটি এক পেজ সাইট, "হোমপেজ" হবে যা আপনি ওয়েবসাইট লোড করলে początকে স্ক্রিনে দেখবেন। এবং আমি পছন্দ করি Seven Coffee-র নেমের নিচে ছোট একটি ট্যাগলাইন।

মনে করি এখানে আমি ব্যাকগ্রাউন্ডে একটি ইমেজ রাখব (Build Coffee-এর মতো)その上ে টেক্সটের সাথে। এটি ডেস্কটপ এবং মোবাইল উভয়েই একই থাকবে।

এবাউট

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

মেনু

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

• Seven Coffee-তে মেনু আইটেমের একটি গ্রিড আছে প্রাইসসহ,
• Caffe Streets-এ শুধু আইটেমের একটি লিস্ট,
• এবং Build এবং Sawada মেনুর PDF-এ লিংক দিয়েছে।

ব্যক্তিগতভাবে আমি ঘৃণা করি যখন ফোने ওয়েবসাইট ব্রাউজ করি এবং PDF ডাউনলোড করতে হয়। তাই আমি একটি সিম্পলিফাইড মেনু ব্যবহার করব ড্রিংক ও ফুড আইটেমসহ, এবং কয়েকটি ফটো সহ।

লোকেশন/কন্ট্যাক্ট

আমি লোকেশন, আওয়ার্স, এবং কন্ট্যাক্ট ইনফরমেশন ওয়েবসাইটের নিচে রাখতে চাই। আমার অনুমান ইউজাররা সাইটের উপরে থেকে শুরু করবে এবং নিচে স্ক্রল করে যাবে।

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

ফুটার

ফুটার খুব মিনিমাল হবে। এটা শুধু কপ이라াইট ইনফরমেশনের সাথে একটি ছোট বার।

৫. আপনার কমপ্লিট ওয়ারফ্রেম বানান

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

এটা ব্যবহার করা সহজ, এবং আমি স্কেচি স্টাইল অপশন পছন্দ করি কারণ এটা মজার 🙂

(থাম্বনেইল ক্লিক করলে নতুন ট্যাবে ফুল ইমেজ দেখতে পাবেন)

৬. বেসিক ডিজাইন স্পেসিফিকেশন ডিসাইড করুন

আবারো, আমরা সুপার ডিটেইল্ড এবং ফ্যান্সি স্টাইল বানাব না। কিন্তু আমাদের কিছু বেসিক বের করতে হবে... যেসব জিনিস:

কালার স্কিম

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

আপনি যদি কালার ইনস্পিরেশন দরকার হয়, Canva-তে কিছু স্যাম্পল কালার প্যালেট আছে যা আপনি ট্রাই করতে পারেন।

Central Coffee ওয়েবসাইটের জন্য, আমি সেই Canva লিংক থেকে Fall Collection ব্যবহার করব—এটা ব্রাউন 베이স্ট একটি ওয়ার্ম কালার প্যালেট।

আমি কফি শপের সাথে জড়িত নোস্টালজিক, কোজি ফিলিং টানাতে চাই।

ফন্ট

ওয়েবসাইটগুলোতে ফিরে যাওয়ায় দেখা যায়, প্রায় সবই স্যানস-সেরিফ ফন্ট ব্যবহার করে (অর্থাৎ অক্ষর যেগুলোর "সেরিফ" বা টাইপরাইটার টেক্সটের মতো এন্ড বาร์স নেই)। আমি আপনার অধিকাংশ টেক্সটের জন্য একটি সিম্পল ফন্ট পিক করব, এবং তারপর টাইটেল ও হেডলাইনের জন্য কিছুটা বেশি ফ্যান্সি একটি হевиর ওয়েট ফন্ট ব্যবহার করব।

Google Fonts আপনার ওয়েবসাইটে ফ্রি লোড করার জন্য ফন্ট খুঁজে বের করার একটি চমৎকার জায়গা। শুধু খুব বেশি নেবেন না, কারণ প্রতিটি ফন্ট ফ্যামিলি, ওয়েট, এবং স্টাইল সাইটে অতিরিক্ত লোড যোগ করবে।

ইমেজ/ফটোগ্রাফি

যে جنেরেল স্টাইল বা মড ব্যবসার ধরনের সাথে ফিট করে সেটি পিক করুন। কফি শপের জন্য, আপনি সাধারণত আমন্ত্রণমূলক ছবি চাইবেন নরম আলো, কোজি বা নোস্টালজিক ফিল ইন্টেরিয়র শটের জন্য, লোকজন কফি শপে গপশপ ও রিল্যাক্স করছে, এবং ফুড ও ড্রিংকের ইমেজ।

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

• Canva
• Vectr
• Snappa

৭. ওয়েবসাইট বিল্ড আউট করুন!

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

যেহেতু আমাদের কাছে ডিজাইনার নেই ডিটেইল্ড PSD তৈরি করার জন্য, আমরা শুধু এগিয়ে যাব এবং ওয়ারফ্রেম থেকে ওয়েবসাইট বানানো শুরু করব।

এখানে আমি সাধারণত কীভাবে একটি ওয়েবসাইটের ফ্রন্ট এন্ড বিল্ড করি সেটি:

1. ওয়েবসাইট ফাইল সেট আপ করুন
2. ফোল্ডার ও ফাইল তৈরি ও স্ট্রাকচার করুন
3. টাস্ক রানার চালু করুন। (এই প্রজেক্টের জন্য আমি Gulp ব্যবহার করছি।)
4. প্রতিটি টেমপ্লেটের জন্য আলাদা HTML ফাইল তৈরি করুন।

তারপর প্রতিটি HTML টেমপ্লেটের জন্য এই ধাপগুলো ফলো করুন:

1. বেসিক HTML এলিমেন্ট দিয়ে স্কেলেটন স্ট্রাকচার তৈরি করুন।
2. পেজ এলিমেন্টগুলো একে একে বিল্ড আউট করুন।
3. প্রতিটি এলিমেন্টের জন্য, CSS স্টাইল যোগ করুন, প্রথমে নিশ্চিত করুন যে প্রতিটি সেকশন সঠিকভাবে লেড আউট হয়েছে।
4. ব্রাউজারে পেজ কেমন দেখছে সেটি চেক করুন কাজ করার সাথে সাথে, কন্টিনিউ করেকশন করুন।

নিশ্চিত করুন আপনার ওয়েবসাইট রেসপন্সিভ

সাইট বানাতে время, সাধারণত একটি ভালো আইডিয়া হলো চেক করা যে আপনার স্টাইল ডেস্কটপ, ট্যাবলেট, এবং মোবাইলে seamless দেখাচ্ছে।

আপনি সহজে ডেস্কটপ স্টাইল আপনার কম্পিউটারে চেক করতে পারেন, বিভিন্ন ব্রাউজারের সাথে। মোবাইলের জন্য, আপনি Chrome-এর ডেভেলপার টুলস ব্যবহার করতে পারেন, যা বিভিন্ন মোবাইল ডিভাইসে ওয়েবসাইট ইমুলেট করে।

মনে রাখবেন যে যেকোনো ইমুলেশন টুল ১০০% এক্সাক্টলি হবে না যেমন আসল ফোন বা ট্যাবলেট দেখাবে। তাই আপনার স্টাইল টেস্ট করার সময়, আপনি অবশেষে আসল ফোনে চেক করবেন যখন ওয়েবসাইট ইন্টারনেটে হবে।

এখানে কিছু ডিভাইস ইমুলেটর যা আপনি ওয়েবসাইট ডিসপ্লে টেস্ট করতে ব্যবহার করতে পারেন:

• Responsinator.com (ফ্রি)
• Screenfly by Quirktools (ফ্রি)
• Browserstack (পেইড) — Browserstack আসল ডিভাইসে ভার্চুয়াল মেশিন টেস্ট করতে দেয়।

ফাইনাল প্রোডাক্ট!

এখানে ফাইনিশড Central Coffee ওয়েবসাইটের একটি স্ক্রিনশট:

আপনি নিজে রিয়েল সাইটটি আমার Github.io পেজে চেক আউট করতে পারেন।

এবং এটাই أنني ডিজাইনার হায়ার না করে একটি ওয়েবসাইট ডিজাইন ও বিল্ড করার পদ্ধতি।

আশা করি এই পোস্টটি আপনার কাজে আসবে! কমেন্টে আপনার যেকোনো মতামত জানান।

একটি পোস্ট মিস করতে চান না? আপনি যদি এখনো সাবস্ক্রাইব না করে থাকেন, এখানে ক্লিক করুন এবং ব্লগে নতুন পোস্ট হলে আপনাকে নোটিফিকেশন পাবেন।