הכל אודות עיצוב באנרים לאינטרנט

logo-greissdesign-animמה זה באנר פרסומי באינטרנט?

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

עבור לגלריית באנרים

אלו סוגי באנרים יש?

  • באנר מונפש בתוכנת פלאש – Animate
  • באנר סטטי כתמונה, JPG
  • באנר מונפש באנימציית תמונות. מה שנקרא באנגלית Gif Animation
  • באנר מונפש ב- Html5

טיפים לעיצוב באנר

  • איפה מפורסם? – בדקו עם הלקוח איפה הוא מפרסם את הבאנר. האם דרך קמפיין גוגל, האם ברשת החברתית פייסבוק, או בכלל באתר פרטי.
  • קבלת פרטים מהלקוח – טקסט, תמונות, לוגו וכו'.. בשלב זה פעמים רבות נצטרך לעזור ללקוח שלא יודע בדיוק מה הוא רוצה ולא יודע איך באנר אמור להראות.
  • רשימת דרישות – לכל מדיה פרסומית יש את הדרישות שלה להעלאת באנרים. למשל באנר מודעה לפייסבוק יהיה בגודל של 1200X628 פיקסל וטקסט לא יכול לעבור את ה-20% משטח המודעה. לצורך בדיקה זו אין צורך לחשב כמה יוצא 20%. תוכלו לבדוק זאת ע"י העלאת הבאנר שיצרתם לקישור הבא. במהלך המאמר אפנה לקישורים נוספים שיעזרו לכם לבדוק את כשירות הבאנר שלכם.
  • גודל – יש להקפיד לעצב ולבנות את הבאנר בגודל הנכון. טעות בפיקסל או בלבול בין רוחב לגובה יגרור תסכול מצדכם ותצטרכו לעבוד שוב. אם מדובר בקמפיין פרסומי לגוגל, תמצאו בהמשך המאמר קישור לרשימת דרישות של גוגל כולל גדלים. כל שיש לעשות הוא לוודא עם הלקוח אילו מהגדלים הוא בחר.
  • סטורי בורד – עיצוב באנר בפריימים כלומר כסטורי בורד, כתמונות סטטיות בתוכנת אילוסטרייטור או פוטושופ. איך שנוח לכם. אני ממליץ על אילוסטרייטור. המטרה: להראות ללקוח איך יראה הבאנר לפני הנפשה.
  • רק לאחר אישור הלקוח את הסטורי בורד, נוכל לגשת להנפשת הבאנר בתוכנת Animate מה שהיה עד לא מזמן מוכר כ-פלאש. הסיבה היא שאם נתחיל ישר ב-Animate וללקוח יהיו שינויים, תיקונים שלא קשורים לאנימציה אלא לעיצוב עצמו, יהיה קשה הרבה יותר לשנות. לכן חשוב מאוד להסביר ללקוח שלאחר אישור הסטורי בורד, לא יהיו שינויים בעיצוב.
  • שלב ההנפשה – נתחיל בהנפשה בשלבים ולא של כל הבאנר בבת אחת וכל שלב בהנפשה יועבר ללקוח לאישור. שוב מאותה הסיבה שלתקן ציר זמן שלם קשה יותר מאשר חלקים מסויימים.
  • שלב סגירת הבאנר – לאחר אישור סופי של הלקוח יש ליצור כפתור שיוביל את הגולש שיקליק על הבאנר לאתר/לדף נחיתה של הלקוח. בדר"כ הפקודה בכפתור תהיה getURL ופתיחת האתר בחלון חדש _blank לפעמים האתר המפרסם ידרוש שתשימו בכפתור קוד שונה לדוגמה clickTarget או GET או clickThru. שיטה זו נכונה לגבי אתרים פרטיים שמפרסמים כמו ביזפורטל, וואלה, Ynet וכו'.. לעומת זאת בעיצוב באנר לקמפיין בגוגל, אין צורך ביצירת כפתור וקוד הפניה לאתר היות והפניה זו מתבצעת בידי מנהל הקמפיין דרך חשבון גוגל.

זמן הבאנר

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

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

משקל הבאנר

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

מה עושים כדי שהבאנר ישקול כמה שפחות?

  • במידה וניתן ליצור את הגרפיקה כגרפיקה וקטורית ב-Animate או בתוכנת אילוסטרטור עדיף על ייבוא תמונה ל-Animate , היות ותמונה תשקול יותר מגרפיקה וקטורית.
  • במידה והגרפיקה הוקטורית מכילה אלמנטים רבים מדי, עדיף להשתמש בתמונה היות ואלמנטים (אפילו שהם וקטורים) רבים מדי מכבידים יותר מתמונה.
  • תמונות יש לשמור בתוכנת פוטושופ במשקל הקל ביותר שניתן ע"י שמירה לאינטרנט ובחירה בפורמט המתאים והורדת משקל התמונה גם עם זה על חשבון האיכות. תוכלו למצוא מידע נוסף כאן אודות סוגי פורמטים של תמונות
  • במידה ותמונה חוזרת בבאנר יותר מפעם אחת, יש ליצור ממנה סימבול. היות ומופעים של סימבול לא שוקלים כמו התמונות עצמן.
  • במידה והבאנר עובר את המשקל הנדרש ע"י האתר המפרסם, יש לבדוק איתם אם הם יכולים להשתמש בבאנר טוען Loader – באנר ריק (ולכן גם לא שוקל בכלל) המכיל כפתור שקוף עם קריאה לבאנר האמיתי. במידה ומעלים באנר לקמפיין גוגל, לא ניתן לעבור בכלל את ה- 150 קילובייט. כלי שיעזור לכם לדעת האם הבאנר שלכם "כשיר" לעלות בגוגל תמצאו פה.

תהנו,
רן