גראדיאנט

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

10/06/2015

דיגיטל >> עיצוב >> עשה ואל תעשה

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

מה זה איפיון?
/ Wireframe ) איפיון אתר סכמה) הוא תיאור גרפי של מסכי
האתר (או כל ממשק אחר) המתמקד בתוכן, מבנה והיררכיות
בדפים השונים. האיפיון עוזר לנו להמחיש מה קיים בכל דף באיזו
חלוקה ומה המינונים הנכונים של המידע הטקסטואלי לעומת
סרטונים תמונות או אלמנטים אחרים, **חשוב – לא להכניס יותר מצבע אחד או שניים לאיפיון אחרת יחשבו בטעות (הלקוחות) שמדובר בעיצוב עצמו ולשם יתגלגל השיח. בקצרה:
איפיון אמור לגרום לכם להגיד "כן! ככה זה צריך לעבוד!"
לאחר שלב האיפיון של הממשק – מתקדמים לשלב העיצוב.
שלב העיצוב מסתיים ב-"זה גם עובד נכון, וגם יפה ומעניין!"

דוגמא לאיפיון:

איפיון אפליקציה

האם איפיון הוא השלב הראשון?
כן! ולא…
אם אתם הלקוח של עצמכם אז כן, אם לקוח פונה אליכם לצורך
עיצוב ממשק יש שלב מקדים אשר בעצם בו מבינים את צרכי
הלקוח ניתן לקרוא לזה "מסמך דרישות" בו יפרט הלקוח את כל
הפיצ'רים והאופציות שהוא רוצה שיתקיימו באתר/אפליקציה שלו
מבוסס על מחקר/סקר שוק שלו או שלכם.
מסמך דרישות הוא רשימה של דרישות הלקוח בשפה פשוטה ולא
מקצועית שיתורגמו בהמשך לאיפיון.
דוגמא: "הגולש יוכל לבחור באתר צנצנת מתוך קטלוג, ואז לשלם
עליה בכרטיס אשראי בצורה מאובטחת. ניתן יהיה גם להצטרף
לרשימת דיוור, או להגיע לעמוד הפייסבוק שלנו וגו'…"

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

מיקרוגל הוא דוגמא נהדרת לממשק גרוע בלי שום סיבה.

תמונה של ממשק מיקרוגל עכשוי לעומת מיקרוגל משנות ה70 (היה פשוט כמו תנור – טיימר, עוצמת חימום וזהו)

איפיון מיקרוגל

איפיון מיקרוגל

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

דפי נחיתה – כללי אצבע | עיצוב
מתייחס לעברית בלבד:
• טופס לידים (איסוף פרטים) תמיד משמאל (שם נעצרת העין בכיוון הקריאה בעברית – באנגלית – הפוך)
• עדיף לכתוב את הטקסט של השדות בתוך השדות עצמם
• אלמנטים חשובים בתוך "קופסא" של 1024 פיקסל במרכז
•טסטינג, אופטימיזציה. A/B
• אלמנטים חשובים צריכים להיות מעל ל"פולד" קו גלילה.

דפי נחיתה – צ'ק ליסט טכני
• האם הדף יושב בנתיב סופי?
• האם יש צורך להטמיע בו פיקסלים/אנאליטיקס?
• האם נשלח ללקוח גישה למערכת הלידים?
• האם הוא שולח לידים למקום נכון?
• האם יש גרסאת מובייל? האם היא עובדת כראוי מהנייד?
• האם הלינק החכם עובד?
• האם הקליק טו קול מצלצל למקום הנכון?
• האם יש ולידציה על השדות?
• האם המייל הנכון מוטמע במיניסייט?
• האם השעות של הקליק טו קול נכונות
• האם יש עמודה שמראה באם הליד הגיע הדסקטופ או מהסלולאר
• האם מתקבלים לידים עם רף + מדיה?
• האם יש צ'ק בוקס לדיוור המאשר קבלת חומר פרסומי בעתיד

מודעות פייסבוק- כללי אצבע
•20% טקסט (יש כלים שבודקים תמונות שמעלים)
• מיוחדות בשביל לתפוס את העין, לא משונות מדי (או גרוע מכך)
שאטרסטוקיות מדי כך שלא ברור מידית שמדובר בפרסומת

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

גראדיאנט

גראדיאנט

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

דוגמא:

צבעים

צבעים

  • טקסט בהיר על רקע כהה – טקסט כהה על רקע בהיר
  • צבעים מגיבים לסביבה בה הם נמצאים