ওয়েব ডিজাইনে উল্লম্ব ছন্দ / বেসলাইন গ্রিড

Question

আমি সম্প্রতি ওয়েব ডিজাইনে ভাল টাইপোগ্রাফির জন্য বেসলাইন গ্রিড ব্যবহার করে ভাল উল্লম্ব ছন্দের গুরুত্ব সম্পর্কে কিছু নিবন্ধ পড়েছি। আমি বর্তমানে একটি ওয়েব ডিজাইন / ওয়ার্ডপ্রেস থিমের ব্যাকগ্রাউন্ড চিত্র হিসাবে নীচের চিত্রিত 960 গ্রিডের মতো বেসলাইন গ্রিডটি ব্যবহার করার চেষ্টা করব।

গ্রিডের মধ্যে সবকিছু ঠিকঠাক করে রাখা আমার পক্ষে খুব কঠিন হয়ে পড়েছে। আমি উল্লম্ব গ্রিডের মধ্যে সমস্ত কিছু ডিফল্ট পাঠ্য-আকারে (16px) পেতে সক্ষম হয়েছি, তবে আমি শিরোনামের আকারের সাথে গণ্ডগোল শুরু করতে, ছবি ইত্যাদি যোগ করে আইটেমগুলি সর্বদা গ্রিডে সঠিকভাবে সারিবদ্ধ থাকে না।

আমি উল্লম্ব ছন্দটি ব্যবহার করে কীভাবে আমার টাইপোগ্রাফি উন্নত করব তা জানতে চাই। কারও কি আমার ব্যবহার করা উচিত কোন কৌশল বা কৌশল আছে?

Answer 1

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

আপনি ব্যবধানের জিনিসগুলির কাছাকাছি আসতে পারেন, তবে শেষ পর্যন্ত আপনি এমন কিছু দিয়ে শেষ করবেন যা সংখ্যাগুলি দেখার সময় বোধগম্য হতে পারে তবে সম্ভবত দৃষ্টিভঙ্গি বন্ধ রয়েছে এবং জিনিসগুলি ঠিক দেখাচ্ছে কিনা তা নিশ্চিত করার জন্য আপনি সূত্রটি থেকে বিচ্যুত হন।

সুতরাং, সংক্ষেপে, একটি ভিজ্যুয়াল ছন্দ গুরুত্বপূর্ণ, তবে এটি আপনার অন্ত্রে থেকে তৈরি করুন, এমন কোনও সমীকরণ নয় যা ওয়েবে আপনাকে সঠিকভাবে কার্যকর করতে বাদামকে চালিত করবে।

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

Comments

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

— লরেন-ক্লিয়ার-মনিকা-ইপসাম

আপনার সিএসএস এবং এইচটিএমএল 960 গ্রিডের সাথে মেলে এটি কঠিন নয়। সামগ্রিকভাবে, কোডিং কেবল গণিত। তদতিরিক্ত, মূলত সমস্ত ডিজাইনার (যেমন) থিমফরেস্ট.নেট এটি ব্যবহার করে। এটি যেমনটি বলছেন তত কঠিন নয়। এবং হ্যাঁ .... গ্রিড ধারণাটি প্রিন্ট ওয়ার্ল্ড থেকে আসে। তবে 960 গ্রিড সিস্টেমটি ওয়েবের সর্বনিম্ন 1024x768 রেজোলিউশনের সাথে মেলে রূপান্তরিত।

— Luuk

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

— DA01

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

— DA01

হুম, আমার পড়ার অভাব;) আমি লক্ষ্য করিনি এটি কেবল উল্লম্ব রাইথেম সম্পর্কিত। আমাকে সম্মত হতে হবে যে আমি খুব প্রকৃতপক্ষে 960gs উল্লম্ব রাইথেমের জন্য ব্যবহার করি না। শুধুমাত্র অনুভূমিক জন্য। আমি উল্লম্বভাবে একমাত্র জিনিসটি হ'ল "ভাঁজ"। বাকি আমি "চোখ" দ্বারা সারিবদ্ধ (আরও একবার উল্লম্ব)।

— Luuk

Answer 2

উল্লম্ব ছন্দটি কার্যকর করা কঠিন নয়, বিশেষত যদি আপনি কোনও সিএসএস রিসেট দিয়ে শুরু করেন । আমি এই লিঙ্কটিতে হোঁচট খেয়েছি http://24ways.org/2006/compose-to-a-vertical-rhythm কিছুক্ষণ আগে, এবং তখন থেকে আমার সমস্ত ডিজাইনে কৌশলটি ব্যবহার করে চলেছি।

আমি যা পেয়েছি তা হ'ল আমার সিএসএস ফাইলে (এইচ 1 - এইচ 6, পি, ইত্যাদি - বিশেষত আকার, লাইন-উচ্চতা, নীচের মার্জিন) টাইপ ডিক্লেয়ারেশনের একটি "টিনজাত" সেট নিয়ে কাজ করার পরে এটি মোতায়েন করা খুব সহজ।

এখানে একটি পটভূমি চিত্র যা আমাকে জিনিসগুলিকে আরও পরিষ্কার করে তুলতে সহায়তা করেছে ... বিশেষত, যখন আমি প্রথম উলম্ব ছন্দটি ব্যবহার করছিলাম।

এটি দেখতে শক্ত হতে পারে তবে এটি যখন ব্যাকগ্রাউন্ড-চিত্র হিসাবে পুনরাবৃত্তি হয়: আপনি একটি 20x20 গ্রিড দেখতে পাবেন।

আছে HTH

দ্রষ্টব্য: আমি সাইটগুলিতে টাইপোগ্রাফি পছন্দ করি যেগুলি এই প্রযুক্তিটি ব্যবহার করে নি তার চেয়ে ভাল। তবে উভয় ক্ষেত্রেই সর্বদা দু'একটি উপাদান বলে মনে হয় যা "ডান" দেখতে "সিস্টেমকে প্রতারণা" করতে হবে। আমি আরও দেখতে পেয়েছি যে সামগ্রিক লাইন-উচ্চতার দিকে মনোযোগ দেওয়া (12px ফন্ট বেসের জন্য 18px বলুন) ইমেজ, গ্রাফিকাল শিরোনাম এবং এর মতো সুন্দর স্ট্রেইট ফরোয়ার্ড (18px) এর চারপাশে মার্জিন স্থাপন এবং প্যাডিং তৈরি করে। এছাড়াও ... সমস্ত কিছু গণনা করার তাগিদ চলে যায় ... আপনি লেআউটটি সম্পর্কে একটি "উল্লম্ব ছন্দ" লক্ষ্য করতে শুরু করবেন এবং মানগুলির খুব সংক্ষিপ্ত তালিকা থেকে ডান প্যাডিং / মার্জিন / লাইন-উচ্চতা টানতে সক্ষম হবেন আপনার মাথায়

Answer 3

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

গ্রিডের সাথে সমস্ত কিছু মেলে সহায়তা করতে, ডসনের পরামর্শ অনুসারে একটি পটভূমি চিত্রটি খুব দরকারী।

আমি আমার সর্বশেষ কয়েকটি ডিজাইনের জন্য এই কৌশলটি অনুসরণ করে চলেছি এবং আমি মনে করি এটি সত্যিই প্রতিদান দেয়।