מעצבים צריכים לדעת לפתח

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

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

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

התשובה היא כן

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

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

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

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

מתוך מודעת דרושים בארץ

השוק אמר את דברו

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

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

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

למה חברות עושות את זה?

הסיבות לחיפוש אחר מעצב שיודע גם פיתוח HTML מגוונות אך אנסה למנות את הסיבות העיקריות:

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

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

הבנה בעיצובים מתקדמים
אנימציות והתנהגויות שניתן לבצע היום בעזרת HTML5 לא הייתם יכולים לבצע לעולם בפלאש. כל העיצובים המתקדמים שראינו בשנים האחרונות (Responsive design, One pagers, Parallax, Scroll animations) מקורם בחידושים טכנולוגים ובמעצבים שהיו מספיק חכמים ועירנייים לקלוט אותם. חיבור לטכנולוגיה שווה לעיצוב חדשני.

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

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

יש גם יתרונות (או לפחות יתרון אחד גדול)

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

מתוך מודעת דרושים

למה אני בכלל צריך להתחשב בפיתוח?

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

ומה עם המפתחים? הם לא צריכים להתחשב בי?

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

לא רוצה או לא יכול?

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

אז מה זה אומר "לדעת לפתח"?

זו השאלה האמיתית.

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

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

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

web designers VS web developers
web designers VS web developers

האינפוגרפיקה עוצבה על ידי @shanesnow עבור Wix.com

בלי פאניקה!

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

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

אני מעצב אינטרקטיב!

אני מצטער, אבל אתה לא.

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

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

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

הדמו האמיתי נמצא נמצא פה

למי שרוצה ללמוד עוד אני ממליץ להנות ממגרש המשחקים של Codrops שמציג מגוון של אנימציות מדהימות שמאוד קל לייצר בעזרת HTML5.

המעצבים הטובים בעולם הם בעצם מפתחים?

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

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

אם תעשו רשימה של עשרת המעצבים הטובים ביותר בעולם (לדעתכם) אני בטוח שתגלו ששמונה מתוכם לפחות יודעים קוד וברמה גבוהה. אצלי מדובר בכל העשירייה (Oli lisher, Steve jobs, Max Kiesler, Jesse james ועוד…). מעצבים שמבינים פיתוח יכולים לייצר עיצובים טובים, נכונים ומרשימים יותר. הם לא מוגבלים מתוך הטכנולוגיה, הם רותמים אותה טוב יותר בפתרונות שהם מעצבים. כדי להיות הטובים ביותר אתם מוכרחים להרחיב את סט הכלים שלכם.

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

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

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

זוהי ההתפתחות הטבעית של המקצוע שלנו

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

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

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

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

ביל גייטס, מארק צוקרברג, WILL.I.AM, יוצרי dropbox ועוד רבים וטובים מסבירים מדוע צריך ללמוד קוד (שימו לב שפה הם ממש מדברים על פיתוח ולא רק על HTML):

http://www.youtube.com/watch?v=STRPsW6IY8k

הדרכים שלכם ללמוד

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

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

w3schools
המון מדריכים ושיעורים ללימוד HTML ו-CSS. קצת מבולגן ולא ברור בהתחלה אבל בסופו של דבר ניתן ללמוד פה ולהגיע לרמה גבוהה מאוד.

CODEPEN
סביבה המאפשרת התנסות אינטרקטיבית בפיתוח קוד, תוכלו לפתח מההתחלה או להסתכל על קוד שאחרים כתבו וללמוד ממנו (לא מיועד למתחילים)

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

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

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

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

<סוף/>

הפוסט הוזן ונערך במערכת על ידי: דנה שראובר

Share

קצת על המחבר:

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

הרשמו לניוזלטר של פיקסל פרפקט וקבלו למייל רשימת קריאה חשובה לתחום מדי שבוע

אשמח לשלוח לך פרטים!

אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
;