גריד וריווח · מדריך המיתוג

גריד: הבסיס לסדר

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

עמוד נוחת על גריד של 12 עמודות

כותרת: 7 עמודותתמונה: 5 עמודותכרטיסים: 4 + 4 + 4ניווט: כל ה־12

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

„מערכת הגריד היא כלי עזר, לא ערובה.”
יוזף מילר־ברוקמן, Grid Systems in Graphic Design (1981). הספר של הסגנון השוויצרי שעדיין קובע איך נראים עמודים, אתרים וספרי מותג. הגריד לא יעצב בשבילכם, הוא רק ייתן לכם על מה לעמוד.

סוגי גרידים

גרידים מתמטיים

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

גרידים חופשיים

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

ארבעה גרידים שכדאי להכיר בשם

Column grid

גריד עמודות

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

Modular grid

גריד מודולרי

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

Baseline grid

גריד קו בסיס

קווים אופקיים שהאותיות „יושבות” עליהם, כמו מחברת שורות. שומר על קצב אחיד בין עמודות סמוכות.

Hierarchical grid

גריד היררכי

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

ככה זה נראה בעבודות אמיתיות

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

פוסטר אפור של Heinz עם קווי גריד אדומים: כותרת ענקית, צללית של שעועית והמספר 57, הכול מיושר לעמודות

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

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

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

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

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

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

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

לחיצה על תמונה פותחת אותה בגדול.

כללים לריווחים ולהיררכיה

הגריד קובע איפה הדברים יושבים. הריווח קובע כמה אוויר יש ביניהם. ארבעה כללים:

שמרו על יחסים קבועים בין רווחים

שמרו על יחסים קבועים בין רווחים. לדוגמה: ריווח קבוע של 8, 16, 24 פיקסלים בין אלמנטים. ניתן לעבוד עם מערכת מודולרית (כפולות של 4 או 8 פיקסלים) כדי לשמור על אחידות.

למה דווקא 8? כי 8 מתחלק נקי לחצאים ולרבעים (4 ו־2), ולכן גם כשהמסך מגדיל את העיצוב פי 1.5, פי 2 או פי 3, כל המידות נשארות בפיקסלים שלמים וחדים. כי מספר אחד נותן לכל העמוד קצב משותף. ובעיקר כי זה חוסך החלטות: במקום להתלבט בין 13 ל־15, בוחרים בין 8 / 16 / 24. כמה הרגלים שמגיעים יחד עם השיטה:

כל המידות, הריפודים והשוליים בכפולות של 8: 8, 16, 24, 32, 40, 48, 56, 64.
4px הוא חצי יחידה, רק לכוונונים קטנים (בין אייקון לטקסט שלו, למשל).
גם גובה השורה בטקסט נקבע בכפולות של 4 או 8, כדי שהטקסט ישב על אותו גריד כמו כל השאר.
ב־Figma, הגדירו את ה„הזזה הגדולה” (Big nudge) ל־8px: כל לחיצה על Shift וחץ תזיז בדיוק יחידה אחת.

השאירו מרחב נשימה

השאירו מרחב נשימה (White Space). רווח הוא לא שטח מבוזבז; הוא יוצר סדר וקלילות.

ריווח עקבי בין שורות טקסט (Leading)

הקפידו על ריווח עקבי בין שורות טקסט (Leading). לרוב עדיף ריווח של 120%–140% מגובה הפונט. לדוגמה: פונט בגודל 20px ← Leading 24–28px.

גררו ושנו את הריווח בין השורות20px × 130% = 26px

120%–140%

100%120%140%160%180%

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

שני דברים שמשפיעים על המספר הנכון: כותרות גדולות צריכות פחות (בערך 100%–120%), ושורות ארוכות צריכות יותר, כי לעין יש דרך ארוכה יותר לחזור. אורך השורה עצמו והיררכיית הגדלים נמצאים בפרק הטיפוגרפיה. טיפוגרפיה והיררכיה

מהדפסה ועד מסך טלפון

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

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

מסך	רוחב	עמודות	מרווח בין עמודות
מחשב	905px+	12	24px
טאבלט	600–904px	8	16–24px
טלפון	0–599px	4	16px

ולמה דווקא 12 במחשב? כי 12 מתחלק נקי לחצאים, לשלישים, לרבעים ולשישיות. נסו:

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

טיפ מעשי: תבנית גריד קבועה

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

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

איך העין עוברת על עמוד

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

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

דפוס Z

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

דפוס F

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

דיאגרמת גוטנברג

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

כלל השלישים

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

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

ויחס הזהב?

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