המלך (פוטושופ) מת. יחי המלך (פיירוורקס).

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

27 ינואר 2012

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

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

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

חשוב לציין עובדות שעשו לי את המעבר מתאים וקל יותר:

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

למה פיירוורקס עדיף:

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

  1. בחירה והזזה – אופן העבודה עם האובייקטים אינטואיטיבי ופשוט. אני כמעט ולא נוגע בפאנל השכבות.
  2. Pixel Perfect (כמעט). פיירוורקס נועדה לעיצוב עבור מסך, ולכן הויא נצמדת לפיקסלים די באדיקות, (פרט לכמה מקומות קטנים שלא). התוצאה יוצאת חדה ומדוייקת.
  3. דפים – היכולת לעצב מספר דפים בגדלים שונים על מסמך אחד. ממש אתר שלם. או מספר גרסאות שונות של אותו עמוד. חסל סדר עשרות קבצים עם מספרי גרסאות. ואפשר גם להגדיר Master Page, שיכיל את הרקע וה-header של האתר והם יופיעו בכל העמודים בהמשך.
  4. ספרייה – שיתוף רכיבים לאורך כל העמודים, ואפשרות לשנות את כולם ממקום אחד. מי שמכיר פלאש – זה בדיוק אותו דבר. Symbols.
  5. אובייקטים (ווקטוריים) חכמים. למשל – מלבן עם פינות מעוגלות, שאפשר לשנות את הקוטר שלהן גם בדיעבד, או רכיב צ'קבוקס שאפשר לבחור אם הוא מסומן, לא מוסמן, או disabled.
  6. Grouping – בפוטושופ אפשר לאגד שכבות בתיקיה, שזה סתם בשביל הסדר בשכבות, ואפשר להשתמש ב-smart object, שיש לו לא מעט חסרונות (אי אפשר לפרק בחזרה, אי אפשר לערוך אובייקט ולראות מידית איך זה משפיע על המסמך הראשי, משקל…). בפיירוורקס אפשר לאגד אובייקטים לאובייקט אחד, ועדיין יש שליטה באובייקטים הפנימיים,  ותמיד אפשר לפרק את הקבוצה בחזרה.
  7. הרחבות Extensions- מפתחים יכולים לבנות פאנלים מעניינים (למשל פאנל שמאפשר לי לבחור פאלטת צבעים מתאימה) או פקודות (למשל פקודה שמייצרת גריד סטנדרטי, או כזו שמחוללת Lorem Ipsum, או כזו שמשתפת את העיצובים שלי בטוויטר). בהרחבות האלו מצאתי פתרונות לחלק גדול מהחוסרים שהיו לי במעבר מפוטושופ.
  8. סגנונות Styles – אפשר להגדיר סגנון (שילוב של צבע, רקע, טקסטורה, מסגרת, הצללה, פונט וכו'), ולהשתמש בו שוב ושוב, ולשנות אותו ממקום אחד מרכזי. אם החלטתם שלינקים באתר הופכים מתכלת עם קו תחתי לכתום בלי קו תחתי – תוך 10 שניות מחילים את השינוי על כל העמודים. יותר מזה – אפשר לייצא את הסגנונות כ-CSS עבור המפתחים, במקום להכין להם ידנית מסמך הנחיות!
  9. אינטראקציה – זה כמעט קסם. אפשר לייצר מפיירוורקס פרוטוטייפ אינטראקטיבי, עם Mouse Over על כפתורים וקישורים בין עמודים. כך אפשר להתחיל את התהליך עם wireframe בסיסי, לבחון אותו ע"י mockup, ולאחר החלטה להחיל את הסגנונות עד לעיצוב המלא. ואם אתם מעצבים ל-IOS – אתם חייבים לבדוק את TAP.

איפה הבעיות:

  1.  Preview חי – מה שהכי הכי חסר לי לעומת פוטושופ זו האפשרות לראות את השינויים שאני עושה תוך כדי שאני עושה אותם. בפוטושופ, אם רציתי לשנות גודל פונט, אז לחצתי על השדה של גודל הפונט, ועם החצים מעלה-מטה שיניתי את הערך וראיתי את זה קורה על המסמך. בפיירווקס (1) החצים לא עובדים בתוך שדות הזנה (2) כשאני משנה גודל עם הסליידר – רק לאחר שאני מאשר את השינוי אני רואה את זה קורה על המסמך. זה די מתסכל. יש הרחבות שפותרות את זה חלקית.
  2. עדכון תמונות – כיוון שלפיירוורקס אין את יכולות עיבוד התמונה המלאות והמדהימות של פוטושופ, יש צורך לייבא תמונות מעובדות אל תוך פיירוורקס. הבעיה היא שאם רוצים לעדכן את התמונה בגרסה חדשה ומתוקנת – אין ממש דרך. יש תוספת שאמורה לפתור את זה חלקית, אבל הדרך הכי טובה לדעתי היא לשמור כל תמונה כ-Symbol.
  3. PNG – זה הפורמט בו פיירוורקס שומר את קבצי המקור. זה לא PNG רגיל ושטוח, אלא המקביל ל-PSD שאתם מכירים. למה זה רע?
    (1) זה קצת מטעה וגורם למעצבים להעביר קובץ כבד לשימוש במקום קובץ שטוח וקל.
    (2) אי אפשר לשמור גרסה מקורית ליד גרסה שטוחה, כי זה אותו שם עם אותה סיומת
    (3) אי אפשר לדעת מה הגרסה המקורית ומה השטוחה לפני שפותחים אותה
    בקיצור – הייתי שמח לקבצי FWX או משהו כזה.
  4. באגים? – כנראה שלפיירוורקס היו בעיות רציניות של חוסר יציבות וקריסה בגלל בעיות זכרון, אפילו עד לגרסה CS5. אם אתם מנסים את פיירוורקס – תוודאו שאתם מעדכנים לגרסה האחרונה 11.0.1.7 כדי להיפטר מהבעיות.
  5. מסגרות פיקסל – פרט למלבן, אם תשתמשו במסגרת בעובי פיקסל על צורות – תקבלי מסגרת מטושטשת (יש הסבר אבל נדלג עליו). כדי לפתור את זה – משתמשים בפילטר פוטושופ ליצירת Stroke פנימי (מתוך הפילטרים של פיירוורקס).
  6. עברית – אין גרסת ME לפיירוורקס. זה אומר שהעברית מוקלדת הפוך… אפשר להשתמש בפונטים הפוכים (טריק מהעשור הקודם) ואולי מישהו יפתח פקודה להיפוך עברית מתוך פיירוורקס, אבל זה יהיה יעיל רק למקרים מזדמנים. אם אתם עובדים הרבה עם עברית, כרנאה שזה לא הכלי בשבילכם.

לסיום, למי שמכיר ולמי שלא מכיר את פיירוורקס: I didn't know Fireworks could do that

ולמי שמעוניין לקרוא על התהליך ההפוך – בפיקסל-פרפקט פורסם פוסט מתורגם של רמי ג'יימס: המעבר הגדול מפיירוורקס לפוטושופ – לקחים ומסקנות

תגובות

קראתי ועשית לי הרבה חשק לנסות. מקווה שאדובי מפנקים אותך באחוזים.
ניסית את Axure? יש לך פידבקים בעד ונגד?

מאת יובל:

תודה על ההמלצה. אנסה.

מאת איציק:

שלא נדע מטומאה, טפו… שיקצה!

מאת היי:

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

מאת שלומי אסף:

אייל, אני שומר קובץ אחד בשם myImage.PSD.png, וקובץ שני myImage.png

B-)

