If you're seeing this message, it means we're having trouble loading external resources on our website.

তোমার যদি কোন ওয়েব ফিল্টার দেওয়া থাকে, তাহলে দয়া করে নিশ্চিত কর যে *.kastatic.org এবং *.kasandbox.org ডোমেইনগুলো উন্মুক্ত।

মূল বিষয়বস্তু

কোর্স: কম্পিউটার প্রোগ্রামিং > অধ্যায় 2

পাঠ 6: সিএসএসের নকশা বা লেয়াউট (layout) তৈরি করা

তোমার ওয়েবপেজ পরিকল্পনা করা

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

চিন্তাভাবনা

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

কাগজে নমুনা তৈরি

এরপর একটি ভালো ধাপ হতে পারে তোমার ওয়েবসাইটের একটি প্রোটোটাইপ তৈরি করা—কিন্তু এই প্রোটোটাইপটি কাগজে তৈরি হবে। এটা তোমার ওয়েবসাইটের উপাদানগুলোর জন্য একটি নকশার মত, যেখানে বিষয়বস্তু ও উপাদানগুলোর জন্য তোমার পছন্দমত লেখা ও বক্স তুমি ব্যবহার করতে পার।
নিচে SF quiche প্রোটোটাইপের জন্য একটি কাগজের নমুনা দেওয়া আছে, এটা হল একটি ওয়েব অ্যাপ্লিকেশন যে অ্যাপ্লিকেশনটি ব্যবহার করে তুমি সহজেই quiche(এক ধরনের খাবার)- খুঁজে পেতে পার।
ছবি: SF quiche অ্যাপ্লিকেশনের কাগজে নমুনা
যেহেতু কাগজে প্রোটোটাইপ তৈরি করার জন্য খুব বেশি সময় লাগে না, এই কাজটি তুমি বার বার করতে পার এবং একাধিক পরিকল্পনা তৈরি করতে পার। তুমি চাইলে একই সাথে একাধিক প্রোটোটাইপও তৈরি করতে পার এবং একটি ওয়েবসাইটের একাধিক পেজের জন্যও প্রোটোটাইপ তৈরি করতে পার।
যখন তোমার একটি প্রোটোটাইপ তৈরি করা হয়ে যাবে, তুমি হয়তো কয়েকজন ব্যবহারকারীকে দিয়ে তোমার তৈরি করা প্রোটোটাইপটি যাচাই করতে চাইবে। প্রোটোটাইপটি তোমার বন্ধুকে দেখাও, তারপরে তাদের জিজ্ঞেস কর কোথায় তারা প্রথমে ক্লিক করত বা কোন জিনিসটি তাদের সবচেয়ে বেশি নজরে পড়ে। তারপরে দেখো তাদের আর কোন মতামত আছে কিনা।

ওয়্যারফ্রেম

যখন তোমার কাগজে আঁকানো প্রোটোটাইপটি বেশ ভালো হয়েছে বলে তোমার মনে হবে, তুমি সেটাকে ওয়্যারফ্রেম আকারে তৈরি করতে পার। একটি ওয়্যারফ্রেম হল এক ধরনের প্রোটোটাইপ, কিন্তু এটা ডিজিটাল পদ্ধতিতে আঁকা এবং আরও বেশি নিখুঁত। একটি ওয়্যারফ্রেমে কিছু বক্স থাকে যেগুলো পেজের বিভিন্ন অংশকে বোঝায়, আর সাথে প্রয়োজনমত লেখা ও চিহ্ন দেওয়া হয়। উদাহরণস্বরূপ, এখানে SF quiche অ্যাপ্লিকেশনের একটি ওয়্যারফ্রেম দেওয়া আছে:
SF quiche অ্যাপ্লিকেশনের ওয়্যারফ্রেমের স্ক্রিনশট
This wireframe was created in a popular online prototyping tool called Balsamiq. You can also make wireframes using the shape tools in office tool—like Powerpoint/Keynote—or by using design apps like Photoshop, Gimp, or InDesign. You can also search for more prototyping tools online. Keep in mind that many wireframing apps cost money when you're deciding which to use.
Once you've made your wireframes, you might want to do another round of user testing. Some wireframing tools let you share your wireframes for others to comment on. There are also tools like InvisionApp that let you create interactive wireframes, where clickable areas lead to new screens.

আলোচনায় অংশ নিতে চাও?

কোন আলাপচারিতা নেই।
ইংরেজি জানো? খান একাডেমির ইংরেজি সাইটে আরো আলোচনা দেখতে এখানে ক্লিক কর।