css וטרנדים של עיצוב לשנת 2020

משך זמן קריאה: 4 דקות

אני לא מתיימרת להביא פה את הרשימה שלי לטרנדים של עיצוב אתרים לשנת 2020, במיוחד לאור העובדה שאני כבר כמה שנים טובות לא מעצבת אלא מפתחת css. בעבר, כשהייתי קוראת על טרנדים של עיצוב הייתי תמיד מסתכלת עליהם בראייה מאוד חד צדדית – של מעצבת, בדר"כ בחיפוש אחרי השראה לקראת עיצוב של אתר חדש. היום אני רוצה להביא נקודת מבט חדשה לקריאה של פוסטים לטרנדים עיצוביים – ראייה של יישום ב-css.

מדגם מפוסטים על טרנדים עיצוביים לשנת 2020

 

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

 

 #1 יציאה מהגריד

הטרנד

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

היישום ב-css

2 מילים שתשמעו שוב ושוב ושוב: css grid

צילום מסך מתוך: https://dribbble.com/shots/6283244

 

 #2 טיפוגרפיה

הטרנד

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

היישום ב-css

  • שליטה בייבוא פונטים לאתר
  • עבודה עם פילטרים על פונטים (blend-mode)
  • שילוב טקסט ו-clip-path. דוגמה מוצלחת אפשר לראות פה
  • אחרון, אבל החשוב ביותר בעייני – שימוש הולך וגובר ב-variable-fonts. גוגל השיקו גרסת אלפא של variable-fonts, התמיכה בדפדפנים הולכת וגדלה, והבשורה שהם מביאים איתם אפילו לא מתחילה לגרד את מלוא הפוטנציאל שלהם.

 

טיפוגרפיה ואנימציה באתר https://www.shopbaina.com

 #3 צורות גאומטריות

הטרנד

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

היישום ב-css

 

צילום מסך של האתר: https://bauhaus.futurelondonacademy.com

#4 גראדיאנטים

הטרנד

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

היישום ב-css

צילום מסך מתוך https://css-tricks.com

#5 Micro-Interactions

הטרנד

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

היישום ב-css

 

See the Pen
What's Your Mood Today?
by Cyriane (@smartyyz)
on CodePen.

 

#6 נגישות

הטרנד

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

היישום ב-HTML

נכון, הפעם לא css אלא html, אבל בראייה שלי מי שמפתח css אחראי גם על ה-html.

  • הקפדה על מבנה html סמנטי
  • הבנה של חוקי aria

 

צילום מסך מתוך https://webflow.com/blog/web-design-trends-for-2020#accessibility

#7 גלילה

הטרנד

גלילה נעימה יותר, snap to scroll, גלילה אופקית

היישום ב-css

 

#8 Design Systems

הטרנד

האמת, לא כזה חדש אבל אולי 2020 תביא את הבשורה לשימוש נרחב ב-design system.
מה זה בעצם? מסמך אחד שמרכז את כל האלמנטים של העיצוב כדי לשמור על אחידות המותג. המסמך מכיל הגדרות לפונטים, טיפוגרפיה, צבעים, כפתורים ועוד ועוד. חלק מכלי העיצוב כמו סקץ' או פיגמה מאפשרים יצירה קלה ופשוטה של design system. איפה זה פוגש את הקוד שלנו? האמת, אני לא מספיק יודעת איך המערכות האלה מתממשקות עם ה-css. יש אפשרות להכניס שמות קלאסים ואת קוד ה-css, אבל איך זה מתממשק עם הקוד של ה-html לצערי אין לי תשובה (רוצה לומר עדיין אין לי תשובה לזה ואמן בעתיד הקרוב אני אדע ואפיץ את הבשורה).

היישום ב-css

  • אם נניח ש-design system מיועד למעצבים ומנהלי פרויקט, אז style-guide הוא ללא ספק התשובה של המפתחים. לא אאריך במילים מה זה ולמה צריך. מוזמנים לקרוא את הפסט שלי על המסע אל עבר ה Style-Guide

 

צילום מסך מתוך investing style-guide

תוספת 03/2020

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

שורה תחתונה

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

כתיבת תגובה

האימייל לא יוצג באתר.