סייפ - חוברת למעצבים (זמני)

‫‪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‬‬

‫בוטל‬ ‫בוטל‬

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

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