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

Related Articles

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

May 31, 2018

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

May 26, 2018

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

May 16, 2018

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

বিশ্ব এগিয়ে চলেছে,তার পাশাপাশি পরিবর্তন এসেছে প্রযুক্তি ও ডিজাইনেও। ওয়েব ডিজাইনেও লেগেছে পরিবর্তনের হাওয়া। কিছুদিন আগে একটি অনলাইন জরিপের মাধ্যমে প্রকাশিত হয়েছিলো  সবচেয়ে জনপ্রিয় ও শক্তিশালি ৫টি ট্রেন্ড। চলুন জানি সেই ৫টি ট্রেন্ড ও তাকে মকআপ করার প্রোটোটাইপ টুলগুলো সম্পর্কে। ২পর্বের ধারাবাহিকে আপনাদের জন্য তুলে ধরার চেষ্টা করেছি ট্রেন্ড গুলো। আজ দিচ্ছি ১ম পর্ব।

1.   ম্যাটেরিয়াল ডিজাইনঃ

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

ম্যাটেরিয়াল ডিজাইনের- মাধ্যমে প্রতিষ্ঠিত কিছু জনপ্রিয় সাইট হলোঃ-

•         Nimbusnine.co
•         Dhingu.com
•         Wohnberatung-wien.at
•         Jetradar.com
•         Stamplay.com
•         Absurdoburger.com.br
•         Angular.io
•         Android.com
•         I/O 2015
•         Threeventures.com

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

কিভাবে ম্যাটেরিয়াল ডিজাইনকে প্রোটোটাইপ করা সম্ভবঃ

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

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

ফ্লোটিং বাটন সম্পর্কে আরও কার্যকরী টিপস জানতে ঘুরে আসতে পারেন গুগল এর রিকোয়ারমেন্টস থেকে (গুগল রিকোয়ারমেন্টস)।

2.   ফ্ল্যাট ডিজাইনঃ

প্রত্যেকটি সফল ট্রেন্ডেরই একটি করে প্রতিপক্ষ থাকতেই হবে। তাই, আমরা এবার তুলে ধরছি ২০১৬ সালের ওয়েবসাইট ডিজাইনের পরবর্তী টপ ট্রেন্ড কে যা নিজেকে ম্যাটেরিয়াল ডিজাইনের যোগ্য প্রতিপক্ষ হিসেবে নিজেকে উপস্থাপন করেছে। আর সেই ডিজাইনটির নাম হচ্ছে “ফ্ল্যাট ডিজাইন”। যা অনলাইন জরীপে ম্যাটেরিয়াল ডিজাইন থেকে জনপ্রিয়তার দিক দিয়ে কেবল ১% পিছিয়ে রয়েছে।

ফ্ল্যাট ডিজাইন যাবতীয় স্কিউ মরফিক প্রিটেন্সন যা ম্যাটেরিয়াল ডিজাইনের সাথে সম্পর্কিত তা প্রত্যাখ্যান করে বরং তার উপর ডিজিটাল সৌন্দর্যের নান্দনিক উপস্থাপনে উজ্জ্বল রঙের ব্যবহার ও শার্প এজ ও ডেপথ এর স্বল্পতাকে প্রাধান্য দেয়। ফ্ল্যাট ডিজাইনের ব্যাপক জনপ্রিয়তার পিছনে কারন হিসেবে উল্লেখযোগ্য অবদান রাখে ওয়েব ডিজাইনে মিনিমালিজম বা সিমপ্লিসিটির ব্যবহার যা মনোযোগকে বিক্ষিপ্ত দেয় না। ফ্ল্যাট ডিজাইন সিম্পল আইকন লাইক ইমেজ ব্যবহার করে। ফ্ল্যাট ডিজাইন টেকনোলজি ও ট্যাক্টাইল অবজেক্ট এর মধ্যে বিভাজন সৃষ্টি করে। (বিস্তারিত জানতে দেখুন)

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

কিভাবে ফ্ল্যাট ডিজাইনকে প্রোটোটাইপ করা সম্ভবঃ

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

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

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

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

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