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

تعادل ( Balance )

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

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

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

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

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

تعادل ( Balance )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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