बेंटो ग्रिड डिज़ाइन: लेआउट, स्पेसिंग और इनका उपयोग कब नहीं करना चाहिए, इस बारे में 2026 की गाइड

बेंटो ग्रिड एक ऐसा खंड है जो अलग-अलग आकार के खानों से बना होता है, जिनमें से प्रत्येक में एक पूर्ण सामग्री होती है। इन्हें इस तरह व्यवस्थित किया जाता है कि खानों का आकार ही महत्वपूर्ण सामग्री को प्राथमिकता देता है। खाना ही अर्थ की इकाई बन जाता है, और आँख किसी शब्द को पढ़ने से पहले उसके आकार से ही महत्व का पता लगा लेती है।

2026 में वेब पर मौजूद अधिकांश बेंटो ग्रिड केवल सजावटी होते हैं। खाने एक ही आकार के होते हैं, सामग्री को उनमें फिट करने के लिए संशोधित किया जाता है, और लेआउट किसी ताश के पत्तों की दीवार जैसा दिखता है। अच्छे बेंटो ग्रिड इसके विपरीत होते हैं। खानों का आकार उनकी सामग्री के अनुसार निर्धारित किया जाता है, खांचे और अतिरिक्त स्थान एक लय बनाए रखते हैं, और मोबाइल पर भी आसानी से पढ़ा जा सकता है। यह गाइड संरचना, आकार निर्धारण तर्क, रिक्ति, सामग्री-अनुकूलन, प्रतिक्रियाशीलता, सात विभेदन उदाहरणों (Apple, Linear, Vercel, Stripe, Arc, Apple विज़न प्रो, Figma) और उन मामलों के बारे में है जहां बेंटो ग्रिड पेज को नुकसान पहुंचाता है।

बेंटो ग्रिड डिज़ाइन, कार्यशील परिभाषा

बेंटो ग्रिड एक सुनियोजित संरचना है जहां प्रत्येक सेल में सामग्री का एक स्व-निहित भाग होता है और सेल का आकार उसके अंदर मौजूद सामग्री के आधार पर निर्धारित होता है।

तीन विशेषताएं इसे कार्ड ग्रिड से अलग करती हैं। सेलों का आकार सुनियोजित अनुपात में निर्धारित किया जाता है। सेलों में विभिन्न प्रकार की सामग्री होती है, न कि एक ही टेम्पलेट दोहराया जाता है। लेआउट एक एकल संरचना के रूप में पढ़ा जाता है। इन तीनों में से किसी एक को भी हटा दें तो आपको कार्ड वॉल मिल जाएगी।

यह पैटर्न इसलिए लोकप्रिय हुआ क्योंकि इसने एक वास्तविक समस्या का समाधान किया। 2023 तक, तीन या चार कॉलम वाले एक जैसे आइकन-हेडलाइन-पैराग्राफ कार्डों की फीचर रो वेब पर सबसे कम इस्तेमाल होने वाला लेआउट बन गया था। बेंटो ने डिजाइनरों को सेक्शन को टेम्पलेट जैसा दिखने से बचाते हुए कई फीचर्स को प्रस्तुत करने का एक तरीका दिया।

बेंटो ग्रिड की संरचना

हर बेंटो लेआउट चार भागों से बनता है: एंकर सेल, सपोर्टिंग सेल, गटर और सराउंडिंग मार्जिन। इनमें से कोई भी एक गलत हो जाए तो ग्रिड बिखर जाता है।

एंकर सेल सबसे बड़ा होता है, आमतौर पर बाईं या ऊपरी बाईं ओर स्थित होता है और इसमें सबसे महत्वपूर्ण सामग्री होती है। यह सबसे पहले आता है और बाकी सामग्री को फ्रेम करता है। स्पष्ट एंकर के बिना बेंटो एक सपाट कार्ड रो जैसा दिखता है। सपोर्टिंग सेल सेकेंडरी सामग्री से संरचना को भरते हैं और पहली बार पढ़ने पर एंकर को प्राथमिकता देते हैं। गटर संरचनात्मक होता है, जो आंखों को बताता है कि ये एक ही संरचना के अलग-अलग सेल हैं। सराउंडिंग मार्जिन वह सीमा रेखा है जो सेक्शन को एक अलग इकाई के रूप में पढ़ने देती है।

