آموزش طراحی وب

طراحی بر مبنای گرید های استاندارد

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

سلام به همه گرافیک دوستان و علاقه مندان به طراحی وب ،

این نوشته تحت عنوان طراحی بر مبنای گرید های استاندارد برگرفته از دومین شماره ماهنامه طراحی وب هست که تقدیمتون خواهد شد .

طراحی استاندارد همیشه جزء توجهات ویژه طراحان گرافیک و برنامه نویسان بوده و هست ، از طرفی ایجاد سهولت در استفاده از ابزارهای مختلف برای پیاده سازی این استاندارد ها هم بسیار حائز اهمیت هست .
همونطور که میدونید ما در طراحی گرافیک صفحات وب استاندارد هایی رو میبایست رعایــــــــــت کنیم . یکی از مهمترینِ این استاندارد ها که نامش Grid Base Design ( طراحی بر اساس شبکه بندی های منظم و استاندارد ) هست که عرض های استانداردی مانند ۹۶۰ پیکسل ، ۹۷۸ پیکسل ، ۱۲۱۸ پیکسل و یا ۱۳۷۸ پیکسل دارند .

در طراحی هر چقدر اجزاء طرح اعم از لوگو ، منو ها ، متون ، جعبه های مختلف ، کلید ها و … در سطر و ستون های منظم قرار گرفته باشند ، اصطلاحاً گفته میشه طراحیِ تمیزی انجام شده ، از طرفی پس از کدنویسی و پیاده سازی سایت نیز ، بخش های مختلف سایت بسیار مرتب و منظم در کنار هم قرار گرفته اند وچشم مخاطب برای دیدن بهتر بخش های مختلف راحت تر خواهد بود . همچنین طراحی انجام شده برای کدنویسی هایی با عرض های ثابت و حتی واکنشگرا ( Responsive ) قابل استفاده هست پس مسلما بهتره که مبنای طراحی ما بر پایه گرید ها باشه و البته کار طراحی و چیدمان اجزاء طرح رو هم بسیار راحت تر میکنه .

لازم میدونم برای مفهوم سازی بهتر به تصویر زیر دقت کنین :

12-01_alignmentexample

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

خب حالا ببینیم با این گرید ها چه سایت هایی تا به حال طراحی شده :

02 03 01
وب سایت پروژه دروپالhttp://drupal.org
استفاده از گرید ۱۲ ستونه ( col 12 )

وب سایت پروژه فدورا

http://fedoraproject.org
استفاده از گرید ۱۶ ستونه ( col 16 )

وب سایت سونی موزیک

http://www.sonymusic.com
استفاده از گرید ۱۶ ستونه ( col 16 )

08 06 05
وب سایت معروفhttp://pulseapp.com
استفاده از گرید ۱۶ ستونه ( col 16 )
وب سایت معروفhttp://qatar.vcu.edu
استفاده از گرید ۱۲ ستونه ( col 12 )
وب سایت معروفhttp://tapbots.com
استفاده از گرید ۱۲ ستونه ( col 12 )

 

همونطور که دیدید طراحی این وب سایت ها طبق گرید های استاندارد ۹۶۰ پیکسل و با ستون های ۱۲ و ۱۶ انجام شده و نظم بسیار خاصی رو به اجزای مختلف وب سایت داده  است . در زیر میتونید گرید های مختلف از ۹۶۰ رو مشاهده کنید :

 

گرید ۲۴ ستونه

0001

 

گرید ۱۶ ستونه

0002

 

گرید ۱۲ ستونه

 

 

0003

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

دانلود گرید ۹۶۰ : http://960.gs
دانلود گرید های ۹۷۸ و ۱۲۱۸و ۱۳۷۸ : http://978.gs

براتون آرزوی موفقیت دارم
همیشه استاندارد باشید 🙂

 

منبع : ماهنامه طراحی وب

 

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۷

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین