পার্ট ২: Visual Storytelling: ভিউজুয়াল প্রেজেন্টেশন ও রেন্টাল শট ডিজাইন

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

পোর্টফোলিওতে ইউজারের চোখ আটকে রাখার প্রধান ট্রিক হলো—আপনার প্রসেস ও ভিজ্যুয়ালের মধ্যে একটি ভিজ্যুয়াল রিদম (Visual Rhythm) বা চমৎকার ফ্লো তৈরি করা।

আজকে আমরা আলোচনা করব কীভাবে কেস স্টাডির дизайн ইমেজ, ওয়্যারফ্রেম এবং হাই-ফিডেলিটি মকআপগুলো প্রফেশনালি শোকেস করবেন।

১. লুপ হোল: স্ক্রিনের অন্তহীন লম্বা স্ক্রল (Endless screen dump)

আমি যখন প্রথম প্রথম Behance-এ আমার প্রজেক্ট আপলোড করতাম, আমি ভাবতাম যত বেশি স্ক্রিন দেখাব, ক্লায়েন্ট তত বেশি ইমপ্রেসড হবে।

আমি প্রজেক্টের সব ৪০-৫০টি মোবাইল স্ক্রিন পরপর বসিয়ে দিতাম। এর ফলে প্রজেক্ট ফাইলটি হতো অনেক লম্বা এবং বোরিং। ক্লায়েন্টরা ১০ সেকেন্ড স্ক্রল করার পর টায়ার্ড হয়ে ট্যাব ক্লোজ করে দিত।

পরে আমি বুঝতে পেরেছি—পোর্টফোলিও মানে আপনার সব কাজের গুদামঘর নয়। এটি হলো আপনার সেরা কাজের কিউরেটেড কালেকশন (Curation)。

আপনাকে প্রতিটি স্ক্রিন দেখানোর প্রয়োজন নেই। কেবল প্রজেক্টের কোর ৫-৬টি ফিচার স্ক্রিন এবং সেগুলোর ডিজাইনের পেছনের কারণ দেখান। বাকি স্ক্রিনগুলো দেখানোর কোনো দরকার নেই।

২. দ্য "মেসি মিডল" শোকেস (Showing wireframes & explorations)

পোর্টফোলিওতে সরাসরি ফাইনাল ডিজাইন শট দেওয়ার আগে প্রজেক্টের পেছনের খাটুনি ও প্রসেস দেখান।

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

৩. মকআপ ও রেন্ডারিং গাইডলাইন (Device Mockups)

মকআপ ব্যবহার করার সময় এই ভুলগুলো এড়িয়ে চলুন:

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

৪. কেস স্টাডি হিরো ইমেজ ডিজাইন (Hero Image Anatomy)

কেস স্টাডির প্রথম ইমেজ বা থাম্বনেইলটিই ইউজারের ক্লিক ট্রিগার করে।

থাম্বনেইলের ডিজাইন সিম্পল এবং স্ট্রং রাখুন। প্রজেক্টের মেইন ড্যাশবোর্ড স্ক্রিন বা ল্যান্ডিং পেজের হিরো এরিয়া জুম-ইন করে থাম্বনেইলে হাইলাইট করুন এবং প্রজেক্টের নাম ও টাইপ (যেমন: "SaaS Dashboard Redesign") বড় ফন্টে লিখে দিন।

পরবর্তী পর্বে আমরা দেখব কীভাবে পোর্টফোলিওর জন্য নো-কোড টেক স্ট্যাক (Webflow, Framer) দিয়ে আপনার রেসপন্সিভ সাইট ডেভেলপমেন্ট করবেন।

ধন্যবাদ সবাইকে。