एंकर रैंक निर्धारित करता है। सपोर्टिंग सेल विवरण भरते हैं। गटर रिदम कंपोजीशन को तोड़े बिना यूनिट्स को अलग करता है। आसपास का मार्जिन पूरे को फ्रेम करता है।

सेल का आकार कंटेंट पर आधारित होता है, सजावट पर नहीं

टीमों द्वारा की जाने वाली सबसे बड़ी गलती यह है कि वे सेल्स का आकार कैनवास को भरने के लिए तय करती हैं, न कि उनमें मौजूद कंटेंट के हिसाब से।

एक सेल जिसमें एक संख्या और एक पंक्ति का कैप्शन है, उसका आकार उस सेल के बराबर होना ज़रूरी नहीं है जिसमें एक स्क्रीनशॉट और तीन वाक्य हैं। अगर उन्हें बराबर रखा जाए तो एक खाली और दूसरा तंग दिखेगा। ग्रिड सजावट है, संदेश नहीं।

क्रम बदलें। तय करें कि किस सेक्शन में कौन सा कंटेंट होना चाहिए, एंकर चुनें, सेकेंडरी हिस्से चुनें, फिर प्रत्येक सेल का आकार इस तरह रखें कि कंटेंट सही स्पेस के साथ फिट हो जाए, न ज़्यादा। प्रत्येक सेल में लगभग बीस से तीस प्रतिशत आंतरिक खाली जगह होनी चाहिए। इससे कम होने पर भरा हुआ लगता है। इससे ज़्यादा होने पर खाली दिखता है।

सबसे साफ-सुथरे ग्रिड अनुपात का उपयोग करते हैं। एंकर का क्षेत्रफल सबसे बड़े सपोर्टिंग सेल के क्षेत्रफल का लगभग दोगुना होता है। यह अनुपात पृष्ठ के बाकी हिस्सों में उपयोग किए गए दृश्य पदानुक्रम को प्रतिबिंबित करता है, जिसे अनुभाग में संकुचित किया गया है।

एंकर सेल पढ़ने का मुख्य केंद्र है

प्रत्येक बेंटो में एक एंकर होता है, और अधिकांश कमजोर ग्रिड एक एंकर सेल पर निर्भर नहीं होते हैं। एंकर आकार में स्पष्ट अंतर से श्रेष्ठ होता है, आदर्श रूप से अगले सेल के क्षेत्रफल का दोगुना, और सामग्री घनत्व में भी श्रेष्ठ होता है। एंकर वह स्थान है जहाँ सबसे सशक्त पाठ, सबसे महत्वपूर्ण दृश्य या सबसे महत्वपूर्ण इंटरैक्शन होता है। यदि एंकर एक सामान्य चित्र है जबकि सहायक सेल में वास्तविक शीर्षक है, तो पढ़ने का मार्ग बाधित हो जाता है।

Apple के मैक उत्पाद पृष्ठ में एक संक्षिप्त उत्पाद फ़ोटो और एक बोल्ड शीर्षक के साथ एंकर का उपयोग किया गया है। Linear ने फ़ीचर पृष्ठ पर इसका उल्टा किया है, जिसमें एक संक्षिप्त शीर्षक और एक UI खंड के साथ पाठ-प्रधान एंकर है, और सहायक सेल कम सघन हैं। सिद्धांत समान है, सामग्री का स्वरूप भिन्न है।

त्रुटि: दो एंकर। डिज़ाइनर समान क्षेत्रफल वाले बाएँ और दाएँ पैनल में विभाजित करते हैं और इसे बेंटो कहते हैं। यह दो-स्तंभ वाला हीरो सेक्शन है। जैसे ही किसी सेक्शन को पहली बार पढ़ने के लिए दो बराबर दावे मिलते हैं, बेंटो काम करना बंद कर देता है।

ग्रिड को ढहने से बचाने वाले स्पेसिंग नियम

बेंटो ग्रिड में स्पेसिंग की समस्या अक्सर साइज़िंग से ज़्यादा स्पेसिंग में होती है, क्योंकि गटर और अंदरूनी पैडिंग दो अलग-अलग काम हैं और ज़्यादातर टीमें इन्हें एक ही समझती हैं।

