.svg)
.svg)
.svg)
آشنایی با صفحه آرایی در Grid
امروزه با پیشرفت سریع تکنولوژی و استفاده وسیع کاربران از اینترنت گوشی همراه لزوم واکنش گرا بودن سایت ها بیشتر از قبل مورد توجه قرار گرفته در واقع یکی از اولیه تری انتظارات یک کاربر از یک سایت این است که با باز کردن سایت مورد نظر در نمایشگرای مختلف با یک وب سایت در هم ریخته و نامرتب مواجه نشود.
[(quote)|براین اساس طراحی سایت واکنش گرا که در اصطلاح به آن "ریسپانسو" نیز گفته میشه از الزامات طراحی سایت با نماسایت است .]
به این ترتیب از اولین مرحله طراحی گرافیکی تا پیاده سازی وب سایت باید بر اساس اصول ریسپانسیو انجام بشه .
الزام طراحی ریسپانسو مطابقت اون با اصول گرید بندی هست . با در نظر گرفتنن اصول گریدبندی طراحی در ستون بندی هایی که که برای انواع مختلف نمایشگر درنظر رفته شده انجام میشه .
ما برای گریدبندی از سیستم BC-Col که مخفف Basis-Core استفاده می کنیم .
[(img)|1043159704941001B|Field Elements ]
شما در طراحی با المان ها سر و کار داریدن که آنها در واقع بلاک های شما هستن.
این المان ها می توانند متن , تصویر یا ترکیبی از آنها باشن . البته رنگ زمینه المان محسوب نمی شه
نام هر المان می تونه یک بخش کانتِینر پدر باشه .
[(imgright)|1043153804941001B|Columns یا ستون ها ]
المان هایی که توضیحات آن داده شد باید در تعداد مشخصی از ستون ها قرار بگیره .
قاعدتا در طراحی ، عرض ستون ها نباید تغییر کنه ولی تعداد ستون ها در Desktop دوازده , در Tablet هشت و در موبایل چهار هست .
با این حساب شما هر چیزی میتونین استفاده داشته باشین یعنی اندازه ستون ها و تقسیم بندی آنها با توجه به فاصله بین ستون ها باید بر اساس نحوه چیدمانی که برای المان ها دارید باشه .
[(img)|1043151804941001B|Gutters یا گپ ها]
Gutters فواصل بین ستون های شما هستن که عموما20Px در نظر گرفته میشه .
این فواصل در طراحی های بلاک محور و کارت محور مثل گالری بسیار مهم هستن. در سیستم های طراحی عموما با کاهش اندازه Device فاصله ها هم کم میشه .
[(imgleft)|1043152804941001B|Side Margin ]
فضای بیرونی در واقع فضای سفید بیرون از عرض مطالب و Content شما هست.
فواصل بیرونی با افزایش اندازه عرض Device افزایش پیدا میکند. Side Margin ها عموما در موبایل 20-30 Px هست .
[(img)|1043150804941001B|قوانین گریدبندی در طراحی]
1. قرار دادن المان در ستون های مشخص :
این انتخاب شما هست که چه تقسیم بندی برای ستون ها (grid) در نظر میگیرین که 4 تا 3تایی یا 4تا 3تایی یا 6-6 ستون باشه.
2. رها نکردن المان ها بین فضا و فواصل خالی :
المان ها باید در ستون ها قرار بگیرن و اگه این مسئله به هر شکلی رعایت نشه یعنی شما گریدبندی را رعایت نکردین .
3. مشکلی ندارد اگر المان وکانتینر اصلی ( پدر ) در ستون مشخص قرار گرفته است و المان های داخلی (فرزند) شما با گریدها هم تراز نباشه.
4. استفاده نکردن از ستون ها به عنوان Padding
فضاهای سفید بیرونی در واقع Padding شما هستن و دیگر نیازی به در نظر گرفتن یک ستون به عنوان Padding نیست .
5. المان های (Full Bleed ) تمام صفحه را که صد در صد مرورگر و محیط اجرایی هستن را نباید به عنوان در نظر نداشتن ساختار گریدبندی طلقی کرد .
در طراحی همیشه استثناهایی هم وجود داره مثل فوتر – هدر – Nav – اسلایدر .
گاهی برای اینکه در Nav فضای بیشتری داشته باشیم باید تمام صفحه در نظر بگیریم.
عموما در طراحی گرید محور عرض ستون ها و فواصل ثابت باقی می مونه و تنها نام گذاری ستون ها تغییر میکنه اما چرا ؟
فرض کنین شما 3 کارت در Desktop را در 4 ستون قرار میدهید.
در Tablet شما باید 2 کارت را در یک ردیف و کارت دیگر در ردیف بعدی همین طور در تلفن همراه کارت ها در 4 ستون قرار میگیره که هر کارت در یک ریف و بقیه کارت ها در اسکرول عمودی قرار خواهند گرفت و در نتیجه نیازی به تغییر اندازه ستون ها نیست .
تهیه شده
توسط تیم تحریریه نماسایت
مقالات دیگر
عقد قرارداد طراحی وب سایت خلاقانه شرکت رامند با نماسایت
طراحی خلاقانه ui/ux بر اساس هویت سازمانی و شخصیت مخاطب هدف برای شرکت رامند فعال در زمینه طراحی و اجرای انواع صفحات کانترتاپ، درب‌های اتاقی و ورودی، کابینت و سایر مصنوعات چوبی در دستور کار نماسایت قرار گرفت....
باز طراحی و تدوین استراتژی کسب و کار آنلاین مبلمان زیتون برای چهارمین سال فعالیت با نماسایت
طراحی مجدد ui/ux وب سایت ، توسعه کلمات کلیدی و افزایش ورودی در سال چهارم فعالیت با مبلمان زیتون در دستور کار نماسایت قرار گرفت. مبلمان زیتون از تولید کنندگان مطرح مبلمان کلاسیک ، استیل و لوکس ، مبلمان مدرن و درب های لوکس لابی و...
طراحی و بهینه سازی وب سایت شرکت بامداد پتروپارسان به نماسایت واگذار گردید
طراحی وب سایت و بهینه سازی کلمات کلیدی شرکت بامداد پتروپارسان با بیش از 10 سال سابقه فعالیت، پیشرو در زمینه تولید و بازرگانی مواد شیمیایی و محصولات پتروشیمی مورد نیاز صنایع در سطح ایران و جهان در دستور کار نماسایت قرار گرفت....
طراحی و بهینه سازی وب سایت سراست به نماسایت واگذار گردید
طراحی ui /ux ، برنامه نویسی و بهینه سازی وب سایت شرکت پدیده تجارت شکیبا با برند تجاری سراست در دستور کار نماسایت قرار گرفت. برند سراست با نگاهی هنرمندانه و با بکارگیری از پیشرفته ترین و مدرنترین ماشین آلات روز دنیا ، اقدام به...
خدمات سئو سایت
سئو سایت، برگ برنده در فضای آنلاین تا به حال از خودتان پرسیده‌اید در ایامی که جست‌وجو در اینترنت به اقدامی در دسترس و قابل اطمینان در میان تمامی قشرها به منظور کاربردهای مختلفی از جمله خرید، یافتن پاسخ انواع و اقسام سوالات،...
طراحی سایت حرفه‌ای
در دنیای تکنولوژی که با هر کلیک رقبای شما جلوی چشم مشتریان کاربران بالقوه‌تان قد علم می‌کنند و ظاهر می‌شوند، طراحی سایت حرفه‌ای و خلاقانه برگ برنده شما، بیزنس شما و اهداف پیش رویتان است. حتی اهمیت طراحی سایت به گونه‌ای است که...
نمونه سایت‌های خلق شده
