استفاده از شبکه – Grid – و مفهوم چینش – Align

در این نوشته سعی خواهیم کرد با مفهوم Grid یا شبکه در طراحی وب سایت آشنا شویم و به اهمیت آن در چینش محتوای وب سایت ( Web Design Alignment ) بپردازیم


امیر سروری ۱۳ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت یکشنبه, ۲۶ام دی , ۱۳۸۹ 23053 بازدید

در این نوشته سعی خواهیم کرد با مفهوم Grid یا شبکه در طراحی وب سایت آشنا شویم و به اهمیت آن در چینش محتوای وب سایت ( Web Design Alignment ) بپردازیم .

تعادل ( Balance )

یکی از مهم ترین اصول در طراحی ، وجود تعادل ( Balance ) است . بالانس ، تعادل ، توزیع متناسب اجزاء سنگین و سبک در یک صفحه است . منظور از سنگینی و سبکی در اینجا ماهیت سنگین و سبک اجزاء هستند به طوری که اجزاء بزرگتر و تیره تر بسیار سنگین تر و اجزاء کوچکتر و روشن تر سبکتر به نظر می رسند. قانون تعادل به ما نشان میدهد چگونه یک صفحه همراه با تعادل را داشته باشیم .

یکی از ساده ترین و اصولی ترین روشها برای ایجاد تعادل در طراحی استفاده از شبکه ( Grid ) برای ایجاد یک تعادل و چینش متوازن و متناسب (alignment ) در طراحی است .

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

استفاده از این خطوط شبکه ( Grid ) با توجه به ماهیت چهار گوش صفحات وب در تعادل و طراحی صفحات وب بسیار موثر و کاربردیست.برای درک مفهوم چینش متوازن و متناسب در طراحی وب سایت تصاویر زیر را بادقت مورد بررسی قرار دهید.

استفاده از شبکه ( Grid ) در طراحی وب سایت و تعریف مفهوم چینش ( Align )

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

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

ماهیت وب سایت به طور معمول ماهیت اطلاع رسانی است و برای ارائه هر چه بهتر اطلاعات نیاز به طبقه بندی و چینش صحیح و مناسب اطلاعات است .

چگونه از شبکه ( Grid ) در طراحی وب سایت استفاده کنیم ؟

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

طراحان وب سایت با کمک و استفاده از این شبکه ها به راحتی ساختار ( layout ) وب سایت خود را طراحی می کنند، بدون اینکه نگرانی نسبت به ایجاد نا هماهنگی و بر هم خوردن چینش (alignment ) در ساختار ) layout ) وب سایت خود داشته باشند .

یکی از استانداردهای مورد استفاده در طراحی وب سایت با استفاده از شبکه ( Grid ) ، شبکه ۹۶۰px است .این شبکه بر مبنای عرض استاندارد ۹۶۰px برای طراحی وب سایت ، طراحی شده است .

با استفاده از این سیستم می توان به ساختارهای ۱۲ ستون ، ۱۶ ستون و ۲۴ ستون رسید
( ۲۴-column , 16-column , 12-column )

استفاده از شبکه ( Grid ) در طراحی وب سایت و تعریف مفهوم چینش ( Align )

استفاده از شبکه ( Grid ) در طراحی وب سایت و تعریف مفهوم چینش ( Align )

می توانید تمامی اجزاء تشکیل دهنده وب سایت خود را مانند ( Side Bar , Header , Content , Footer ) با استفاده از این سیستم طراحی کنید ، کاربرد margin ها و Padding ها با استفاده از این سیستم بسیار راحت و ساده است .

در تصویر زیر می توانید نمونه از layout ساخته شده با استفاده از سیستم شبکه را ملاحظه نمائید . با استفاده از این سیستم اندازه گذاری ها ، margin و padding به راحتی قابل محاسبه است ، و درصد اشتباهات بسیار پایین.

در صورت استفاده مناسب از این سیستم می توانید بهره وری خود را در طراحی وب سایت بسیار افزایش دهید

استفاده از شبکه ( Grid ) در طراحی وب سایت و تعریف مفهوم چینش ( Align )

استفاده از شبکه ( Grid ) در طراحی وب سایت و تعریف مفهوم چینش ( Align )

می توانید شبکه تهیه شده با استفاده از این استاندارد را برای طراحی در محیط فتوشاپ دانلود کنید .

۲۴-column , 16-column , 12-column

DOWNLOAD



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۱۳ دیدگاه برای این نوشته ثبت شده است


  1. Ali Aghdam
    ۲۶ دی ۱۳۸۹

    ایده ی خوبی است حتما از آن استفاده خواهم کرد ولی بهتر بود به قسمت دوم یعنی نحوه استفاده کردن از Grid بیشتر توضیح میدادید به نظر من یک پست دیگر نیز نیاز دارد(اگز لطف کنید:) )




  2. Ali Aghdam
    ۲۶ دی ۱۳۸۹

    یه توصیه دارم اونم اینه که فعلا چون مشترک فیدت کمه بهتره اون کانتر مشترکات رو برداری چون یه جور حس بدی نسبت به اعتماد به وبلاگ ایحاد میکنه




    • امیر سروری
      ۲۶ دی ۱۳۸۹

      هر چند که اعتقاد دارم ، میزان اعتبار به مطالب هست ولی به توصیه شما عمل کردم ، تشکر




  3. Nima
    ۲ بهمن ۱۳۸۹

    در وبلاگها و وبسایت های فارسی (محتوای فارسی) از این جور مطالب خیلی کم به چشم میخوره. حسن توجهتون آفرین داره. دوستان اگر میخوان این قوانین رو پیاده سازی کنند بهتره حتما از یک css framework استفاده کنند.




  4. مهیار
    ۳۰ تیر ۱۳۹۰

    لینک رو نمیشه دانلود کرد




  5. بابک
    ۵ شهریور ۱۳۹۰

    با جوملا که کار میکردم خیلی از قالب ها از پهنای ۹۶۰ استفاده کرده بودند و نمیدونستم که آیا این یک استاندارده یا از روی سلیقه بوده.
    ممنونم که توضیح خوبی در این باره ارائه کردید.
    خیلی خوشحالم که با بلاگ شما دوست عزیز هم آشنا شدم هر چند که مدت زیادی نیست ولی با خوندن مطالب پر محتواتون شوق زده شدم امیدوارم برقرار و سربلند باشید.




  6. سامان
    ۱۴ فروردین ۱۳۹۱

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




  7. javad
    ۲۶ فروردین ۱۳۹۱

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




  8. ابراهیم طاهری
    ۱۳ دی ۱۳۹۱

    ایده ی خوبی است حتما از آن استفاده خواهم کرد




  9. بهنام
    ۱۰ شهریور ۱۳۹۲

    سلام
    ممنون مفید

    یه درخواست
    اگرمیشود آموزشی از bootstrapتو سایت بزارید
    این بخشش رو اگه میتونید ترجمه کنید!
    http://getbootstrap.com/css/#overview
    وتوضیح بدید!
    ممنون!
    سوال
    چطورمیشه ارتفاع متغیر داشت!




  10. سعید
    ۸ مرداد ۱۳۹۳

    با درود و وقت بخیر
    این گریدها رو دانلود کردم
    حالا برای طراحی فقط کافیه که المانهای گرافیکی رو توی صفحه چید ؟
    در مورد “نحوه استفاده از گریدها” من جایی تو نت ندیدم که توضیح داده بشه
    ممنون میشم اطلاعاتی بزارین
    ب اتشکر



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





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.