היי אייל,
אם אתה משתמש בפוטושופ לעיצוב וקטורי בעיקר, למה לא לעבוד לאילוסטרייטור?

היי אייל,
אם אתה משתמש בפוטושופ לעיצוב וקטורי בעיקר, למה לא לעבוד לאילוסטרייטור?

מאת איל שחר:

טל – כמובן שעבדתי עם Axure, אבל זה נושא אחר לגמרי.

'היי' – אני מעריץ את כל וותיקי פיירוורקס, אם הצלחתם גם להוציא ממנה עיצוב טוב.

שלומי – טריק מעניין :)

בן – למה כן? אני לא משתמש *ל*עיצוב וקטורי אלא *ב*כלים וקטוריים לעיצוב אתרים ואפליקציות. לפיירוורקס בנוי לזה הרבה יותר טוב.

מאת שלום:

רק הערה:
ציינת שתי עובדות שהקלו על המעבר שלך, אבל שכחת לספור…

מאת איל שחר:

בהתחלה היו רק שתיים :) תודה

מאת גיא:

מדהים!
ואני יורק דם כבר כמה חודשים להכניס לעצמי את ההתניות התת מודעיות של קיצורי המקלדת בPS,ללא ספק הולך לחקור את הזיקוק הזה יותר לעומק…

מאת אורן:

צ'מע,
טעויות של תעשיה קשה מאד להסיר (ראה פריהנד בעולם הפרינט).
אין ספק ששימוש בתוכנה לעריכת תמונות ככלי לעיצוב אתר הוא פשוט שגוי,
אבל בפעם הראשונה שאתה צריך להמיר עיצוב שלם ל-psd כי "ככה המתכנת שלי עובד",
אתה מתבאס על זה עד בלי די.

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