(עיצוב כרזות פרסומת (באנרים

דף הבית

דף פירוט מדריכים

עיצוב כרזות פרסומת (באנרים)

עשו את שיעורי הבית החוקים הבסיסיים אנימציה תזמון אורן הטקסט מידת הקריאות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אינטראקטיביות במדיה מורכבת
חלק מהאתרים, כמו הוטוויירד, יסכימו לקבל כרזות בפורמטים אחרים מהסטנדרד של GIF,
GIF89 או JPEG. אתם יכולים להעביר את כל יתר חייכם בניסיונות עם כרזות שמשתמשות
בג'אווהסקריפט, DHTML, CGI סקריפטינג, ShockWave, פלאש או מדיה כמו RealAudio.
אבל זכרו שתצטרכו להפיק גם כרזות ברמה פחותה, בשביל דפדפנים ישנים יותר. באופן אישי,
הייתי מחכה עם האופציות האלו עד שרוב הגולשים יהיו מסוגלים לראות אותם, או לפחות
עד שיהיה לי רעיון שלא יוכל להתבצע בGIF סטנדרטי או JPEG.
לאחר שהגעתם לעיצוב כרזה שמשמח אתכם, הגיע הזמן לשלם את מס האופטימיזציה.

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

הבאנר הזה ל"ווירד" עושה שימוש ב-33 תמונות. הוא יכול להכיל כל כך הרבה תמונות בגלל
שהאזור שמשתנה מתמונה לתמונה קטן מאוד. שינוי כל הרקע בכל תמונה יכול להיעשות, אבל
זה מזיק בגודל הקובץ. זוכרים את הכרזה הירוקה של "הוטבאר" שהשתמשתי בו להדגמת
הלולאות? התנועה של העיגולים ברקע דרשה שינוי של כל הרקע בכל פריים. למרות שקמצנתי -
בטבעות הצהובות אין החלקת עקומות והן עשויות מצבע אחד - הייתי חייב להשתמש רק
בשלוש תמונות בכדי להישאר בגבולות קובץ של KB 15 (התמונה הרביעית כבר חרגה
מגבולות אלה).
ועוד הצעה: השתמשו בכמה שפחות צבעים בתהליך העיצוב. ברוב המקרים, יש מערכת יחסים
קלה לזיהוי בין כמות הצבע בכרזה (או כל מיצג אחר ברשת) וגודל הקובץ. ברור שתצטרכו
להשתמש בכמות מסויית של צבע בכדי ליצור מותג, להעביר מסר מסוים, או פשוט כי אתם
מרגישים שהצבעים שבחרתם הכרחיים לחלוטין ליצירת המופת שלכם. אבל למדו די מהר
להבדיל בין הצבעים שאתם צריכים והצבעים שאתם רק רוצים. יותר צבע, עם ערבובים
מורכבים, גורם לכך שלא תוכלו להדגיש את עומק ועדיין לשמור על איכות סבירה. הקטינו את
"עומק הביט" ותבחינו שהדפוס והתמונה יורדים ברמתם מהר מאוד כשיש כמה תמונות של
אנימציה.
בחלק מהמקרים, תשקלו להשתמש בדפוס "אליאזד" - aliased (בניגוד ל antialiased) בכדי
להפחית צבע באנימציה - הקצוות בדפוס כזה זקוקים לכמות צבעים נכבדת בכדי לשמור על
מרקם חלק.

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

אם אתם מתכננים להמשיך בעיצוב כרזות, יחד עם יצירות נוספות ברשת, אני ממליץ לבדוק
את Adobe ImageReady- די או את Macromedia FireWorks. תוכנות אלו של גרפיקה לרשת
יקלו על חייכם בעיצוב כרזות ובהפקתם. הן נותנות לך ליצור, להשתמש באנימציה, ולעשות
אופטימיזציה של הכרזה שלך בבת אחת. אם אין לכם גישה לאחת משתי התוכנות האלו וכבר
יש לכם תוכנה כמו פוטושופ, עדיין תצטרכו להוסיף תוכנת אופטימיזציה ומשהו שיאפשר
לכם ליצור אנימצית GIF, כמו GIFBUILDER.
עכשיו אתם מוכנים להתחיל להתנסות בעיצוב כרזות פרסומת. בקרוב תגלו כמה אפשרויות
קיימות במלבן קטן בגודל 468 על 60 תווים.