אתחיל בלציין שזה אחד המאמרים הכי מושקעים שכתבתי כאן בפיקסל פרפקט. הכתבה הזאת מחולקת לשנים – מצד אחד אעסוק בדיון הנצחי – האם מעצבים צריכים לדעת לתכנת? ומצד שני כתבה זו הינה מדריך מקיף לכל מי שרוצה להתחיל ללמוד קוד.
לפני כמה חודשים טובים הרצתי ב-UX on Beer על החשיבות שלנו המעצבים ללמוד שפות קוד.
היו אלו שהסכימו איתי, היו אלו שלא, אך מה שבטוח זה שמדובר בנושא שפוגע לנו המעצבים בעורק ראשי.
בפוסט הבא אני אחזור על עקרונות ההרצאה שלי, אבל אתן גם קישורים וכלים שתוכלו לקחת אותם ולהמשיך איתם הלאה ללמידה של HTML ו-CSS ובניית אתרים (כן, בניה) בקלות ובכיף.
אז יאללה, למה אנחנו מחכים? בואו נתחיל!
השאלה הנצחית – האם ללמוד תכנות ולמה זה כל כך מזיז לנו המעצבים?
בשנים האחרונות החלה מגמה של מעצבים אשר יודעים לא רק לעצב – אלא גם לכתוב קוד. ב-2010 התחיל רעש סביב הנושא ברשת כאשר מעצב בשם אליוט ג’יי סטוקס כתב טוויט שטוען ש"אין תירוץ למעצבים אשר לא יודעים לתכנת את העיצובים של עצמם". הטוויט שלו התחיל גל של תגובות, כתבות בבלוגים ודיונים סוערים בקרב מעצבים מכל העולם. אפילו נערכו כנסים ואירועים בנושא.
אחת מהמנחות בכנס שהיה קשור בנושא הפיצה בבלוג שלה את הסקר הבא:
תוצאות הסקר היו ברורות. מכאן ניתן לראות את המגמה בעולם במידה מה.
מחוץ לגבולות ארצינו הקטנה
בואו נסתכל סביבינו. אני רוצה להציג שניים מהמעצבים הכי מוכרים בעולם היום בתחום העיצוב האינטראקטיבי.
הראשון הינו כריס ספונר. מעצב ובלוגר מוערך ומוכשר והבעלים של line25 ושל spoongraphics.
כריס הינו גם בעל ידע נרחב בשפות פרונט אנד* ו-וורדפרס ומציע גם בבלוגים שלו הדרכות מעולות למעצבים בנושא.
* למי שלא שמע על המושג "פרונט אנד": מדובר בשפות התכנות לדפדפנים בלבד (צד לקוח) ביניהם HTML, CSS, ו-Javascript.
הדוגמה הנ”ל היא מתוך טוטוריאל שלו ליצירת אפקט dropcaps באמצעות CSS.
- טוטוריאל של כריס ספונר ליצירת אפקט dropcaps באמצעות CSS
ניתן לקרוא עוד על כריס ספונר באתר שלו או בראיון שהשגנו איתו כאן בפיקסל פרפקט מגזין. תוכלו לראות עוד דוגמה לטוטוריאל שלו פה בהמשך הפוסט.
המעצב השני שרציתי להציג בפניכם הוא אורמן קלרק.
אורמן הוא אחד המעצבים אשר מכתיבים כיום את הטרנדים בעיצוב אתרים וממשקים.
הוא הבעלים של premiumpixels.com שם הוא מציע PSDs איכותיים להורדה ושימוש חינם למעצבים.
באמצעות אותם PSDs הוא מעצב ובונה אתרים מדהימים ומוכר אותם כטמפלטים של וורדפרס ב-themeforest.net – הקהילה הגדולה ביותר בעולם לאתרי וורדפרס, שם הוא נחשב ל-top seller.
אתם מוזמנים לראות את העיצובים שלו גם בדריבל שם הוא מככב כאחד המעצבים המוכרים בקהילה.
מה שמשותף לשני המעצבים הללו – הוא ששניהם יודעים ותומכים בללמוד קוד – לפחות פרונט אנד.
הם לא מתכנתים ומצהירים על עצמם כמעצבים בראש ובראשונה, אך הם יודעים להרים אתרים לבד ברמה מאוד גבוהה ב-HTML ואפילו בוורדפרס.
המגמה בעולם הולכת לכיוון המעצבים שיודעים לתכנת.
אפילו המעצב המוביל של פייסבוק – בן בלומנפלד דיבר על זה שהוא היה בארץ (הנה קישור לסיקור ההרצאה המרתקת שלו למי שעוד לא קרא).
הוא אמר שמעצבים צריכים לדעת לכתוב קוד "מספיק טוב כדי להיות מסוכנים."
אז עכשיו שקיבלנו קצת פרספקטיבה מלראות מה הולך בעולם… בואו נגיע למקום הקטן אבל משמעותי יותר שאנחנו צריכים להתמודד איתו עכשיו – ולא, אני לא מדבר על מה שקורה בארץ – אלא על מה שקורה בתוככנו.
מה הדיון הפנימי שקורה בתוככנו כאשר אנו חושבים על הנושא?
מה הדברים אשר אנו אומרים לעצמינו כאשר אנחנו נתקלים בנושא הזה?
אני מעצב, לא מתכנת. אז אין שום סיבה שאלמד תכנות.
אנחנו מעצבים בסביבה אינטראקטיבית לכן להכיר את הסביבה שלנו יעשה לנו רק טוב לעיצובים.
בנוסף צריך להבין שהעיצוב שלנו הוא בסוף נכתב בקוד. הם אותו הדבר. אין אחד בלי השני.
עיצוב בסביבה אינטראקטיבית = חפיפה עם תכנות.
[sep]
אין לי זמן ללמוד. אני עובד משרה מלאה ויש לי גם חיים מחוץ לעבודה.
זה רק תירוץ. אתה מעצב בסביבה טכנולוגית שרק הולכת ומתקדמת עם הזמן. סביבה שאסור להישאר בה מאחור…
עיצוב בסביבה אינטראקטיבית = אסור להשאר מאחור.
[sep]
אני מעצב, ועדיף שאתמקד בלהיות מעצב טוב יותר ולא להתפזר.
יש דרישה מטורפת בשוק למעצבים שיודעים גם פרונט אנד ושלפחות מבינים את הצד הטכנולוגי.
הנה כתבה שפורסמה ממש לא מזמן בדה מרקר…
- כתבה שפורסמה בדה מרקר
ויש עוד הרבה כאלו.
לי אישית מאוד עזרה העובדה שאני יודע גם קוד.
בראיונות עבודה ובפגישות עם לקוחות זה ממש משהו שלא רק "סגר את העסקה" זה גם גרם למעסיקים לרדוף אחריי.
זה כח עצום לדעת להרים אתר מא' ועד ת', ויש לזה דרישה ממש גבוהה בחוץ.
עיצוב בסביבה אינטראקטיבית = אפשרות לפתיחת דלת לעשרות הזדמויות עסקיות שרלונטיות למי שיודע גם קוד.
אז למה כן? … 3 סיבות טובות
1 – עבודה חלקה וזורמת מול מתכנתים
- מעצבים לעומת מתכנתים – אינפוגרפיקה
האינפוגרפיקה עוצבה על ידי @shanesnow עבור Wix.com
אנחנו מרגישים תמיד שאנחנו והמתכנתים באים משתי עולמות שונים, וכך אנחנו תופסים את עצמינו הרבה פעמים. כל כך רחוקים אחד מהשני. אבל האמת שאנחנו לא! יש את הפרונט אנד שמחבר ביננו קשר דם.
- תכנות פרונט אנד ועיצוב
א. אם נבין מה אפשר לעשות אז נוכל להסביר בפירוט ונחסוך למתכנת זמן. ב. מתכנתים חאפרים – שאומרים שמשהו לא אפשרי (ולצערי יצא לי להיתקל בדי הרבה כאלו)- נוכל להסביר להם בפירוט מה רצינו ואיך ליישם את זה.
2 – שיפור חווית המשתמש
קריאטיביות זה יופי… אבל זה רעיון וזה תמיד ישאר שם בעולם התלוש. מרחף אי שם בחלל, אבל אני רוצה להטביע מושג חדש- קריאטיביות פרקטית!
אם יהיו לנו את הכלים לבצע את הרעיון הקריאטיבי שלנו אז נוכל ליצור חווית משתמש אמיתית ואיכותית בהתבסס על טכנולוגיה וסטמדרטים שאנחנו יודעים בוודאות שקיימים.
מעצב קריאטיבי ככל שיהיה, אם הוא לא מבין במה מותר ואסור ואף התנסה בזה לא יידע לעולם איך לעצב אתר טוב, באיזה פונטים אפשר או אי אפשר להשתמש, איך לעצב רכיבים לאתר/אפליקציה, איך לעצב לפי סטנדרטים, מה זה בכלל עיצוב גמיש (רספונסיבי) ואיך לעצב כזה.
3 – להימנע מפאקים בהפקה
מעצב פרינט תמיד יתחיל לחשוב מראש על איזה סוג הדפסה הוא רוצה- איזה סוג נייר הוא ינסה להשתמש בו והרבה פעמים גם ילך לבית דפוס תוך כדי עבודה כדי לראות אם הדברים יוצאים כמו שהוא רוצה.
אותו דבר איתנו: אם נבין איך דברים עובדים באמת, נוכל לתכנן אותם מראש שיתאימו לטכנולוגיה קיימת.
לדוגמה: אם אני רוצה שיהיה לי סליידר באתר, אני צריך לדעת דבר ראשון איזה סוגי סליידרים ניתן לעשות, לכן אני חייב להיות מחובר למה שיש היום בשוק, ומה אפשר לעשות.
מעבר לכך – אם אני רוצה לפרוץ גבולות ולעשות סליידר יוצא דופן אני צריך לחשוב איפה אני יכול לפרוץ גבולות כך שעדיין הביצוע יהיה אפשרי וריאלי.
אני אפילו יכול לחפש ברשת סליידרים, למצוא כאלו שמתאימים לי ולנסות ליצור את הסליידר באופן שרציתי או לפחות לבדוק את הקוד שלו לראות אם מה שרציתי אפשרי. אחרת כלום לא יהיה אפשרי.
סבבה, מה עכשיו?
ללמוד – יש המון… אבל הממוווןןן השראה וחומר ללמידה שם בחוץ.
אנו בפיקסל פרפקט התחלנו כבר את הגלגל בשבילכם בסדרה של כתבות "מבוא" לשפות פרונט אנד:
בנוסף הנה רק חלק מהבלוגים המעולים (למעצבים) אשר בהם ניתן למצוא חומרים רלונטים וטוטוריאלים מעולים לפרונט אנד:
- noupe.com
- webdesignledger.com
- sixrevisions.com
- webdesignerwall.com
- land-of-web.com
- onextrapixel.com
- designinstruct.com
- www.land-of-web.com
- line25.com
- blog.spoongraphics.co.uk
- smashingmagazine.com
- youthedesigner.com
- developerdrive.com
- teamtreehouse.com
דוגמה לטוטוריאל טוב:
להלן דוגמה לטוטוריאל מהאתר של כריס ספונר – 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" על מנת ללמוד מה נמצא מאחורי המנוע.
ודבר אחרון: אל תפחדו מקופי פייסט – בכל טוטוריאל יש קטעי קוד קופי פייסט ובחלקם גם תקיה מוכנה להורדה… תשתמשו בזה…
ולסיכום
תהנו ממה שאתם עושים. זה נכון לגבי כל דבר בחיים.
אנחנו המעצבים התברכנו שיש לנו יכולת לעבוד בתחום שאנחנו אוהבים.
רובינו אהבנו לצייר או לעשות דברים קריאטיביים בשעות הפנאי שלנו כילדים וקיבלנו החלטה להפוך את זה למקצוע.
אני מקוה שנוכל כולנו להנות תמיד מהעולם העשיר שהתחום הזה מציע לנו… והשפה הטכנולוגית היא חלק בלתי נפרד מזה.
*אהבתם את המאמר? תנו בלייק! שתפו! כתבו תגובה! זאת הדרך שלכם לומר לנו שאתם אוהבים אותנו :)