गटर आँखों को बताता है कि एक सेल कहाँ खत्म होता है और दूसरा कहाँ शुरू होता है। बहुत कम जगह होने पर, एक ब्लॉक बन जाता है। बहुत ज़्यादा जगह होने पर, अलग-अलग दिखता है। गटर की लंबाई अंदरूनी पैडिंग के लगभग आधी रखें। अंदरूनी पैडिंग आँखों को बताती है कि कंटेंट को कितनी जगह मिल रही है। आसपास का मार्जिन तीसरा आयाम है, यानी गटर से कम से कम 1.5 गुना ज़्यादा ऊर्ध्वाधर स्पेस, ताकि सेक्शन एक अलग इकाई के रूप में पढ़ा जा सके।

एक आम गड़बड़ी। टीमें तीनों के लिए एक ही मान का इस्तेमाल करती हैं। ग्रिड की लय बिगड़ जाती है। तीनों में थोड़ा सा भी अंतर करने से लय वापस आ जाती है।

कंटेंट-फिट नियम, सेल में वास्तव में क्या होना चाहिए

एक बेंटो सेल उतना ही अच्छा होता है जितनी अच्छी उसमें मौजूद कंटेंट की इकाई होती है। अधिकांश सेल विफल हो जाते हैं क्योंकि सेल को सामग्री के अनुरूप आकार देने के बजाय, उसमें जबरदस्ती सामग्री डाली जाती है।

एक बेंटो सेल एक विचार का कंटेनर होता है। एक दावा, एक विशेषता, एक संख्या, एक स्क्रीनशॉट, एक प्रशंसापत्र। अच्छी सामग्री: एक पंक्ति के शीर्षक और यूआई पूर्वावलोकन के साथ एक विशेषता, कैप्शन के साथ एक मीट्रिक, स्रोत के साथ एक प्रशंसापत्र। खराब सामग्री: एक लंबा पैराग्राफ, क्रॉस-कॉलम तुलना, बहु-चरणीय प्रक्रिया, संरेखित पंक्तियों वाली मूल्य तालिका।

निर्णय का नियम: यदि सेल के अंदर की सामग्री को अर्थ खोए बिना कहीं और किसी पैराग्राफ में डाला जा सकता है, तो सेल अपना काम कर रहा है। यदि इसे आसपास के संदर्भ की आवश्यकता है, तो बेंटो इसे खंडित कर रहा है।

प्रतिक्रियाशील व्यवहार, असली परीक्षा

एक बेंटो जो 1440 पर अच्छा दिखता है और 768 पर टूट जाता है, वह एक डेस्कटॉप पोस्टर है, लेआउट नहीं, और प्रतिक्रियाशील संकुचन वह जगह है जहां अधिकांश प्रोडक्शन ग्रिड चुपचाप विफल हो जाते हैं।

चुनौती यह है कि सेल एकसमान नहीं होते हैं। एक फीचर रो आसानी से सिकुड़ जाती है। बेंटो बॉक्स को अलग-अलग चौड़ाई और ऊँचाई वाले सेल्स के साथ क्या करना है, यह तय करना होता है। अगर नियम गलत हों, तो मोबाइल पर दिखने वाले सेल्स बेमेल बॉक्सों के ढेर जैसे लगते हैं।

निर्देश: पहले डेस्कटॉप को परिभाषित करें। टैबलेट (768 से 1024) पर, एंकर को दोनों कॉलम में फैलाकर दो कॉलम में सिकोड़ें। मोबाइल (768 से नीचे) पर, सिंगल कॉलम, हर सेल पूरी चौड़ाई में और स्टैक्ड, एंकर पहले, और सपोर्टिंग सेल्स प्राथमिकता क्रम में। हर ब्रेकपॉइंट पर इनर पैडिंग और गटर को इस तरह एडजस्ट करें कि सेल्स आनुपातिक दिखें, न कि सिर्फ सिकुड़े हुए।

बचने योग्य बग: ऐसे सेल्स जिनमें चौड़ाई बदलने पर कंटेंट नहीं रहता। डेस्कटॉप सेल में मौजूद हॉरिजॉन्टल इन्फोग्राफिक मोबाइल कॉलम में पढ़ने योग्य नहीं रहता। कंटेंट को दोनों शेप के लिए प्लान करें, सिर्फ एक के लिए नहीं।

