האם מעצבים צריכים לדעת תכנות - עם הערות

Post on 02-Jul-2015

1.965 Views

Category:

Documents

4 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

TRANSCRIPT

האם

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

תכנות?*שגיא שרייבר

<WTF />

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

adhamdannaway.com נלקח מהאתר המדהים של המעצב אדהם דנאווי

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

?

?למה זה כל כך מזיז לנו?

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

?למה זה כל כך מזיז לנו?

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

?למה זה כל כך מזיז לנו?

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

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

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

כריסספונר

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

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

.CSS באמצעות dropcaps הדוגמה הנ”ל היא מתוך טוטוריאל שלו ליצירת אפקט

אורמן קלרק

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

הוא הבעלים של premiumpixels.com שם הוא מציע PSDs איכותיים חינם למעצבים.

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

!בואו נדבר תכלס!

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

אני מעצב, לא מתכנת.

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

אני מעצב, לא מתכנת.

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

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

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

הם אותו הדבר. אין אחד בלי השני.

קוד = עיצוב!

אין לי זמן ללמוד אני עובד משרה מלאה

ויש לי גם חיים מחוץ לעבודה

אין לי זמן ללמוד אני עובד משרה מלאה

ויש לי גם חיים מחוץ לעבודה

עיצוב בסביבה אינטראקטיבית =

אסור להשאר מאחור

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

אני מעצב, ועדיףשאתמקד בלהיות

מעצב טוב יותרולא להתפזר.

אני מעצב, ועדיףשאתמקד בלהיות

מעצב טוב יותרולא להתפזר.

יש דרישה מטורפת למעצבים

שיודעים גם פרונט אנד ותכנות

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

http://www.themarker.com/hitech/1.1588214

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

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

אז בואו נתמקד:

למה כן?

סיבות טובות3

עבודה מול מתכנתים1

wix.com-ל shanesnow@ מתוך אינפוגרפיקה שעוצבה על ידי

אנחנו מרגישים תמיד שאנחנו והמתכנתים באים משתי עולמות שונים

עיצובתכנות

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

עיצובתכנותפרונט אנד

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

ב. מתכנתים חאפרים - שאומרים שמשהו לא אפשרי - נוכל להסביר להם בפירוט מה רצינו ואיך ליישם את זה.

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

קריאטיביות

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

+

קריאטיביותפרקטית

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

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

לדוגמה: מעצבי פרינט

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

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

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

לראות אם מה שרציתי אפשרי. אחרת כלום לא יהיה אפשרי.

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

ללמוד

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

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

.CSS-וה HTMLהוא מסביר בשלב הזה של הטוטוריאל את הכתיבה של ה

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

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

קטעי קוד לעשות פשוט קופי פייסט

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

להתנסות

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

לחפש כל דבר... וכמה שיותר מדויק

להתנסות

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

והנה דוגמה לאחד.

.CSS-עם דוגמה עובדת ב

לבדוק אתרים לעומק

להתנסות

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

להתנסותקופי + פייסט

אל תפחדו מקופי פייסט!

קופי + פייסט

להתנסות

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

להנות תמיד

לסיום קצת חוכמת סטיב ג'ובס.... תהנו ממה שאתם עושים.

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

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

תודה.

top related