תכנון מבנים

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

Adam Argyle
Una Kravets

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

אפשר לראות את החוויה המלאה באתר designcember.web.app.

אתר Designcember.

סקירה כללית

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

מתחילים עם גחמה

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

סקיצות של שלד הדף Designcember.

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

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

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

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

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

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

אנימציה של חלון עם גיליונות ספירט

בחלק מהחלונות יש אנימציות שמוסיפות אינטראקטיביות לחוויה. האנימציות מצוירות ידנית, פריים אחר פריים, ב-Photoshop. כל פריים מיוצא, הופך לגיליון spritesheet באמצעות מחולל 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 כדי ליצור חלון שניתן להתאמה, בעל צורה ייחודית וגודל משתנה.

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

החלון ליום השמיני.

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

תמונה של מסכת תלתן

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

החלון של היום השמיני במצב כהה.

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

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

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

איך משנים את הגודל של יצירת האומנות

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

דחיסת תמונות באמצעות Squoosh.

יש אתגרים ייחודיים בדחיסה של איורים, במיוחד כשמדובר בסגנון של קצה מחוספס ושקוף של משיכת מכחול כמו זה שבו השתמשה אליס. בחרנו להשתמש ב-Squoosh כדי להקטין כל תמונה בפורמט PNG שיוצאה מ-Photoshop, לפורמט PNG,‏ WebP ו-AVIF. לכל סוג קובץ יש יכולות דחיסה מיוחדות משלו, ונדרשה דחיסה של יותר מ-50 תמונות כדי למצוא הגדרות אופטימיזציה משותפות.

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

דוגמה לפקודת AVIF CLI squoosh שבה נעשה שימוש:

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>

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

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

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

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

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

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

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

‫Astro, מחולל אתרים מבוסס-רכיבים עם דף ראשון סטטי

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

ימים כרכיבים

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

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

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

‫Astro scopes styles written inside its component model, which made distributing the workload amongst many team members easier, and also made using Open Props fun. הסגנונות של Open Props normalize.css היו שימושיים עם העיצוב המותאם (בהיר וכהה), וגם עזרו לי לטפל בתוכן כמו פסקאות וכותרות.

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

Flexible containers

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

הדגמה של שינוי הגודל של החלונות כשיש יותר מקום.

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

.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;
  }
}

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

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

.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);
  }
}

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

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

כדי ליצור חוויה מודרנית ונהדרת בדפדפנים שונים, במיוחד עבור ממשקי API ניסיוניים כמו שאילתות של רכיבי container, אנחנו צריכים 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, זו לצד זו.

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

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

מגע אישי

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

אפשרויות להתאמה אישית של סגנונות הסמן וסמלי האתר

מגעים פונקציונליים

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

באתר Designcember יש גם גיליון סגנונות מיוחד להדפסה, שבו אנחנו מציגים תמונה ספציפית שמתאימה להדפסה על נייר בגודל 8.5" x 11". כך תוכלו להדפיס את לוח השנה בעצמכם וליהנות מאווירה חגיגית לאורך כל השנה.

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

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

חלקים ביומן עם הערות והערות חזותיות