מושון

אירוע – בריף 5: טרום הגשה

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

המשך הסמסטר

  • שבוע חמישי – 7.6: הגשת ביניים – כוללת גרסת דסקטופ רחב 1366×768
  • שבוע שישי – 14.6: קופת חולים
  • שבוע שביעי – 21.6: הגשה

קודם כל תגובות

תגובה*1 – לעצמכם – על בסיס הפידבק שקיבלתם ו/או קיבלו אחרים בכיתה (הפרמטרים)

תגובה*3+ – לאחרים – גם כן על בסיס הפידבק שקיבלתם ו/או קיבלו אחרים בכיתה (הפרמטרים)

הגשת ביניים

סקרינקאסט לסמארטפון ו/או לטאבלט

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

פרוטוטייפ לדסקטופ

לשבוע הבא תשלימו את העיצוב גם לגרסת דסקטופ רחב ברזולוציה 1366×768 (יחס 16:9). לשיקולכם ניתן יהיה לבחור גם רזולוציה גבוהה מזה ע״פ הרזולוציות המקובלות. מבחינת תרחיש המשתמש קחו בחשבון את ההקשר הנכון לחוויית הדסקטופ, שיכול להיות גם תוך כדי עבודה, ומתחרה לרוב עם כל הדברים האחרים שאתה יכול/אמור לעשות כשאתה על המחשב. במקביל יש ברזולוציה הגבוהה גם יתרונות מבחינת הצגה של תוכן רב יותר ודגש על דימויים גדולים וגם אופציה לטיפוגרפיה גדולה. במקביל יש גם אתגרים כיוון שגושי טקסט, שבמובייל ובטאבלט יכלו בכיף ליתפרש על כל רוחב המסך, עלולים להרגיש רחבים מדי על מסך הדסקטופ. במקביל יש נטייה לפחד מהחלל הריק שעלולה להפוך את העיצוב לדסקטופ לעמוס מדי, נסו לשים לב לזה. עוד דגש לעיצוב לדסקטופ שלא היה לנו במובייל הוא השימוש במצבי ״הובר״ – מעבר עכבר. גם אותם תצטרכו לעצב במסגרת הפרוטוטייפ שתבנו לדסקטופ.

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

בהצלחה!

מושון

אירוע- בריף 4: טאבלט עומד

תגובות

1 לעצמכם

3+ לחבריכם

לשבוע הרביעי של הפרויקט – 31.5

בעוד שבועיים תציגו לנו תיקונים לגרסת המוביילים והטמעה של הסטייל גייד גם על גרסאת הטאבלט האנכי 768*1024 (portrait – עומד) ע״פ תרחיש השימוש שתואם לו (lean-back אבל במידה). נסו להשתמש בשבועיים הללו כדי באמת לעדות התקדמות משמעותית. את התרחיש החדש גם כן יש להציג בפדרך פרוטוטייפ בסגנון InVision. 

בהצלחה!

מושון

אירוע בריף 3: בואו נראה את זה בסמארטפון

בשבוע הקרוב נעבוד על העיצוב הויזואלי המלא של אפליקציית המובייל-ווב של האירוע המדובר

תגובות תחילה

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

לשבוע הבא

פרוטוטייפ מלא של תרחיש שימוש באתר המובייל (!)

לדוגמה נסו לדמיין תרחיש שימוש תרחיש מצוי (אחד מיני רבים):

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

לשיעור עצמו

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

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

עם ________+_________

מושון

בריף 7: אירוע רזה אבל בסטייל

בשבוע הקרוב נממשיך לעבוד על בניית שלד (מבנה) ותחילת שפה גרפית (תצוגה)

הוציאו את השלד מהארון

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

iPhone_5iPhone_5_Sketching_Template מבית Stanfy.

iPadiPad Sketching Template גם הוא מבית Stafny.

