לפני מספר שנים כתבתי כאן את הפוסט צריך לדעת איך לחתוך ומאז הרבה מים זרמו בנהר ומעולם לא עדכנתי אותו, אז הנה גבירותי ורבותי הדרך החדשה והנכונה להגשת העיצוב לפיתוח: דרך שלא רק חוסכת טעויות, מדוייקת עד רמת הפיקסל, קלה למפתחים- היא גם מקצרת לכם את זמן העבודה בחצי.
ראשית, תזכורת מהי השיטה הישנה?
בעבר היינו מכינים עיצוב, ואחרי האישור מבלים עוד יום-יום וחצי בהכנת סטייל גיידס למפתחים שכולל את כל ההוראות איך לבצע את העיצוב כך שיהיה מדוייק. זה היה מכונה ״שלב הכנת הגיידליינס״ (או ה-specs)
השלב הזה הוא חשוב מאד והיה חלק בלתי נפרד מתהליך עבודה נכון- כי הוא מאפשר למתכנתים להגשים את העיצוב שלכם באמצעות קוד ו-css: אם יש טורים, אז מרווחים מדוייקים ביניהם, אם יש כפתורים, אז באיזה מרחק מהקצה הם יושבים, גדלי פונטים, צבעים, איזה עובי קו לעשות לכפתורים ואיך נראה כפתור במצב לחוץ, ועוד…- את כל אלו מסמך הגיידליינס מפרט למתכנתים ולכן השקענו לפעמים יותר זמן על הכנתו מאשר על העיצוב.
עידן חדש- מוצרים משלימים שמייצאים למפתחים קוד באופן אוטומטי
כפי שפירטתי למעלה, התהליך הזה גזל מהמעצבים זמן לא מבוטל והיה חשוב מאין כמוהו בשביל תהליך הפיתוח. אבל בשנים האחרונות קרה שינוי נהדר ויש כיום מספר מוצרים בשוק שמאפשרים לחסוך את כל שלב ההכנה הזה, ועושים את זה אוטומטית עבורכם. המשמעות של זה הוא חסכון פנומנלי בהגשת העיצוב לפיתוח- מהרגע שיש אישור על העיצוב- קליק אחד והמפתח מקבל גישה לכל מה שהוא צריך, אונליין, כולל כל המידות, המרחקים, גדלי הפונטים, הצבעים, השקיפויות, ואפילו אפשרות להוריד את תיקיית האסטים (assets) וכל האייקונים והתמונות שהגדרתם שוא יוכל לייצא ישירות.
המוצרים האלו הם:
זפלין zeplin
אבוקוד avocode
אינספקט של אינוויז׳ן inspect by invision
כולם עובדים באופן דומה- המעצב מייצא את קובץ העבודה, אחד משלושת המוצרים שציינתי לעיל מעבד אותה לידי יצירת קובץ ״קריאה״ למכנתים, המתכנתים מקבלים לינק לצפייה בדפדפן ושם רואים ממה העיצוב מורכב ויכולים להעתיק חתיכות קוד שלמות ישירות ל-css. הנה וידאו קצר להמחשה, של אותו הניוזלטר שלעיל:
zeplin – זפלין
מוצר נהדר שמשמש רק למה שציינתי: כלומר, מספק למתכנתים קובץ ״קריאה״ של קובץ העיצוב ומאפשר להם להעתיק את כל חתיכות הקוד שהם צריכים ולייצא את כל התמונות והאייקונים במגוון גדלים. פרוייקט אחד הוא חינמי ועבור מספר פרוייקטים תצטרכו לשלם דמי מנוי שמשתנים לפי מספר הפרוייקטים. קישור למוצר והנה וידאו הדגמה:
אבוקוד- avocode
בדומה לזפלין, מאפשר ייצוא של הקובץ והפיכתו לדף ווב הכולל את כל המידות והאסטים עבור המתכנתים. קישור למוצר – יש 14 יום התנסות ולאחר מכן בוחרים מסלול חודשי ומשלמים פר חודש. באופן כללי אציין שהמוצרים האלו, כולם, שווים כל שקל כיוון שהם חוסכים לכם יום עבודה לפחות על כל מוצר שאתם מגישים.
וידאו הדגמה:
ולסיום- גולת הכותרת: אינספקט inspect by invision
טוב, אז כאן כבר מתחיל להיות מעניין: אינוויז׳ן לא עושה רק את זה. היא עושה הרבה, אבל הרבה יותר מזה:
זהו כלי קולבורציה שמאפשר לכם לעלות את העמודים המעוצבים ולקבל עליהם פידבק מהלקוח או הבוס שלכם, כותבים הערות, מעלים גרסאות, מסמנים אחד לשני שאלות ובקשות שיפור. זה כשעצמו כלי מאד מאד חזק שמאפשר תהליך עבודה יעיל
זהו גם מעין כלי לניהול המוצר: אפשר לסמן אילו מסכים אושרו, אילו בתהליך, אילו מוקפאים או בהמתנה, מנהל המוצר יכול ממש לנהל את התהליך של כל מחלקת העיצוב שלו במקום אחד, כאשר כל חברי הצוות רואים כל הזמן מה אושר ומה לא.
אינוויז׳ן עושה גם פרוטוטייפינג: מעברים בין מסכים? קישור כפתור או איזור לחיצה למסך אחר או לתפריט שנפתח ונסגר? נו פרובלם. אינוויז׳ן תאפשר לכם להסביר ללקוח איך המוצר שלו ירגיש באמת כשהלקוח יתנסה וילחץ על המסך ובאמת יעבור למסך הבא.
וביחד עם כל הטוב הזה, אינוויז׳ן גם עושה אינספקט- כלומר- גם עושה את הגשת העיצוב לפיתוח. אחרי שמנהל המוצר שלכם אישר את תוצר העיצוב, פשוט צרפו לפרוייקט את המפתח והוא רואה איך הכל בנוי, יכול להוריד תמונות ואייקונים בלחיצת כפתור- בדומה לשני המוצרים האחרים שסקרתי. לינק למוצר והנה וידאו ההדגמה של כלי האינספקט בלבד (יש עוד המון הדגמות של הכלים הנוספים):
