() translation by (you can also view the original English article)
যে কোন স্ক্রিন ডিজাইন প্রক্রিয়ার ক্ষেত্রে ওয়্যারফ্রেমিং হচ্ছে একটি গুরুত্বপূর্ণ ধাপ। এটা মুলতঃ আপনার ডিজাইনের তথ্য ক্রমান্বয়ে সংজ্ঞায়িত করতে সাহায্য করে, যাতে আপনার ব্যবহারকারীরা কিভাবে তথ্য প্রক্রিয়া করবে, তার উপর ভিত্তি করে আপনি লেআউটের পরিকল্পনা তৈরি করতে পারেন। আপনি যদি কখনোও ডিজাইনের জন্য ওয়্যারফ্রেমিং ব্যবহার করে থাকেন, তবে এবার নিজের করার পালা...
ওয়্যারফ্রেমিং দেখতে অনেকটা স্থপতির নকশার মত; বাড়ি কিভাবে বানাতে হবে তা বুঝতে হলে আগে সাদা-কালোয় তৈরি ডায়াগ্রাম নকশাটি আপনাকে অবশ্যই দেখতে হবে। ঠিক একইভাবে, স্ক্রিন-ডিজাইনের ক্ষেত্রেও আপনি ফটোশপে পিক্সেল লেয়ার তৈরি করতে অথবা কোড ব্লক লিখার আগে সেগুলো কোনটি কোন জায়গায় বসবে তা না জানলে কাজই শুরু করতে পারবেন না।
ওয়্যারফ্রেমের উন্নত স্তরে, ব্যবহারকারী কিভাবে একটি ইন্টারফেস ব্যবহার করবে, তাও নির্ধারণ করার সুবিধা থাকে। উদাহরনস্বরূপ, ওয়্যারফ্রেমে বিভিন্ন ধরণের বোতাম ও মেনুর বিন্যাস থাকতে পারে।
ডিজাইনের জন্য ওয়্যারফ্রেম তৈরি করা গুরুত্বপূর্ণ, কারণ এটা একজন ডিজাইনারকে লেআউট এবং একটি ইন্টারফেসের মধ্যকার মিথস্ক্রিয়া তৈরী করতে সাহায্য করে। সাদা, কালো হওয়ায় রঙ, টাইপফেসের প্রকারভেদ বা নকলের কারণে সৃষ্ট বিভ্রান্তি ব্যবহারকারী খুব সহজেই এড়াতে পারে। এটা দিয়ে আমি সাধারনত আমার ক্লায়েন্টদের কাছে ব্যাখ্যা করতে চাই যে, যদি একজন ব্যবহারকারী সাদাকালো ওয়্যারফ্রেম ব্যবহার করতে না পারে, তাহলে আপনি যে রঙই ব্যবহার করেন না কেন, ফলাফল একইরকম হবে। একটি বোতাম উজ্জ্বল বা চকচকে না থাকলেও এটাকে অবশ্যই স্পষ্ট হতে হবে।
এটা অনেকটা বিল্ডিংয়ের ভিতের মত, দামি রঙ দিয়ে বাহিরটাকে আবৃত করার আগে, অবশ্যই ভিত্তিটা মজবুত ও শক্তিশালী হতে হবে।
ধাপ ১: অনুপ্রেরণা পেতে
যেহেতু একটি ছবি হাজার শব্দের চেয়েও শক্তিশালী, তাই আরও বিস্তারিত জানার আগে, I ♥ wirefames সাইটটি দেখুন। এটা দেখে আপনি অন্যান্য ডিজাইনাররা কিভাবে ওয়্যারফ্রেমিং করেন সে সম্পর্কে মোটামুটি ও চাক্ষুষ ধারনা পাবেন।
সম্ভবতঃ আপনার Wirify নামে এই পরিচ্ছন্ন ব্রাউজার বুকমার্কলেটটিও পছন্দ হবে, যেটা দিয়ে যেকোনো লাইভ সাইটের ওয়্যারফ্রেম ভার্শন দেখতে পাবেন।
অন্যান্য ডিজাইনাররা কিভাবে তাদের ওয়্যারফ্রেম প্রস্তুত করে তা ক্রমাগত দেখলে, আপনি বুঝতে পারবেন কিভাবে একটি ওয়্যারফ্রেম স্ক্রিনে বিভিন্ন তথ্য সাজিয়ে রাখতে সহায়তা করে।
ধাপ ২: প্রক্রিয়াটি ডিজাইন করা
ওয়্যারফ্রেম ডিজাইন হচ্ছে একটি গঠনমূলক প্রক্রিয়া, যদিও বিভিন্ন ধরণের ডিজাইনাররা একটি ওয়্যারফ্রেমকে ভিন্ন ভিন্ন আঙ্গিকে ও কোডে রুপান্তর করে থাকে। আপনাকে এমন একটি প্রক্রিয়া খুঁজে নিতে হবে যেটা আপনার সহজাত ভঙ্গিমা ফুটিয়ে তুলবে এবং একইসাথে আপনি যেটাতে স্বচ্ছন্দ অনুভব করবেন। নিচের ডায়াগ্রামে বেশ কিছু স্বাভাবিক প্রক্রিয়া দেখানো হলো:
37signals স্কেচ ব্যবহার করে সরাসরি সেই ডিজাইনগুলো কোডে পরিণত করার জন্য বিখ্যাত, তবে, এখানকার বেশ কিছু ডিজাইনার তাঁদের প্রক্রিয়ায় ভিজ্যুয়াল মোকআপও ব্যবহার করে থাকে।
আমার নিজস্ব ক্ষেত্রে, ডিজাইনের প্রবাহ প্রক্রিয়া ধরে রাখতে আমি সবসময় ডিজাইন-থেকে-কোড চক্র অনুসরণ করি। এটা এমন একটি ধাপ যা সম্পর্কে কিছু মানুষ সম্ভবত চিন্তাই করে না, কিন্তু আমি এর সাথে সাথে html/css কাঠামোর কথাও মাথায় রাখি, যেটা আমি পরবর্তীতে এই প্রজেক্টে ব্যবহার করবো।
যেমন, আমি ব্লুপ্রিন্টে অসংখ্য সাইট তৈরি করেছি। ব্লুপ্রিণ্ট এবং ওয়্যারফ্রেম উভয়টিতেই আমি একইরকম বারো কলামের গ্রিড ব্যবহার করে থাকি। এর ফলে আমার প্রোটোটাইপিং এবং ডেভেলপমেন্টের জন্য খুব অল্প সময় লাগে। যেহেতু, প্রত্যেক এলিমেন্টের দৈর্ঘ্য সিএসএস স্টাইলশিটে আলাদা আলাদা ভাবে লেখা অনেক সময়ের ব্যপার, তাই এটার মাধ্যমে এক থেকে বারো কলামের মধ্যে কোনটির কেমন দৈর্ঘ্য হবে তা আগে থেকেই নির্ধারিত হয়ে থাকে। ফলে, আমি পরিবর্তীতে সুবিধামত cssgrid ব্যবহার করে রেস্পন্সিভ সাপোর্ট পেতে পারি। কিন্তু, আপনি চাইলে বারো কলাম গ্রীডটিকে ফটোশপ টেম্পলেট হিসেবেও ডাউনলোড করতে পারবেন।
আগে যেমন বলেছি, এজন্য আপনাকে সিদ্ধান্ত নিতে হবে যে, কোন প্রক্রিয়াটি আপনার জন্য সস্তিদায়ক। কখনও কখনও আপনি বেশ কিছু প্রক্রিয়া পরিক্ষা করে দেখতে পারেন যে কোনটি আপনার জন্য সব থেকে কার্যকরী প্রক্রিয়া হয়। কিছু কিছু মানুষ স্কেচিংয়ে দক্ষ থাকে, আর এ কারনে তাঁরা ওয়্যারফ্রেমিং টুল ব্যবহার করতে একেবারেই পছন্দ করে না। এছাড়া অন্যান্য ডিজাইনাররা হয়তোবা ভুলভ্রান্তি এড়াতে যতটা সম্ভব ধাপে ধাপে অগ্রসর হয় অথবা ডিজাইনটি বিন্যাস ও আকৃতি প্রদানের সময় প্রতিটা কাজ পুনরাবৃত্তি করার আগে চিন্তাভাবনা করে।
সবশেষে আপনি চাইলে আপনার পছন্দমত প্রক্রিয়াটিকে বিকশিত করতে পারেন। কিন্তু এই টিউটোরিয়ালের স্বার্থে আমি আমার সবচেয়ে সাধারণ প্রক্রিয়াটিকে উদাহরন স্বরূপ পেশ করছি:
তিন কারনে মূলত ইলাস্ট্রেটরকে আমি ওয়্যারফ্রেমিং টুল হিসেবে ব্যবহার করি:
- স্টাইল – আপনি টাইপ এবং অবজেক্ট স্টাইল সংরক্ষন করতে পারবেন এবং CSS এর মত করেই এগুলোকে আবার ব্যবহার করতে পারবেন।
- এখানে কয়েকটি অবজেক্ট একসাথে পরিবর্তন করা, সরানো অথবা পরিমাপ করা সহজ।
- এটা খুব সহজেই ফটোশপে অবস্থান্তর করতে সক্ষম।
তবে, আমি অন্যান্য টুলও ব্যবহার করি এবং এটা মূলত প্রজেক্টটি কেমন হবে তার উপর নির্ভর করে। আমি পরবর্তী সেকশনে সংক্ষেপে বেশ কিছু টুলের বিবরণ তুলে ধরবো। একই সাথে এগুলোর সুবিধা ও অসুবিধাগুলোও তুলে ধরবো।
ধাপ ৩: টুল নির্বাচন করুন
এখানে, হালের বেশ কিছু জনপ্রিয় টুলস তুলে ধরা হলো:
বেলসামিক
বেলসামিক ওয়্যারফ্রেম তৈরির জন্য একটি জনপ্রিয় টুল। কারণ বেলসামিকে তৈরি ওয়্যারফ্রেমগুলো সুস্পষ্ট ডিজাইন সংবলিত হয় যা দেখলেই বোঝা যায় যে এটি একটি সম্পূর্ণ কাজ নয় বরং কাজের অগ্রগতি মাত্র। বেলসামিকে পুনরায় ব্যবহারযোগ্য এমন অনেক উপাদান আছে, যেগুলো দিয়ে আপনি ড্র্যাগ এবং ড্রপের মাধ্যমে আপনার ওয়্যারফ্রেম ডিজাইন করতে পারবেন।
আপনি মোটামুটি সবধরনের প্ল্যাটফর্মেই এটা ব্যবহার করতে পারবেন। এটার ডেক্সটপ ভার্শন ম্যাক, উইন্ডোজ ও লিনাক্সের জন্য। যদি আপনি ক্লাউড কম্পিউটিং সিস্টেমে কাজ করতে পছন্দ করেন, তবে আপনার জন্য একটি ওয়েব ভার্শনও আছে। এছাড়া, থার্ড পার্টি অ্যাপস যেমন, iOS এর জন্য তৈরি iMockups থেকেও আপনি বেলসামিক ফরম্যাটে এক্সপোর্ট করতে পারবেন।
ওমনিগ্রাফল
ম্যাকের জনপ্রিয় একটি অ্যাপ্লিকেশন হচ্ছে ওমনিগ্রাফল। এটাতে পুনরায় ব্যবহারযোগ্য অনেক ওয়েব উপাদানসহ গ্রাফলটপিয়া নামে একটি বিশাল লাইব্রেরী আছে।
যদিও এটা ডায়াগ্রাম তৈরি করার অ্যাপ্লিকেশন হিসেবে ডেভেলপ করা হয়েছিল, কিন্তু ওমনিগ্রাফলে অটোমেটিক লেআউট, কাস্টম অবজেক্ট স্টাইল সাপোর্ট, স্মার্ট গাইড এবং গ্রাফ টুলের মত বেশ কিছু জটিল ফিচার আছে। কিছু কিছু ফিচার অবশ্য এডোবি সিএস স্যুটেও আছে। কিন্তু আপনার যদি সিএস স্যুট না থাকে, তাহলে সাশ্রয়ী দামের (~$100) ওমনিগ্রাফল হতে পারে সচিত্র ওয়্যারফ্রেম তৈরির জন্য সেরা পছন্দ।
অ্যাযোরে
এটাকে বল যায় ওয়্যারফ্রেমিং টুলের দাদার মত, অ্যাযোরে হচ্ছে প্রথম পেশাদার ওয়্যারফ্রেমিং/প্রোটোটাইপিং টুলগুলোর মধ্যে অন্যতম। এখন পর্যন্ত, এটা কেবল উইন্ডোজেই পাওয়া যায়। যদিও আমার এ সম্পর্কে খুব বেশী অভিজ্ঞতা নেই, কিন্তু এটা পেশাদার শিল্পীদ্যোক্তাদের কাছে বহুল ব্যবহৃত একটি টুল হিসেবে পরিচিত।
ফ্লেয়ারবিল্ডার
এই মুকুটেরই আরেকটি পালক হিসেবে ফ্লেয়ারবিল্ডারে ইন্টারেক্টিভিটির জন্য শক্তিশালী সাপোর্ট আছে।
বিশাল কম্পোনেন্ট লাইব্রেরী, মাস্টার পেইজ সাপোর্টসহ আপনি যেকোনো প্রটোটাইপ অনলাইনে এক্সপোর্ট করে দেখার সুবিধা পাবেন।
অনলাইন অ্যাপ্লিকেশনসমূহ
যদি আপনার ডেস্কটপ সফটওয়্যার ভাল না লাগে, তাহলে অনলাইন ভিত্তিক টুল হিসেবে mockflow, hotgloo এবং mockingbird ব্যবহার করতে পারেন।
কীনোট/পাওয়ারপয়েন্ট
Keynotopia "আপনার পছন্দের প্রেজেন্টেশন অ্যাপ্লিকেশনকে সেরা ও দ্রুতগতির প্রোটোটাইপিং টুলে রুপান্তর করে যা দিয়ে আপনি মোবাইল, ওয়েব ও ডেক্সটপ অ্যাপের মোকআপ তৈরি করতে পারবেন।" যারা ম্যাক ব্যবহার করেন না তাঁদের বিব্রত হওয়ার কিছু নেই, Keynotopia পাওয়ার পয়েন্ট টেম্পলেটেও ব্যবহার করা যায়।
আপনি যদি অতিদ্রুত মোবাইল অ্যাপ্লিকেশনের ওয়্যারফ্রেম বা প্রোটোটাইপ তৈরি করতে চান তাহলে এটা ব্যবহার করুন। আরেকটি বিকল্প সমাধান হচ্ছে Keynote Kungfu।
অ্যাডবি সিএস
অ্যাডবি সফটওয়্যারের সাথে যারা ইতিমধ্যেই পরিচিত আছেন, তাঁদের জন্য ফায়ারওয়ার্ক, ইলাস্ট্রেটর এবং ইনডিজাইন, ওয়্যারফ্রেমিং টুল হিসেবে নিজেদের অক্ষমতা ও সক্ষমতা যাচাই করার একটি ভাল মাধ্যম।
ফায়ারওয়ার্কস
আপনি ফায়ারওয়ার্কে বেসিক ওয়্যারফ্রেম থেকে শুরু করে সম্পূর্ণ ভিজ্যুয়াল ডিজাইন প্রক্রিয়াটি সম্পন্ন করতে পারবেন। ফায়ারওয়ার্ক মাস্টারপেইজ (এগুলোকে পুনরায় ব্যবহারযোগ্য টেম্পলেট হিসেবে ভাবতে পারেন, যেখানে মাস্টার টেম্পলেট সম্পাদনা করলে চাইল্ড পেইজেও সেই পরিবর্তনগুলো দেখা যাবে), এলিমেন্ট লাইব্রেরী সাপোর্ট করে যেটা দিয়ে আপনি অতিদ্রুত ইণ্টারেক্টিভ প্রোটোটাইপ তৈরি করতে পারবেন।
ইলাস্ট্রেটর
এটা আমার সবচেয়ে পছন্দের টুল কারণ আমি ইলাস্ট্রেটরের সাথে খুব ভালো ভাবে পরিচিত এবং আমি নিশ্চিত এখানে ইলাস্ট্রেটরের সাথে পরিচিত এমন অনেক ডিজাইনারই আছেন। আমি সাধারণত দ্রুত, কিন্তু জটিল ওয়্যারফ্রেমের জন্যই বেশীরভাগ সময়ে ইলাস্ট্রেটর ব্যবহার করে থাকি, যেগুলোতে ইণ্টারঅ্যাক্টিভিটি বা মিথস্ক্রিয়ার প্রয়োজন নেই।
কি কারনে এটা সেরা? সম্পাদনাযোগ্য় PSD লেয়ার হিসেবে এক্সপোর্ট করার সুবিধা, ফটোশপে কপি পেস্ট করার সুযোগ, টাইপোগ্রাফি স্টাইল নিয়ন্ত্রন করার সুযোগ, যা আপনি চাইলেই CSS এর মত করে সংরক্ষন, সম্পাদনা ও পুনরায় ব্যবহার করতে পারবেন।
ইনডিজাইন
ইলাস্ট্রেটরের মতই শক্তিশালী এমনকি শক্তিশালী টাইপোগ্রাফিক স্টাইল কন্ট্রোল, শক্তিশালী মাস্টারপেজ সাপোর্ট এবং ইদানিং ইণ্টারএক্টিভ প্রোটোটাইপ তৈরি করার সুবিধা যুক্ত করা হয়েছে।
যখন আমি উঁচু স্তরের মাল্টি-পেইজ প্রোটোটাইপ তৈরি করি, তখন সাধারনত ইনডিজাইন বেছে নেই। একমাত্র প্রতিবন্ধকতা হলো ভিজ্যুয়াল ডিজাইন করার পর তা ফটোশপে এক্সপোর্ট করার সময় দুর্বল সাপোর্ট। .
প্রোটোশেয়ার
"শক্তিশালী প্রোটোটাইপিংয়ের সহজ সমাধান।" সম্প্রতি বের হওয়া নবম ভার্শনে একটি wysiwyg প্যালেট আছে। চেক করে দেখতে পারেন।
ধাপ ৪: একটি গ্রীড সেট করা
গ্রিড সিস্টেমগুলোর ব্যাপারে অনেক তত্ত্ব আছে, কিন্তু আমি এটার খুব বেশি গভীরে যেতে চাই না। আমি এটাকে "বিন্যাসের উপাদানগুলোর কাঠামোগত এবং সরল পথ" হিসাবে ব্যাখ্যা করব।
আমি এই টিউটোরিয়ালের জন্য ইলাস্ট্রেটর ব্যবহার করছি। কিন্তু এই ধাপগুলো আপনি যেকোনো টুলসের ক্ষেত্রেই প্রয়োগ করতে পারেন।
প্রথমতঃ, একটি ডকুমেন্ট সাইজ সেট করুন। আমি 1280 x 900 ব্যবহার করছি, কারণ আমি এমন একটি গ্রিড ব্যবহার করবো যেটা আমার ওয়েবসাইটটিকে মোবাইল থেকে শুরু করে সর্বোচ্চ 1140 পিক্সেলেও খুব সুন্দর ও সহজভাবে প্রদর্শন করবে।
cssgrid থেকে ডাউনলোড করা টেম্পলেটটি আপনার ডকুমেন্টে স্থাপন করুন।
টিপ:
এখানে ডাউনলোড করার জন্য অসংখ্য গ্রীড টেম্পলেট আছে, কিন্তু আপনি যদি নিজস্ব গ্রিড বানিয়ে নিতে আগ্রহী হয়ে থাকেন তাহলে, responsify.it এ দেখতে পারেন।
ধাপ ৫: বক্সের মাধ্যমে লেআউট নির্ধারণ করা
গ্রীডে বাক্স অঙ্কন করার মাধ্যমে শুরু করতে পারেন। আপনার দর্শকদের সামনে কি ধরণের তথ্য ক্রমান্বয়ে তুলে ধরতে চান, সে সম্পর্কে চিন্তা করুন। উপর থেকে নিচ পর্যন্ত হচ্ছে সবচেয়ে সহজ পদ্ধতি, যা বাম থেকে ডান দিকে সাজানো থাকবে। নিচে এমন একটি ওয়্যারফ্রেমের উদাহরন দেয়া হলো যা আজকাল সফটওয়্যার কোম্পানিসমূহ ব্যবহার করে থাকে:
মাঝে মাঝে, এটা আপনার উদ্দেশ্য এবং যে জন্য ডিজাইন করছেন তার উপর নির্ভরশীল হবে, আপনি লেআউটের ক্ষেত্রে কিছুটা সৃজনশীলতা প্রয়োগ করতে পারেন, যদিও তথ্যের অনুক্রমটি অবশ্যই মাথায় রাখতে হবে। এটা হচ্ছে আমার এক ক্লায়েন্টের জন্য তৈরিকৃত বাস্তবিক উদাহরণ যেখানে আমি প্রচলিত প্রযুক্তি কোম্পানির লেআউট থেকে বের হয়ে এসেছি:
এটা একটি ব্লগের লেআউট যেখানে সাবধানতার সাথে বিজ্ঞাপনের কনটেইনার এবং গ্রাহকদের জন্য নির্দিষ্ট নির্দেশনা উপস্থাপন করা হয়েছে:
ধাপ ৬: টাইপোগ্রাফির মাধ্যমে তথ্যানুক্রম সংজ্ঞায়িত করা
বাক্সগুলো সুন্দরভাবে সাজানো হলে এখন আপনি আপনার কন্টেন্টগুলো তার ভিতর সাজাতে শুরু করতে পারেন, যতক্ষন না তথ্যগুলো সুন্দরভাবে উপস্থাপিত হচ্ছে। সুন্দরভাবে সাজানোর নিয়ম একইরকমঃ আপনার দর্শকদের কাছে যেসব তথ্য তুলে ধরতে চান তা পরিচ্ছন্ন হতে হবে, এমনকি সাদা-কালো ওয়্যারফ্রেম হলেও।
বিভিন্ন আকৃতির ফন্ট সাইজ ব্যবহারের মাধ্যমে শুরু করতে পারেন যা আপনার তথ্যের বিভিন্ন স্তরের মধ্যে পার্থক্য তুলে ধরবে।
এই পর্যায়ে এসে পরীক্ষানিরীক্ষা করতে ভুলবেন না। অনেক সময়, আপনি যখন বিবরণ যুক্ত করবেন, তখন হয়তোবা বুঝতে পারবেন যে মূল লেআউটটি ভালভাবে কাজ করবে না। এটাই হচ্ছে ওয়্যারফ্রেমিং প্রক্রিয়ার মূল বিষয়; বার বার পুনরাবৃত্তি করে প্রয়োজনীয় তথ্যগুলো সংকুচিত করে করে উপস্থাপন করা যাতে সবচেয়ে সুন্দর ও নিখুঁত ভাবে উপস্থাপিত হয়।
নিচের উদাহরণে, আমি একটি স্ক্রিনশট নিয়েছি যেখানে অয়েবসাইটের বেশ কিছু জায়গা কালো বক্স দ্বারা চিহ্নিত করেছি, যাতে ওয়েবসাইটের কোন এরিয়াগুলো দৃশ্যতঃ গুরুত্বপূর্ণ তা বোঝা সম্ভব হয়:
ধাপ ৭: গ্রেস্কেলের মাধ্যমে নিখুঁত-সামঞ্জস্য তৈরি করা
গ্রেস্কেলের ব্যবহার কোন বিশেষ রঙ ছাড়াই আপনার উপাদানগুলো দৃশ্যতঃ শক্তিশালী কিনা তা বুঝতে সহায়তা করবে। এছাড়াও, এটা আপনাকে পরবর্তীতে ভিজ্যুয়াল ডিজাইন তৈরির সময়ও সাহায্য করবে।
ধাপ ৮: হাই-ডেফিনেশন ওয়্যারফ্রেম
এটা একটি ঐচ্ছিক ধাপ, কিন্তু যদি আপনি এই প্রক্রিয়াটিকে আরও বিকশিত করতে চান, তাহলে হয়তোবা এটা আপনার কাজে লাগতে পারে। একটি ওয়্যারফ্রেমকে হাই-ডেফিনেশন বানানোর মানে হচ্ছে, এটাতে আরও বিবরণযুক্ত করা, যতদূর সম্ভব ভিজ্যুয়াল বিবরণগুলো খুব বেশী বড় না করেই এটা করতে হবে। এটা মুলতঃ মূল কপিটা ওয়্যারফ্রেমের মধ্যে রাখা এবং ভিন্ন ভিন্ন কন্টেন্টের জন্য আদর্শ ফণ্ট-সাইজ নির্ধারণ করাকেই বুঝিয়ে থাকে:
চাইলে এটাতে রং ব্যবহার করতে পারেন:
স্বাভাবিকভাবেই, ভিজ্যুয়াল/কোড পর্যায়ে এসে আপনি নিশ্চয়ই পূর্বের ডিজাইনটিকে আরও সুন্দর করতে চাইবেন এবং এক্ষেত্রে কোনও ছাটাই অথবা পরীক্ষা-নিরিক্ষা চলবে না। পুনরাবৃত্তি চক্রের (ফিডব্যাক<>ওয়্যারফ্রেমিং) মাধ্যমে কোন জিনিস ঠিক করতে চাইলে তা আপনার পছন্দের ওয়্যারফ্রেমিং অ্যাপ্লিকেশনের মধ্যেই ঠিক করে নিন। এজন্য ফটোশপে লেয়ার এবং পিক্সেল আকারে যাওয়ার কোনও প্রয়োজন নেই।
আগেই বলা হয়েছে, বেশ কিছু ক্ষেত্রে খুব বেশি বিবরণযুক্ত না করাই ভালো এবং সরাসরি একটি ইন্টারএক্টিভ প্রটোটাইপিং পর্যায়ে চলে যেতে পারেন (ala 37signals)। এটার জন্য মূল যুক্তি হলো এই ধরণের ইন্টারএকটিভ বিবরণ গুলো একটি সরল ছবির মাধ্যমে প্রকাশ করা যায় না।
আপনি যদি ডেভেলপারদের একটি দলের সাথে কাজ করেন, তাহলে ভিজ্যুয়াল ডিজাইন নিয়ে কাজ করার সময় গৃহীত ওয়্যারফ্রেমগুলোর জন্য বেসিক ফ্রেমওয়ার্ক কোড করতে ডেভেলপারদের কাছে হস্তান্তর করতে পারেন।
ধাপ ৯: একটি ওয়্যারফ্রেমকে দৃশ্যমান করা
আগেই উল্লেখ করেছি, যে কারনে আমি ওয়্যারফ্রেমিংয়ের জন্য ইলাস্ট্রেটর ব্যবহার করতে পছন্দ করি তা হচ্ছে, এটা আমি খুব সহজেই সম্পাদনাযোগ্য লেয়ারসহ .psd ফাইল আকারে ফটোশপে এক্সপোর্ট করতে পারি। যখন আমি ফটোশপে নিয়ে আসি তখন খুব বেশি পরিবর্তন করতে চাই না (কারণ, ফটোশপের নিয়ন্ত্রনগুলো নিকৃষ্ট ধরনের, যদিও CS6 এ অনেক উন্নতি হয়েছে):
এখানে ওয়্যারফ্রেমকে ভিজুয়ালে রুপান্তর করার একটি উদাহরণ দেয়া হলো। ওয়্যারফ্রেমের মূল কাঠামোটি বেশ অক্ষত আছে, যদিও এখানে কিছু বিষয় পরিবর্তন করা হয়েছে। আপনি এই ওয়েবসাইটটি লাইভ দেখতে পারেন:
পরিশিষ্ট
তাহলে, এই টিউটোরিয়ালটি এখানেই শেষ করছি। আমি আশা করি, এটি আপনাকে পরীক্ষানিরীক্ষা শুরু করতে অনুপ্রেরণা যোগাবে! এবং যে কোন ডিজাইন প্রক্রিয়ার ক্ষেত্রে বার বার পুনরাবৃত্তি করতে ভয় পাবেন না।
এছাড়াও, মাঝে মাঝে অন্যান্য প্রক্রিয়া এবং টুলসের মাধ্যমে পরীক্ষা নিরিক্ষা করুন। যখন কোনও অ্যাপ্লিকেশন আপনার পরিচিত হয়ে উঠবে, তখন নিশ্চয়ই আপনি এটাতে সময় ব্যয় করে আনন্দ পাবেন।
দয়া করে, কোন প্রশ্ন থাকলে তা কমেন্টে জানান। সময় নিয়ে পড়ার জন্য ধন্যবাদ!
অন্যান্য রিসোর্সসমূহ
আপনি যদি ওয়্যারফ্রেমিং সম্পর্কে আরও জানতে চান, তাহলে নিচের রিসোর্সগুলো চেক করে দেখতে পারেন।
- 35 Excellent Wireframing Resources
- Wireframing & Prototyping with Adobe Fireworks – Resources and Tutorials
- Good design faster (slides on sketching wireframes)
- 50 Free UI and Web Design Wireframing Kits, Resources and Source Files
- Yahoo! Design Stencil Kit
- wireframes.linowski.ca
- Quora: What are the best tools for wireframing?
