گرید بندی استاندارد بوت استرپ در طراحی رابط کاربری وب

یکی از بهترین روش ها برای استاندارد سازی طراحی های رابط کاربری، گرید بندی کردن صفحات کار طراحی بر اساس یک استاندارد است. یکی از پر کاربرد ترین این ها، استاندارد گرید بندی بوت استرپ است که در ادامه به توضیح آن میپردازیم.

Bootstrap چیست؟

Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد.
Bootstrap در ابتدا توسط مارک اتو و جاکوب تورنتون و در جهت ایجاد یک چارچوب ظاهری مشخص و یکسان در ابزارهای توییتر طراحی و نوشته شد. قبل از شروع این پروژه نمونه های زیادی با همین رویکرد ایجاد شده بود که همگی با سرنوشتی مشابه و عدم استقبال طراحان وب دنیا مواجه شده بودند. به دلیل وجود مشکلات اساسی در نمونه های دیگر، سازنده اصلی توییتر یا همان مارک اتو تصمیم به ساخت یک سیستم داخلی و قدرتمند برای خود با نام Bootstrap گرفت.

bootstrap elements

نمونه ای از المان های پیش فرض Bootstrap

در اگوست سال ۲۰۱۱، توییتر Bootstrap را بصورت متن باز و رایگان به عنوان یک فریم ورک طراحی وب سایت در اختیار دیگران قرارداد و در فوریه ۲۰۱۲ به محبوب ترین پروژه در سایت Github تبدیل شده بود.

کاربرد و اهمیت گرید بندی

  • نظم بیشتر در طراحی
  • طراحی با متد های استاندارد جهانی
  • آسان تر شدن و سریع تر شدن سایز گذاری برای المنت های طراحی

در این گرید بندی، صفحه شما که میتواند میزان ۱۴۴۰ یا ۱۶۰۰ داشته باشد تبدیل به ۱۱۷۰px میشود و محیط کار شما باید در همین ۱۲ قسمت صورت گیرد و این موضوع باعث می شود تا طراحی شما اصولی تر و با نظم تر شود. برای مثال شما میخواهید یک باکس برای اخرین محصولاتتان ایجاد کنید. برای این کار اندازه ۳ column (اندازه ها، بسته به طراحی شما دارد) را در نظر گرفته و عرض تمام باکس هارا به اندازه ۳ قسمت از ۱۲ قسمت طراحیتان در نظر میگیرید.

با این کار، طراحی شما نظم بیشتری گرفته و اصولی تر جلو میرود.

تنظیم گرید برای صفحه کار طراحی

برای این کار در فتوشاپ باید به بخش View/Guide Layout و در اسکچ باید به بخش View/Layout Setting رفته که در تضویر زیر مشاهده میکنید.

برای اندازه های صفحه نمایش های مختلف میتوانید از جدول زیر استفاده کنید.

برای طراحی صفحات وب در رزولوشن های بالای ۱۲۰۰ باید از جدول سمت راست استفاده کنید و اطلاعات مورد نیاز را وارد تنظیمات برنامه طراحی خود کنید (Large devices Desktops) 

همچنین میتوانید از فایل های آماده گرید بندی نرم افزار فتوشاپ و اسکچ را از اینجا دانلود نمایید.

امیدوارم که از این آموزش بهره لازم را برده باشید.

 

یک طراح جوان رابط کاربری با اهدافی بزرگ :)
وبسایت http://SadeghEidi.ir
نوشته ایجاد شد 37

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نوشته های مرتبط

متنی که میخواهید برای جستجو وارد کرده و دکمه جستجو را فشار دهید. برای لغو دکمه ESC را فشار دهید.

بازگشت به بالا