אני מעצב על 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

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

אפשר לראות שימוש בתמונות כדי לתפוס את העין בפוסטים של פלאפון למשל.

כדי לנצל את הכוח שטמון בשיתוף התמונות, הנה כמה קוים מנחים:

תמונות בפרופורציה של 4:3 מוצגות הכי גדול על הפיד

התמונות נדחסות בפיד לתוך מסגרת מקסימלית של 300×225 פיקסלים. כל פרופורציה אחרת תגרום לתמונה להיראות צרה יותר ו/או נמוכה יותר.

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

הגודל המקסימלי של תמונה הוא כמעט גודל של באנר ריבועי קלאסיץ זה ענק.
בזמן שפייסבוק מגבילים את גובה הסטטוס הטקסטואלי ל-7 שורות – התמונה יכולה להכיל 16 שורות של טקסט באותו גודל פונט.
אם המסר קצר – הוא יכול להיות מ-א-ד גדול. באתר FunStat.us (שלי) אפשר ליצור סטטוסים ענקיים ע"י שימוש בתמונות. אני מתנצל בשם כל מי שמנצל את התכונה הזו לרעה.
אם בתמונה יש מסר טקסטואלי, גם אם הוא רק משני – אפשר לוודא שהוא קריא גם בתמונה המוקטנת על הפיד.

התמונות הגדולות – 720×960

התמונות לא עוברות את רוחב 960, ולפי כלל הפרופורציה 4:3 – מתקבלת המידה האופטימלית.
אם מעצבים תמונה מדוייקת ברמת הפיקסל או לגודל פונט מסויים – הגודל המירבי המומלץ הוא 960×550. למה? כי פייסבוק מקטינים את גובה התמונה לפי גודל הדפדפן, כך שיישאר קצת רווח למעלה וגם למטה כדי שיראו את התגובה הראשונה. נכון להיום כ-40% משתמשים ברזולוציה 768. עבורם – תמונות בגובה מעל 550 פיקסלים (בסינון הרווחים וסרגלי הדפדפן וכו) יצומצמו בגובהן, ולכן וגם ברוחבן, כדי לשמור על פרופורציה.

רקע לבן מתמזג עם המסגרת

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

בתמונה הגדולה, אם תוודאו שרוחבה המקורי הוא 960 ומעלה, והגובה מתחת ל-550 – אצל רוב המשתמשים התמונה הגדולה תוצג בלי הרקע האפור, והאימפקט מרשים.

היזהרו מהפינות

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

אפשר לספר סיפור בהמשכים

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

Thumbnails של עמודי אתר – ריבועיים

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

אם למישהו יש עוד טיפים – ספרו ואשתף.

ספרנית מאוניברסיטת נבאדה בנתה לאחור פרופילים של שניים (ג'ו מקדונלד וליאולה לואיס) שבגרו מהאוניברסיטה לפני כמאה שנים (מקור – משאבל). דוגמה יפה לפוטנציאל המעולה של הטיימליין לתיעוד החיים לאחור. אבל מה עם העתיד?

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

• נתחיל בזה שאפשר יהיה לקבע אירועים עתידיים בינוניים עד גדולים ("קניתי כרטיס לסרי-לנקה. טס ביום חמישי הבא", "אנחנו מתחתנים ב10 ביולי!", "משתחרר באפריל 2014", …) ולהתחיל לצבור עליהם שיח ואינטראקציה.
• כל משתמש יוכל להגדיר את השאיפות והיעדים שלו ולהצהיר עליהם למעגלים הרלוונטיים. כמה הזדמנויות יכולות להיפתח לאדם שיצהיר מה הוא באמת רוצה להיות. ובניגוד לפרסום ידיעת הווה – בהצהרה כזו החשש לאבד את מקום העבודה קטן.
• חברים יכולים להמר מה אני אהיה בעתיד, או לרמוז לי מה כדאי שאעשה.
• אולי אפשר יהיה לשלוח מראש הודעות יומולדת אוטומטיות לחברים, ולהיפטר מהמאמץ הנוראי הזה  :)

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

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

וואלה: "בדיקה של הקבצים מראה כי חלקם כוללים פרטי מידע של לקוחות שביצעו רכישות בשני אתרי מכירה קבוצתיים מקומיים: sales365.co.il ו-kvootzati.co.il. הקבצים כוללים את שמות הלקוחות, הפריטים שקנו ופרטי כרטיס האשראי איתו התבצעה הרכישה. האתרים היהודי עליו מדברים ההאקרים הוא ככל הנראה www.schneersoncenter.org וכן Judaism.com.
אתרים נוספים שנפרצו, ככל הנראה, הם bizmakebiz.co.il, PCGames.co.il, וגם האתר Crazyone.co.il, כך על פי בדיקת וואלה! TECH."

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

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

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

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

כש-Google Plus נכנסת לתמונה, עולות כמה שאלות לגבי עתידה של Youtube:

האם תהיה אינטגרציה מלאה של YouTube ב-Google Plus?

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

ומה עם יוטיוב?

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

אם תהיה אינטגרציה -האם  Youtube ימשיך להתקיים כמותג נפרד?

המוצרים הקודמים שגוגל הפכו למוצרי דגל שלהם (Writely, GrandCentral שהפכו ל-Docs, Voice) לא היו מפלצות כמו יוטיוב. גוגל טוענים שיוטיוב לא ימותג מחדש לתוך פלוס. להרוג את השם YouTube תהיה שטות גמורה – זה ברור. מה שלא ברור הוא אם יוטיוב ישארו כגוף נייטרלי במלחמת הרשתות, או תהיה אינטגרציה מלאה במקביל למותג הנפרד.

האם YouTube יחסמו את Facebook?

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

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

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

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

נהוג לומר שתחרות זה טוב. במקרה הזה, יש מצב שכמשתמשים נצטרך לספוג כמה קורבנות בקרב הזה.