طراحی

آنچه که باید درباره گریدبندی در صفحه آرایی بدانید

گرید در صفحه آرایی

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

گریدبندی در صفحه آرایی چیست؟

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

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

گریدبندی چیست

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

گرید پایه

نخستین گریدی که قصد داریم در مقاله «گریدبندی در صفحه آرایی چیست» به آن بپردازیم، گرید پایه است. این گرید یک شبکه خطی متشکل از یک سری خطوط متراکم به صورت افقی با فاصله یکسان است که تعیین می‌کند متن کجا قرار گیرد. گریدهای پایه اغلب در ترکیب با گریدهای ستونی استفاده می‌شوند تا اطمینان حاصل شود که خطوط متن در هر ستون به طور یکنواخت در سراسر یک صفحه، تراز می‌شوند. یک مثال ساده از یک گرید پایه، یک ورق کاغذ خط‌دار است، مانند آنچه احتمالاً در مدرسه استفاده می‌کردید!

گرید ستونی

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

گرید مدولار

یک شبکه مدولار که نوع توسعه یافته شبکه ستونی است، شامل یک سری گرید ستونی و افزودن سطرهایی به آن است. سطرها و ستون‌های متقاطع «ماژول‌هایی» را ایجاد می‌کنند که می‌توان از آن‌ها برای کنترل تصمیم‌های چیدمان استفاده کرد. مجلات و گزارش‌های شرکتی اغلب از شبکه‌های مدولار استفاده می‌کنند.

انواع گریدبندی صفحه

گرید دست نوشته

این یک شبکه یک ستونی است که به سادگی تعیین می‌کند که متن در کجای صفحه قرار گیرد. کتاب‌های کلاسیک و «سنتی» از یک شبکه دست‌نویس استفاده می‌کنند، به این ترتیب در صفحه‌آرایی، صفحات روبه‌رو همدیگر را منعکس می‌کنند.

گرید پیکسل

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

گرید سلسله مراتبی

گرید سلسله مراتبی به هر شبکه نامنظمی اشاره دارد که نیازهای خاصی را برآورده می‌کند. یک شبکه سلسله مراتبی ممکن است کاملاً آزاد باشد یا ممکن است از دو شبکه روی هم قرار گرفته یا سایر عناصر اضافی در گریدبندی تشکیل شده باشد.

آنچه که باید درباره گریدبندی در صفحه آرایی بدانید

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

گریدبندی روی نقشه

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

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

از همین رو یکی از مهم‌ترین مسائلی که گروه مشاوران طراحی افراگرافیک در صفحه آرایی و صفحه بندی بر روی آن تاکید فراوان دارند، موضوع گریدبندی حرفه‌ای صفحه است. چنانچه بخواهید انواع خدمات ما در این زمینه را مشاهده کنید، کافیست وارد لینک بالا شوید و با توجه به نیاز خود مشخصات و قیمت یکی از موارد «صفحه آرایی فوری»، «صفحه آرایی کتاب» یا «صفحه آرایی مجله» را بررسی و مشاهده کنید.

سخن پایانی

در پایان مقاله گریدبندی در صفحه آرایی چیست بد نیست بدانید که Villard De Honnecourt نام هنرمندی است که سیستم گرید را با «نسبت طلایی» ادغام کرد تا صفحه‌آرایی چاپ شده با حاشیه‌هایی بر اساس نسبت‌های ثابت تولید کند. همانطور که اکثر کتاب‌ها و مجلات چاپی نشان می‌دهند، استفاده از این روش تا به امروز ادامه دارد. ناشران، ویراستاران و طراحان، تلاش زیادی برای حفظ این روش انجام می‌دهند.

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

 

بازگشت به لیست

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

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

16 − 13 =