בעת הצורך הדפיסו יותר מדף אחד ונסו לתאר דרכו את מבנה באתר. זכרו, השלד אמור להיות פונקציונלי, הוא לא בהכרח צריך להיות ״יפה״ (למרות שאנחנו לא נגד ״יפה״)
סרקו את התבנית, התאימו את הגודל של התמונה לרוחב מקסימלי של 1000px ופרסמו באתר.

סטייל טיילז

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

ביומיים הקרובים

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

איזה כיף יהיה באינטרנט עם…

נועם + מאי

מושון

בריף חדש – האירוע: מובייל פירסט

בשבוע הבא נתחיל את התרגיל האחרון והמרגש שלנו, קודם מובייל, אח"כ העולם כולו…

תיאור התרגיל

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

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

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

שלבי התרגיל

  1. שבוע ראשון – 3.5: תוכן ומבנה * 3 גרסאות
  2. שבוע שני – 10.5: עיצוב שלוש הצעות סגנון שונות (look & feel) בעזרת סטייל-טייל
  3. שבוע שלישי – 17.5: בחירת וגימור הסטייל-טייל המתאים לכדי Style Guide, והטמעתו על גרסת המובייל – 320*568 (בהתייחסות גם לרזולוציית רטינה).
  4. שבוע רביעי – 31.5: תיקונים והטמעת הסטייל גייד גם על גרסאת הטאבלט האנכי 768*1024 (portrait)
  5. שבוע חמישי – 7.6: הגשת ביניים – כוללת גרסת דסקטופ רחב 800*1280
  6. שבוע שישי – 14.6: הגשה

