למה עברתי ל- Sketch ואיך עוברים ממש עכשיו

כולם מכירים את Photoshop+Illustrator כלים המשמשים אותנו כבר שנים. אבל, יש שחקן נוסף שמתחיל לחדור יותר ויותר לשוק ולגנוב את ההצגה בעיצוב ממשקים, הכירו את Sketch.

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

אבל רגע לפני שנצלול..

מה גרם לי לעבור ל- Sketch

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

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

ל- sketch יש הרבה יתרונות אבל הנה השניים ששכנעו אותי

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

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

איך עוברים כבר עכשיו? ממש עכשיו.

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

כדי לחסוך זמן, תתחילו כאן.

בואו נרחיב

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

קיצורי המקלדת ייעלו את עבודתכם אפילו יותר

העבודה עם סקצ'

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

עבודה עם מסכים

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

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

טמפלייטים מוכנים מראש

עוד יתרון של סקצ' הוא שהתוכנה מגיעה עם טמפלטים מוכנים ומקיפים למדיי (ios 9, Material Design), שיכולים להוות נקודת התחלה נהדרת למעצבים מתחילים ומנוסים כאחד. מלבד הטמפלטים שמובנים בתוכנה אפשר גם להוריד אין ספור טמפלטים נוספים.

הטמפלייטים שמגיעים עם סקצ'

עבודה מדוייקת עם צורות

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

עבודה עם טקסט

העבודה עם טקסט גם היא מאוד נוחה ופשוטה בסקצ'. אבל כאן לסקצ' יש יתרון מדהים, שמאפשר לנו לשמור על עקביות לכל אורך תהליך העבודה על הפרוייקט (שווה לכולם להכיר!). ניתן ליצור בסקצ' סגנונות טקסט (Text styles) מותאמים אישית וכך לקבוע את הגודל, הפונט, הסגנון וריווח האותיות של טקסטים ברמות חשיבות (היררכיות) שונות. ברגע שנשנה סגנון מסויים, כל המילים שכתובות באותו סגנון ישתנו אוטומטית (כמו גם השם שלו עצמו, מה שנותן אינדיקציה ברורה מאוד ופידבק חיוני שפעולת השינוי בוצעה בהצלחה). את סגנונות הטקסט שהגדרנו אפשר לנהל בקלות דרך ה- Manage text styles וכך לבצע שינויים נרחבים ובדיקות בקלות.

עבודה נוחה עם טקסט

עבודה עם סמלים (Symbols)

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

ייצוא פשוט ונוח של מסמכים ואלמנטים גרפיים לרזולוציות שונות

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

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

אנימציות

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

Principle

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

Atomic

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

Invision

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

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

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

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

השורה התחתונה

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

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

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

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

• ריסורסים
• מוקאפים
• ריסורסים נוספים למובייל ולווב
• אינדקס של המון חומרים שרלוונטים לסקצ'
• ריסורסים חינמיים
• טמפלייטים סקלבילים של ios לסקצ'

תהנו!

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

• Design Tools
• Sketch
• כלי עיצוב
• סקצ'