আপনি যদি একজন ডিজাইনার বা ডেভেলপার হয়ে থাকেন, তাহলে একটি ওয়েবসাইট বা অ্যাপ্লিকেশনের লগইন ফর্ম আপনার কাজের গুরুত্বপূর্ণ একটি অংশ হতে পারে। কারণ ব্যবহারকারী সাধারণত কোনো সিস্টেমে প্রবেশ করার সময় প্রথমেই লগইন পেজের সঙ্গে পরিচিত হন। তাই লগইন ফর্মের ডিজাইন যেমন পরিষ্কার হওয়া দরকার, তেমনি সেটি ব্যবহার করাও সহজ হওয়া উচিত।
আর সেই লগইন ফর্ম নিয়েই আজকের আলোচনায় হাজির হয়েছি। আমি সাজেদুল ইসলাম, forumbd24-এর Editorial টিম থেকে।
আজকে মূলত আমরা দুটি লগইন ফর্মের UI/UX ডিজাইন ও কোড শেয়ার করব। এগুলো আপনারা নিজেদের প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারবেন। প্রয়োজনে ফর্মগুলোর সঙ্গে ব্যাকএন্ড বা অন্য কোনো লগইন সিস্টেম যুক্ত করে ডায়নামিকভাবেও ব্যবহার করা যেতে পারে।
তাহলে চলুন, প্রথমে Login Form UI/UX বলতে কী বোঝায় সেটি জেনে নেওয়া যাক। এরপর দুটি ডিজাইনের ফিচার সম্পর্কে বিস্তারিত দেখব।
Login ফরম UI/UX কি?
Login Form UI/UX বলতে কোনো ওয়েবসাইট বা অ্যাপের লগইন অংশটি দেখতে কেমন হবে এবং ব্যবহারকারীর জন্য সেটি কতটা সহজ ও সুবিধাজনক হবে—এই দুটি বিষয়কে বোঝায়। এখানে UI বলতে লগইন ফর্মের দৃশ্যমান ডিজাইনকে বোঝানো হয়। যেমন ইনপুট বক্স, বাটন, রং, ফন্ট, আইকন এবং লেআউট।
অন্যদিকে UX বা User Experience হলো ব্যবহারকারী ফর্মটি ব্যবহার করার সময় কেমন অভিজ্ঞতা পাচ্ছেন। যেমন সহজে ইমেইল বা মোবাইল নম্বর ও পাসওয়ার্ড দেওয়া যাচ্ছে কি না, ভুল তথ্য দিলে সেটি বোঝা যাচ্ছে কি না, পাসওয়ার্ড দেখার সুবিধা আছে কি না এবং “Forgot Password” অপশনটি সহজে খুঁজে পাওয়া যাচ্ছে কি না—এসব বিষয় UX-এর সঙ্গে সম্পর্কিত।
এবার Login Form সম্পর্কে ধারণা পাওয়ার পর চলুন দুটি UI/UX ডিজাইন দেখে নেওয়া যাক।
Split Screen Login Form
Code Download Link: Split Screen Login Form
এই Split Screen Login Form-এ কয়েকটি সাধারণ ও ব্যবহারযোগ্য ফিচার রাখা হয়েছে। নিচে সেগুলো সংক্ষেপে দেওয়া হলো।
ফিচার লিস্ট
১. সিঙ্গেল ফাইল
- পুরো ডেমোটি একটি HTML ফাইলে তৈরি করা হয়েছে।
- HTML, CSS এবং JavaScript একই ফাইলের মধ্যে রাখা হয়েছে।
- আলাদা CSS বা JavaScript ফাইল ছাড়াও ডেমোটি ব্যবহার করা যায়।
২. Split Screen ডিজাইন
- পেজটি মূলত দুটি অংশে বিভক্ত।
- বাম পাশে welcome বা branding অংশ রয়েছে।
- ডান পাশে login form রাখা হয়েছে।
- লেআউটটি সহজেই নিজের প্রয়োজন অনুযায়ী পরিবর্তন করা যাবে।
৩. Responsive Design
- মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রিনের জন্য লেআউটটি মানিয়ে নেওয়ার ব্যবস্থা রয়েছে।
- ছোট স্ক্রিনে branding অংশের পর login form দেখানো হয়।
- Media query ব্যবহার করে responsive layout তৈরি করা হয়েছে।
৪. Email Input
- ব্যবহারকারীর ইমেইল লেখার জন্য input field রয়েছে।
- Email খালি রাখা হয়েছে কি না তা যাচাই করা হয়।
- Email সঠিক ফরম্যাটে আছে কি না সেটিও যাচাই করা হয়।
৫. Password Input
- Password লেখার জন্য input field রয়েছে।
- Password খালি রাখা হয়েছে কি না তা যাচাই করা হয়।
- Password কমপক্ষে ৬ অক্ষরের হওয়ার শর্ত রাখা হয়েছে।
৬. Show/Hide Password
- Show বাটনে ক্লিক করলে password দেখা যাবে।
- Hide করলে password আবার লুকিয়ে যাবে।
- JavaScript ব্যবহার করে এই সুবিধাটি তৈরি করা হয়েছে।
৭. Remember Me Option
Checkbox ব্যবহার করে Remember Me অপশন রাখা হয়েছে। ব্যবহারকারী চাইলে লগইন সংক্রান্ত তথ্য মনে রাখার সুবিধাটি ব্যবহার করতে পারবেন। এখানে এটি মূলত frontend demo হিসেবে রাখা হয়েছে; বাস্তব ব্যবহারের ক্ষেত্রে নিরাপদ authentication ব্যবস্থা আলাদাভাবে যুক্ত করতে হবে।
৮. Forgot Password Link
- Forgot Password লিংক রয়েছে।
- প্রয়োজন অনুযায়ী এই লিংকের সঙ্গে password reset পেজ বা অন্য কোনো ব্যবস্থা যুক্ত করা যাবে।
৯. Form Validation
JavaScript ব্যবহার করে প্রাথমিক কিছু validation করা হয়েছে। যেমন:
- Email খালি রাখা যাবে না।
- Password খালি রাখা যাবে না।
- Email সঠিক ফরম্যাটে হতে হবে।
- Password কমপক্ষে ৬ অক্ষরের হতে হবে।
১০. Success ও Error Message
- ভুল input দিলে error message দেখানোর ব্যবস্থা রয়েছে।
- সঠিক input দিলে success message দেখানো যায়।
- Message area JavaScript-এর মাধ্যমে পরিবর্তন করা হয়।
১১. Modern UI
- Rounded corners
- Soft shadow
- Gradient background
- Hover effect
- Focus effect
- পরিষ্কার input field
১২. Button Hover Effect
- Login button-এ hover করলে এর appearance পরিবর্তিত হয়।
- এর ফলে ব্যবহারকারীর কাছে button-এর interactive state সহজে বোঝা যায়।
১৩. Accessibility
- Input field-এর সঙ্গে label ব্যবহার করা হয়েছে।
- Label এবং input-এর মধ্যে সম্পর্ক রাখা হয়েছে।
- Placeholder ব্যবহার করা হয়েছে।
- ফর্মটি keyboard ব্যবহার করেও পরিচালনা করা যায়।
১৪. Customization সহজ
- প্রয়োজন অনুযায়ী color পরিবর্তন করা যায়।
- Text পরিবর্তন করা যায়।
- Layout নিজের প্রজেক্টের সঙ্গে মিলিয়ে পরিবর্তন করা সম্ভব।
- প্রয়োজন অনুযায়ী backend যুক্ত করা যাবে।
১৫. Backend যুক্ত করার সুবিধা
বর্তমান ডেমোটি মূলত frontend-এর জন্য তৈরি। বাস্তব লগইন সিস্টেম তৈরি করতে চাইলে এর সঙ্গে আপনার প্রয়োজন অনুযায়ী backend ও authentication ব্যবস্থা যুক্ত করতে হবে। যেমন:
- PHP
- Node.js
- Firebase
- Django
- Laravel
- API login system
- Database authentication
Animated Professional Login Form
Code Download: Animated Login Form
দ্বিতীয় ডিজাইনটি একটি animated login form। এখানে লগইন ফর্মের পাশাপাশি কিছু animation এবং visual effect ব্যবহার করা হয়েছে। প্রয়োজন অনুযায়ী এগুলো পরিবর্তন বা বাদ দেওয়া যাবে। নিচে এর উল্লেখযোগ্য ফিচারগুলো দেওয়া হলো।
UI এবং UX ডিজাইনের মধ্যে পার্থক্য: ২০২৬ সালের সম্পূর্ণ ও বিস্তারিত গাইড
ফিচার লিস্ট
- Single file: HTML, CSS এবং JavaScript একই ফাইলে রাখা হয়েছে।
- Smooth entry animation: পেজ লোড হওয়ার সময় login card-এর জন্য animation রয়েছে।
- Animated background: Gradient এবং floating blur shape-এর animation ব্যবহার করা হয়েছে।
- Glassmorphism card: Blur এবং soft border effect ব্যবহার করা হয়েছে।
- Input UI: Icon, focus effect এবং transition যুক্ত করা হয়েছে।
- Real-time validation: Email এবং password-এর প্রাথমিক validation করা হয়।
- Email validation: Email-এর format যাচাই করা হয়।
- Password validation: কমপক্ষে ৬ অক্ষরের password-এর শর্ত রাখা হয়েছে।
- Show/Hide password: Password দেখানো ও লুকানোর সুবিধা রয়েছে।
- Remember Me: Checkbox-এর মাধ্যমে Remember Me অপশন রয়েছে।
- Forgot Password: Password reset-এর জন্য একটি লিংক রাখা হয়েছে।
- Error message animation: ভুল input হলে error message দেখানোর ব্যবস্থা রয়েছে।
- Shake animation: ভুল data দিলে card-এ shake effect দেখা যায়।
- Loading spinner: Sign In চাপার পর loading animation দেখানোর ব্যবস্থা রয়েছে।
- Success state: সফল অবস্থার জন্য button-এর আলাদা state রাখা হয়েছে।
- Mobile responsive: ছোট স্ক্রিনের জন্যও layout মানিয়ে নেওয়ার ব্যবস্থা রয়েছে।
- Reduced motion support: ব্যবহারকারী motion কমানোর preference ব্যবহার করলে animation সীমিত বা বন্ধ রাখার ব্যবস্থা রয়েছে।
শেষ কথা
একটি লগইন ফর্ম তৈরি করার সময় শুধু দেখতে সুন্দর হলেই যথেষ্ট নয়। ব্যবহারকারীর জন্য ফর্মটি কতটা সহজ, পরিষ্কার এবং ব্যবহারযোগ্য—সেটিও গুরুত্বপূর্ণ। উপরের দুটি ডিজাইন মূলত frontend demo হিসেবে ব্যবহার করা যেতে পারে। আপনার প্রজেক্টের প্রয়োজন অনুযায়ী এগুলোর রং, layout, input field, validation এবং অন্যান্য অংশ পরিবর্তন করা সম্ভব।
তবে বাস্তব ওয়েবসাইটে ব্যবহার করার আগে অবশ্যই নিরাপদ backend authentication, password handling, session management এবং প্রয়োজনীয় security ব্যবস্থা যুক্ত করতে হবে। শুধুমাত্র frontend validation-এর ওপর নির্ভর করে কোনো বাস্তব লগইন সিস্টেম পরিচালনা করা উচিত নয়।
