Home » HTML » עיצוב לאינטרנט – שימוש בגריד

עיצוב לאינטרנט – שימוש בגריד

כתבה סיגלית אריאלי, מרצה בקורס בניית אתרים במנטור

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

אז איך זה עובד? השיטה הנפוצה ביותר היום היא חלוקת העמוד ל-12 טורים שווים (שבינהם יש רווחים שווים). חשוב לזכור כי מספר הטורים משתנה בהתאם לגודל המסך, כך שמסך של סמרטפון יחולק, לרוב, ללא יותר משלושה טורים, ואילו מסך של טאבלט יכול להכיל גם 6 ואפילו 8 טורים (כאשר צופים בו בתצוגה אופקית).
נחזור לחלוקה ל-12 טורים. אם יש תמונה (או תפריט ניווט) ברוחב כל רוחב העמוד, היא למעשה תהיה ברוחב של 12 הטורים. מתחת לתמונה ימוקמו שתי תמונות גדולות, שרוחב כל אחת מהן הוא 6 טורים. מתחת לשתי התמונות האלו יהיו עוד 4 תיבות מלל, שכל אחת מהן תהיה ברוחב של 3 טורים.
השיטה הזו חוסכת לנו את הצורך בחישוב רווחים בין תיבות (תמונות או תיבות מלל), חישוב רוחב של כל טור וכן הלאה.

960home

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

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

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

gridIllustrator

עיצוב “מסגרות” בעזרת גריד של 12 טורים בתוכנת אילוסטרייטור

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

Be Sociable, Share!

    .התגובות סגורות