היסטוריה ושימושיות בגריד חלק ד' ואחרון - טיפים

המשך למאמר המתורגם חלק א', ב' וחלק ג' על היסטוריה ושימושיות בגריד

5 טיפים מובילים לשימוש בגריד

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

1. תכננו כיצד גריד קשור למכולה שלו [קונטיינר – הדיב שעוטף אותו]
יוזף מולר-ברוקמן הדגיש בספרו מערכות גריד כי האופן בו גריד ממוקם בתוך העמוד - כיצד מסדרים את השוליים - יכול להשפיע רבות על ביצועי הגריד הן מבחינת פונקציונאלית והן מבחינה אסתטית.

1597650550267.png


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

1597650563082.png


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

1597650590797.png


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

1597650605260.png


5. לעיצוב אינטרנט UI, כדאי לשקול להשתמש במערכת כמו גריד של 8px
כיום העיצובים שלנו צריכים לעבוד ולהיראות על פני מגוון מכשירים ורזולוציות מסך. שימוש בממדים ומרווחים שהם כפולות של מספר בסיס עוזר להפוך את המעברים הללו לנקיים ושיטתיים. כיום מקובל להשתמש בגריד 4 פיקסלים או 8 פיקסלים, מכיוון שמשמעות הדבר היא שעיצובים יכולים להתאים בצורה מושלמת על מסכי רטינה: פיקסל אחד במסך ברזולוציה נמוכה הופך לגריד של 2 על 2 פיקסלים על מסך ברזולוציה גבוהה.
1597650632557.png


דוגמאות לאתרים עם גרידים שונים

1597650651648.png

Pixelot.de מאמץ באמת את הגריד, שומר על הקו אופקי והקו האנכי גלויים

1597650666499.png

42Angels.com מבוסס על גריד של 5 עמודות, אך משתמש גם ברקע פסיפס עדין כדי להשלים את המראה

1597650682224.png

TDHCreative.comשומר את זה נחמד ופשוט

1597650703504.png

AraWines.com משתמש בגריד מודולרי יותר מורכב

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

1597650732748.png

גריד של 4 עמודות כשפריצת גבולות הגריד נעשית משני הצדדים כדי לשמור על איזון

1597650746535.png

גריד של 5 עמודות

1597650763343.png

גריד של 6 עמודות

1597650790795.png

אתר המשלב גריד של 4 עמודות עם גריד של 3 עמודות

סוף

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

הסטודיו נותן מענה לתחומים רבים ובעיקר בעיצוב UX/UI - אפיון ועיצוב חווית משתמש, ובניית אתרים במערכת וורדפרס. כמו כן הסטודיו מלמד את תחום העיצוב ובניית אתרים כולל לימוד מעמיק בוורדפרס ואלמנטור ולמי שמעוניין גם ב HTML ו CSS.

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

תוכלו להתרשם מתיק העבודות של הסטודיו, ולהכיר רמה חדשה של מעוף, ביצוע ותיפעול.
https://timnatio.co.il
https://timnati.info
אשמח לשוחח איתכם, להכיר את העסק שלכם ולתת הצעת מחיר מקדמת ומותאמת בדיוק לעסק שלכם.
להצעת מחיר: 052.767.3419

תגובות

לוח מודעות

More from תמנתי ווב דיזיין

שתף את המאמר

למעלה