ThemeForest Standard Web Designer হওয়া আসলেই খুব কঠিন, কতটা কঠিন তা যারা কয়েকবার আইটেম সাবমিট করার পর বার বার রিজেক্ট খায় তারা ছাড়া আর কেউ বুঝবে না। যাই হোক, কিভাবে হবেন TF Standard Web Designer ---

১) Learn Typography : Typography সম্পর্কে ভাল ধারণা থাকা লাগবেই লাগবে। Google মামার কাছে সাহায্য চাইলে Typography এর উপর অনেক অনেক টিউটোরিয়াল পাবেন। যেগুলা বেশিরভাগই খুব বোরিং মনে হবে, পড়তে একদমই ভাল লাগবে না কিনতু কষ্ট করে একবার পড়ে ফেললে আর জীবনে কেউ আপনাকে বাজে ডিজাইনার বলার সাহস পাবে না 😀

আমার ভাষায় Typography কি বলতে বললে বলব, ধরেন দু’জন মানুষের হাতের লিখা - একজনেরটা খুব বাজে, হিজিবিজি, কাকের ঠ্যাং বকের ঠ্যাং আর একজনের হাতের লিখা মুক্তার দানার মত, তাহলে এই দ্বিতীয় জনেরটাই হল Good Typography। Typography মানে আপনার ডিজাইনের সাথে মানানসই একটা সুন্দর ফন্ট নির্বাচন করা, তারপর সেই ফন্ট দিয়ে Font Size, Line Height, Letter Spacing ইত্যাদি দিয়ে সুন্দর ভাবে সাইটে তথ্য উপস্থাপন করা। Typography এর সাথে Visual Hierarchy ঘনিষ্ঠভাবে জড়িত। Typography ভালনা তো আপনার ডিজাইনই ভাল না। সবার আগে Typography এর বেসিক জ্ঞান নিন।

২) Visual Hierarchy : TF এ অনেক অনেক সুন্দর ডিজাইন শুধু মাত্র Visual Hierarchy Issue এর জন্য accept হয় না। এবারও Google মামার কাছে সাহায্য চাইলে Visual Hierarchy এর উপর অনেক অনেক টিউটোরিয়াল পাবেন।

আসেন উদাহরণ দিয়ে আমার ভাষায় বলি কি এই Visual Hierarchy। ধরেন আপনি এখন আজিমপুর বাস স্ট্যান্ডে দাঁড়িয়ে আছেন, এখান থেকে আপনি পায়ে হেটে ধানমন্ডি-৩ এ যাবেন। কিনতু আপনি পথ চেনেন না। তবে আপনার সাথে একজন ইন্সট্রাকটর আছেন, যিনি আপনাকে পথ চিনিয়ে নিয়ে যাবেন। মানে সে আপনাকে বার বার ইন্সট্রাকট দিয়ে দিয়ে ধানমন্ডি-৩ এ পৌঁছে দেবে এভাবে, ডানে যাও, এখন সোজা হাট, এবার বামে মোড় নাও এভাবে। এবার চিন্তা করেন আপনার সাথে কোন ইন্সট্রাকটর নাই, তাহলে আজিমপুর থেকে ধানমন্ডি-৩ পৌছতে কি ধকলটাই না যাবে আপনার উপর দিয়ে? বারবার একে তাকে জিজ্ঞেস করে করে বহু কষ্টে আপনি আপনার কাঙ্ক্ষিত গন্তব্যে পৌছবেন।

এখানে প্রথম উদাহরণটাকে তুলনা করতে পারেন, Good Visual Hierarchy এর সাথে আর পরেরটাকে তুলনা করতে পারেন Bad Visual Hierarchy এর সাথে বা Visual Hierarchy Error এর সাথে। অর্থাৎ আপনি যখন কোন সাইটের কোন সেকশন ভিউ করছেন তখন আপনার চোখকে ইন্সট্রাক্ট করা first impression এ আপনার চোখ কোথায় আটকে যাবে, তারপর ইউজার কোথায় দেখবে এভাবে। এখন আমাদের সেই উপরের প্রথম উদাহরণের মত সাইটেতো আর কোন মানব ইন্সট্রাক্টর থাকবেনা, যে ইউজারকে বলবে আগে এই এলিমেন্ট দেখ, তারপর সেটা দেখ, এখন ঐ দিকে তাকাও, এভাবে বলবে কি? এখানে এই ইন্সট্রাক্টরের দায়ীত্ব পালন করবে কালার, কালার ব্রাইটনেস, কালার কন্ট্রাস্ট, ফন্ট সাইজ, স্পেশাল কোন গ্রাফিক্স ইমেজ ইত্যাদি।

