גריד (Grid System)

כשמדברים על עיצוב אתרים או ממשקי משתמש עקביים ומאוזנים, אי אפשר להתעלם מהגריד. גריד הוא הכלי שמאפשר למעצבים ולמפתחים ליישר אלמנטים, לשמור על מרווחים אחידים וליצור פריסה שנראית מסודרת בכל מסך, מבלי שהמשתמש בכלל שם לב שהוא קיים.

מה זה גריד (Grid System)?

גריד הוא מבנה בלתי נראה של עמודות, שורות ומרווחים, שמשמש בסיס לסידור התוכן והאלמנטים החזותיים בעמוד. במקום למקם כל כותרת, תמונה או כפתור באופן חופשי, המעצב מציב אותם ביחס לעמודות הגריד, כך שנוצרת התאמה ויזואלית בין כל חלקי העמוד.

מרכיבי הגריד: עמודות, מרווחים ושוליים

גריד בנוי משלושה מרכיבים עיקריים. העמודות הן הרצועות האנכיות שבתוכן ממוקם התוכן, המרווחים (Gutters) הם הרווח האחיד בין עמודה לעמודה, והשוליים (Margins) הם הרווח שבין תוכן העמוד לקצוות המסך. השילוב בין שלושת המרכיבים קובע כמה תוכן אפשר להציג בשורה אחת ובאיזה מרווח בין הפריטים, מבלי שהעמוד ייראה צפוף או מפוזר.

למה גריד חשוב בעיצוב אתרים ו-UI

גריד עוזר ליצור עקביות בין כל עמודי האתר, כי אותה מערכת עמודות חוזרת על עצמה בדף הבית, בעמודי מוצר ובעמודי תוכן. זה מקל על המשתמש להתמצא באתר, כי העין כבר מזהה תבנית מוכרת, וגם מקל על צוות העיצוב לשמור על שפה ויזואלית אחידה. עבודה עם גריד כבר בשלב הWireframeשרטוט ראשוני שמציג את מבנה ותכנון הדפים באתר מאפשרת לתכנן מראש איך כל מסך יתפוס את מקומו, לפני שמתחילים לעצב את הפרטים החזותיים.

גריד רספונסיבי: איך הגריד מסתגל למסכים שונים

באתרים מודרניים הגריד אינו קבוע, אלא משתנה בהתאם לרוחב המסך. באתר בעיצוב רספונסיבישיטת עיצוב שמאפשרת לאתר להתאים את עצמו אוטומטית לכל סוגי המכשירים, גריד שמציג שנים עשר עמודות במחשב שולחני עשוי לצמצם עצמו לארבע עמודות בטאבלט ולעמודה אחת בלבד בטלפון נייד. השינוי מתרחש בכל נקודת מעבר מוגדרת מראש, הנקראת ברייקפוינטרוחב מסך מוגדר מראש שבו הפריסה משתנה כדי להתאים למכשיר, שבה מבנה הגריד מותאם מחדש כדי לשמור על קריאות ונוחות שימוש בכל גודל מסך.

טעויות נפוצות בעבודה עם גריד

טעות נפוצה היא בחירה במספר עמודות שלא מתחלק בקלות, מה שמקשה על יישור אחיד של תוכן ברוחבים שונים. טעות נוספת היא התעלמות מהמרווחים: כשמצמידים אלמנטים זה לזה בלי גוטר עקבי, הפריסה מרגישה צפופה גם אם הגריד עצמו תקין. חשוב גם לזכור שגריד הוא כלי שנועד לעזור לעין להתמצא, ולא מגבלה נוקשה: לפעמים דווקא חריגה מבוקרת מהגריד, למשל תמונה גדולה שפורצת החוצה, יוצרת דגש חזותי מכוון.