सात वास्तविक उत्पाद पृष्ठ, एनोटेटेड

फ्रेमवर्क तभी मायने रखता है जब वह शिप किए गए पेजों के साथ काम करे। वर्तमान में प्रोडक्शन में सात बेंटो बॉक्स इम्प्लीमेंटेशन हैं। कोई भी परफेक्ट नहीं है। सभी SaaS लैंडिंग पेज के बुनियादी मानकों से ऊपर हैं।

Apple, उत्पाद थिएटर के रूप में बेंटो

Apple के उत्पाद पृष्ठ स्क्रॉल-चालित थिएटर के रूप में बेंटो का उपयोग करते हैं। एंकर सेल विशाल हैं, अक्सर एक ही उत्पाद की तस्वीर लगभग पूर्ण व्यूपोर्ट स्केल पर प्रदर्शित होती है, जो सहायक सेल से तीन या चार गुना अधिक होती है। पर्याप्त स्पेसिंग। प्रत्येक सेल में एक फीचर होता है, कभी दो नहीं। आगंतुक पृष्ठ को उसी क्रम में पढ़कर छोड़ता है जैसा Apple चाहता था। कमी: मोशन-हैवी रिवील्स धीमे कनेक्शन पर खराब हो सकते हैं और रैंकिंग को कम कर सकते हैं।

Linear, डेवलपर घनत्व के रूप में बेंटो

Linear वेब पर सबसे सघन बेंटो ग्रिड में से एक प्रस्तुत करता है और कठोर टाइपोग्राफी और हमेशा प्रभावी एंकर के माध्यम से इसे पठनीय बनाए रखता है। सबसे बड़े सहायक सेल के क्षेत्रफल से दोगुने क्षेत्रफल पर बाईं ओर एंकर, दाईं ओर तीन-तीन छोटे सेल के दो कॉलम, तंग गैप, चौड़ा आंतरिक पैडिंग। प्रत्येक सेल में एक फीचर है जिसमें एक संक्षिप्त शीर्षक और यूआई खंड शामिल है। टाइप सिस्टम रैंकिंग को निर्धारित करता है। कमजोर टाइपोग्राफी पैटर्न को ध्वस्त कर देगी।

Vercel, गति कोरियोग्राफी के रूप में बेंटो

Vercel गति के लिए एक मंच के रूप में बेंटो का उपयोग करता है। प्रत्येक सेल स्क्रॉल करने पर एक छोटा सा खुलासा करता है, और ग्रिड एक निर्माण और लॉन्च की कहानी बताता है। 1.5x पर एक स्पष्ट एंकर जिसमें चार से छह सहायक सेल हैं। ये सभी मिलकर डेवलपर वर्कफ़्लो के बारे में एक कथा बनाते हैं। कमी: गति कम गति पसंद करने वाले उपयोगकर्ताओं को अनावश्यक रूप से प्रभावित कर सकती है।

Stripe, संयम के रूप में बेंटो

Stripe के बेंटो खंड सूची में सबसे शांत हैं, और यही कारण है कि वे उन दर्शकों के लिए उपयुक्त हैं जो शोरगुल वाले डिज़ाइन पर भरोसा नहीं करते। एंकर और दो या तीन सहायक सेल। अनुपात स्पष्ट हैं, लेकिन नाटकीय नहीं। संपादकीय स्पेसिंग। प्रत्येक सेल में एक संक्षिप्त कोड उदाहरण या एक चित्र के साथ एक दावा होता है। यह पैटर्न बिना किसी सजावट के आत्मविश्वास को दर्शाता है।

क्या आप ऐसा बेंटो लेआउट चाहते हैं जो पेज को सजाने के बजाय उसे संकुचित करे? ⟦लिंक 2⟧। UXBrainy ⟦लिंक 3⟧ बेंटो लेआउट को सेल-दर-सेल डिज़ाइन करके प्रस्तुत करता है। AppBrainy भी इसी अनुशासन के साथ उत्पाद UI प्रस्तुत करता है।

⟦ब्रांड 26⟧, व्यक्तित्व के रूप में बेंटो