ধরেন, আপনার সাইটের কোন সেকশনে তিনটা বৃত্ত আছে। তিনটাই সমান সাইজের, তিনটাই একই রঙের তাহলে স্ক্রুল করে ইউজার সেই সেকশনে আসার পর সে কোন বৃত্তটার দিকে আগে তাকাবে?? উত্তর কেউ জানেনা। উত্তরটা সম্পূর্ণ ইউজারের উপর নির্ভর করে। সে মাঝেরটার দিকেও আগে তাকাতে পারে অথবা শেষেরটা বা প্রথমটাই সবার আগে দেখতে পারে।

কিনতু একটু চালাকি করলে আপনি ইউজারের চোখকে নিয়ন্ত্রণ বা ইনস্ট্রাক্ট করতে পারেন Visual Hierarchy দিয়ে। এখন আবার তিনটা বৃত্ত বিবেচনা করেন প্রথমটা হালকা হলুদ একটু ছোট, মাঝেরটা হালকা সবুজ  আর সাইজে তার চেয়ে বড় আর শেষেরটা সাইজে খুব বড় আর সেই সাথে গাঢ় লাল। তাহলে এইবার এই সেকশনে স্ক্রুল করে আসলে ইউজার কোন বৃত্তটা আগে দেখবে?? Definitely শেষেরটায় সবার আগে তার চোখে পড়বে, কারণ মানুষের চোখ বড় আর ব্রাইট এলিমেন্টের প্রতিই সবার আগে attract হয়। এভাবে এখানে এই উদাহরণে আপনি কালার ও সাইজ দিয়ে ইউজারকে ইনস্ট্রাক্ট দিলেন কোন বৃত্তটা আগে দেখতে হবে। এটাই Visual Hierarchy। এখানেই শেষ নয় Visual Hierarchy অনেক বিশাল একটা টার্ম। এটা নিয়ে অনেক পড়াশোনা করুন। Visual Hierarchy ঠিক মত না বুঝলে কখনওই ভাল Web Designer হতে পারবেন না।

৩) Golden Ratio Point : Composition and Design এ Golden Ratio এর ভূমিকা ব্যাপক। এটা সম্পর্কে বেসিক কিছু ধারণা নিন। Google Search দিলেই শত শত টিউটরিয়াল পাবেন।

৪) Be a Perfect Color Chooser : কালার চয়েজ অনেকটা অভিজ্ঞতা, রুচি ও দক্ষতার উপর নির্ভরশীল। একটা প্রোডাক্ট সেটা শুধু ওয়েব সাইটই নয়, আপনি যে প্রোডাক্টই বানান না কেন, আর সেটার ডিজাইন যত ভালই হোক না কেন যদি রঙটা হয় ম্যাড়ম্যাড়ে, তাহলে কি আপনি নিজেই সেটা কিনবেন? রঙ শেষ তো সব শেষ। একটা ডিজাইনের সৌন্দর্যের ৫০ ভাগই নির্ভর করে সুন্দর কালার নির্বাচনের উপর। Visual Hierarchy তেও কালার বিশাল একটা ফ্যাক্ট। কালার চয়েজ বা একটার সাথে আরেকটা কালার ব্লেন্ড করা পুরোপুরি নিজের জ্ঞান ও রুচির উপর নির্ভরশীল। সেই সাথে অভিজ্ঞতা একটি বিশাল ব্যাপার। এর জন্য ভাল ডিজাইনারদের ডিজাইন বার বার দেখেন।

