יובל קשטכר | 18 במאי 2017
בימנו יש לא מעט כלים בעזרתם ניתן לייצר מוצרים דיגיטליים, וככל שהזמן עובר מתווספים עוד ועוד כלים כאלו. חלק גדול מאנשי המוצר, כאשר אני בינהם, חווים קושי להישאר מעודכנים בכל רגע נתון. בנוסף, ללמוד להשתמש כל פעם בכלי חדש יכול להיות מרתיע, במיוחד כשמשקיעים בכך משאבים ואנרגיה בחוסר ידיעה מוחלט האם עוד אנשים בתעשייה בכלל עובדים עם הכלי הזה או אפילו מכירים אותו.
החשש הזה הוא בדיוק מה שגורם לנו להיצמד לתבניות עבודה המוכרות לנו, הוא מעקב את ההתפחות המקצועית שלנו והופך את תהליכי העבודה שלנו למיושנים.
בעתיד הלא רחוק העיצובים שלנו יהיו הרבה יותר דינמיים, עשירים באנימציות ומחוות שייעודם לשפר את חווית המשתמש במוצר וכמעצבים עלינו לגבש עמדה בנוגע לכלים שאיתם אנחנו מתכוונים לבנות מוצרים דיגטליים כאלו.
בכדי לעשות קצת "סדר בבלאגן" ריכזתי עבורכם בכתבה הבאה את כלי העבודה בהם אנשי מוצר משתמשים כיום בחברות במשק, תהנו!
Design
Sketch
Sketch הוא כלי עיצוב וקטוריאלי איתו ניתן לעצב ממשקים באופן שיטתי מהיר ואינטואטיבי. תחשבו על פוטושופ בשילוב עם אילוסטרייטור רק שהפעם הוא שוקל מעט וניתן לעבוד על עשרות פרוייקטים במקביל. לא אמנה כאן את כל הפיצ׳רים שלו כיוון שכבר נכתבו מאות מאמרים על ידי בכירים מהתעשייה ואנשים מנוסים ממני המדברים על מגוון האפשרויות ומה הופך אותו לכלי עיצוב המוצר הכי יעיל בשוק.
באופן אישי, תהליך בו אני משתמש באופן קבוע ונחשב ליעיל בעייני הוא ה- Nested symbols overrides עם פיצ׳ר זה אפשר לעצב מראש אלמנטים כמו כפתורים, ווידג׳טים ואפילו מנגנוני ניווט מורכבים. לאחר מכן אני משתמש בהם לאורך כל תהליך העיצוב בפעולה הדומה לבנייה של קוביות לגו בעזרת Drag and drop בכך אני חוסך זמן יקר.
פיצ׳ר חדש מהתנור שיצא בשבועות האחרונים מאפשר לפתוח קובץ של סקצ׳ בכתבן ולעצב בקוד. ולמה זה כל כך הגיוני? כיוון שהאינטרנט, בניגוד למשטח קנבס, לא מוגדר על ידי 4 גבולות. יכול מאוד להיות שבעתיד הלא רחוק, כולנו נעצב בקוד וזה יהיה לגיטימי לגמרי. בנוסף השימוש בסקצ׳ וב- Nested symbols מזכיר את השימוש בספריית הקוד React ולכן החיבור בינהם יהיה מאוד טבעי.
לאחרונה, צוות המעצבים של Airbnb שיחרר עבורנו גרסא של Sketch React איתה ניתן למשל להכניס Data לטבלה אותה אנחנו מעצבים דרך שורת קוד אחת. What a time to be alive!
המחיר: 99$
Zeplin
העבודה עם Sketch הופכת להיות כמעט אינטואטיבית כאשר עושים שימוש נכון בצבא הפלאג-אינס של התוכנה, ו- Zeplin הוא אחד מהפלאגינים הכי שימושיים שלה. הוא עוזר למפתחים לבדוק בקלות את הגדלים, פונטים, צבעים, ומידות בממשק ומסייע למעצבים להכין את העיצוב עבור המפתח מבלי לעשות פעולה פוטושופית מסורבלת בסגנון Slice.
נוסף על כך, Zeplin מאפשר הורדה ישירה של כל אלמנט הישר מהארטבורד אל תיקיית ה- Images, מכין את קבצי הסטייל של ה- CSS בממשק ובכך חוסך למפתחי ה- FED הרבה (הרבה!) מאוד עבודה. לסיכומו של עניין, אין ספק כי Zeplin גרם למהפכה בזרימת העבודה שבין המפתח למעצב שהפכה יעילה יותר, שיטתית והכי חשוב, כיפית.
המחיר: חינמי לפרויקט הראשון
FIGMA
Figma הוא כלי חדש באופן יחסי, עם ממשק כמעט זהה לזה של Sketch. מדובר על כלי פורץ דרך בעיקר בכך שהוא מבוסס על הפיצ׳ר בו כמה מעצבים יכולים להיות מחוברים לקובץ העיצוב במקביל, לתת הערות ואף מאפשר להם לעצב בשיתוף פעולה. שמעתם נכון! אם עד היום ערכתם עם חברכם מסמכים במקביל בגוגל דרייב אז כיום אתם יכול לעשות את אותו תהליך בעולם העיצוב בעזרת Figma על קנבס שיתופי. פתאום קורה מצב דיי מעניין שבו שצוות המוצר, צוות העיצוב וצוות הפיתוח יכולים לקחת חלק בתהליך בניית הממשק במקביל תוך כדי סינכרון עם סלאק ככה שכל הצוות נשאר מחובר לתהליך ברמת המשימות השוטפות.
הסיבה שFigma כל כך מהפכני היא שמדובר באחד מכלי העיצוב היחידים שמבוססים על ווב ועובדים באופן מהיר וחלק כל כך. העבודה עם Figma מציגה עבורנו שינוי תהליך עבודה תרבותי אשר מעצים את האפשרות שלנו להגיע לתוצאות הרצויות בזמן מופחת.
הכלי אומנם נמצא בתחילת דרכו בתעשייה ואני אישית לא הכרתי צוות של מעצבים שעובד איתו, אך שיטת העיצוב שבה כמה אנשים עובדים במקביל על אותו מוצר עלולה לשנות את הדרך לפיה עולם העיצוב הולך לעבוד בדגש על הבניה של Design Systems ו- Pattern libraries. מצד שני, מספר מעצבים שעובדים על אותו הארדטוברד במקביל יכול להוות באותה מידה טריגר למלחמת העולם השלישית.
מחיר: חינמי לתוכנית הבסיסית
Photoshop and illustrator
הסבא והסבתא של כל תוכנות העיצוב שימשו אותנו בעיקר לצרכי עיצובים לפרינט ובהחלט השתדרגו עם השנים שעברו מאז. לאורך השנה האחרונה, קיבלנו גרסאות מחודשות מטעם חברת האם, אדובי, שעשתה את עדכוניה בהתאם למהפכה הדיגיטלית ולכן כבודה במקומה מונח.
התוכנות הללו מאפשרות לנו לייצר קבצים מסודרים ומדויקים ובעיקר נוחים, גם לאפליקציות וגם לאתרים. ההבדל בין פוטושופ לבין אילוסטרייטור הוא שהראשונה מונחית פיקסלים והשניה מונחית וקטורים. כאשר אנחנו מעצבים ממשקים יש לנו צורך בשתיהן ולכן לכל מעצב יש את שיטות העבודה שלו בשימוש בתוכנות אלה כאשר הוא מעצב ממשק.
התוכנות הללו מסמלות עבור מעצבים רבים בית, אזור נוחות ולכן על אף כל השינויים שקורים בעולם המתקדם בקצב מהיר ניתן עדיין לראות לא מעט אנשים מעצבים איתן, בכל זאת מדובר בכלים עוצמתיים ולשנות עבודה רבות ומלאות בניסיון אין תחליף.
מחיר: 50$ חברות ב- Adobe creative cloud
RapidUI
הפלטפורמה החדשה שהופכת את קבצי הפוטושופ שלנו לאתרים חיים ורספונסיביים, ללא צורך בכתיבת קוד. מדובר בסטארטאפ כחול לבן אשר שם לעצמו כמטרה להקל על חיי המעצבים ולשנות את הדרך בה הם בונים אתרים. ככה זה עובד: גוררים את קובץ ה-PSD שלנו לתוך המערכת ותוך דקות ספורות העיצוב הופך לHTML ו-CSS. בנוסף לכל הקסם הזה, הקוד נגיש לחלוטין ומסונכרן עם העיצוב מה שמאפשר שיתוף פעולה מלא עם מתכנתים במידת הצורך.
מחיר: עדיין בשלב הבטא. אבל שווה לעקוב!
Wireframes
MockFlow
MockFlow היא חבילת עיצוב אונליין המספקת שירותי עיצוב מוצר שיתופיים עבור אנשי קריאייטיב ומפתחי שמישות. פשוט ללמידה באופן יחסי.
מחיר: 14$ לחודש
Balsamiq
בלסמיק הוא כלי גרפי שנוצר כדי לשרטט את ממשק המשתמש לאתרי אינטרנט, שולחן עבודה, יישומים ניידים וכדומה. הממשק מאפשר גרירה והצבה של רכיבים בצורה פשוטה. הוא מסייע לנו לייצר את החוויה של רישום על לוח לבן, אבל באמצעות מחשב.
כל עיצוב מוצלח מתחיל בעט ונייר, חווית השימוש של בלסמיק עונה על המענה הזה בדיוק.
מחיר: 89$
prototypes
webflow
הכלי הושק בשנת 2013 על ידי שני אחים על מנת לייצר אפשרות למעצבים לייצר אתרים רספונסיבים מבלי לדעת קוד. הוא מאפשר למעצבים לייצר מסות של אתרים בזמן עבודה יחסית קצר תוך כדי שימוש בממשק יחסית דומה לפוטושופ המוכר.
אומנם לא צריך לדעת קוד כדי לעבוד עם כלי זה, אך קיימת אפשרות לשנות את תגיות ה- html/css של האתר בהתאם לצרכי הלקוח. כחלק מהפיצ׳רים שהפלטפורמה מציעה ניתן למצוא התממשקות מלאה עם Google Fonts, גישה לקוד uשירות אחסון וייצוא מלא של קוד העיצוב, מה שהופך את תהליך בניית האתר למאוד נוח כאשר מגיעים לשלב הפיתוח.
יש לציין שחלק מהפלגינים לדוגמא פלאגין ה E-commerce של פלטפורמה זו עלולים להוות מכשול כאשר עולה צורך לפתור בעיות מורכבות יותר במהלך פיתוח האתר מה שהופך את תהליך בניית האתר לשטחי באופן יחסי.
מחיר: 12$
Flinto
באופן אישי אחד האהובים עליי עקב ההתממשקות המושלמת עם סקצ׳. פלינטו מאפשר למעצבים לייצר פרוטוטייפים אינטרקטיביים עבור המובייל, דקסטופ או כל אפליקציית ווב אחרת. עקב כך שהייצוא מסקצ׳ מאפשר לשמר את שכבות העיצוב הקיימות, פלינטו מאפשר לנו לייצר מיקרו אינטרקציות מורכבות הגורמות לכל פרוטוטייפ מעוצב לקבל את ה- Wow effect המיוחל עבור הלקוחות.
מחיר: 20$ לחודש
Hype
דרך מעניינת לייצור פרוטוטייפים אינטרקטיבים המיוצאים ל html 5. עם Hype אפשר לייצר אנימציות בדרך המזכירה את העבודה עם אפטר אפקטס שבו יוצרים אנימציות דרך keyframes. כלי זה מקליט את האנימציות שיוצרו ואוטמטית מייצא אותן לווב.
מה שמיוחד בכלי זה שאין צורך לדעת קוד בכלל וניתן להפעיל אותו על מגוון מכשירים, מובייל, דסקטופ ואפילו טבלטים.
מחיר: 49$
Principle
מזכיר את פלינטו שצויין ממקודם. עם Principle אפשר לעצב בקלות ממשקי משתמש מונפשים ואינטראקטיביים. בין אם מעצבים את הזרימה של אפליקציה מרובת מסכים, או אינטראקציות ואנימציות חדשות, הכלי הזה מאפשר לנו לייצר עיצובים שנראים ומרגישים מדהימים.
Adobe XD
אדובי XD מתיימר להיות כרטיס הכניסה של אדובי לעולם עיצוב המסכים והפרוטוטייפינג לאחר שכבר ניסו זאת כמה וכמה פעמים עם מוצרים כמו ה- Adobe Firewarks או Adobe Edge Tools. מדובר בפלטפורמה המיועדת לעיצוב מוצר ונראית כמו התשובה של אדובי עבור Sketch שנמצאת כרגע בגרסאת הבטא שלה ומנסה לעמוד בקצב של כל השינויים בתעשייה.
בכל זאת יש 2 דברים חיוביים שחשוב לציין לגבי XD: הראשון הוא שגם אם מדובר בחיקוי כושל של Sketch ה- XD זמין גם למעצבי ה- PC דבר ש- Sketch טרם עשתה ובכך פותח לעצמו קהל יעד רחב יותר של מעצבים, והשני שכרגע כלי זה נמצא בגרסאת בטא לכן יש סבירות שבהמשך הדרך הוא ישתפר משמעותית ועוד יפתיע אותנו מבחינת ביצועיו.
http://www.adobe.com/products/experience-design.html
מחיר: חלק מחבילת אדובי
Origami
הכלי הבא פותח על ידי צוות המעצבים של פייסבוק ומטרתו לאפשר, לחקור ולבדוק את הרעיונות שלנו כאשר אנחנו בונים מוצר דיגיטלי. מדובר בכלי לעיצוב פרוטוטייפים עבור ממשקים מודרניים וניתן להעתיק כל קובץ מתוך סקצ׳ ולהדביק אליו שכבות מקוריות. לאחר מכן אפשר לקבוע התנהגות ולהנפיש כל אחד מהאלמנטים שייבאנו.
מחיר: חינמי לשימוש בתוכנית הבסיס
Invision
בין כלי האפיון והפרוטוטייפינג הפופולריים הקיימים בחוץ, קיים Invision שגם הוא מתממשק לחלוטין עם Sketch. מדובר במוצר וובי הנותן למעצבים את החופש לעצב, לסקור ולבחון את המוצרים שלהם בפשטות ולשתף את התוצאות עם המפתחים ושאר חברי הצוות.
אחד היתרונות הבולטים של מוצר זה, מלבד המחיר הנוח שלו, הוא אפשרויות שיתוף הפרוייקטים שלו אשר מאפשר לכל האנשים העובדים בצוות המוצר להיות מחוברים לתהליך באופן מלא, לרשום הערות ולראות בלייב שינויים במוצר ובפונקציונליות שלו.
בנוסף, Invision מציעים שירות מלא לבניית פרוטוטייפים למובייל ובכך מדמים את רספונסיביות המוצר הדיגיטלי ושימושו במובייל. באופן אישי אני מכיר המון אנשים שמשתמשים בכלי זה, על אף שלדעתי האישית היכולות שלו בכל הנוגע לפרוטוטייפינג בסיסיות מידי.
מחיר: חינמי לגרסה הבסיסית
Axure
ברוב הקורסים שנתקלתי בהם שמלמדים חווית משתמש, מלמדים לאפיין מוצרים בעזרת Axure, ובצדק. כלי זה מאפשר לנו לדמות חווית משתמש ושחרור מהיר של פרוטוטייפ באופן אינטואיטיבי ומהיר. אומנם יש לכלי זה עקומת למידה תלולה למדי, אך ברגע שקולטים את הבסיס ניתן ליצור פרוטוטייפים עשירים עם לוגיקה מותנית, תוכן דינמי, הנפשות, פונקציות מתמטיות ואינטראקציות, מבלי לכתוב שורת קוד אחת. והחלק הכי טוב – הפרוטוטייפים הסופיים שיוצאים מ Axure נותנים לנו את החווית משתמש הנדרשת בדיוק כמו האתר הסופי.
מחיר: 29$ לחודש
Proto.io
כלי המציג ספריה נרחבת של אלמנטים מעיצוב הממשק איתם ניתן לשחק עד יצירת הפרוטוטייפ המושלם.
עקומת הלמידה עבור proto.io היא פשוטה באופן יחסי ואין צורך לדעת קוד.
מחיר: 24$ לחודש
atomic
כלי אפיון המאפשר לפתור בעיות מורכבות בתהליך בניית המוצר. החזון של צוות Atomic היה שהפרוטוטייפ כולו, מתחילת תהליך העיצוב עד סיום תהליך האפיון יתרחש כולו בפלטפורמה שלהם. אך מה שקורה בדרך כלל הוא שמעצבים משתמשים בכלים וקטוריאלים כמו סקצ׳ או אילוסטריטור ואז מייצאים אותם ל- Atomic. חשוב לציין כי יש דמיון שקשה לפספס בין הממשק של Atomic לממשק של סקצ׳ מבחינת בניית העמודים, הארטבורדס, יצירת שכבות, קיצורי דרך ולכן המשתמשים של סקצ׳ מרגישים בבית במהלך שימוש בכלי זה.
בנוסף ניתן לעצב עם כלי זה data ומשתנים.
מחיר: חינמי לשימוש בתוכנית הבסיסית
Ux pin
כלי זה מאפשר לעשות במהירות wireframes, מוק אפים וגם פרוטוטייפים עם אוריינטציה לאפיון חווית משתמש. ניתן לשתף את הקובץ עליו עובדים גם עם שאר חברי הצוות לאורך כל תהליך עיצוב חווית המשתמש. החלק הכי טוב בכלי הזה הוא שיש מאחוריו קהילה גדולה המשתפת ספריות נרחבות של תוכן וכלי עזר על מנת לייעל את העבודה.
מחיר: 19$
ProtoPie
מדובר בכלי חדש יחסית וקל ללימוד שמאפשר למעצב לייצר מיקרו אינטראקציות משוכללות לפרוטוטייפים וכל זאת ללא כתיבת שורת קוד אחת (בניגוד לכלים אחרים בעלי ייעוד דומה). עוד נקודה חשובה – הוא מסתנכרן בקלילות עם העיצובים אותם הכנתם בפוטושופ או Sketch.
ProtoPie מאפשרת לבדוק באופן פיזי את הפונקציונליות של כל סוגי המכשירים החכמים בעזרת סריקת ברקוד (למרות שסריקת ברקוד היא אויב המדינה בעייני) ומאפשרת למשתמש לראות כיצד הפרוטוטייפ יראה על מכשיר המובייל. פונקציה נוספת שהתחברתי אליה היא יצירת אבטיפוס של התקשרות מוצר דיגיטלי בין שני מכשירים.
מחיר: 99$
לסיכום: עשייה יוצרת למידה
תהליך העבודה אותו הכרנו השתנה לחלוטין. אם בעבר הלא מאוד רחוק, היינו יכולים לסיים את תהליך יצירת המוצר בשלב המוקאפים ולתת למפתחים שישברו את הראש עם בעיות השימושיות של המוצר, כיום עלינו להשקיע משאבים רבים באפיון חווית המשתמש של המוצר. יש עשרות כלים חדשים איתם אנחנו יכולים לעבוד וזה יכול להיות מאוד מבלבל לעקוב אחר השינויים.
אפיון חווית משתמש הוא לא מקצוע שלומדים באוניברסיטה, הוא מוכתב על ידי חדשנות שמתעדכנת על בסיס יום יומי. עלינו כקהילה לסייע אחד לשני, ללמד, לפתח, לחקור, לשתף ולכתוב כתבות על התהליך שעברנו, כי אחרי הכל מטרת העל של כולנו היא יצירת מוצרים דיגיטליים מהפכניים שישנו את העולם ואולי אפילו יהפכו אותו למקום קצת יותר נחמד עבור המשתמשים.
אהבתם את הפוסט? אולי תאהבו גם את עמוד הפייסבוק שלנו, אנחנו מעלים טיפים יומיים על נושאים שמרגשים אותנו.