⟦ब्रांड 27⟧ बेंटो को ब्रांड व्यक्तित्व के लिए एक माध्यम के रूप में उपयोग करता है। उत्पाद की चंचलता को व्यक्त करने के लिए सेल आकार, रंग और गति बदलते हैं। गोल कोने, ग्रेडिएंट, विभिन्न ऊँचाई, ढीले अनुपात। ⟦ब्रांड 28⟧ नियमों को तोड़ता है और सफल होता है क्योंकि ब्रांड ने पोजिशनिंग के माध्यम से अनुमति प्राप्त की है, वही सहज प्रवृत्ति जो अच्छे ⟦लिंक 4⟧ के पीछे है, यानी अर्जित अनुमति, उधार नहीं।

Apple विज़न प्रो, स्थानिक पूर्वावलोकन के रूप में बेंटो

विज़न प्रो वेब पर सबसे महत्वाकांक्षी बेंटो है क्योंकि इसे दो-आयामी सेल के माध्यम से त्रि-आयामी उत्पाद का आभास कराना होता है। एंकर सेल स्थानिक गहराई का आभास देने के लिए वीडियो का उपयोग करते हैं। नाटकीय अनुपात, सिनेमाई स्पेसिंग। वीडियो सामग्री स्थानिक कार्य करती है और सेल का आकार प्रत्येक क्षण को फ्रेम करता है। यह इस बात का सबसे मजबूत प्रमाण है कि सही सामग्री लेआउट को केवल सेल के आकार से कहीं अधिक उन्नत बना सकती है।

Figma, फीचर घनत्व के रूप में बेंटो

Figma अपने समकक्षों की तुलना में अधिक समानांतर फीचर्स को संभालता है और घनत्व को बनाए रखता है क्योंकि टाइप सिस्टम और सेल की लय भार वहन करती है। प्रति अनुभाग छह या सात सेल, एक स्पष्ट एंकर, संपीड़ित अनुपात, तंग गैप, पर्याप्त आंतरिक पैडिंग। प्रत्येक सेल में एक फीचर होता है जिसमें एक UI खंड और एक संक्षिप्त कैप्शन होता है। Figma का टाइपोग्राफी प्रणाली कई छोटे सेल में अपनी स्थिति बनाए रखने के लिए पर्याप्त मजबूत है। कमज़ोर टाइप सिस्टम सेल की संख्या बढ़ने पर रैंकिंग खो देगा।

बेंटो ग्रिड का उपयोग कब न करें

बेंटो किसी भी ऐसी सामग्री के लिए अनुपयुक्त लेआउट है जिसे क्रम से पढ़ना, विस्तार से तुलना करना या किसी एक निर्णय के लिए सरसरी तौर पर देखना आवश्यक हो। अधिकांश पृष्ठ बिना सोचे-समझे इसका उपयोग करते हैं।

बेंटो पृष्ठ को कैसे नुकसान पहुंचाता है:

• लंबा संपादकीय लेख। बेंटो पढ़ने के क्रम को खंडित कर देता है।

• तुलनात्मक सामग्री। मूल्य तालिकाएँ, विशेषताओं की तुलना, पहले और बाद की सूचियाँ। क्रॉस-सेल पढ़ने के लिए सेल संरेखित नहीं होते हैं।

• चरण-दर-चरण प्रक्रियाएँ। किसी भी कार्य योजना के लिए एक स्पष्ट क्रम आवश्यक है। बेंटो सेल समानांतर विचारों का संकेत देते हैं, चरणों का नहीं।

• एकल-निर्णय पृष्ठ। यदि पृष्ठ का उद्देश्य आगंतुक को किसी एक कॉल-एक्शन (CTA) की ओर ले जाना है, तो बेंटो फोकस को कई सेल में बाँट देता है।

• कम सामग्री वाले पृष्ठ। केवल एक या दो विचारों के साथ, एक हीरो पैनल खाली सहायक सेल वाले बेंटो की तुलना में अधिक स्पष्ट होता है।

बेंटो समान शैली के समानांतर विचारों के लिए है जिन्हें आगंतुक किसी भी क्रम में पढ़ सकता है। अनुक्रम, तुलना, निर्णय या एकल-दावा पृष्ठों के लिए इसे छोड़ दें।

