רוצים להתחיל ללמוד קוד? למה כדאי, איך מתחילים ועוד

מהי החשיבות האמיתית שמעצב אכן ידע לתכנת? ובמידה והחליט לקחת את הצעד הנוסף, כיצד יכול להתחיל?

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

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

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

השאלה הנצחית – האם ללמוד תכנות ולמה זה כל כך מזיז לנו המעצבים?

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

אחת מהמנחות בכנס שהיה קשור בנושא הפיצה בבלוג שלה את הסקר הבא:

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

מחוץ לגבולות ארצינו הקטנה

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

כריס ספונר. מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

טוטוריאל של כריס ספונר ליצירת אפקט dropcaps באמצעות CSS

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

אורמן קלארק. מקור: שגיא שרייבר, פיקסל פרפקט מגזין

אורמן הוא אחד המעצבים אשר מכתיבים כיום את הטרנדים בעיצוב אתרים וממשקים. הוא הבעלים של premiumpixels.com שם הוא מציע PSDs איכותיים להורדה ושימוש חינם למעצבים. באמצעות אותם PSDs הוא מעצב ובונה אתרים מדהימים ומוכר אותם כטמפלטים של וורדפרס ב-themeforest.net – הקהילה הגדולה ביותר בעולם לאתרי וורדפרס, שם הוא נחשב ל-top seller. אתם מוזמנים לראות את העיצובים שלו גם בדריבל שם הוא מככב כאחד המעצבים המוכרים בקהילה.

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

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

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

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

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

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

עיצוב בסביבה אינטראקטיבית = חפיפה עם תכנות.

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

אין לי זמן ללמוד. אני עובד משרה מלאה ויש לי גם חיים מחוץ לעבודה.

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

עיצוב בסביבה אינטראקטיבית = אסור להשאר מאחור.

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

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

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

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

אז למה כן? … 3 סיבות טובות

1 – עבודה חלקה וזורמת מול מתכנתים

מעצבים לעומת מתכנתים – אינפוגרפיקה

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

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

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

2 – שיפור חווית המשתמש

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

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

3 – להימנע מפאקים בהפקה

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

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

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

סבבה, מה עכשיו?

ללמוד – יש המון… אבל הממוווןןן השראה וחומר ללמידה שם בחוץ.

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

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

דוגמה לטוטוריאל טוב:

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

חלק 1: העיצוב נטו (טוטוריאל פוטושופ)

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

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

חלק 2: בניה ב-HTML5 ו-CSS3 (טוטריאל קוד פרונט אנד)

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

דוגמה מתוך הטוטריאל של כריס ספונר: איך לכתוב HTML ו-CSS3

כריס ספונר ממש מסביר לנו מה כל שורה אומרת בקוד

חלק 3: בניה של טמפלט וורדפרס מתוך ה-HTML שלנו (טוטוריאל וורדפרס)

בשלב הזה הוא מסביר שלב אחרי שלב איך לוקחים את הקוד HTML ו-CSS והופכים אותו לטמפלט של וורדפרס.

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

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

ולסיום כמובן עם כפתור צפיה בדוגמה חיה:

השלב הסופי בטוטוריאל של כריס ספונר

להתנסות

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

להכין את סביבת ההתנסות: אפשר להתחיל מלהוריד עורך קוד כלשהו – dreamweaver, coda, espresso, או כל עורך קוד אחר. אגב לבעלי ווינדוס יש את העורכים החינמיים: notepad++ , Scriptly, ו-HTML Kit. (המומלץ מבינהם הוא notepad++). לבעלי מק הנה עורך קוד חינמי – Macvim.

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

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

לבדוק אתרים לעומק עם פיירבאג (או inspect element) – הכלי הידידותי ביותר למעצב. יש אתר שגרם לכם להזיל ריר? פתחו ישר את פיירבאג (בפיירפוקס) או בכרום לחצו קליק ימני ואז "inspect element" על מנת ללמוד מה נמצא מאחורי המנוע.

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

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

מקור: שגיא שרייבר, פיקסל פרפקט מגזין

ולסיכום

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

פורסם לראשונה בפיקסל פרפקט מגזין.

שגיא שרייבר

שגיא הינו מעצב UI & UX פרילנס והמייסד של פיקסל פרפקט מגזין . בוגר שנקר במגמה לעיצוב מדיה אינטראקטיבית. מתמחה בעיצוב אתרים מונחי conversion (המרה) וחווית משתמש, ובעל ידע נרחב ב-html, css ו- wordpress. שגיא בטוויטר   שגיא בפייסבוק דף הבית של שגיא

הגב

10 Comments on "רוצים להתחיל ללמוד קוד? למה כדאי, איך מתחילים ועוד"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
steve
Guest

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

יריב
Guest

גם אני מחפש בדיוק אותו הדבר :)

שוקי מן
Guest

שכחת את האתר CSS-tricks.com
גם לו קוראים כריס והוא אחד המעצבים-מתכנתים המוכשרים שמצאתי

גל צחייק
Guest
כתבה מעולה, רק שיש דבר אחד שהיא לא מתייחסת אליו. יש הבדל בין ההגדרה של קידוד לתכנות. אני כמתכנת אוהב מאוד מעצבים שיודעים לקודד (HTML, CSS ולהטמיע JS זה לא תכנות זה קידוד) גם לשים את הHTML על wordpress (למרות שיש שם קצת תכנות ולוגיקה) זה יותר קידוד ולא ממש תכנות. צריך להבין שלמעצבים לדעת לקודד זה יתרון עצום ותכלס זה אפילו לא כזה עבודה קשה, כי אין שם דרך חשיבה חדשה הכל מאוד תבניתי וברור. תכנות לעומת זאת מדבר על לוגיקה, אני לא מכיר הרבה מעצבים שידעו לייצר slider חדש מאפס בJavaScript או ידעו לבנות תוסף חדש לוורדפרס שעושה… Read more »
אלדד
Guest

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

Guy Bachar
Guest

Natti Baron אם היה יותר פלטפורמות כמו Syndu – לא היתה צריכה לעלות השאלה הזאת כי מעצבים היו יכולים לעשות הרבה יותר דברים בלי צורך ללמוד קוד… בכל מקרה לטעמי מעצב שרוצה לשדרג את עצמו בהחלט צריך לדעת פרונט, אבל פרונט בלבד! (לא כולל ג'אווה)

Natti Baron
Guest
גיא, מעצב *טוב* צריך לדעת הרבה דברים. דברים כמו לספר סיפור, להבין את קהל היעד, להעביר את התחושה כמו שצריך, להבין באינטרקציה ובמה מרגיש נכון – הכל כדי לשרת את המטרה. אבל בעיקר, מעצבים טובים, בבואם להגשים מטרות, התעסקו עם המגבלות של החומר מאז ומעולם, ואיך אפשר למתוח אותם. בין אם באופנה,באדריכלות, בריהוט או ברשת. כדי לדעת את מגבלות החומר בעולם האינטרנט, צריך להכיר את החומר. והחומר הוא קוד (כזה או אחר), מה לעשות. בדיוק כמו שמעצב לפרינט צריך לדעת בדיוק איך הדף מגיב לסוגים שונים של צבע, בלידים, דהייה של פרינט לאורך זמן, ומחירי פנטונים ייחודיים – או אדריכל… Read more »
Natti Baron
Guest

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

wpDiscuz

תגיות לכתבה: