Related Articles

মঙ্গলে জনবসতি গড়ে তোলা বুদ্ধিমানের কাজ নয়

May 31, 2018

ফসিলাইজড খুশকির মাধ্যমে বিবর্তিত বর্তমান প্রাণীর অবস্থান

May 26, 2018

ডার্ক ম্যাটার ও আমাদের সম্প্রসারণশীল বিশ্ব

May 16, 2018

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

আজ দিচ্ছি ২য়পর্ব।

3.  কার্ড লে-আউটসঃ

যদিও ২০১৬ সালের প্রথমে একটু সন্দেহ ছিল যে কার্ড ডিজাইন প্যাটার্ন অনলাইনে জরিপে জনপ্রিয়তায় আসবে কিনা? কিন্তু সেই সন্দেহ কে দূরীভূত করে অনলাইনে ৩০% ভোট পরে কার্ড ডিজাইন প্যাটার্নের উপর। কিছু জনপ্রিয় সাইট রয়েছে যা রা পুরোপুরি কার্ড লে-আউট এর ভিত্তিতে গড়ে উঠেছে। যেমনঃ পিন্টারেস্ট। এছাড়াও বর্তমানে কার্ড লে-আউট ব্যবহার করছে ফেসবুক, স্পটিফাই, গুগল সহ আরও অনেকে। তাহলে চলুন জানি কার্ড লে-আউট নিয়ে এবং এমন কি রয়েছে যা একে জনপ্রিয় করে তুলেছে!!!

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

কিভাবে কার্ড লে-আউট ডিজাইনকে প্রোটোটাইপ করা সম্ভবঃ

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

টিপসঃ  আপনার কার্ডগুলোর কন্টেন্টে যখন অ্যাডিশনাল লিঙ্ক ব্যবহার করবেন তখন ডিজাইন কে আরও আকর্ষণীয় করতে মোবাইল গেসচার ব্যবহার করুন ।

প্যারাল্যাক্স স্ক্রলিংঃ

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

কিভাবে প্যারাল্যাক্স স্ক্রলিং কে প্রোটোটাইপ করা সম্ভবঃ

প্রথম প্রথম প্যারাল্যাক্স স্ক্রলিং করা ভয়ের শুনালেও ভায় পাবার কোন কারন নেই,কারন হাজারো টুল আছে যা আপনায় এই কাজে সহায়তা করতে আপনায় অসংখ্য ইউ/আই কিটস ও লাইব্রেরীর খোঁজ দিবে যেখানে আপনি পাবেন প্যারল্যাক্স স্পেসিফিক এলেমেন্টস যার মধ্যে রয়েছে Axure এবং Adobe Muse.

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

টিপসঃ প্যারাল্যাক্স নিয়ে বাড়তি কিছু করতে যাবেন না- তখনই প্যারাল্যাক্স ব্যবহার করুন  যখন তা ব্যবহার করে আপনি কার্যকরী ফলাফল পেতে পারেন। প্যারাল্যাক্স স্ক্রলিং ব্যবহার করে আপনি CTA (Calls To Action) কে কন্ট্রোল করতে পারবেন। এবং  ইউজার কে নেক্সট লেভেলে গাইড করতে পারবে।

ইলাস্ট্রেসনঃ

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

কিভাবে ইলাস্ট্রেশন কে প্রোটোটাইপ করা সম্ভবঃ

সাম্প্রতিক কালের প্রোটোটাইপ টুলস এর উত্থানের কারনে ডিজাইন টুলস এর সাথে কম্প্যাটিবল অনেক টুলই খুঁজে পাওয়া যায়। এর মধ্যে রয়েছে Photoshop, Illustrator এবং Sketch যেসব টুল ব্যবহার করে ডিজাইনাররা তাদের কাজকে প্রটোটাইপের সাথে সংযুক্ত করতে পারবেন। এই ধরনের সংযুক্তিতে আরেকটা সুবিধা পাবেন তা হলো আপনার দ্বারা সৃষ্ট স্ট্যাটিক ইমেজগুলোকে ইন্টার‌্যাক্টিভ ইমেজে রুপান্তরিত করতে পারবেন। তারই সাথে স্টানিং প্রোটোটাইপ ব্যবহার করতে পারবেন ভিজ্যুয়াল ইমেজের বিন্দুমাত্র কম্প্রোমাইজ না করেও।

প্রোটোটাইপিং টুলসে এটমিক ডিজাইনের ইউজ বলতে বুঝায় এক্সিসটিং ইমেজ কে সহজে এডিট করা যায় এবং কমপ্লিমেণ্টারি হিসেবে ইউজার ইন্টারফেসে ব্যবহার করা যায়, কারন ডিজাইনকে মোস্ট বেসিক এলেমেন্টে ভাঙ্গা যায়।

আরেকটি ইউনিক ওয়েতে ইনকর্পোরেট ইলাস্ট্রেসন সৃষ্টি করা যায় আর তা হচ্ছে, স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) এর ব্যবহার করা। SVG হচ্ছে এক্সএমএল- বেসড ভেক্টর ইমেজ ফরম্যাট যা টু-ডি গ্রাফিক্স ইন্টার‌্যাক্টিভিটি ও অ্যানিমেশন সাপোর্ট করে। SVG দিয়ে ডিজাইন ক্রিয়েট করার অনেক সুবিধাই রয়েছে, কিন্তু এসভিজি কে যা অসাধারন করেছে তাহলো তার বিভিন্ন টুলকে এডিট ও ব্যবহার করতে পারার অসামান্য যোগ্যতা যার মাঝে রয়েছে ফটোশপ ও ভিন্ন কিছু প্রোটোটাইপ টুলস, যেমনঃ- জাস্ট ইন মাইন্ড ।                 

আজ এই পর্যন্তই। খুব দ্রুতই হাজির হবো আপনাদের সাথে নতুন কোন লেখা নিয়ে। ততদিন আমাদের সাথেই থাকুন।

১ম পর্বটি মিস করে থাকলে দেখে নিতে পারেন

ওয়েব ডিজাইনের আকর্ষণীয় ৫টি ট্রেন্ড ও তা প্রোটোটাইপ করার সফল উপায় (১ম পর্ব)

লিখেছেনঃ নাসীব উর রহমান