AI দিয়ে সুন্দর দেখতে অ্যাপ কীভাবে ডিজাইন করবেন

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

AI-র ডিজাইন কেন সাধারণ লাগে

AI-কে "একটা আধুনিক, পরিষ্কার SaaS ড্যাশবোর্ড" চাইলে সে যেসব ড্যাশবোর্ড দেখেছে তার পরিসংখ্যানগত মাঝামাঝি রূপটাই দেয়: একই সান-সেরিফ ফন্ট, বেগুনি থেকে নীল গ্রেডিয়েন্ট, নরম ছায়াসহ গোলাকার কার্ড, বৃত্তের ভেতরে ইমোজির মতো আইকন, আর মাঝখানে লেখা "আপনার ওয়ার্কফ্লো, সহজ করা"। এর কোনোটিই আলাদাভাবে ভুল নয়। সমস্যা হলো এগুলোর কোনোটিই আপনার প্রোডাক্টের জন্য বাছা হয়নি।

ভালো ডিজাইন মূলত সিদ্ধান্তের সমষ্টি। আপনার কাজ হলো অ্যাপকে চরিত্র দেয় এমন হাতে গোনা কয়েকটা সিদ্ধান্ত নেওয়া, আর বাকি হাজারো ছোট সিদ্ধান্ত AI-কে ধারাবাহিকভাবে করতে দেওয়া।

ধাপ ১: প্রম্পটের আগে রেফারেন্স জোগাড় করুন

আপনার প্রোডাক্টের সঙ্গে মানানসই লুকের দুই থেকে চারটি রেফারেন্স খুঁজতে বিশ মিনিট দিন। অ্যাপ বা ওয়েবসাইট, যেগুলো আপনার দর্শকরা ইতিমধ্যে ব্যবহার করে, ডিজাইন গ্যালারি, আর কাছাকাছি ক্ষেত্রের কোম্পানির সাইট ভালো উৎস।

প্রতিটির জন্য সাধারণ ভাষায় লিখে রাখুন আপনার কোন জিনিসটি পছন্দ:

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

এরপর এই বর্ণনাগুলো AI-কে দিন, আর আপনার টুল ছবি নিলে স্ক্রিনশটও যুক্ত করুন। অনুপ্রেরণা নিন গুণাবলি থেকে, প্রোডাক্ট থেকে নয়: অন্য কোম্পানির লেআউট, ব্র্যান্ডিং বা লেখা হুবহু নকল করা আইনি ও বিশ্বাসযোগ্যতা, দুদিক থেকেই ঝুঁকিপূর্ণ।

ধাপ ২: একটা ডিজাইনের দিক বেছে নিন ও নাম দিন

একটা দিক হলো অনুভূতির একটা ছোট বর্ণনা। এটি AI-কে প্রতিটি সিদ্ধান্তের জন্য একটা ছাঁকনি দেয়। কয়েকটি ভালো কাজ করে এমন দিক:

প্রথম প্রম্পটে এটি রাখুন, সঙ্গে অ্যাপটি কাদের জন্য তাও লিখুন:

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

ধাপ ৩: নিয়ম ঠিক করুন — টাইপ, রঙ ও স্পেসিং

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

টাইপোগ্রাফি

• এক বা দুটো টাইপফেস। একটা হেডিং ফেস আর একটা মূল লেখার ফেস, অথবা একটা পরিবারের কয়েকটি ওজন।
• একটা টাইপ স্কেল। কয়েকটি আকার নিয়মিতভাবে ব্যবহার করুন, যেমন ১৪, ১৬, ২০, ২৮ আর ৪০ px, যেকোনো কম্পোনেন্টের নিজের ইচ্ছামতো আকার নয়।
• পড়ার উপযোগী মূল লেখা। ওয়েবে প্রায় ১৬ px, লাইন হাইট প্রায় ১.৫, আর দীর্ঘ লেখার জন্য প্রতি লাইনে প্রায় ৬০–৭৫ অক্ষর।
• ওজন ও আকার দিয়ে ক্রম, রঙ দিয়ে নয়। হেডিং বড় ও গাঢ়; গৌণ লেখা ছোট ও নরম ধূসর।

রঙ