लेआउट भेजने से पहले बेंटो फिट चेकलिस्ट

बेंटो में लेआउट सबमिट करने से पहले इसे चलाएँ:

1. एंकर कमिट। क्या कोई सेल स्पष्ट रूप से अगले सेल से कम से कम 1.5 गुना बड़ा है?

2. सेल सामग्री-फिट। क्या प्रत्येक सेल एक विचार के लिए स्वतंत्र रूप से काम कर सकता है?

3. अनुक्रमिक निर्भरता। क्या विज़िटर को सेलों को क्रम से पढ़ने की आवश्यकता है? यदि हाँ, तो बेंटो में कुछ गड़बड़ है।

4. क्रॉस-सेल तुलना। क्या सेलों की तुलना पंक्ति-दर-पंक्ति करने की आवश्यकता है? यदि हाँ, तो एक टेबल का उपयोग करें।

5. आंतरिक पैडिंग अनुपात। क्या आंतरिक पैडिंग लगभग गटर से दोगुनी है?

6. आसपास का मार्जिन। क्या ऊपर और नीचे कम से कम 1.5 गुना गटर से अधिक जगह है?

7. रिस्पॉन्सिव डिज़ाइन। क्या प्रत्येक सेल का डेस्कटॉप, टैबलेट और मोबाइल पर एक निर्धारित आकार है?

8. मोबाइल पर एंकर। क्या एंकर, एंकर ही रहता है (पहला सेल, पूरी चौड़ाई वाला)?

9. सामग्री घनत्व। क्या प्रत्येक सेल में लगभग बीस से तीस प्रतिशत आंतरिक खाली स्थान है?

10. अनुभागों की संख्या। क्या पृष्ठ पर तीन से अधिक बेंटो अनुभाग हैं? पृष्ठ एक बेंटो गैलरी बनता जा रहा है।

जो पृष्ठ इन दस मानदंडों को पूरा करता है, उसका बेंटो अनुभाग लेआउट के अनुरूप होता है।

अक्सर पूछे जाने वाले प्रश्न

वेब डिज़ाइन में बेंटो ग्रिड क्या है?

बेंटो ग्रिड विभिन्न आकारों के सेलों से बना एक अनुभाग है, जिसमें प्रत्येक सेल में एक स्वतंत्र सामग्री होती है, और सेल के आकार के आधार पर सामग्री को प्राथमिकता दी जाती है। इसका नाम जापानी बेंटो बॉक्स से आया है, जो विभिन्न आकारों के विभिन्न खाद्य पदार्थों को एक ट्रे में रखता है। इसका उपयोग अक्सर उत्पाद विशेषताओं, क्षमता सारांश और प्रशंसापत्र दीवारों के लिए किया जाता है।

बेंटो ग्रिड का उपयोग कब करना चाहिए?

इसका उपयोग तब करें जब आपके पास समान स्तर के कई समानांतर विचार हों जिन्हें आगंतुक किसी भी क्रम में देख सकता है। यह उत्पाद विशेषताओं, क्षमता सारांश और प्रशंसापत्र दीवारों के लिए उपयुक्त है। क्रमबद्ध पठन, क्रॉस-सेल तुलना, चरण-दर-चरण प्रक्रियाओं और केवल एक या दो विचारों वाले पृष्ठों के लिए इसे छोड़ दें।

बेंटो ग्रिड में सेलों का आकार कैसे निर्धारित करें?

सामग्री के अनुसार अंदर की ओर आकार निर्धारित करें। एंकर चुनें, सहायक भाग चुनें, फिर प्रत्येक सेल का आकार इस प्रकार निर्धारित करें कि सामग्री लगभग बीस से तीस प्रतिशत आंतरिक रिक्त स्थान के साथ फिट हो जाए। एंकर का क्षेत्रफल सबसे बड़े सहायक सेल के क्षेत्रफल का कम से कम दोगुना होना चाहिए।

बेंटो ग्रिड के लिए सही गटर स्पेसिंग क्या है?

लगभग आंतरिक पैडिंग के आधे के बराबर गटर का उपयोग करें। यदि सेलों में 32 पिक्सेल की पैडिंग है, तो 16 पिक्सेल का गटर उपयोग करें। अनुपात निरपेक्ष मान से अधिक महत्वपूर्ण है।

