Advertisement
  1. Web Design
  2. UI Design

কিভাবে আপনার ওয়েবসাইট গোল্ডেন রেশিও দিয়ে আরও কার্যকর ও সুন্দর বানাবেন 

Scroll to top
Read Time: 4 min

Bengali (বাংলা) translation by Bint Salim (you can also view the original English article)

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

গোল্ডেন রেশিও কি? 

গোল্ডেন রেশিও হচ্ছে একটি গাণিতিক অনুপাত, সাধারণভাবে প্রকৃতিতে খুঁজে পাওয়া যায়, এবং উচ্চমানের ডিজাইন তত্বে ভারসাম্যপূর্ণ কম্পজিসানে ব্যাবহার করা হয় ।   এটা প্রায় ১.৬১৮০ এর সমান, এবং "সোনালী গড়", ও "সোনালী বিভাগ" হিসেবেও সুপরিচিত। গ্রীক অক্ষর ফাই “ϕ” দ্বারা এর বর্ণনা করা হয়ে থাকে।

একটি "সোনালী আয়তক্ষেত্র" হচ্ছে এমন একটি আয়তক্ষেত্র যার দৈর্ঘ্য প্রস্থের তুলনায় ১.৬১৮০ গুন বেশী। উদাহরণস্বরূপ, একটি div যার এক পার্শ্ব 300px এবং অন্য পার্শ্ব 300 * 1.6180 ≈ 485px যাকে একটি সোনালী আয়তক্ষেত্র বলা যেতে পারে।

আপনি যদি সোনালী আয়তক্ষেত্র থেকে একটি নিখুঁত বর্গ কেটে নেন, তবুও আপনি আরেকটি সোনালী আয়তক্ষেত্র পাবেন।

আপনি ছোট আয়তক্ষেত্রের বেলায় একই কাজ করতে পারেন, তারপর আবার একই, অনির্দিষ্টকালের জন্য এটা চলতে পারে, যা আপনাকে নীচের এই পরিচিত চিত্রটি প্রদান করবে:

ফিবোনাসি ক্রম

ফিবোনাসি ক্রম সোনালী অনুপাতের অনুরূপ, কিন্তু ঠিক একই রকম নয়। এটা একটি সংখ্যার ধারা যেখানে পরবর্তী  ক্রমিক সংখ্যাটি হলো পূর্ববর্তী সংখ্যা দুটির যোগফল। উদাহরণস্বরূপ: ০,১,১,২,৩,৪,৭

যদি আমরা একটি নিখুঁত বর্গক্ষেত্র দিয়ে শুরু করি, তাহলে এর সাথে আরেকটি যোগ করলেই আমরা একটি আয়তক্ষেত্র পেতে পারি:

সর্বাধিক দৈর্ঘ্য বরাবর বর্গ যোগ করতে হবে

তারপর আমরা মোট আকৃতির দীর্ঘতম দৈর্ঘ্যের সমান অনুপাতে আরেকটি বর্গ যোগ করি:

তারপর আবার এবং আবার:

এটি অনির্দিষ্টকালের জন্য হতে পারে, সোনালী আয়তক্ষেত্রের মত আমাদেরকে একই প্রভাব প্রদান করে, কিন্তু এই সময়ে আমরা কাটার পরিবর্তে তৈরি করছি। সোনালী অনুপাত এবং ফিবোনাসি ক্রম উভয়টিই আমাদেরকে দেখতে প্রায় এক রকম অনুপাত প্রদান করে।

আসুন এখন কিছু ওয়েবসাইট বিশ্লেষণ করি যেখানে আমরা কার্যে তাদের ব্যবহার দেখতে পাবো।

উদাহরণ # ১: YStudio

yourlocalstudio.dk

ওয়েবসাইটটি কিসের?

“Your Local Studio” টি হচ্ছে ডেনমার্কের কোপেনহেগেন ভিত্তিক একটি ডিজাইন ও ডেভেলপমেন্ট স্টুডিও। তাঁরা বিভিন্ন চাক্ষুষ ধারণা নিয়ে কাজ করতে বিশেষজ্ঞ যা পরিবেশগত উন্নয়ন ঘটাতে সহায়তা করে।

কিভাবে এটা সোনালী গড় ব্যবহার করেছে

এখানে ওয়েবসাইটটি তাঁর তিনটি পৃষ্ঠা থেকে দুটিতে সোনালী গড় ব্যবহার করেছে। হোমপেইজের মাধ্যমে সেরা কাজগুলো সম্পর্কে ধারণা দেয়া হয়েছে। যাইহোক, যখন আপনি স্টুডিও পেইজে যাবেন তখন স্ক্রল করে নীচে নামলে দেখতে পাবেন যে, এখানে সোনালী গড়ের আয়তক্ষেত্রের সাথে সাথে ঐতিহ্যগত ওয়েব লেআউটের মিশ্রণ ঘটানো হয়েছে।

কেন এটা কার্যকরী?

অনেকের ভিড়ে মানুষের দৃষ্টি আকর্ষণ করতে চান? Yourlocalstudio (YLS) তাদের ওয়েবসাইটে সোনালী অনুপাত ব্যবহার করে ঠিক এই কাজটিই করেছে। এই ডিজাইনের বৈশিষ্ট্য হচ্ছে নির্দিষ্ট গ্রিড সিস্টেমের সাথে একটি প্রগতিশীল চেহারা প্রদান করা। আপনি হয়তো অভিযোগ করবেন যে আজকাল সবকিছুই বুটস্ট্র্যাপের মত দেখায়.. তাই, আরও গতিশীল ও বিন্যাস্ত লেআউট যা সহজেই মানুষের মনোযোগ কেড়ে নিতে পারে এমন ওয়েবসাইট তৈরি করতে সজাগ দৃষ্টি রাখুন।

উদাহরণ # ২: Mashable

mashable.com

ওয়েবসাইটটি কিসের?

ম্যাশেবল হচ্ছে একটি খবরের ওয়েবসাইট; একটি তথ্য ভান্ডার, যা "সংযুক্ত প্রজন্মের" জন্য জ্ঞান এবং সম্পদ।

যেভাবে এটি সোনালী গড় ব্যবহার করেছে

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

কেন এটা কার্যকরী

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

উদাহরণ # ৩: Jackson & Kent

www.jandk.fr

ওয়েবসাইট টি কিসের?

Jackson & Kent হচ্ছে ফ্রান্সের একটি ওয়েব প্রোডাকশন এজেন্সি। তারা বিভিন্ন ডিজিটাল সার্ভিস যেমন,  HTML5, CSS3, Drupal, Wordpress, PHP/MySQL, Flash ইত্যাদিতে দক্ষ।

কিভাবে এটি সোনালী গড় ব্যবহার করে

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

কেন এটা কার্যকর

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

পরিশিষ্ট

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.