• বেশিরভাগ নিরপেক্ষ রং। ব্যাকগ্রাউন্ড, পৃষ্ঠতল, বর্ডার আর লেখার ধূসর রংই বেশিরভাগ কাজ করে।
• একটা অ্যাকসেন্ট রং কাজের বোতাম ও নির্বাচিত অবস্থার জন্য। দ্বিতীয়টি তখনই, যখন তার স্পষ্ট কাজ থাকে।
• সেমান্টিক রং সাফল্য, সতর্কতা আর ত্রুটির জন্য, এবং শুধু সেগুলোর জন্যই ব্যবহার করুন।
• কনট্রাস্ট। WCAG 2 সাধারণ মূল লেখার জন্য কমপক্ষে ৪.৫:১ আর বড় লেখার জন্য ৩:১ কনট্রাস্ট রেশিও চায়। সাদার ওপর হালকা ধূসর লেখা প্রায়ই ব্যর্থ হয়; AI-কে যাচাই করতে বলুন।
• ডার্ক মোড, যদি চান, তবে উল্টে না দিয়ে ইচ্ছা করে ডিজাইন করা।

স্পেসিং ও লেআউট

• একটা স্পেসিং স্কেল, যেমন ৪, ৮, ১২, ১৬, ২৪, ৩২, ৪৮, ৬৪ px। সবকিছু এর সঙ্গে মিলে বসে।
• সারিবদ্ধতা। কিনারাগুলো মেলে; কনটেন্ট একটা গ্রিডে বা ধারাবাহিক সর্বোচ্চ প্রস্থের কলামে বসে।
• কাছাকাছি থাকা। সম্পর্কিত জিনিস কাছাকাছি, অসম্পর্কিত জিনিস দূরে। এই একটি নিয়মই বেশিরভাগ ঠাসা স্ক্রিন ঠিক করে।
• কম কন্টেইনার। সবকিছুর জন্য কার্ড লাগে না। বর্ডার, ডিভাইডার আর সাদা জায়গা অনেক সময় আরও শান্তভাবে কনটেন্ট ভাগ করে।

একবার সিস্টেমটি সেট করার জন্য একটা প্রম্পট:

