שנת 2024 מתחילה, והדבר היחיד שאני באמת רוצה שהיא תביא איתה זה את סיום המלחמה. שתחזיר את החטופים לביתם, את א.נשי המילואים והסדירניקים הביתה, שתשכין את השקט והשלום ברצועת עזה ובצפון ובעצם בכל הארץ. ובכל זאת, החיים, מתברר, ממשיכים, ולפעמים אני מעדיפה להתעסק בדברים של היום יום כדי לברוח קצת מהמציאות.
בשנת 2020 כתבתי את הפוסט css וטרנדים של עיצוב לשנת 2020, וכבר אז הצהרתי שאני לא שוחה ומעודכנת כבר במה שקורה בעולם העיצוב. אם אז זה היה נכון, היום זה אפילו עוד יותר. ועדיין, אני אוהבת את החיבור בין העיצוב והיכולות הטכנולוגיות המתקדמות (בעיקר בהקשר של css) ולכן החלטתי לשוב ולקרוא על טרנדים שצפויים להציף את העיצוב 🙂
בפוסט הזה אני מתמקדת בבחירת הטרנדים הרלוונטיים ביותר לפיתוח, ולכן לא מביאה את כל הטרנדים – למשל חזרה לטבע ולחומרים טבעיים, שילוב ריאליסטי וסוריאליסטי, או חזרתם של האיורים דמויי ציור ביד או דודלים ועוד.
מתוך אלה הרלוונטיים, בחרתי את אלה שעניינו אותי, ואת אלה שראיתי בהם זיקה לשימוש ב-css.
לקריאה על טרנדים עיצוביים לשנת 2024
- 7 emerging web design trends for 2024 and beyond
- Graphic Design Trends 2024 – The Great Reset
- Graphic Design Trends 2024
- Back 24 of the Biggest Graphic Design Trends for 2024
- 10 inspiring graphic design trends for 2024
- The biggest trends in graphic design for 2024, as predicted by the creative industry
- 5 Trends in Website Design for 2024
#1 Bento grid
הטרנד
אם ב-2020 דיברו על יציאה מהגריד, אז השנה נראה שהכיוון הוא פחות יציאה מהגריד ודווקא התכנסות לתוכו, אבל לא סתם אלא ב״גריד בנטו״, הלקוח מארוחת בנטו היפנית, ארוחה לדרך שמוגשת בקופסה המחולקת לתאים, כאשר בכל תא יש מרכיב אחר של הארוחה.
עוד על bento grid אפשר לקרוא פה וגם פה.
היישום ב-css
container queries
נתמכים בכל הגרסאות האחרונות של הדפדפנים המובילים. מאפשרים התאמה של תוכן לפי גודל האזור שבו הם נמצאים. מניחה שברגע ש-Style container queries ייתמכו טוב יותר, הם יעצימו את העיצוב.
גריד ו-sub-grid
אם ב-2020 display:grid היה המלך, אז ללא ספק הוא אחד המאפיינים הכי שימושיים עבור layout. עם השנים התמיכה שלו בדפדפנים מתרחבת, ושנת 2024 מביאה איתה גם תמיכה ב-sub-grid.
#2 Adaptive Headers
הטרנד
חייבת להודות שנתקלתי בו רק ברשימה אחת, אבל החלטתי לצרף אותו לרשימה שלי כי הוא נראה לי מעניין 🙂
שימוש ב-header קבוע בחלק העליון של העמוד לא תמיד מתאים מבחינת העיצוב, והפיכה של הרקע שלו לשקוף יכולה ליצור בעיות נראות של ה-header בכלל ושל נגישות בפרט. התאמת צבע ה-header לאזור עליו הוא נמצא יכולה לפתור את הבעיה של אחידות העיצוב. אפשר לראות דוגמה לכך באתר של Total Management Group וגם באתר של torii studio
היישום ב-CSS
שימוש במאפיין :has. אמנם נכון להיום התמיכה לא 100%, בפיירפוקס זה נתמך רק בגרסה האחרונה (למי מכם.ן שתומך ב-2 גרסאות אחורה), אבל זה ממש פה מעבר לפינה 🙂 לטעמי, אחד המאפיינים שרבים חיכו לו די הרבה זמן (פוסט של css-tricks מ-2010)
#3 טיפוגרפיה
הטרנד
איגדתי תחת טיפוגרפיה כמה טרנדים שנתקלתי בהם:
- טיפוגרפיה קינטית
- טיפוגרפיה של טלפרומפטר
- שימוש בטקסט גדול ואפילו over-sized
- טיפוגרפיה המשמשת כתמונה ראשית
- שימוש בטיפוגרפיה מודגשת (ממורקרת)
היישום ב-CSS
- עבודה עם פילטרים על פונטים (blend-mode)
- שילוב טקסט ו-clip-path. דוגמה מוצלחת אפשר לראות פה
- אנימציה על טקסט
- תמיכה מלאה ב-variable-fonts
- אפשרויות
text-decorationמורחבות - mark
See the Pen Dark Text Animation by Álvaro (@alvarotrigo) on CodePen.
See the Pen Dark Text Animation by Álvaro (@alvarotrigo) on CodePen.
#4 גלילה
הטרנד
שוב איגדתי פה כמה שמצאתי שקשורים באפקטים בזמן גלילה:
- גלילה רב מישורית
- אפקט פרלאקס בגלילה
- Interactive Storytelling
היישום ב-CSS
כל מה שקשור לאנימציה ולאנימציה שמושפעת מהגלילה, מאוד התפתח בשנה האחרונה, חלקו ב-css עצמו וחלקו ב-animation api. נכון, לא הכל נתמך לגמרי – אבל אנחנו בדרך:
- View transitions
- Linear-easing function
- Scroll End
- Scroll-driven animations
- Deferred timeline attachment
#5 צבעים
הטרנד
שימוש בצבעים עזים, שימוש בורוד ברבי ושימוש נרחב בגראדיאנטים של צבעים חיים.
היישום ב- CSS
תמיכה רחבה בפורמטים מגוונים של צבעים, צבעים עם ערכים של שקיפות, גראדיאנטים בשימושים שונים וגם תמיכה ב conic-gradiennt, ופונקציות לשליטה על צבעים כמו למשל color-mix() ו- color-contrast()
#6 סמן דינאמי
הטרנד
החלפה של הסמן הקלאסי באובייקט גרפי משתנה על פני העיצוב כדי להעצים את חווית המשתמש.
היישום ב- CSS
לא ידעתי שיש מלכתחילה כ״כ הרבה אפשרויות לנראות של סמן 🙂 ניתן לראות פה את הרשימה המלאה.
אין פה תכלס שום חידוש טכנולוגי, ניתן להחליף את העיצוב ע״י הגדרה של svg למאפיין cursor בעזרת הגדרה של url או cursor: none ועיצוב שלו מחדש.
#7 AI
הטרנד
אין ספק ש AI הוא הרבה יותר מסתם טרנד, והוא כנראה פה בשביל להיות אחד הכלים המרכזיים בעבודה. אם לשימוש בתמונות שנוצרו בעזרת כלי ai, או חיפוש השראה, סטים של צבעים או סתם ״סיעור מוחות״.
היישום בפיתוח
לא ממש css או html, אבל לא יכולה שלא להתייחס ל״טרנד״ הזה גם פה. ישנם מספר כלים אפשריים אבל אני חושבת שהמובילים ביניהם הם ה-co-pilot של מייקרוסופט, ו-chatGPT. כמובן שבעקבות הבינה המלאכותית עולה שוב השאלה אם עוד כמה שנים עדיין יצטרכו מפתחים, ואני באמת לא יודעת את התשובה, אבל אני כן יודעת שבשנת 2015 כתבתי פוסט על ייצוא css מפוטושופ (פיגמה עדיין לא הרימה ראש) והיו דיבורים על זה שבקרוב לא יצטרכו מפתחי css, והנה, אנחנו כמעט עשר שנים אחרי, ועדיין אין כלים אוטומטיים שעושים את העבודה כמו שצריך. אולי design-systems יהרגו בסוף את מפתחי ה-css, אבל זה כבר יהיה טרנד אחר לגמרי 🙂
שורה תחתונה
עכשיו כל מה שנותר לנו זה לחכות לראות איזה טרנדים אכן יזרחו השנה. ושנזכה לימים טובים, כאלה שכל מה שנקרא עליהם זה css (או גם js), אבל לא על הותרו לפרסום…