לימודי בניית אתרים הייטק על חווית משתמש UX – UI מדריך בניית כפתורים – תמונות

עבודה בהייטק עם תוכנה חוויית משתמש XD – מדריך לעיצוב עמוד

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

מה זה חווית משתמש 2019

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

מה עשינו בשיעור עיצוב אפליקציה שלבי עבודה

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

דוגמה של אתר אינטרנט שנראה במחשב בצורה אחת ועבר המרה לאפליקציה כדי לשמור על חווית משתמש נכונה

המעבר מעולם הפרינט לדיגיטל

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

מתכנתים הם לא מעצבים – עבודה משותפת עם מעצבים

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

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

תמונות מוכרות הרבה יותר – טעויות בעיצוב בשימוש בתוכנות הגרפיות

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

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

עיצוב אתרים וחווית משתמש

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

עיצוב אתרים וחווית משתמש

תורת הצבעים בחווית משתמש

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

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

2019-08-17T23:50:34+03:00