לבעוד שבוע

  1. כתבו פסקה או שתיים המסכמות את הרעיונות המרכזיים שלקחתם מההרצאה של לוק וורבלבסקי על גישת המובייל פירסט (PDF). או בקצרה:https://youtu.be/xWInGelLGN8
  2. בחרו את האירוע שבו תעסקו בתרגיל. נסו להפליג בדמיון. זה יכול להיות הזמנה להופעה הראשונה של הביטלז, הזמנה מסתורית לכנס סודי של כת עתידנית ששואפת להחליף את נשיא סין ברובוט, או הזמנה אקסקלוסיבית לעקידת יצחק ממוענת אישית לקב"ה, וכן הלאה וכן הלאה…
  3. הציגו את כל האלמנטים התוכניים של האתר (טקסטים, תמונות ומדיה) בפוסט בסגנון דומה לתרגיל הראשון
  4. בנו היררכיות בין כל האלמנטים (ללא עיצוב ויזואלי, עשו שימוש פשוט בכלי העריכה של וורדפרס: כותרות, כותרות משנה, רשימות, לינקים, הבלטה, ציטוטים וכדו'…).
  5. בנו שלדים (ידניים) לשלושת הפלטפורמות (מובייל, טאבלט עומד, דסקטופ רחב) והציגו אסטרטגיה בפריסות התוכן בפלטפורמות השונות:
    • מה יהיה תרחיש המשתמש במובייל? מה בטאבלט? מה בדסקטופ?
    • האם יש עמודים? גלילה? אינטראקציות דינמיות עם מאגר הנתונים וכו'
    • מה ההבדלים בין התצוגות בפלטפורמות השונות?
  6. בחרו פסקול לפרויקט שלכם והטמיעו אותו (מיוטיוב אולי) בפוסט שלכם. (לדוגמה סטודנטית שעשתה הזמנה לפלאש-מוב זומבים הטמיעה את Thriller של מייקל ג׳קסון וסטודנט שעשה הזמנה לטיול מאורגן של רמי לוי לירח שם את נערת חלל של פרץ)
  7. רפרנסים מעניינים לעיצוב רספונסיבי:
  8. רפרנסים מעניינים לעיצוב אירוע:

השלמה של תרגיל הרידיזיין

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

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

עם ______ + ______

מושון

״בריף״ לקראת סדנת מערכות גרפיות

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

מי מכם שת/ירצה לשפר את הפרויקט מוזמנ/ת.

מעבר לזה אתם חופשיים לשבועיים.

!

מושון

כתבת שער בריף 4: הגשה!

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

תגובותיכם

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

+ 3 תגובות בשביל החברה.

התקדמות בחופש

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

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

על הפוסט להכיל:

  • טקסט מקוצר אודות האתר (פסקה אחת)
  • שלד (wireframes)
  • מאמר ראשון + גריד
  • מאמר שני + גריד
  • מצב הובר להדמיה של אינטראקציות (עם אלמנטים כמו דרופ-דאון והייפרלינקים)
  • אני ממליץ להשתמש ב-Invision לטובת העניין. אם אתם צריכים חשבונות סטודנטים רק תגידו.

 איזה כיף בשבוע הבא:

_____+_____

מושון

בריף כתבת שער 3: תוכן משתנה + דגשים טיפוגרפיים

תגובה + מקצה שיפורים

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

מה? עוד כתבה? כן!

בנוסף – עליכם להגיש גרסה נוספת של תבנית הכתבה עם שינויי התוכן הבאים:

  • כותרת (שם הכתבה) להכפיל או לקצר פי 3.
  • טקסט הכתבה – להכפיל פי 2 או לקצר פי 2.
  • תמונות – להחליף, כולל את יחסי גובה/רוחב (אופקיות לאנכיות ולהיפך)
  • ליצור תגיות נוספות בנות 4 מילים לפחות
  • להוסיף 4 תגובות נוספות –
    • תגובת פסקה ארוכה
    • תגובת מלה בודדת (סמיילי למשל)
    • שתי תגובות שהן תשובה לתגובה אחרת (שרשור)
  • שימו לב – כנראה שתאלצו לעדכן את עיצוב התבנית, ועליכם ליישם את השינויים גם על התוכן הקודם.
  • מומלץ לעבוד על אותו קובץ פוטושופ תוך שימוש בתיקיות שכבות שונות ובפאנל של Layer Comps. בכתבה Optimize Your Web Design Workflow תמצאו לא מעט טיפים לגבי העבודה בפוטשופ לעיצוב בווב.
  • לשבוע הבא: העלו את ארבעת האימג'ים המעודכנים לאתר – שתי כתבות כל אחת מהן בגרסה עם גריד ובגרסה ללא גריד.

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

בכיכובם של ___________

מושון

בריף כתבת שער 2: לייאאוט

עד יום חמישי ב-23:59 – תגובות תחילה

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

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

מוק-אפ פוטושופי

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

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

לשיעור הבא

שני דימויים: העיצוב שלכם + העיצוב שלכם עם שכבת הגריד מעליו

ובפינת ״איזה כיף באינטרנט״ בשבוע הבא

_________________

בהצלחה!

מושון

בריף: כתבת שער – תוכן + מבנה

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

מה נלמד?

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

שלב המחקר (מה?)

מי אנחנו?

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

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

כתבת שער

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

אספו את החומרים לכתבה:

  • כותרת
  • טקסט חי
  • תמונות / איורים
  • תאריך פרסום
  • תגיות
  • פסקת ביוגרפיה של הכותב
  • תמונת פרופיל של הכותב
  • תגובות (לפחות 3) + שמות המגיבים + תמונותיהם
  • ועוד (אם רלוונטי):
  • וידאו (אם יש)
  • טבלאות
  • אינפוגרפיקה
  • וואטאבר…

רפרנסים

נסו למצוא רפרנסים לעיצוב שלכם, זה יכול להיות ברמת הלייאאוט, הצבעוניות, האסטטיקה, בכל רמה…

שלב המבנה (באיזה אופן?)

השלד, בניגוד לשלדים אחרים יהיה עבור דף מאמר אחד בלבד.

שלד אנלוגי

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

מעבר לזה, קחו השראה מרשימות כמו זו או מהקבוצת פליקר הזאת.

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

להעלות לאתר

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

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

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