Anis Aliabadi | انیس علی آبادی | گرافیست و طراح دیداری وبسایت و اپلیکیشن

گرافیست وبسایت - گرافیست اپلیکیشن

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

توسط انیس | مهر ۱۷, ۱۳۹۸ | 0 نظر

وبسایت

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

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

۱) نشان دهیم برخی عناصر رابطه‌ی نزدیکی با هم دارند نه اینکه به طور اتفاقی در کنار یکدیگر جایگذاری شده‌اند.

۲) متن و عناصر تصویری به طور قاعده‌مند در کنار یکدیگر قرار بگیرند.

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

طراحی_وب

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

آشنایی با برخی از اصطلاحات گریدبندی:

Container

عرض کل ناحیه طراحی

 Unit  (واحد)

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

وبسایت

Gutter

فضای خالی بین واحدها را gutter می‌نامند که در تصویر قبل با رنگ خاکستری مشخص شده

 Column (ستون)

از چند واحد و gutter تشکیل می‌شود و محتوا در آن قرار می‌گیرد. در تصویر زیر ستون‌های یک وبسایت با رنگ‌های متفاوتی نشان ‌داده شده است.

 

طراحی_وبسایت

انواع سایز container:

bootstrap-750px

bootstrap-970px

bootstrap-1170px

bootstrap-1560px

پرطرفدارترین گرید، گرید ۱۲ واحدی و gutter  ۳۰ پیکسلی است. یکی از دلایل محبوبیت این سایز این است که طراحان می‌توانند ستون‌های ۳، ۴ یا ۶ واحدی داشته باشند و این موضوع باعث تنوع در طرح خواهد شد.

گرید

به طور کلی تراز کردن محتوا یکی از اصول اولیه در طراحی وب است و با اعمال کردن گرید قابل اجرا است. طراحی بر اساس گرید این امکان را به بازدیدکننده می‌دهد تا روند و مقصود شما را از وبسایت بهتر دنبال کرده و از گیج شدن کاربر جلوگیری می‌کند.


TAGS

0 نظر

پاسخ دهید

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