আরও স্ক্রিন বানানোর আগে একটা ছোট ডিজাইন সিস্টেম সেট করো এবং সবখানে ব্যবহার করো: টাইপ স্কেল ১৪/১৬/২০/২৮/৪০ px, মূল লেখার লাইন হাইট ১.৫, স্পেসিং স্কেল ৪/৮/১২/১৬/২৪/৩২/৪৮ px, প্রায়-সাদা থেকে প্রায়-কালো পর্যন্ত নিরপেক্ষ রং, মূল কাজের বোতামের জন্য একটাই অ্যাকসেন্ট রং (#3F6B5A), আর ত্রুটির জন্য শুধু লাল। বোতাম, ইনপুট ও কার্ডের বর্ডার রেডিয়াস একই হবে। সব লেখা WCAG AA কনট্রাস্ট মানে পৌঁছায় কি না যাচাই করো।

কোড-সচেতন বিল্ডারে এটি সাধারণত ডিজাইন টোকেনে পরিণত হয়, যেমন CSS ভেরিয়েবল বা Tailwind থিম, যার মানে পরের পরিবর্তনগুলো একটাই জায়গায় হয়।

ধাপ ৪: আগে একটা স্ক্রিন ঠিকভাবে বানান

বারোটা স্ক্রিন একসঙ্গে তৈরি করে তারপর সবগুলো ঠিক করার চেষ্টা করবেন না। ব্যবহারকারীরা সবচেয়ে বেশি যে স্ক্রিন দেখে সেটি বাছুন, প্রায়ই ড্যাশবোর্ড বা প্রধান তালিকা, এবং ঠিক না হওয়া পর্যন্ত উন্নতি করুন। তারপর:

বাকি সব পেজের জন্য ড্যাশবোর্ডকে রেফারেন্স হিসেবে ব্যবহার করো: একই হেডার, স্পেসিং, টাইপের আকার, বোতামের স্টাইল আর টেবিলের স্টাইল। সেটিংস ও বুকিং পেজ সেটির সঙ্গে মিলিয়ে আপডেট করো।

একটা সম্পূর্ণ রেফারেন্স স্ক্রিন আপনার রুচি যে কোনো বিশেষণের চেয়ে ভালোভাবে বোঝায়।

ধাপ ৫: নির্দিষ্ট, ছোট অনুরোধে বারবার উন্নতি করুন

AI-কে ফিডব্যাক দেওয়া একজন জুনিয়র ডিজাইনারকে ফিডব্যাক দেওয়ার মতো: নির্দিষ্ট, একবারে একটি অংশ নিয়ে, আর কী রাখতে হবে সে বিষয়ে স্পষ্ট।

সবসময় যা রাখতে হবে তাও লিখুন, যেমন "সব রুট, কপি আর ফিচার একই রাখো", যাতে একটা ভিজ্যুয়াল পাসে কার্যকারিতা চুপচাপ সরে না যায়। আর পরের অনুরোধের আগে প্রতিটি পরিবর্তন ফোন-আকারের স্ক্রিনে দেখে নিন; ছোট স্ক্রিনে ভালো কেমন দেখায় তা জানতে দেখুন কীভাবে মোবাইল-বান্ধব ওয়েব অ্যাপ বানাবেন।

ধাপ ৬: ভালো থেকে সাধারণকে আলাদা করে যে খুঁটিনাটি

কাঠামো ঠিক হওয়ার পর এই ছোট জিনিসগুলো অ্যাপকে সম্পূর্ণ মনে করায়:

• খালি অবস্থা। নতুন ব্যবহারকারী কোনো ডেটা না থাকলে যা দেখেন: একটা সংক্ষিপ্ত ব্যাখ্যা আর একটা স্পষ্ট কাজ, ফাঁকা টেবিল নয়।
• লোডিং অবস্থা। কনটেন্টের আকারে স্কেলেটন, সবখানে স্পিনার নয়।
• ত্রুটির অবস্থা। যে ফিল্ডের কারণে ত্রুটি, তার পাশে সাধারণ ভাষায় বার্তা।
• প্রতিটি ইন্টারঅ্যাক্টিভ উপাদানে হোভার, ফোকাস ও চাপা অবস্থা। কিবোর্ড ব্যবহারকারীদের জন্য ফোকাস রিং গুরুত্বপূর্ণ।
• আসল কনটেন্ট। "Lorem ipsum" আর "John Doe"-র বদলে বাস্তবসম্মত লেখা ও ডেটা দিন; প্লেসহোল্ডার কনটেন্ট লেআউটের সমস্যা লুকিয়ে রাখে।
• একই সেটের আইকন, এক বা দুই আকারে, ধারাবাহিক স্ট্রোক প্রস্থসহ।
• উদ্দেশ্যসহ ছবি। আপনার প্রোডাক্ট, জায়গা বা মানুষের আসল ছবি সাধারণ স্টক ছবির চেয়ে ভালো। স্টক বা তৈরি করা ছবি ব্যবহার করলে একটা ধারাবাহিক স্টাইল রাখুন।
• কপি। ছোট, নির্দিষ্ট লেবেল ("ক্লাস বুক করুন", "Submit" নয়) যেকোনো রঙের পছন্দের মতোই অনুভূত মানে বাড়ায়।

সাধারণ ভুলগুলো

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

ডিজাইনের বাইরের আরও প্রম্পট ধরন জানতে পড়ুন AI অ্যাপ বিল্ডারের জন্য প্রম্পট কীভাবে লিখবেন। আপনার কাজ যদি প্রোডাক্টই হয়, যেমন ডিজাইন বা ফটোগ্রাফির পোর্টফোলিও, তবে কীভাবে একটা পোর্টফোলিও ওয়েবসাইট বানাবেন উপস্থাপনা নিয়ে আরও গভীরে যায়।

Mythex-এ ডিজাইন করা

Mythex-এ চ্যাটে ডিজাইন বর্ণনা করুন, লাইভ প্রিভিউতে দেখুন, আর পরের পরিবর্তনের আগে ফোনের আকারের ফ্রেম যাচাই করুন। ডকসে এর জন্য ছোট প্যাটার্ন আছে: ডিজাইন ও UI প্রম্পট কী বদলাতে হবে আর কী রাখতে হবে তা নামকরণের বিষয়ে, আর আপনার UI নতুন করুন ফিচার না হারিয়ে একবারে একটি পেজ তাজা করার জন্য। Mythex চ্যাটেই স্টক ছবি খুঁজতে বা একটা ছবি তৈরি করতে পারে, যেমন হিরো ছবি, ব্যাকগ্রাউন্ড বা শেয়ার ছবি, আর আপনি চাইলে সেটি অ্যাপে বসায়। কোনো পাস ভুল হলে তার আগের চেকপয়েন্টে ফিরে যান। যদি বিদ্যমান ডিজাইন থেকে শুরু করে সমন্বয় করতে চান, টেমপ্লেট দেখুন।

প্রশ্নোত্তর