פיתוח למעצבים ואנשי חוויית משתמש

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

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

עולם הפיתוח יכול להיראות למשקיף מהצד כמו אוסף של מילים מסובכות ללא קשר ביניהן. אנחנו נפזר את ענן הערפל מעל המושגים שאתם שומעים סביבכם כמו HTML5, פיתוח Web, CSS ,Front-End ומושגים רבים נוספים.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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