मोबाइल पर बेंटो ग्रिड कैसे काम करता है?

यह टैबलेट पर दो कॉलम और मोबाइल पर एक कॉलम में सिमट जाता है, एंकर पहले, सहायक सेलों को प्राथमिकता के अनुसार पुनर्व्यवस्थित किया जाता है। आंतरिक पैडिंग और गटर मान प्रत्येक ब्रेकपॉइंट पर समायोजित होते हैं ताकि सेलों का आकार समानुपातिक लगे। जिन सेलों की सामग्री चौड़ाई परिवर्तन के साथ समायोजित नहीं हो सकती, उन्हें मोबाइल आकार के लिए पुनः डिज़ाइन किया जाना चाहिए।

बेंटो ग्रिड और कार्ड ग्रिड में क्या अंतर है?

कार्ड ग्रिड एकसमान होता है, हर कार्ड का आकार और विषयवस्तु एक ही होती है। बेंटो एक सुनियोजित संरचना है जिसमें सेल्स का आकार अलग-अलग अनुपात में होता है और उनमें अलग-अलग विषयवस्तु होती है। बेंटो आकार के माध्यम से पदानुक्रम को दर्शाता है, जबकि कार्ड ग्रिड एकरूपता के माध्यम से समानता को दर्शाता है।

बेंटो ग्रिड के पीछे का पैटर्न जो आज भी कायम है

एक बेंटो ग्रिड जो 2026 तक कायम रहेगा, वह चालाकी से भरे सेल्स से भरा ग्रिड नहीं है। यह एक ऐसा ग्रिड है जहाँ हर सेल एक विचार का सुनियोजित संक्षेपण है।

जो ब्रांड आज भी कायम हैं, जैसे Apple, Linear, Stripe, Figma, वे एक ही सिद्धांत का पालन करते हैं। सेल्स तभी छोटे होते हैं जब विषयवस्तु कम हो। सेल्स तभी बड़े होते हैं जब विषयवस्तु अधिक हो। गटर एकसमान होता है, आंतरिक पैडिंग एकसमान होती है, और रिस्पॉन्सिव कोलैप्स योजनाबद्ध होता है। कुछ भी संयोगवश नहीं होता, क्योंकि बेंटो पैटर्न वेब पर मौजूद किसी भी अन्य लेआउट की तुलना में गलतियों को ज्यादा गंभीरता से लेता है।

जो ब्रांड समय के साथ पिछड़ जाते हैं, वे इस पैटर्न को सिर्फ एक दृश्य शैली के रूप में देखते हैं। वे पहले सेल के आकार चुनते हैं, फिर सोचते हैं कि उसमें कौन सी सामग्री फिट हो सकती है। नतीजतन, सेल्स में ऐसी सामग्री भर जाती है जिसके लिए वे बनाए ही नहीं गए थे और मोबाइल पर रिस्पॉन्सिव कोलैप्स होने से वे खंडित हो जाते हैं। अगले साल धीरे-धीरे उन ग्रिड्स को सेक्शन दर सेक्शन रीडिजाइन किया जाता है।

मूल सिद्धांत है सामग्री से शुरुआत करना। तय करें कि सेक्शन को क्या संदेश देना है, एंकर चुनें, समानताएं चुनें, और फिर उन निर्णयों के आधार पर सेल्स का आकार निर्धारित करें। इसे अपने मुख्य वेब डिज़ाइन सिद्धांत में से एक मानें, ठीक उसी तरह जैसे आप पदानुक्रम और टाइप को मानते हैं, और आपके द्वारा प्रस्तुत किए गए बेंटो सेक्शन अगले साल भी सही दिखेंगे।

यदि आप ऐसा बेंटो चाहते हैं जो पेज को सजाने के बजाय उसे संकुचित करे, तो किराया Brainy देखें। UXBrainy मार्केटिंग साइट्स और लैंडिंग पेज को सेल दर सेल इंजीनियर किए गए बेंटो लेआउट के साथ प्रस्तुत करता है। AppBrainy भी इसी सिद्धांत के साथ प्रोडक्ट UI प्रस्तुत करता है।