Design Principles
আমরা জানি,
গ্রাফিক্স ডিজাইন এর ক্ষেত্রে, গ্রাফিক্স এর মধ্যে ৮ টি ডিজাইন প্রিন্সিপাল ঠিক আছে কিনা বা ভিজুয়েল ইলিমেন্টস দ্বারা তৈরি কৃত গ্রাফিক্স বা আর্ট এর ( Functional- কার্যকারীতা ) ও ( Aesthetic- নান্দনিক/ অনুভব/ সৈন্দর্যবোধ সংক্রান্ত ) বিষয় গুলো ঠিক আছে কিনা সেটা চেক করাকে ডিজাইন বলে।
অথাৎ,
গ্রাফিক্স সফটওয়্যার বা বিভিন্ন গ্রাফিক্স টুল/ Ai দিয়ে যে আর্ট বা গ্রাফিক্স তৈরি করলেই কোন সমস্যার ভিজুয়েলি পরিপূর্ণ সমাধান হয় না, পরিপূর্ণ সমাধান হতে হলে অব্যশই ডিজাইন অংশের ৮ টি ডিজাইন প্রিন্সিপাল ঠিক আছে কিনা তা চেক করে নিতে হবে। আর আজকে আমরা সেই ৮ টি ডিজাইন প্রিন্সিপাল সম্পর্কে বিস্তারিত জানবো।
একটি ভালো ডিজাইন ও একটি খারপ ডিজাইন এর মধ্যে পার্থক্য সৃষ্টিকারী উপাদান গুলোকে ডিজাইন প্রিন্সিপাল বলে।
What is the reason behind the good & bad design?
নিচের ডিজাইন গুলো আগে দেখুন।
এবার সত্যি করে বলুন তো, এ ডিজাইন গুলো কি আপনার ভালো লেগেছে? নিশ্চই ভালো লাগেনি।
উপরের প্রথম ডিজাইন ডিজাইন গুলো ভালো লাগার কারণ হল ভালো লাগার উপাদান গুলো বিদ্যমান।
আর দ্বিতীয় ডিজাইন গুলো ভালো না লাগার কারণ হল , ভালো লাগার যে উপাদান প্রয়োজন তা এগুতে নেই। অথবা যে ম্যাসেজ বা ইনফরমেশন দিতে চাচ্ছে সেটি ক্লিয়ার নয়।
একটি ডিজাইন ভালো নাকি খারাপ সেটা যাচাই করার জন্য যে যে বৈশিষ্ঠ্য গুলো প্রতিটা ডিজাইনে থাকা উচিত সে বৈশিষ্ঠ্য গুলোকে বলা হয় Design Principles.
Design Principles গুলো কি ? কি ?
- Contrast
- Balance
- Hierarchy
- Alignment
- Proximity
- Repetition & Rhythm
- White space
- Simplicity
Contrast
What is Contrast?
কোন ডিজাইনে / কোন কিছুতে যদি highlight করতে হয়, তাহলে highlight করার জন্য আমরা যে ভিন্নতা (Differences) টা তৈরি করি তাকে Contrast বলে।
কোন কিছু আলাদা করার জন্য আমরা যে কাজটা করি সেটাই Contrast.
* Contrast এর কাজ হচ্ছে আমরা যখন কোন Sentence/Design এ কোন কিছুকে Extra ভাবে highlight করতে চাইলেই তখন যে জিনিসটা পরিবর্তন করে অথবা বাকি জিনিসের পরিবর্তন করে আমাদের টার্গেট Word/Design টা কে আলাদা করাই Contrast.
উদাহরণ গুলো দেখলে আরো ক্লিয়ার হয়ে যাবে।
উপরের কোন বৃত্ত টি আগে আপনার চোঁখে পড়েছে? নিশ্চই ডান দিগের বৃত্তটি। কারণ সেটার কালার পরিবর্তন করে highlight করা হয়েছে।
উপরের ছবির কোন লেখাটি টি আগে আপনার চোঁখে পড়েছে? নিশ্চই বাম দিগের লিখাটি। । কারণ বাম দিগের লেখাটি এবং ব্যাগ্রাউন্ডের কালার এমন ভাবে Contrast করা হয়েছে যতে সেটা সুন্দর দেখায় এবং লিখাটি highlight হয়। অন্যদিগে ডান দিগের ছবির লিখা এবং ব্যাগ্রাউন্ডের কালার একেবারে বাজে হয়েছে। ফলে লিখা তত টা বুঝা যাচ্ছে না।
উপরের ছবিতে লাল আপেল টা দিয়ে ভিন্ন তা আনা হয়েছে । নিশ্চই আপনার নজর সর্বপ্রথম লাল আপেল টা দিগে পরেছে। আর এভাবেই কালার পরিবর্তন করে Contrast করা হয়।
How does it work in design?
- To generate impact
- Making highlight
- Showing importance
- Create exciting graphics
- To keep interested
in article ad
Balance
What is Balance?
The visual weighting of a layout is called Balance.
কোন layout বা ডিজাইনের visual যে weight সেটাই Balance.
কোন ডিজাইন কে যদি মধ্যখান বরাবর দুইভাগ করা হয় তখন তার visual যে weight সেটা উভয় পাশে সমান হওয়া কে বা করা কে Balance বলে।
Balance কত প্রকার ও কি কি?
Balance ৩ প্রকার।
01/ Symmetrical balance ( formal balance)
02/ Asymmetrical balance ( informal balance)
03/ Radial balance
01. Symmetrical Balance ( Formal Balance )
What is symmetrical Balance ( formal Balance? )
When equal weights are on equal sides, then it's called Symmetrical Balance ( formal Balance? )
*উভয় পাশে, ডান দিগে - বাম দিগে বা উপরে - নিচে যে দিগে হোকনা কেন দুই পাশে আমরা একটা ডিজাইনকে যখন ভাগ করব, তখন ঐ ডিজাইনের দুটি ভাগ হবে বা দুই সাইড হবে। দুই সাইডে বা দুই পাশে equal weight বা visual যে weight যদি থাকে তখন তাকে আমরা Symmetrical Balance ( formal Balance? ) বলবো।
*উদাহরণ এর মাধ্যমে বিষয়টি বোঝা যাক:
উপরের সব গুলো চিত্র ভালোভাবে লক্ষ্য করুন। এ ডিজাইন গুলো যদি মধ্যখান বরাবর সমান ভাগ করা হয় তাহলে উভয়পার্শে সমান হবে। এর এটাকেই বলা হয় Symmetrical Balance ( formal Balance? ).
বিঃ দ্রঃ লিখার সময় উভয় পার্শে সমান লিখা এবং Paragraph এর ক্ষেত্রে পুরো Paragraph এ ফন্ট সাইজ একই রাখাও Symmetrical Balance ( formal Balance? ) এর অন্তর্ভূক্ত।
02. Asymmetrical Balance ( informal Balance )
What is asymmetrical Balance ( informal Balance? )
Unequal visual weight on each side of the composition.
একটি Design এর উভয়পাশে সমানভাবে যখন ওজন রক্ষা করা হবে, কিন্তু সমানভাবে ওজন রক্ষা করা সত্তেও দেখতে মনে হবে উভয়পাশ সমান নয়, তখন সেটাকে বলে Asymmetrical Balance (informal Balance).
*সহজ কথায়ঃ ডিজাইনের দুই পাশে দেখতে হয় তো একই রকম না, কিন্তু ব্যালেন্স ঠিক থাকবে।
*উদাহরণ এর মাধ্যমে বিষয়টি বোঝা যাক:
উপরের সব গুলো চিত্র ভালোভাবে লক্ষ্য করুন। এ ডিজাইন গুলো দেখতে যদিও সমান মনে হয় না । কিন্তু যদি মধ্যখান বরাবর সমান ভাগ করা হয় তাহলে উভয়পার্শে সমান হবে। এর এটাকেই বলা হয় Asymmetrical Balance (informal Balance).
02. Radial Balance
What is Radial Balance?
When elements radiate from a common center that is Radial Balance.
Desin এর Elements গুলো যখন একটি নির্দিষ্ট সেন্টার হতে বা মাঝখান থেকে শুরু হয় তখন সেটা কে Radial Balance বলে।
মাঝ বরাবর কোন ডিজাইন যখন তৈরি হয়, সে ডিজাইনটা মাঝখান থেকে ছোট থেকে বড় হতে হতে উভয় পাশে সমান হয় তখন তাকে Radial Balance বলে।
*উদাহরণ এর মাধ্যমে বিষয়টি বোঝা যাক:
উপরের সব গুলো চিত্র ভালোভাবে লক্ষ্য করুন। এ ডিজাইন গুলো একটি নির্দিষ্ট কেন্দ্রকে বা মধ্যখান কে কেন্দ্র করে চতুর্দিগে সমান হয়ে ছোট থেকে বড় হয়েছে । চতুর্দিগ সমান রয়েছে। আর এটাকেই বলা হয় Radial Balance.
in article ad
03. Hierarchy
What is the Hierarchy?
Hierarchy lets the reader know where to look first.
কোন কিছুকে বা কোন element কে বা কোন object কে একটি সংঘবদ্ধ ভাবে সাজানোর জন্য Hierarchy ব্যবহার করতে হবে। আমরা যেন সে element এর শুরু কোথায় এবং শেষ কোথায়, সেটার বড় অংশটি বা মূল অংশটি কোন জায়গায় আছে এবং ছোট অংশটি বা কম গুরুত্বপূর্ণ অংশ টি কোন জায়গায় আছে সেটি চিহ্নিত করে ভিজিটরদের বা ব্যবহার কারীদের কে দেখিয়ে দিতে পারি, সেটাকে Hierarchy বলে।
অথবা,
ভিজিটর বা ব্যহারকরীরা সাধারণত যখনই কোন কিছু দেখে বা কোন কনটেন্ট দেখছে, সে ক্ষেত্রে সে কোন দিগে প্রথমে বা কোন অংশটির দিগে প্রথমে ফোকাস করবে সেই ব্যাপারটি Hierarchy এর মাধ্যমে করা হয়ে থাকে বা করতে পারব।
ডিজাইনের সবচেয়ে গুরুত্বপূর্ণ অংশটি Hierarchy মাধ্যমে ব্যবহার কারীর কাছে প্রথমেই উপস্থাপন করতে পারবো।
Hierarchy can work in many ways?
Scale:
Color:
Typography:
Space & Depth:
Alignment:
Contrast:
উপরের ছবি গুলো ভালোভাবে দেখুন এবং থিওরির সাথে মিলিয়ে দেখুন খুব সহজেই বুঝতে পারবেন।
in
article ad
04. Alignment
What is an Alignment?
একটা পেইজে আমরা যখন ডিজাইন করি, সেটা Textul Design হতে পারে, Elementul Design হতে পারে, যা কিছু দিয়ে আমরা ডিজাইন করি না কেন, সে ডিজাইন গুলোর একটি নির্দিষ্ট লাইন ফলো করে কাজ করাই Alignment.
অথবা,
উপরে নিচে, ডানে বামে, আমি কোথায় সমান ভাবে লাইন করতে চাচ্ছি সেটা একটা নির্দিষ্ট লাইন অনুযায়ী ডিজাইন করাকে Alignment বলে।
Alignment কত প্রকার?
There are 2 types of Alignment.
- Edge Alignment
- Centre Alignment
01. Edge Alignment
ডানে, বামে কর্ণার বরাবর Align করা বা উপরে, নিচে কর্ণার বরাবর Align করা.
01. Centre Alignment
মাঝ বরাবর Alignment করাকে Centre Alignment বলে।
উপরের উদাহরণ গুলো দেখলে এবং থিওরি গুলো পড়লে আপনি অবশ্যই Alignment সম্পর্কে স্পস্ট ধারণা পাবেন আশাকরি।
05. Proximity
What is Proximity?
একটা ডিজাইন যখন একই রকম কোনো object বা একই রকম element থাকে, সেই element গুলোকে বা সেই একই টাইপের information গুলোকে একসাথে করে ফেলা বা group করে ফেলাটা Proximity এর কাজ।
অথবা,
যে information, element, Object গুলো একরকম না সেগুলো কে আলাদা করে ফেলা ও সমজাতীয় গুলোকে একত্রিত করাকে Proximity বলে।
*উদাহরণ এর মাধ্যমে বিষয়টি বোঝা যাক:
in article ad
06. Repetition & Rythm
Repetition
What is Repetition?
ডিজাইনে একই elements or objects বার বার ব্যবহার করাকে Repetition বলে।
*Repetition কালার হতে পারে।
*Repetition এর দুটি দিক রয়েছে:
- অনেক ডিজাইনের একই elements or objects বারবার ব্যবহার করলে খারাপ দেখা যায়। তবে প্যাটার্ন এর ক্ষেত্রে ভিন্ন।
- Branding Design এর ক্ষেত্রে অবশ্যই Repetition করতে হবে।
*উদাহরণ এর মাধ্যমে বিষয়টি বোঝা যাক:
উপরের উদাহরণ গুলো দেখলে এবং থিওরি গুলো পড়লে আপনি অবশ্যই Repetition সম্পর্কে স্পস্ট ধারণা পাবেন আশাকরি।
Rhythm
What is Rhythm?
Rhythm is a repeated pattern of movements. It's created when one or more design elements are used repeatedly to create a feeling.
যে কোন elements or objects বারবার repet করে সেই pattern টা কিছুটা পরিবর্তন করে কোন একটি feeling আনাটাই Rhythm.
অথবা,
Repetition এর মাধ্যমে তৈরিকৃত pattern টি কিছুটা পরিবর্তন করে একটি ফিলিংস আনাটাই Rhythm.
*উদাহরণ এর মাধ্যমে বিষয়টি বোঝা যাক:
উপরের উদাহরণ গুলো দেখলে এবং থিওরি গুলো পড়লে আপনি অবশ্যই Rhythm সম্পর্কে স্পস্ট ধারণা পাবেন আশাকরি।
in article ad
07. White Space
What is White Space?
অথবা,
কোন paragraphs , text, graphics অথবা যে কোন প্রশ্ন কে ডিজাইন থেকে আলাদা করার জন্য, বা গুরুত্ব দেওয়ার জন্য ডিজাইনের White Space রাখতে হয়।
*White Space ব্যবহার করার কারণে আমাদের ডিজাইন টা ফ্রেশ হয়। ডিজাইনে কোন আজেবাজে জিনিস থাকে না
মুল কথা:
ডিজাইনে পর্যাপ্ত জায়গা খালি রাখাকে White Space বলে।
*এটি ডিজাইনের সৈন্দর্য্যকে বহুগুণে বাড়িয়ে দেয় ও ডিজাইন খুব সুন্দর ও পরিষ্কার হয়ে যায়। দেখতে অনেক সুন্দর লাগে ও মূল ম্যাসেজ বা ইনফরমেশন ভালোভাবে বুঝা যায়।
*উদাহরণ এর মাধ্যমে বিষয়টি বোঝা যাক:
in article ad
08. Simplicity
What is Simplicity?
We have to Remember:
- One side and instead of money.
- Avoid using many visual elements.
- Remove details & information that are not needed
*উদাহরণ এর মাধ্যমে বিষয়টি বোঝা যাক:
--------------
মোঃ ইউসুফ
প্রফেশনাল গ্রাফিক্স ডিজাইনার
(লোগো ডিজাইনার)
Contact and Follow
Facebook: https://www.facebook.com/mdyousuffb2
Twitter: https://twitter.com/mdyousuffb
Behance: https://www.behance.net/mdyousuffb
Dribbble: https://dribbble.com/mdyousuffb
Instagram: https://www.instagram.com/mdyousuffb/
যে কোন সমস্যায় গ্রুপে পোস্ট করুণ: FBITSchool
পেইজে মেসেজ দিতে পারেন: FBITSchool
9 মন্তব্যসমূহ
Thanks
উত্তরমুছুনঅসাধারণ
উত্তরমুছুনThanks
মুছুনআলহামদুলিল্লাহ খুব ভালো লেগেছে।
উত্তরমুছুনধন্যবাদ। পাশেই থাকুন। আরো ভালো কিছূ আসবে।
মুছুনoutstanding
উত্তরমুছুনধন্যবাদ আপনাকে
উত্তরমুছুনআপনার লেখার মাধ্যমে খুব উপকার পেলাম । এই রকম বিষয়ে আরো লিখে যান , আমরা আপনাকে ফলো করবো । ধন্যবাদ ভাই । আল্লাহ আপনাকে নেক হায়াৎ দান করুন । আমিন ।
উত্তরমুছুনআপনার মতামতের জন্য ধন্যবাদ। সাথেই থাকুন। সামনে ভালো কিছূ আনার চেষ্টা করবো।
মুছুন