প্রোগ্রামার এবং ডেভেলপাররা সাধারণত ডিজাইনার নন - এটি সত্য বলে ব্যাপকভাবে গৃহীত হয়। বিকাশকারীরা একটি অ্যাপ কাজ তৈরিতে ফোকাস করে – ডিজাইনাররা অ্যাপটিকে নান্দনিকভাবে আকর্ষণীয় করার দিকে মনোনিবেশ করেন . কিন্তু কেন ডেভেলপাররা একই কাজ করতে পারে না?
আগের দিনে, যখন অ্যানিমেটেড স্প্ল্যাশ ল্যান্ডিং পেজ এবং অভিনব লেআউটগুলি একটি জিনিস ছিল, তখন নিশ্চিতভাবে, একজন পেশাদার ডিজাইনার নিয়োগ করা বোধগম্য ছিল। কিন্তু প্রবণতা আজ ন্যূনতম – অথবা অন্তত ব্যাপকভাবে সরলীকৃত।
আমি আপনাকে একটি গল্পের উদাহরণ দিই - কিছুক্ষণ আগে, কেউ আমাকে তাদের পিসি সফ্টওয়্যারের জন্য একটি স্প্ল্যাশ স্ক্রিন তৈরি করতে বলেছিল। তাই আমি পুরোটাই বেরিয়ে এসেছি - স্কেচ পেপারে এটি আঁকলাম, ফটোশপে আমদানি করলাম, প্রচুর অভিনব নিয়ন লাইন এবং প্রভাব তৈরি করলাম। এটি স্প্ল্যাশ স্ক্রীনের পরিবর্তে একটি ডেস্কটপ ওয়ালপেপার হতে পারে। মূল বিষয় হল আমি তাদের জন্য এই অভিনব এবং বিস্তৃত ডিজাইন তৈরি করেছি।
আপনি সম্ভবত অনুমান করতে পারেন, তারা এটি পছন্দ করেনি। তারা যে নকশাটি নিয়ে গিয়েছিল তা ছিল আক্ষরিক অর্থে কয়েকটি ওভারল্যাপ করা রঙিন বৃত্তের একটি ছোট লোগো এবং এর নীচে সফ্টওয়্যারের নাম। যেমন, ফটোশপের চাকরিতে ২ মিনিট। এবং আপনি কি জানেন? আমাকে এক প্রকার সম্মত হতে হয়েছিল যে এটি আমার চেয়ে ভাল ছিল।
আমি যে বিন্দুটি তৈরি করছি তা হল - আমি মনে করি প্রোগ্রামাররা আমি যে ভুলটি করেছি সেই ভুল করার ফাঁদে পড়ে। আমরা UI এবং স্প্ল্যাশ স্ক্রিনগুলির কথা ভাবি যা এইগুলি সত্যিই অভিনব, নজরকাড়া জিনিসগুলি হওয়া দরকার যা অ্যাপটিকে অন্যতর করে তোলে . কিন্তু তাদের হতে হবে না - সত্যই, তাদের হওয়া উচিত নয়। আমাদের একটি প্রোগ্রামারের নেওয়া উচিত মানসিকতা এবং এটি নান্দনিক ডিজাইনে প্রয়োগ করুন – সরল, কার্যকরী, কাজ।
এই নিবন্ধে, আমরা একটি মার্জিত Android APP UI / UX তৈরি করার কিছু খুব সহজ উপায় দেখব, এমনকি আপনার প্রায় কোনও ডিজাইনিং অভিজ্ঞতা না থাকলেও৷
যদি না আপনি সত্যিই অন্য কিছু চান, মেটেরিয়াল ডিজাইনে লেগে থাকুন
আপনার অ্যাপটিকে "অনন্য" হতে হবে না এবং "বাকিদের থেকে আলাদা" ৷ এটি জনপ্রিয় হতে এবং ভাল দেখতে। এটিই Google এর মেটেরিয়াল ডিজাইন অর্জনের জন্য সেট করেছে – সমগ্র শিল্প জুড়ে অ্যাপ UI এর জন্য একটি মানক, এবং তারা একটি ভাল কাজ করেছে। সেখানে অনেক জনপ্রিয় অ্যাপ রয়েছে যা মেটেরিয়াল ডিজাইনের সাথে লেগে আছে – কিছু নাম বলতে গেলে Android অ্যাপের মধ্যে সবচেয়ে বড় নাম, যেমন SwiftKey, Nova Launcher, Textra SMS, YouTube।
মেটেরিয়াল ডিজাইনের মূল ফোকাস একটি কার্ড-ভিত্তিক লেআউটে, একটি কঠিন রঙের প্যালেট সহ। Google শীর্ষস্থানীয় শিল্প ডিজাইনারদের সাথে কাজ করেছে, ন্যূনতম ডিজাইনের অনুশীলনগুলি থেকে অনেক উপাদান অঙ্কন করেছে, এবং তারপরে সম্পূর্ণ জিনিসটি বিনামূল্যে প্রকাশ করেছে - এটি একটি খুব ভাল চুক্তি, যেহেতু ওয়েবসাইট এবং অ্যাপ ডিজাইন কোর্সগুলি ই-বুক, ভিডিওগুলির জন্য শত শত ডলার চালাতে পারে, ইত্যাদি।
মেটেরিয়াল ডিজাইনের সাথে শুরু করা অবিশ্বাস্যভাবে সহজ, এবং এটিকে আরও সহজ করে তোলে এমন কিছু সরঞ্জাম রয়েছে, যা আমরা নীচে তালিকাভুক্ত করব:
- মেটেরিয়াল থিম এডিটর (macOS + স্কেচ)
- মেটেরিয়াল ডিজাইন কালার প্যালেট প্লাগ-ইন (ফটোশপ / ইলাস্ট্রেটর)
- মেটেরিয়াল ডিজাইন ইউআই কিট পিএসডি (ফটোশপ)
- অ্যান্ড্রয়েড মেটেরিয়াল ডিজাইন UI কিট (স্কেচ)
- মেটেরিয়াল UI থিম জেনারেটর
এবং যদি আপনার সহজ, মার্জিত মেটেরিয়াল ডিজাইন থিম তৈরি করার জন্য কিছু অনুপ্রেরণার প্রয়োজন হয়, তাহলে এই তালিকা ব্লগগুলি দেখুন:
- MaterialDesignBlog – ম্যাটেরিয়াল ডিজাইনের 15টি দুর্দান্ত উদাহরণ সঠিকভাবে করা হয়েছে
- মকপ্লাস – অনুপ্রেরণা আঁকার জন্য 12টি সেরা উপাদান ডিজাইন ওয়েবসাইট উদাহরণ
- AndroidAuthority – Android এর জন্য 10টি সেরা মেটেরিয়াল ডিজাইন অ্যাপ
রঙের গ্রেডিয়েন্টগুলি আপনার ধারণার চেয়ে অনেক সহজ
মেটেরিয়াল ডিজাইনের বিকল্পের জন্য, ডলোর গ্রেডিয়েন্ট সহজ, ট্রেন্ডি এবং নজরকাড়া। এবং আপনি ভাবতে পারেন যে ডিজাইনাররা সমস্ত রঙে পেইন্টিং বা চূড়ান্ত গ্রেডিয়েন্ট ডিজাইন করতে অনেক সময় ব্যয় করে। আপনি ভুল হবেন - এটি ফটোশপে 10 সেকেন্ডের মধ্যে করা যেতে পারে।
এটি কতটা সহজ তা দেখানোর জন্য আমি আপনাকে এর মধ্য দিয়েও হাঁটব৷
৷মোবাইলের জন্য একটি নতুন PS প্রকল্প তৈরি করুন (1080 x 1920 px @ 72 ppi ভাল কাজ করে)
UIGradients.com এ যান এবং আপনার পছন্দের কিছু খুঁজুন।
পূর্বরূপের উপরে থেকে গ্রেডিয়েন্ট রঙগুলি অনুলিপি করুন৷
৷
PS-এ একটি খালি স্তরে ডান-ক্লিক করুন এবং ব্লেন্ডিং অপশন> গ্রেডিয়েন্ট ওভারলে-এ যান।
ড্রপ-ডাউন মেনুতে গ্রেডিয়েন্ট প্যাটার্ন প্রিভিউতে সরাসরি ক্লিক করুন - ড্রপডাউন বোতামে ক্লিক করবেন না। গ্রেডিয়েন্টে সরাসরি ক্লিক করলে কালার এডিটর খোলে।
এখন শুধু ইউআইগ্রেডিয়েন্ট থেকে পিএস গ্রেডিয়েন্ট এডিটরে কালার হেক্স মান পেস্ট করুন।
প্রয়োজন অনুযায়ী সামঞ্জস্য করুন। আপনার অ্যান্ড্রয়েড অ্যাপের জন্য এখন আপনার কাছে একটি পেশাদার গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড রয়েছে৷
৷চেক আউট করার মতো অন্যান্য গ্রেডিয়েন্ট টুলস:
- WebGradients.com
- অ্যান্ড্রয়েড শেপস জেনারেটর (XML এর মাধ্যমে আকার তৈরি করার জন্য, গ্রেডিয়েন্টের বিকল্প সহ)
JPG / PNG এর পরিবর্তে SVG ব্যবহার করুন
আপনার গ্রাফিকাল উপাদানগুলির (বোতাম, লোগো, ইত্যাদি) জন্য PNGs বা JPGs ব্যবহার করার পরিবর্তে আপনার সত্যিই SVGs ব্যবহার করা উচিত (স্কেলযোগ্য ভেক্টর গ্রাফিক্স) পরিবর্তে. এর কারণ হল SVG গুলি গুণমান না হারিয়েই আকার পরিবর্তন করা যেতে পারে - উদাহরণস্বরূপ, আপনি যদি একটি JPG কে বড় মান পর্যন্ত আপস্কেল করেন তবে এটি গুণমান হারায় এবং ঝাপসা/পিক্সেলেট হয়ে যায়। একটি SVG করে না। লোকেরা বিশাল PNG ফাইলগুলি ব্যবহার করার চেষ্টা করে যেগুলি ডাউনস্কেল করা হবে৷ অ্যান্ড্রয়েড স্ক্রীনের সাথে মানানসই করতে - যখন পরিবর্তে, আপনি ছোট SVG ব্যবহার করতে পারেন যেগুলি উন্নত মানের কোন ক্ষতি ছাড়াই।
অধিকন্তু, SVGs PNG এর তুলনায় ফাইলের আকারে 60% থেকে 80% পর্যন্ত ছোট হতে পারে . এর মানে হল আপনার অ্যাপ বা মোবাইল ওয়েবসাইট ব্যবহারকারীর জন্য দ্রুত লোড হবে এবং স্ক্রিন রেজোলিউশন যাই হোক না কেন দেখতে ভালো দেখাবে।
থিম ব্যবহার করে একটি ডার্ক মোড অন্তর্ভুক্ত করুন।AppCompat.DayNight
আপনার অ্যাপে একটি অন্ধকার/নাইট মোড থিম অন্তর্ভুক্ত করার জন্য আপনাকে দুটি পৃথক থিম ডিজাইন করতে হবে না। এটি অনেকটা AppCompat লাইব্রেরিতে তৈরি, আপনাকে শুধু এটি সক্ষম করতে হবে এবং মানগুলি সম্পাদনা করতে হবে৷
Appual-এর নির্দেশিকা "কিভাবে আপনার Android অ্যাপে একটি ডার্ক মোড প্রয়োগ করবেন" দেখুন।
একটি টেমপ্লেট বা মোবাইল UI কিট ব্যবহার করুন
যদি আপনার অ্যাপটি একটি অভিনব, কাস্টমাইজড GUI এর জন্য কল না করে, তাহলে একটি টেমপ্লেট বা কিট ব্যবহারে একেবারেই ভুল নেই। টেমপ্লেট এবং কিটগুলি একটি অনুপ্রেরণামূলক নির্দেশিকা হিসাবে ব্যবহার করা যেতে পারে, অথবা আপনি আক্ষরিক অর্থে শুধুমাত্র টেমপ্লেট/কিটটি যেমন আছে তেমন ব্যবহার করতে পারেন, আপনার নিজের বোতাম এবং স্টাফ যোগ করে৷
Android UI টেমপ্লেট এবং কিটগুলির জন্য কিছু দুর্দান্ত সংস্থান:
- SpeckyBoy – iOS এবং Android এর জন্য 50টি বিনামূল্যের মোবাইল UI কিট
- SketchAppSources – Android UI অ্যাপ রিসোর্স (স্কেচ)
- ফ্রিবিসবাগ – PSD UI কিটস (ফটোশপ)
