Making a Better App. חוברת הדרכה לגרפיקאים /מעצבים /פרסומאים
אני זוכר ימים בלי אינטרנט )בעברית :מִרְ שֶ תֶ ת( בלי סמרטפונים ובלי ראש מסובך )מידי( חלק מבעלי העסקים היו עושים דיוור בפקס… אלו שקבלו את זה -לא אהבו את זה אבל זה היה חוקי (: לימים הגיע האינטרנט סטיב ג׳יובס )עם הסמרטפונים( והמשבר הכלכלי של ) 2008שהגיע בעיקר מחוסר נוגדנים ]רגולציה[ לקדמה הקיימת( והקדמה -נטולת הנוגדנים הביאה איתה פער הולך וגדל בכל הקשור לעסק הקטן והבינוני ביחס לתאגידים ופער זה הוציא מהמשחק כלים )פרסומיים( שעד אתמול היו מובנים ואפקטיביים כמו הפלייר )הי״ד( ולצערנו ,האינטרנט עצמו עושה שרות טוב יותר לעסק הענק -ביחס לעסק הקטן. האפליקציה שאנחנו מציעים לעסקים באה לחסל חלק מהפערים הנ״ל והיא מאפשרת לבעליה להגיע הכי קרוב שאפשר: אל כף היד של הלקוח הפוטנציאלי. התפקיד שלנו -המעצבים ,הגרפיקאים וכל מי שעוסק בתחום זה הוא להשקיע עוד 2דקות מחשבה על הבאנר והאייקון על מנת לעזור -ולוּ במעט לעסק הקטן והבינוני שכל כך חשובים -לכל אחת ואחד מאיתנו.
כמה מלים לפני שמתחילים חברת אקטיב קארד בע״מ פיתחה ועדיין מפתחת את המערכת שאנחנו קוראים לה ״סייפ״ )שזה הלחם של המלים סייט +אפליקשיין( .המערכת מאפשרת לכל אדם עם או בלי ידע ונסיון במחשבים ליצור תכנים שבסופו של דבר -אלו מוצגים )במרבית המקרים( בטלפונים חכמים. השקענו הרבה זמן על מנת ליצור מערכת פשוטה -ומוקשים שלא הצלחנו לפרק )משמע :אם היתה פונקציה מסובכת מידי( פשוט לא שילבנו במערכת -ומה שניסינו לעשות זה לישם את הכלל :אם זה לא פשוט לישום -זה לא יכנס בכלל. ובכל זאת היה מוקש אחד -חריג ,שלא הצלחנו לפרק והוא נמצא בתוך כל אפליקציה -וזה העיצוב הגרפי. יש קשר עמוק בין נראות האפליקציה )משמע :האם האפליקציה יפה או לא( לבין איכות המרכיבים הגרפיים שבונים את האפליקציה. על מנת לפשט את המלאכה השתדלנו שיהיו כמה שפחות מרכיבים -ואלו האובייקטים שחייבים להיות: .1באנר .2אייקון למסך הבית )אם לא יהיה יופיע אייקון של סייפ( מרכיב נוסף שרצוי להוסיף זו הרחבה ויזואלית .בדרך כלל היא מופיעה כעמוד פתיחה. אם ביצענו את שני או שלושת האובייקטים הנ״ל -הרי שבפועל -המלאכה נסתיימה. חוברת זו מתיחסת למערכת ולאפליקציה מההיבט הגרפי בלבד. בברכה -והצלחה לכולנו צוות אקטיב קארד בע״מ.
איקונים )למסך הבית( מידת האייקונים שאנחנו עובדים איתה היא 152על 152פיקסלים. חשוב לזכור שהאייקון מופיע במקום בו מופיעים איקונים נוספים ובמרבית המקרים אלו מעוצבים ע״י טובי המעצבים )אפל ,גוגל ,אדובי…( .הבעיה מבחינתנו היא :שלא תמיד הלוגו שאנחנו אמורים לעבוד איתו עוצב בכובד ראש ומתוך מחשבה יתרה… אבל מהנסיון שכבר יש לנו ,כמעט מכל לוגו ניתן ליצור אייקון יפה ,להלן טיפ אחד ואחד בלבד: במידה ולא ניתן לדחוס את הלוגו כולו אל תוך האייקון -אפשר לקחת חלק מהלוגו שמאפיין את הלוגו כולו.
הערה אייקונים עם פינות ישרות )כמו האייקון של ׳איך כותבים סיפור׳ בעמוד הבא( יופיע באייפון עם פינות מעוגלות ובאנדרואיד עם פינות חדות. כמו כן ,חשוב לזכור שהכללים באנדרואיד יותר ורסטיליים )משמע :יש הרבה יוצאי דופן( ולא מן הנמנע שחלק מהאנדרואידים יעגלו פינות.
באנרים בחלק ניכר מההרחבות אנחנו נמצא את הבאנר .את הבאנר מעלים פעם אחת והמערכת ממקמת אותו איפה שצריך. מידת הבאנר היא 480על 164פיקסלים הבאנר ,במרבית המקרים יכיל את הלוגו של החברה בעל האפליקציה.
ניתן ליעד אייקון לאירוע מסויים ומיד אחרי האירוע -לחזור לאייקון הרגיל.
בחלק ניכר מהמקרים הלוגו אינו מתאים ביחס שלו למידת הבאנר -ולכאן נכנסת היכולת שלנו כמעצבים גרפיים ליצור את ההתאמה .לדוגמא: • אם יש לנו לוגו ריבועי -אנחנו נרצה )במרבית המקרים( למקם אותו בצד ובמקום שנשאר ניתן לכתוב את שם העסק. • אם הלוגו לא יכול לתפוס את כל מידת האורך של הבאנר, ניתן להוסיף רקע )ר .אירו יפאן והתותח(. • המצב הנוח ביותר זה כשיש אפשרות להשתמש בכל אורך הבאנר )ר .יש עתיד( ואם זה לא תופס את מלוא גובה הבאנר -זה בסדר .בדוגמא המצורפת צבעתי את הרקע בירוק בהיר ע״מ שנוכל לראות את המיקום של הלוגו ביחס לבאנר.
240פיקסלים
הערה )מאוד( טכנית :מידת הבאנר באפליקציה היא 240פיקסלים ,בשעה שהמערכת מבקשת באנר ׳רטְ נַה׳ שהרזולוציה בהם היא כפולה ברוחב .480הסיבה היא :מרבית הטלפונים היום יש להם מסכי ֶ באורך וברוחב ,משמע :כל פיקסל מהימים הישנים )כשעוד היו דיסקטים( שווה ל 4-פקסלים במסך ׳רטנה׳. מסיבה זו )וכדי לשמור על החדות( אנחנו נשתמש ב 480פיקסל לרוחב ולא 240פיקסלים.
הבאנר נמצא במרבית ההרחבות.
שקיפויות במרבית המקרים המערכת תאפשר לנו לעבוד רק בפורמט .PNGפורמט זה דומה ל JPG עם כמה הבדלים שאחד מהם הוא ממש משמעותי PNG :מאפשר שקיפויות בכל הרמות )משמע :מ 100%-עד 0%שקיפות(. הסיבה העיקרית שאנחנו נרצה להשתמש בשיקיפות היא :המשתמש יכול לשנות את הרקע מלוח הבקרה ,בנוסף זה מונע מאיתנו את המסגרות של האובייקט הגרפי ויתרון נוסף הוא: יש לנו צבע נוסף לעבוד איתו :לבן.
הדוגמאות הנ״ל ממחישות את עיניין השקיפויות ומראות את ההבדל בין המסמך ללא רקע -ואיך האובקייטים נראים כאשר מוסיפים לו רקע )לא כל כך משנה איזה רקע(.
ישנם כ 170-אייקונים. מתוכם 88פעילים
כל הצבעים הקיימים כרגע )יהיו נוספים(
איקונים )תשיעייה +הרחבה ויזואלית( האיקונים בהרחבת תשיעייה ובהרחבה ויזואלית +כפתורים יש להם מספר צבעים .מתוך לוח הבקרה ניתן בחור את הסט המתאים. בהרחבה ספציפית -לא ניתן לבחור יותר מסט אחד. לעומת זאת המערכת מאפשרת בחירת צבעים שונים בהרחבות שונות באותה אפליקציה, לדוגמא :אם יש 2הרחבות תשיעייה ,אזי הראשונה יכולה להיות בצבע כלשהו והשניה בצבע אחר.
הרחבות ותכנון אפליקציה כל אפליקציה יכולה להכיל עד 16הרחבות מכל הסוגים הקיימים .אין חשיבות לסדר ההרחבות )מבחינה טכנית( וכל הרחבה מכל סוג יכולה להיות ראשונה או אחרונה לפי ובהתאם לשיקול דעת המעצב. לדוגמא :באפליקציה המצורפת לעמוד זה יש 6עמודי תוכן 2 ,הרחבות תוכן ויזואלי ,תוכן ויזואלי עם כפתורים והרחבת תשיעייה. סוגי ההרחבות :הדרך הנכונה ביותר לבדוק את סוגי ההרחבות הקיימים היא באמצעות לוח הבקרה עצמו .אנחנו כל הזמן מוסיפים ונמשיך להוסיף הרחבות.
כל המידות אלו כל המידות הדרושות על מנת ליצור אפליקציה. רוזולוציה מקסימלית
רזולוצית ביניים
מינימום רזולוציה
באנר
480/164
-
-
אייקון )מסך הבית(
152/152
-
-
ויזואלי )רגיל(
844/520
555/390
422/260
ויזואלי +כפתורים
640/520
480/390
345/260
הרחבת תוכן
רוחב 480
רוחב כל המידות בין מקסימום למינימום.
רוחב 240
בוטל בוטל
הערה :לוח הבקרה אינו מאפשר העלאה של אובייקטים שאינם במידה הרצויה .רצוי להכין מראש את המרכיבים הגרפיים.
חוברת זו באה לסייע לכל מי שאמור להתמודד עם הקמת אפליקציה בכל הקשור לעיצוב המרכיבים .הבעיה העיקרית בעיניין זה היא פשוטה להבנה אבל לא תמיד פשוטה לישום: התוצאה הסופית של כל מה שנעשה נמצא בסביבה מאוד מעוצבת .די אם נבחן את האייקון הורוד )מסומן בחץ( ונבין שכל האייקונים סביבו עוצבו ע״י טובי המעצבים. בעיה דומה יש לנו עם האפליקציה עצמה .מרבית האפליקציות )שאינן סייפ( עברו דרך מעצבים מדופלמים בעלי נסיון עשיר והתוצאה שאנחנו נרצה להשיג אמורה ,לכל הפחות ,להיות נאה ואסטטית לפחות כמו המתחרים. אנחנו באקטיב קארד ביקשנו להשיג כמה יעדים כאשר אחד מהם הוא :לאפשר למעצב ליצור אפליקציה נאה ובפרק זמן קצר שלא לומר -קצר מאוד. ברוכים הבאות והבאים לאקטיב קארד.