מושון

תכנית שיעור אחרון ;(

  • ששש
  • חיוכים
  • מה-ניש?
  • בתוכניתנו

חברים וחברות, הגענו לסוף סמסטר. והיום:

הסוציומטרי

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

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

מה הופך תגובה לפחות מוצלחת:

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

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

  • מושון הגיב אותה

8:50 כיופים באינטרנט

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

*תזכורת: אם עוד לא העלתם את השקופיות שלכם עם הקרדיטים לכל המציגים לא יהי לי דרך לתת לכם ציון לזה

9:50 הפסקה

10:10 טעימות וידאו

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

  • 6 סרטוני משתמשים בסמארטפון
  • 6 סרטוני משתמשים בטאבלט
  • 6 סרטוני משתמשים בדסקטופ
  • 6 דוגמאות לסטייל-גיידז

12:10 סיכום שנה

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

תכנית שיעור – 10

  • מובייל פירסט
  • שמות?
  • אז מה שלומכם?

איזה כיף באינטרנט

עם ________+_________

*זכרו: אם לא העלתם לאתר את המצגת שלכם, כאילו לא עשיתם…

מה זה בכלל סקרינקאסט?

אופציות לסקרינקאסט + אירוח וידאו:

Recordit

Screenr

QuicktimeCamstudio + YouTube / Vimeo

והאירוע הבא

  • סבב אירועים
  • פרמטרים חדשים

ואם יהיה זמן אתן לכם הרצאה

מושון

תכנית שיעור 9

  • שקט תקשורתי
  • שמות?
  • אז מה שלומכם? איך היה בכנס?

אדמיניסטרציה

  • כל המכייפים באינטרנט – ודאו שהמצגת שלכם באתר, שהיא מסווגת תחת קטגוריית "איזה כיף באינטרנט" ושהקרדיטים של שניכם בפוסט

איזה כיף באינטרנט

ביקורות לכל (לרוב)

ראשית נחזור על *הפרמטרים שהוגדרו בשבוע שעבר*: 

IMG_6075
ומעבר לזה:

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

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

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

תכנית שיעור – 8

  • שקט תקשורתי
  • שמות?
  • אז מה שלומכם?

איזה כיף באינטרנט

עם ________+________

כמה מילים על עיצוב רספונסיבי ("מגיב")

או בקצרה ובפאסון:

תוכנות לעיצוב רספונסיבי

Macaw

Webflow


Atomic

סבב ביקורות

  • מי רוצה ביקורת?
  • חבר מביא חבר
  • פרמטרים לביקורת נכתוב יחד
מושון

תכנית שיעור – 7

  • טלפוניכם?
  • שמותיכם?
  • שלומכם?

כיופים

הפירוקים משבוע שעבר

בואו נראה איפה אנחנו עומדים היום

קווים לדמותו של מר מובייל פירסט

כמה פניני חוכמה על איך ולמה לפנות לשיטת המובייל פירסט

והאירוע הבא

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

מה הם אריחי סגנון (StyleTil.es)?

בריף

מה מתוכנן לשבוע הבא

מושון

תכנית שיעור – 6: Style Guide

  • טלפונים?
  • שמות?
  • שלומכם?
  • שלומי?
  • בתוכניתנו היום

איזה כיף?

עם _______ + _______

הסטייל גייד

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

  • עיצוב מונחה עצמים – object oriented design
  • ui kits
  • יתרונות וחסרונות של תבניות עיצוב

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

רשימת העמודים –  עמודי הפיד של משתמשים כבדים באחד מהאתרים הבאים:

  • twitter.com (עמוד פרופיל)
  • pinterest.com (עמוד בורד פנימי)
  • soundcloud.com (עמוד פרופיל)
  • youtube.com (עמוד ערוץ)
  • facebook.com (עמוד לא פרטי)
  • behance.net (עמוד אמן)

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

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

עליכם להגיש סטייל גייד לצד העמוד שבחרתם ועליו לכלול את המרכיבים הבאים:

  • פריסת העמוד (layout): גריד, יחס בין תמונות לטקסט, משקלים ומוקדים ויזואליים…
  • טיפוגרפיה: פונטים, גדלים, משקלים, ריווחים…
  • מרכיבי ממשק משתמש: פסי גלילה, חצים, שדות של הטפסים, לחצנים, chekboxes, dropdowns…
  • אלמנטים גרפיים: צבעים, טקסטורות, אייקונים, מסגרות, פינות מעוגלות, אפקטים…

דוגמאות לסטייל גיידז ברשת:

Skype

BBC.co.uk

UI Frameworks: Bootstrap / Foundation / Other

SC5 Styleguide Generator

בריף חדש

האירוע!

מושון

תכנית שיעור – 5

  • טלפוניכם?
  • שמותיכם?
  • שלומכם?

אדמיניסטרציה

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

כיופים

עם ________+_________

הגשה

  • נתחיל ממי שקיבל פחות ביקורת עד היום
  • נתייחס לפרמטרים

העתיד…

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

תכנית שיעור #4: איך עושים עיצוב באינטרנט?

  • טלפוניכם?
  • שמותיכם?
  • שלומכם?

אדמיניסטרציה

  • שמות משתמש!
  • לייטבוקס מחודש

איזה כיף באינטרנט

עם ____________

סבב ביקורות

  • נגדיר פרמטרים
  • ננסה להשתמש בהם על כל עבודה
  • נרשום אותם בתגובות

איך מעצבים ברשת?

  • מה זה פיירבאג? דיבלופר קונסול?
  • איך עובד CSS?
  • בוחרים – selectors
  • תכונות – properties
  • ערכים – values
  • מה הרעיון של Object Oriented Design?
  • איך מייצרים סטייל גייד לרשת?
  • בוטסטראפ – סטייל גייד שהוא גם טול-קיט
  • Direct Manipulation
  • Bret Victor

http://vimeo.com/69534373
מושון

תכנית שיעור 3 – טיפוגרפיית רשת ותוכן דינמי

  • טלפוניכם?
  • שמותיכם?
  • שלומכם?

טיפוגרפיה ברשת

95% מהעיצוב לרשת הוא טיפוגרפיה!

  • טיפוגרפיית ווב:
    • ווב-פונטס
    • שירותי פונטים
    • פונטים פתוחים
    • ובארץ
  • דגשים של עיצוב טיפוגרפי ברשת (נציץ ב-TypeCast):
    • leding = line-height
    • מספר מילים בשורה
    • גודל פונט
    • צבעוניות של טקסט
    • חלל שלילי זה דבר חיובי
    • פוזיטיב/נגטיב
    • משקלים (רגיולר, בולד…) וסטיילים (רגיולר, איטליק) faux-bold ו-faux-italic
    • הצמדת פונטים (מלשון צמד) – Font Pairing
    • סגנון של לינקים

מעבר על השיעורי בית

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

תוכן משתנה

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

התוכן אכן… משתנה.

מושון

תכנית שיעור 2 – גרידים זה אחלה!

  • טלפונים! שששש…
  • שמותיכם?
  • שלומכם?

אדמיניסטרציה

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

איזה כיף באינטרנט!

בכיכובם של: ________

סקירת שעורי בית

  • סבב, מי את/ה ועל מה המאמר שלך?
  • דוגמאות לשלדים
  • פרמטרים לביקורת

קצת ידע כללי

  • איך עובד אתר (קליינט / סרבר)
  • מה הוא ה"בוקס מודל"?
  • פיירבאג – לראות מאחורי המטריקס
  • Firebug > Inspect Element > 3D View
  • גודל מסך / עבודה עם פיקסלים

פיתוח גריד ללייאאוט ברשת

בשלב זה של לימודיכם כבר נתקלתם יותר מכמה פעמים בגריד אבל קרוב לודאי שזה קרה בעיקר בקונטקסט של עיצוב לפרינט. ובכן עיצוב מבוסס גריד הוא חשוב מאוד גם (ובעיקר) במקרה שלנו ולכן נדסקס אותו היום קצת. ראשית נצפה בפרזנטציה Grids Are Good של קוי וין מעצב העל שגם היה בעבר הארט דיירקטור של אתר הניו יורק טיימז ושכותב את בלוג העיצוב המכובדSubtractions.com ושל המעצב החשוב מארק בולטון, שגם הוא מכובד ביותר בפני עצמו.

*כמה מילים על גרידים רספונסיביים (כל זאת ועוד בהמשך…)