תכנון מבנים

הצצה לתהליך ולכלים ששימשו ליצירת חוויית השימוש ביומן החגים של Designcember.

אדם ארגייל

אונה קראבטס

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

ניתן לראות את החוויה המלאה בכתובת designcember.com.

סקירה כללית

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

מתחיל בשיגעון

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

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

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

אפשר לצפות בהדגמה הזו ב-CodePen.

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

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

אנימציה של חלון עם Spritesheets

בחלק מהחלונות יש אנימציות שנועדו להוסיף אינטראקציה נוספת לחוויה. האנימציות נציירות ביד, במסגרת אחר מסגרת, ב-Photoshop. כל מסגרת מיוצאת והופכת לגיליון אינטראקטיבי באמצעות מחולל ה-spritesheet הזה. לאחר מכן מתבצעת אופטימיזציה באמצעות Squoosh. לאחר מכן, אנימציית ה-CSS משתמשת ב-background-position-x וב-animation-timing-function כפי שמוצג בדוגמה הבאה.

.una
  background: url("/day1/una_sprite.webp") 0% 0%;
  background-size: 400% auto;
}

.day:is(:hover, :focus-within) .una {
  animation: una-wave .5s steps(1) alternate infinite;
}

@keyframes una-wave {
  0%  { background-position-x: 0%; }
  25% { background-position-x: 300%; }
  50% { background-position-x: 200%; }
  75% { background-position-x: 100%; }
}

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

אנונימיזציה של CSS

לחלק מהחלונות היו צורות ייחודיות. השתמשנו במסכות ובaspect-ratio כדי ליצור חלון מותאם אישית, שניתן להתאמה.

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

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

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

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

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

פרצוף על האמנות

כדי לשמור על הדיוק של האיור ולהבטיח שמסכים באיכות גבוהה לא יספקו חוויית משתמש מטושטשת, עינת עבדה ביחס של 3 פיקסלים. מטרת התוכנית הייתה להשתמש ב-imgix ולהציג בשרת תמונות ופורמטים שעברו אופטימיזציה, אבל גילינו ששינוי ידני בעזרת הכלי Squoosh יכול לחסוך לנו 50% או יותר.

באיור יש אתגרים ייחודיים לדחיסה, במיוחד משיחת המברשת וסגנון הקצה השקוף שבו השתמשה ענת. בחרנו לבצע סקווש כל תמונת PNG שיוצאת מ-3x Photoshop, לפורמט png, webp ו-avif קטנים יותר. לכל סוג קובץ יש יכולות דחיסה מיוחדות משלו, ונדרשה דחיסה של יותר מ-50 תמונות כדי למצוא כמה הגדרות אופטימיזציה נפוצות.

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

דוגמה לפקודת סקווש מסוג AVIF CLI:

npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png

אחרי שהתבצעה בדיקה של הגרפיקה למאגר, נוכל להתחיל לטעון אותן מה-HTML:

<picture>
  <source srcset="/day1/inner-frame.avif" type="image/avif">
  <source srcset="/day1/inner-frame.webp" type="image/webp">
  <img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>

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

<Pic filename="day1/inner-frame" role="presentation" />

משתמשים בקורא מסך ובמקלדת

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

לדוגמה, במהלך הטמעת התמונות השתמשנו ב-role="presentation" כדי לסמן את התמונה כמצגת עבור קוראי מסך. שמנו לב שחוויית המשתמש של 5 עד 12 תיאורים לא תקינים ב-alt לא תיפגע. לכן, סימנו את התמונות כתמונות להצגה וסיפקנו תיאור כללי של החלון. מעבר בין החלונות בקורא מסך נותן תחושה של העלילה נחמדה, שקיווינו שתעזור לכם להעביר את הצחוק והכיף באתר.

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

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

Astro, מחולל סטטי ראשון, מבוסס-רכיבים

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

ימים כרכיבים

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

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

סגנונות לפי היקף ו-Open Props

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

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

קונטיינרים גמישים

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

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

.day {
  container: inline-size;
}

.day > .pane {
  min-block-size: 250px;

  @container (min-width: 220px) {
    min-block-size: 300px;
  }

  @container (min-width: 260px) {
    min-block-size: 310px;
  }

  @container (min-width: 360px) {
    min-block-size: 450px;
  }
}

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

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

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

.person {
  place-self: flex-end;
  margin-block: 25% 50%;
  margin-inline-start: -15%;
  z-index: var(--layer-1);

  @container (max-height: 350px) and (max-width: 425px) {
    place-self: center flex-end;
    inline-size: 50%;
    inset-block-end: -15%;
    margin-block-start: -2%;
    margin-block-end: -25%;
    z-index: var(--layer-2);
  }
}

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

תמיכה בדפדפנים שונים

כדי ליצור חוויה מודרנית וחדשה בדפדפנים שונים, במיוחד עבור ממשקי API ניסיוניים כמו שאילתות קונטיינרים, אנחנו זקוקים ל-polyfill מצוין. שלחנו הודעה לצוות שלנו וסורמה הובילה את תהליך ה-build לPolyfill חדש של שאילתות בקונטיינרים. ה-polyfill מסתמך על ResizeObserver, MutationObserver והפונקציה :is() ב-CSS. לכן כל הדפדפנים המודרניים תומכים ב-polyfill, במיוחד Chrome ו-Edgeהחל מגרסה 88, Firefox מגרסה 78 ו-Safari מגרסה 14. השימוש ב-Polyfill מאפשר כל אחד מהתחבירים הבאים:

/* These are all equivalent */
@container (min-width: 200px) {
  /* ... */
}
@container (width >= 200px) {
  /* ... */
}
@container size(width >= 200px) {
  /* ... */
}

מצב כהה

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

ביצי פסחא אחרות

נגיעות אישיות

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

נגיעות פונקציונליות

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

ל- Designcember.com יש גם גיליון סגנונות הדפסה מיוחד שבו אנחנו למעשה מציגים תמונה ספציפית שהכי מתאימה על נייר בגודל 8.5 אינץ' על 11 אינץ', כדי שתוכלו להדפיס את היומן בעצמכם ולהישאר חגיגיים כל השנה.

יש תמונה גדולה של היומן.

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