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

1. ‫האם‬
‫מעצבים‬
‫צריכים לדעת‬
‫תכנות?‬ ‫>/ ‪<WTF‬‬
‫*שגיא שרייבר‬

2. ‫השאלה הנצחית‬
‫האם אנו המעצבים צריכים לדעת גם לתכנת?‬
‫נלקח מהאתר המדהים של המעצב אדהם דנאווי ‪adhamdannaway.com‬‬

3. ‫השאלה הנצחית‬
‫?‬
‫האם אנו המעצבים צריכים לדעת גם לתכנת?‬

4. ‫?‬
‫למה זה כל כך מזיז לנו?‬
‫נראה שזה נושא שפוגע בעורק ראשי שלנו המעצבים.‬

5. ‫למה זה כל כך מזיז לנו?‬
‫?‬
‫102 התחיל רעש סביב הנושא ברשת כאשר מעצב בשם אליוט ג’יי סטוקס הפיץ טוויט שטוען שאין תירוץ‬
‫עצבים אשר לא יודעים לתכנת את העיצובים של עצמם.‬

6. ‫למה זה כל כך מזיז לנו?‬
‫?‬
‫בעקבות הטוויט שלו הופיעו ברשת המון כתבות בבלוגים ואפילו נערכו כנסים ואירועים בנושא.‬

7. ‫אחת מהמנחות בכנס שהיה קשור בנושא הפיצה בבלוג שלה את הסקר הנ”ל.‬

8. ‫התשובה שם הייתה ברורה. מכאן ניתן לראות את המגמה בעולם במידה מה.‬

9. ‫כריס‬
‫ספונר‬
‫נסתכל סביבינו.... אני רוצה להציג שנים מהמעצבים הכי מוכרים בעולם היום בתחום האינטראקטיבי. ‬
‫אשון הינו כריס ספונר. מצב מוערך ומוכשר והבעלים של 52‪line‬ושל ‪.spoongraphics‬‬

10. ‫ס הינו גם בעל ידע נרחב בשפות פרונט אנד ווורדפרס ומציע גם בבלוגים שלו הדרכות מעולות למעצבים‬
‫וד איך לתכנת פרונט אנד. ‬
‫וגמה הנ”ל היא מתוך טוטוריאל שלו ליצירת אפקט ‪ dropcaps‬באמצעות ‪.CSS‬‬

11. ‫אורמן קלרק‬
‫מעצב השני שרציתי לדבר עליו הוא אורמן קלרק.‬
‫ורמן הוא אחד המעצבים אשר מכתיבים כיום את הטרנדים בעיצוב אתרים.‬
‫וא הבעלים של ‪ premiumpixels.com‬שם הוא מציע ‪ PSDs‬איכותיים‬
‫ינם למעצבים. ‬

12. ‫אותם ‪ PSDs‬אורמן בונה אתרים מדהימים ומוכר אותם כטמפלטים של וורדפרס ב-‪- themeforest.net‬‬
‫קהילה הגדולה ביותר בעולם לאתרי וורדפרס, שם הוא נחשב ל-‪.top seller‬‬

13. ‫בואו נדבר תכלס!‬
‫!‬
‫אז… בואו נדבר תכלס. מה הדברים אשר אנו אומרים לעצמינו כאשר אנחנו נתקלים בנושא הזה?‬

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

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

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

17. ‫קוד = עיצוב!‬

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

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

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

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

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

24. ‫יש דרישה‬
‫מטורפת למעצבים‬
‫שיודעים גם‬
‫פרונט אנד ותכנות‬
‫יש דרישה מטורפת בשוק למעצבים שיודעים גם פרונט אנד ושלפחות מבינים את הצד הטכנולוגי.‬

25. ‫4128851.1/‪http://www.themarker.com/hitech‬‬
‫כתבה שפורסמה ממש לא מזמן בדה מרקר...‬
‫עוד הרבה כאלו בעולם.‬
‫יודע שלי אישית מאוד עזר העובדה שאני יודע גם קוד בראיונות עבודה ובעבודות שקיבלתי. זה כח עצום ויש‬
‫דרישה בשמיים.‬

26. ‫אז בואו נתמקד:‬
‫למה כן?‬

27. ‫3‬
‫סיבות טובות‬

28. ‫1‬
‫עבודה מול מתכנתים‬

29. ‫מתוך אינפוגרפיקה שעוצבה על ידי @‪ shanesnow‬ל-‪wix.com‬‬
‫אנחנו מרגישים תמיד שאנחנו והמתכנתים באים משתי עולמות שונים‬

30. ‫עיצוב‬ ‫תכנות‬
‫וכך אנחנו תופסים את עצמינו הרבה פעמים. כל כך רחוקים אחד מהשני. אבל האמת שאנחנו לא!‬

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

32. ‫2‬
‫שיפור חווית המשתמש‬

33. ‫קריאטיביות‬
‫קריאטיביות זה יופי... אבל זה רעיון וזה תמיד ישאר שם בעולם התלוש. מרחף אי שם בחלל.‬

34. ‫קריאטיביות‬
‫פרקטית‬
‫+‬
‫ל אני רוצה להטביע מושג חדש- קריאטיביות פרקטית! ‬
‫ם יהיו לנו את הכלים לבצע את הרעיון הקריאטיבי שלנו אז נוכל ליצור חווית משתמש אמיתית ואיכותית.‬

35. ‫3‬
‫להימנע מפאקים בהפקה‬

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

37. ‫סבבה, מה עכשיו?‬

38. ‫ללמוד‬
‫יש המוווווןןןןן השראה וחומר ללמידה שם בחוץ.‬

39. 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
‫אפילו בבלוגים הכי פופולארים של העיצוב היום‬

40. ‫נה דוגמה לטוטוריאל מהאתר של כריס ספונר ‪ line25.com‬שבו הוא מסביר שלב אחרי שלב איך לעצב‬
‫כתוב בקוד בלוג וורדפרס טיפוגרפי.‬
‫וא מסביר בשלב הזה של הטוטוריאל את הכתיבה של ה‪ HTML‬וה-‪.CSS‬‬

41. ‫כפתור צפיה בדוגמה החיה.‬

42. ‫הערות וסדר כדי שנוכל להבין מה עומד מאחורי כל דבר.‬

43. ‫קטעי קוד לעשות פשוט קופי פייסט‬

44. ‫מובן התוצר הסופי עם הערות ידניות ומושקעות אשר מתארות לנו שוב את התהליך שעברנו ולמה כל שורה‬
‫מקום שבו היא נמצאת.‬

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

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

47. ‫והנה דוגמה לאחד.‬

48. ‫ם דוגמה עובדת ב-‪.CSS‬‬

49. ‫להתנסות‬
‫לבדוק אתרים‬
‫לעומק‬
‫ירבאג... הכלי הידידותי ביותר למעצב... תורידו אותו ולמדו להכיר אותו.‬
‫ש אתר שגרם לכם להזיל ריר? פתחו ישר את פיירבאג על מנת ללמוד מה נמצא מאחורי המנוע...‬

50. ‫להתנסות‬
‫קופי +‬
‫פייסט‬
‫אל תפחדו מקופי פייסט!‬

51. ‫להתנסות‬
‫קופי +‬
‫פייסט‬
‫בכל טוטוריאל יש קטעי קוד קופי פייסט ובחלקם גם תקיה מוכנה להורדה... תשתמשו בזה...‬

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

53. ‫תודה.‬