৫) Keep Consistency : পুরো ডিজাইনে Consistency বজায় রাখা। সাইটের এক সেকশনের সাথে যদি অন্য সেকশনের সামঞ্জস্য না থাকে তাহলে সেটা হবে একটা বিদঘুটে ডিজাইন। এই সামঞ্জস্য হতে পারে Font, Typography, Color Choosing, Graphic Texture etc অনেক কিছু নিয়েই। ধরেন উদাহরণ, আপনি সাইটের প্রতিটা সেকশনে উপরে নিচে 50px margin ব্যবহার করেছেন। এখন হঠাৎ করে স্ক্রুল করতে করতে ইউজার যদি এমন একটা সেকশনে পৌঁছে যেখানে উপরে নিচে 5px margin ব্যবহার করা হয়েছে তাহলে কিন্তু ডিজাইনটা Consistency হারায় অনেকটা। দেখতেও খুব Odd লাগে। তাই পুরো ডিজাইনে Consistency বজায় রাখুন। তবে হা ব্যতিক্রমী অনেক ডিজাইনও আছে, যেগুলোর সব সেকশনে একই মার্জিন/স্পেসিং ব্যবহার করা হয়েছে, একটা বিশেষ সেকশনে এসে ডিফারেন্ট মার্জিন/স্পেসিং ব্যবহারের নজিরও অনেক। তবে সেটা ডিজাইনারের অন্যরকম দক্ষতা বা ট্যালেন্ট।

৬) Good alignment and spacing : আপনার ডিজাইন আপনি কিভাবে সাজাবেন তা আপনার মেধার উপর নির্ভর করে। একটা খুব সুন্দর ঘরে যদি আপনি কোটি টাকার ফার্নিচার দিয়ে বোঝাই করে রাখেন তাহলেই কি ঘরটা সুন্দর দেখাবে ? হাটা চলার পর্যাপ্ত পথ নেই ? একটার গায়ে আরেকটা লেগে আছে। নাকি ঘরটা সুন্দর দেখাবে ফার্নিচারগুলো খুব ভালমতো সাজিয়ে গুছিয়ে রাখলে। একটার গায়ে আরেকটা লাগিয়ে না রেখে মাঝে পর্যাপ্ত ফাঁকা জায়গা রাখলে ?  এই ফাঁকা জায়গা দিতে গিয়ে যদি অদরকারী কোন ফার্নিচার ফেলে দিতে হয়, তাহলে সেটাই কি করা উচিত নয় ?

Web Design এও ঠিক এমনি Good alignment and spacing একটা বিশাল ব্যাপার। Good alignment and spacing এর কারণে একটা সাধারণ ডিজাইনও অসাধারণ হয়ে উঠে। আর alignment and spacing issue এর জন্য একটা গ্রেট ডিজাইনও বিদঘুটে দেখায়। তাই Web Design এ আপনার অভিজ্ঞতা থেকে সঠিক spacing নির্বাচন করুন, এলিমেন্টগুলোকে ঠিক মত সাজিয়ে এলাইনমেন্ট করুন, Spacing এও Consistency বজায় রাখুন। Good spacing দিতে গিয়ে যদি কোন এলিমেন্টকে ডিজাইন থেকে সেই ফার্নিচার ফেলে দেবার মত আউট করে দিতে হয় তাহলে সেটাই করুন। দেখবেন নিজের মন থেকেই বলে উঠবেন বাহ! খুব সুন্দরতো।

৭) Be a Simple and Minimalist Designer : ডিজাইন যথাসম্ভব Simple ও Minimal রাখবেন। অযথা অপ্রয়োজনীয় গ্রাফিক্স ব্যবহার করে Simple Design কে complex করলে তা কখনওই ভাল দেখায় না। সেই সাথে অপ্রয়োজনীয় সেকশন ও এলিমেন্ট ব্যবহার না করে ডিজাইন যথা সম্ভব Minimal রাখুন। মনে রাখবেন, Being “Simple and Minimal” is the primary weapon of a good designer।

