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

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

উল্রেখ্য, গ্রাফিক্যাল কাজ বলতে শুধু ছবির ব্যবহার নয়। ডিজাইনের সিএসএসএর ব্যবহারও গ্রাফিক্যাল কাজের অংশ

১. ব্যাকগ্রাউন্ড ও ফরগ্রাউন্ড ছবি

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

body
{
background-image:url('paper.gif');
background-color:#cccccc;
}

একই কথা যেকোন টেক্সটবক্সের ছবির ক্ষেত্রেও প্রযজ্য। নিচের ছবি দুটি দিয়ে দেখুন

ক. ভুল

লগোর পেছনে সাদা একটি রয়ের ব্যাগ্রাউন্ড ডিজাইনটিকে অসুন্দর করেছে।

খ. সঠিক

লগোটির পেছনে কোন রং ব্যবহার করা হয় নি।

২. ছবির ফাইল ফরমেট এবং সাইজ

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

৩. খালি জায়গা

একটি ঘরে অনেকগুলো দামী আসবাব পত্র জড়ো করে রাখলেই সুন্দর দেখায় না। সুন্দরভাবে গোছানো এবং অনেক ক্ষেত্রে ফাকা জায়গা রাখলে বেশ চমৎকার লাগতে পারে।

ডিজাইনে খালি জায়গা রাখার বেশ কয়েকটি উদাহরণ দেই

Snowbird

Eighty3 Creative

Andrew Lucas

৪. টেক্সট ও টেক্সট গ্রাফিকস

• টেক্সের রঙের ব্যবহার বেশ সচেতন হতে হবে। ডিজাইনের সাথে সম্পর্ক রেখে রং ব্যবহার করুন।
• আন্ডারলাইন ব্যবহার করলে টেক্স দেখতে অসুন্দর লাগে। আন্ডারলাইন ব্যবহার না করে টেক্সের নিচে হালকা লাইন ব্যবহার করতে পারেন।
• সব জায়গায় বড় হাতের ইংরেজী অক্ষর ব্যবহার না করই ভাল। কখনো বা হেডলাইনে বড় হাতের অক্ষর ব্যবহার করা যায় কিন্তু না করাকেই আমি ব্যক্তিগতভাবে ভাল মনে করি।
• প্যারাগ্রাফ ও টেক্সট ইফেক্টঃ প্রতিটি প্যারার মাঝা একটু ফাকা জায়গা রাখতে পারেন। একজন ভিজিটর জখন ওয়েবসাইটটি ভ্রমন করবে তখন টেক্সগুলো যাতে একঘেয়ে না লাগে সেই চিন্তাও আপনার মাথায় রাখতে হবে। এজন্য কিছু কিছু টেক্স বোল্ড, ইটালিক, ভিন্ন রং,কোটেশন ইত্যাদি সংযোগে কনটেন্ট সুন্দর করে তুলতে পারেন।

৫. অন্যান্য বিষয়ঃ

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

থার্ড পার্টি কনটেন্ট যদি লোড হতে দেরী হয় তা ওয়েবসাইটের পরে লোডের ব্যবস্থা করা উচিৎ।

পোস্ট লিখেছেন মাহবুব টিউটো

একসাথে প্রকাশিত টিউটোরিয়ালবিডিতে