بنتو گرید یا Bento Grid چیست؟ اگر جدیدا سری به سایتهای بزرگ طراحی سایت یا پرتفلیوی طراحان حرفهای زده باشید متوجه تغییراتی در ساختار صفحات میشوید. در این صفحات مجموعهای از باکسها را میبینید که مثل قطعات پازل کنار هم چیده شده و هرکدام مطلب، عکس یا موضوع خاصی را منتقل میکنند. این روزها این مدل طراحی یکی از پرکاربردترین الگوها برای طراحی وب شده و کم کم جای طراحیهای مینیمالیست را میگیرد.
این ساختار به کاربر اجازه میدهد با یک نگاه بفهمد ساختار صفحه چیست و چه چیزی قرار است آنجا ببیند. بر خلاف خیلی از ترندهایی که صرفا روی ظاهر تمرکز دارند بنتو گرید Bento Grid یک تعادل مناسب بین زیبایی، نظم و کاربرد برقرار میکند. برای همین این روزها این مدل طراحی را در صفحات معرفی محصول، سایتهای شرکتی، داشبورها و لندینگ پیجها زیاد میبینیم.
برای طراحی یک سایت حرفهای شرکتی یا فروشگاهی با جدیدترین متدهای روز دنیا به وب نگاران اعتماد کنید. برای دریافت اطلاعات بیشتر درباره طراحی سایت یا خدمات سئو با شمارههای ما تماس بگیرید. 02166928787 – 09123790588
Bento Grid چیست؟
Bento Grid نوعی چیدمان جدید در طراحی سایت است که صفحه را به یک پازل مربعی تقسیم میکند. هر باکس اندازه، محتوا و نقش خود را دارد، یکی ممکن است بزرگ باشد با یک تصویر در مرکز و دیگری فقط یک متن کوتاه داشته باشد یا حتی بعضیها نمودار و آمار یا حتی دکمه کال تو اکشن داشته باشند. ولی چرا اسم این مدل طراحی را Bento Grid یا بنتو گرید گذاشتهاند؟ به ظرفهای غذای ژاپنی که مربع مربع هستند و هر خانه با یک دیوار از دیگری جدا شده بنتو باکس میگویند و حالا این مدل طراحی کاملا یادآوری بنتوباکس است و برای همین اسمش را Bento Grid گذاشتند.
در طراحیهای قدیمیتر بیشتر تلاش بر این بود که همه خانهها سهم یکسانی داشته باشند ولی در بنتو گرید اندازه باکسها متغیر است. شاید یک باکس بزرگتر باشد تا نشان دهد که محتوای مهمتری دارد و باکسهای کوچکتر اطلاعات سادهتر و فرعی را نمایش دهند. بنتو گرید اصولا متقارن نیست و هر باکس متناسب با اهمیتش بزرگ یا کوچک میشود. این ویژگی باعث میشود طراح بتواند در یک نگاه، انواع مختلف محتوا مثل تصویر، متن، آمار و دکمهی فراخوان اقدام را در یک صفحهی واحد کنار هم بچیند، بدون اینکه هیچکدام از این عناصر در سایهی دیگری گم شوند.
Bento Grid چه تفاوتی با Grid معمولی دارد؟
تفاوت اصلی بنتو گرید با گرید معمولی در نحوه اولویتبندی محتواست. در Grid معمولی، معمولاً همه خانهها اندازه یکسان دارند و آیتمهایی که در آنها نمایش داده میشود اهمیت یکسان دارند. ولی در بنتو گرید اندازه بخشها بر اساس اهمیت آنهاست. این موضوع باعث میشود کاربر راحتتر اهمیت محتوای صفحه را درک کند سریعتر چیزی که دنبالش است را پیدا کند.
ویژگیهای Bento Grid چیست؟
همانطور که گفتیم لی اوت بنتو گرید در طراحی سایت صرفا یک لی اوت ظاهرگرا نیست. دلیلی که خیلی از طراحان حرفهای از این چیدمان استقبال میکنند توانایی آن در سازماندهی محتوا است آن هم به صورتی که برای کاربران جذاب باشد. در ادامه مهمترین ویژگیهای بنتو گرید را بررسی میکنیم:
ایجاد سلسله مراتب بصری: وقتی همه عناصر یک اندازه هستند کاربر نمیتواند تشخیص دهد کدام بهش مهمتر است ولی در طراحی بنتو اندازه باکسها اهمیت آنها را نشان میدهد.
نمایش اطلاعات زیاد بدون شلوغ کردن صفحه: یکی از مشکلات صفحات لندینگ و معرفی محصولات، نمایش میزان زیادی اطلاعات در فضایی محدود است. یکنواخت بودن اطلاعات پشت سر هم کاربر را خسته میکند. این مشکل در طراحی Bento Grid با تقسیم شدن صفحه به بخشهای کوچک و مستقل حل شده.
اسکن سریع محتوا توسط کاربر: کاربران نود درصد مواقع کلمه به کلمه مطالب را مطالعه نمیکنند بلکه صفحه را اسکن میکنند تا اطلاعات مورد نیازشان را پیدا کنند. اینجاست که ساختار واضح و سلسلهمراتبی بنتو گرید اسکن کردن محتوا را راحتتر میکند.
طراحی ماژولار و قابل توسعه: هر باکس یک واحد مستقل است که میتوانید بدون تغییر کل صفحه آن باکس را تغییر دهید، حذف کنید یا در صورت نیاز باکس جدید به مجموعه اضافه کنید.
بنتو گرید Bento Grid برای چه وب سایتهایی مناسب است؟
با اینکه این روزها طراحی سایت با لی اوت Bento Grid محبوبیت زیادی پیدا کرده و به عنوان ترند شناخته میشود ولی برای همه پروژهها مناسب نیست. این مدل طراحی معمولا برای این موارد مناسب است:
- صفحات معرفی محصول، برای نمایش تصاویر، مشخصات، مزایا و نظرات کاربران در کنار هم
- لندینگپیجها، برای معرفی سریع محصول و هدایت کاربر به یک اقدام مشخص
- وبسایتهای شرکتی، برای نمایش خدمات، نمونهکار و اعضای تیم
- داشبوردهای مدیریتی، برای نمایش دستهبندیشده نمودارها و گزارشها
- سایتهای نمونهکار، برای نمایش پروژههای متنوع در قالبی حرفهای
چه زمانی نباید از Bento Grid استفاده کنیم؟
- در صفحات مقالهمحور یا آموزشهای مرحلهبهمرحله که کاربر باید مطالب را به ترتیب بخواند ساختار بنتو گرید تمرکز کاربر را به هم میزند.
- برای فروشگاههای با محصولات زیاد که همه آیتمها اهمیت یکسانی دارند هم بهتر است که باکسها یک اندازه و منظم باشند.
- همچنین اگر هدف صفحه فقط انتقال یک پیام مشخص است، یک Hero Section که یک بخش بزرگ و ساختار ساده است پیشنهاد میشود و تاثیر بیشتری دارد.
Bento Grid چیست
اصول طراحی لی اوت Bento Grid حرفهای
با اینکه ساختار بنتو گرید به ظاهر ساده به نظر میرسد ولی برای اثرگذاری بیشتر بهتر است یک سری اصول اولیه در آنها رعایت شود. شما نمیتوانید صرفا با کنار هم گذاشتن باکسها پیام صفحه را به خوبی منتقل کنید.
تعیین اولیت محتوا
اول از همه مشخص کنید که مهمترین پیام صفحه شما چیست. از خودتان بپرسید کاربر باید چه چیزی را اول از همه ببیند؟ مهمترین کال تو اکشن چیست؟ کدام بخش بیشترین ارزش را برای مخاطب دارد؟ جواب این سوالها تعیین میکند که کدام باکس را باید بزرگتر از بقیه طراحی کنید.
هر باکس، یک پیام
مهمترین اصل Bento Grid این است که هر کارت موضوع مشخص خودش را داشته باشد. مثلا اگر یک کارت را برای معرفی مزایا طراحی کردید پس اطلاعات دیگر مثل فرم تماس یا جدول قیمت را باید داخل یک باکس دیگر بگذارید. تمرکز هر باکس روی یک پیام مشخص باعث میشود کاربر سریعتر محتوای صفحه را درک کند صفحه هم منظمتر به نظر میرسد.
از فضای سفید استفاده کنید
فضای سفید بین باکسها نقش مهمی در خوانایی صفحه دارد. اگر این فاصله خیلی کم باشد و باکسها چسبیده به هم به نظر برسند نمیتوان مرز آنها را از هم تشخیص داد. از این فضای سفید طوری استفاده کنید که هم فاصله باکسها از هم مناسب باشد و هم صفحه زیادی شلوغ به نظر نرسد.
اندازه کارتها را متناسب انتخاب کنید.
در طراحی Bento Grid اندازه هر کارت نشاندهنده اهمیت محتوای آن است و نباید اندازهها را سلیقهای تغییر دهید. مثلا برای معرفی محصول اصلی کارت بزرگ انتخاب کنید. برای مزایای کلیدی یک کارت متوسط و برای آمار و ویژگیهای فرعی کارتهای کوچکتر مناسب هستند.
ریسپانسیو برای موبایل
فراموش نکنید که این باکسها باید در موبایل هم درست و منظم نمایش داده شوند. اگر تنها برای دسکتاپ طراحی کنید در موبایل این باکسها درست نشان اده نمیشوند. بهتر است از همان ابتدای طراحی مشخص کنید که در نمایشگرهای کوچک، کارتها با چه ترتیبی نمایش داده شوند تا مهمترین اطلاعات همچنان در ابتدای صفحه قرار بگیرند و تجربه کاربری حفظ شود.
Bento Grid یا Masonry کدام بهتر است؟
این دو لی اوت گاهی با هم اشتباه گرفته میشوند ولی با هم تفاوتهای مهمی دارند. Bento Grid بر پایه نظم و سلسلهمراتب بصری طراحی شدهاند ولی اندازه کارتها بر اساس اهمیت محتوا تعیین میشود. ولی Masonry بیشتر تلاش میکند فضای خالی بین آیتمها را با چیدمانی شبیه به دیوار آجری کمتر کند و اندازهها بیشتر بر اساس ارتفاع محتوا مشخص میشوند. در جدول زیر میتوانید تفاوت بنتو گرید و Masonry را ببینید:
| ویژگی | Bento Grid | Masonry |
| هدف اصلی | نمایش هدفمند اطلاعات | استفاده بهینه از فضای خالی |
| ساختار | منظم و برنامهریزیشده و سلسلهمراتبی | فشرده |
| اندازه کارتها | براساس اهمیت محتوا | براساس ارتفاع محتوا |
| مناسب برای | صفحات معرفی محصول، خدمات، داشبورد | گالری تصاویر، نمونهکار، شبکههای اجتماعی |
| سلسلهمراتب بصری | مخاطب سریع متوجه مطالب مهم میشود | معمولا کاربر باید مطلب را بخواند تا متوجه منظور اصلی صفحه شود |
| تجربه مطالعه | نگاه کاربر بر اساس اندازه و اهمیت باکس هدایت میشود | کاربر باید خودش با اسکن کردن مطلب مورد نظرش را پیدا کند |
آیا Bento Grid روی سئو تأثیر دارد؟
یکی از سوالات رایج این است که آیا استفاده از Bento Grid به بهبود رتبه سایت کمک میکند یا نه. پاسخ کوتاه خیر است. فکر نکنید جون صرفا از یک لی اوت خوب یا ترند استفاده کردهاید پس رتبه بهتری هم میگیرید. چیزی که برای بالا آمدن سایت در گوگل مهم است کیفیت محتوا، ساختار درست HTML، سرعت بارگذاری بالا و دسترسپذیری و تجربه کاربری است. با این حال اگر طراحی بنتو گرید درست پیادهسازی شود روی بهبود عملکرد سئو تاثیر دارد.
در نهایت
بنتو گرید Bento Grid فقط یک ترند طراحی نیست. این نوع لی اوت یک روش برای سازماندهی بهتر محتوا و هدایت کاربر به سمت هدف صفحه است. این لی اوت با پیادهسازی اصولی میتواند صفحهای جذاب، خوانا و کاربردی بسازد. فقط فراموش نکنید که این مدل طراحی برای هر صفحهای با هر هدفی مناسب نیست و باید متناسب با نوع محتوا و هدف صفحه انتخاب شود.
برای دریافت اطلاعات دقیق درباره خدمات سئو با وب نگاران پارسه و دریافت قیمت سئو ماهانه و یا سالانه با کارشناسان ما تماس بگیرید: 02166928787 – 09123790588
سوالات متداول
آیا Bento Grid روی سئو تأثیر مستقیم دارد؟
خیر. استفاده از Bento Grid بهتنهایی باعث بهبود رتبه سایت نمیشود، اما اگر تجربه کاربری، ساختار محتوا و سرعت بارگذاری را بهبود دهد، میتواند بهصورت غیرمستقیم بر عملکرد سئو اثر مثبت داشته باشد.
Bento Grid را چطور پیادهسازی کنم؟
رایجترین روش، استفاده از CSS Grid است. در برخی پروژهها نیز برای کنترل بهتر چیدمان از ترکیب CSS Grid و Flexbox استفاده میشود.
آیا Bento Grid برای همه وبسایتها مناسب است؟
خیر. این سبک بیشتر برای صفحات معرفی محصول، خدمات، لندینگ پیج، داشبوردها و نمونهکارها مناسب است و برای صفحات مقالهمحور یا فروشگاههای دارای محصولات زیاد همیشه بهترین انتخاب نیست.