৮) Be a Thief : নিজেকে সবসময় আপডেট রাখুন। ডিজাইনের বর্তমান ট্রেন্ড কি সেটার খবরাখবর রাখুন। আর ডিজাইনের আইডিয়ার জন্য তুখোড় ডিজাইনারদের ডিজাইন দেখুন, ভাল করে দেখেন তারা কিভাবে Typography, Visual Hierarchy, Padding, Margin, Spacing, Texture, Shadow ইত্যাদি তাদের ডিজাইনে ব্যবহার করেছে। ভাল ডিজাইনার হতে হলে আপনাকে চোর হতে হবে। জ্বি আপনি ঠিকই পড়েছেন চোর হতে হবে। ডিজাইনিং ফিল্ডে একটা প্রচলিত প্রবাদ আছে “Good Designers Copy, Great Designers Steal” এখানে চুরি করা বলতে বোঝানো হয়েছে, ধরেন আপনি কোন গ্রেট ডিজাইনারের কোন ডিজাইনের একটা সেকশন খুব পছন্দ করলেন, এখন সেটা থেকে আইডিয়া নিন। এবার নিজের আইডিয়া মিশিয়ে ঐ সেকশনটাই এমনভাবে ডিজাইন করেন যেন মূল ডিজাইনারও দেখে কখনও ধরতে না পারে যে তার আইডিয়া চুরি করেই আপনি আপনার ডিজাইন করেছেন। বরং মূল ডিজাইনার নিজেই যেন দেখে উলটা বলে উঠে বাহ! সুন্দরতো। আইডিয়া চুরি করেন। কিনতু সেই আইডিয়ার সাথে নিজের ব্রেইন আর বুদ্ধি খাঁটিয়ে তাকে নতুন রূপ দিন। দেখবেন কবে যে আপনি একজন মাস্টার ডিজাইনার হয়ে উঠেছেন নিজেই জানেন না। আর কখনওই অন্যের ডিজাইন সরাসরি কপি করবেন না।

৯) Learn Photoshop Basics : আর ভাল হোক খারাপ হোক ডিজাইনার হতে হলে Photoshop তো জানাই লাগবে। আমার মতে Photoshop দিয়ে তিন ক্যাটাগরির কাজ হয় –

১) Graphic Design

২) Web Design

৩) Photo Editing

প্রথম দু’ ক্যাটাগরির কাজের মাঝে অনেক মিল থাকলেও তৃতীয়টা সম্পূর্ণই ভিন্ন। যেমনঃ Photo Editing এ ব্যবহৃত বিভিন্ন টুল Gaussian Blur, Motion Blur, Magnetic Lasso Tool, Spot Healing Brush Tool, Liquefy Tool etc আমি কখনও Web Design এ ব্যবহার করেছি বলে মনে হয় না। অনেক বন্ধুই বলে – দোস্ত তুই না Photoshop পারিস, দেনা আমার এই ফটো এডিট করে ? আমি বলি আমিতো Photoshop দিয়া Photo Editing করিনারে বন্ধু, Web Design করি। আমি Photo Editing খুব একটা ভাল পারিনা। তখন তারা এমনভাবে তাকায় যেন, মনে হয় আমি বিরাট বড় মিথ্যাবাদী 😀

Photoshop হল Adobe এর develop করা এক অদ্ভুত Software. এটা এত ব্যাপক আর এর ব্যবহার সত্যি এত অদ্ভুত যে এতে জানার মনে হয় শেষ নেই। আর প্রতিটা নতুন ভার্সনে নিত্য নতুন ফিচার add হতেই থাকে। যাই হোক আশার কথা হল, Web Designer হতে হলে আপনাকে Photoshop এর নারী-নক্ষত্র জানতে হবে না। শুধু বেসিক কিছু টুলের ব্যবহার আর লেয়ার ও মাস্কিং সম্পর্কে স্বচ্ছ ধারণা থাকলেই তা more than enough।

১০) Be Creative and Unique : সর্বোপরি TF এ আইটেম একসেপ্ট করাতে ডিজাইন হতে হবে যথেষ্ট Unique and Creative। পুরনো ডিজাইনের কপি হওয়া যাবে না।

Curtsey: Din Muhammad Sumon

প্রযুক্তি সহ বিভিন্ন বিষয় নিয়ে সাজানো আমার নিজস্ব ব্লগ tanveerrazwan.com আপনাদের সবাইকে আমার ব্লগে ঘুরতে আসার আমন্ত্রন রইলো।

আমাকে খুজে নিন সোশাল মিডিয়ায়ঃ       ফেসবুকে আমি           TSU তে আমি