אני לא מתיימרת להביא פה את הרשימה שלי לטרנדים של עיצוב אתרים לשנת 2020, במיוחד לאור העובדה שאני כבר כמה שנים טובות לא מעצבת אלא מפתחת css. בעבר, כשהייתי קוראת על טרנדים של עיצוב הייתי תמיד מסתכלת עליהם בראייה מאוד חד צדדית – של מעצבת, בדר"כ בחיפוש אחרי השראה לקראת עיצוב של אתר חדש. היום אני רוצה להביא נקודת מבט חדשה לקריאה של פוסטים לטרנדים עיצוביים – ראייה של יישום ב-css.
מדגם מפוסטים על טרנדים עיצוביים לשנת 2020
- Web Design Trends 2020: High Tech & Visually Mind-Blowing
- 12 Web Design Trends for 2020
- 10 Web design trends that will dominate your screen in 2020
- Top Web Trends for 2020 and why they are coming
- 9 Web design trends for 2020
חלק מהטרנדים באמת לא ממש נוגעים אלינו, המפתחים. למשל סכמות צבעוניות (dark-mode וצבעוניות של שחור לבן כנראה הולכים לשלוט בשנה הקרובה), תמונות שמשלבות איורים עליהם (אחד הטרנדים האהובים עלי, ראו לדוגמה את זה), שימוש בפאטרנים ועוד ועוד. אבל יש טרנדים שמאוד משפיעים עלינו ביישום שלהם, וגם הפוך: ההתקדמות המטאורית של האפשרויות ב-css הביאו גם הם, לדעתי, ליצירת חלק מהטרנדים בעיצוב.
כבר כתבתי בעבר על איך ה-css משנה את פני העיצוב ולדעתי הפוסט עדיין מאוד רלוונטי. בפוסט הזה ארכז כמה מהטרנדים שיש ל-css נגיעה בהם. אם נפלו לידיכם כמה שעות לקרוא וללמוד משהו – אולי שווה לכם להשקיע בזה 🙂
#1 יציאה מהגריד
הטרנד
לא חדש, אבל ממשיך מהשנה החולפת: שבירה של הגבולות ה"מלבניים" של עמוד אינטרנט, זליגה של אלמנטים מאזור אחד לשני. הרבה השפעה של עיצוב המגזינים בעיצוב web.
היישום ב-css
2 מילים שתשמעו שוב ושוב ושוב: css grid
#2 טיפוגרפיה
הטרנד
עיצוב מינימליסטי ושימוש מוגבר בטיפוגרפיה. שימוש בפונטים במשקל bold, תמונת hero המורכבת רק מטקסט, וטקסט עם קו מיתאר ומילוי חלול.
היישום ב-css
- שליטה בייבוא פונטים לאתר
- עבודה עם פילטרים על פונטים (blend-mode)
- שילוב טקסט ו-clip-path. דוגמה מוצלחת אפשר לראות פה
- אחרון, אבל החשוב ביותר בעייני – שימוש הולך וגובר ב-variable-fonts. גוגל השיקו גרסת אלפא של variable-fonts, התמיכה בדפדפנים הולכת וגדלה, והבשורה שהם מביאים איתם אפילו לא מתחילה לגרד את מלוא הפוטנציאל שלהם.
#3 צורות גאומטריות
הטרנד
שימוש בצורות גאומטריות באתר, החל מצורות סימטריות כמו עיגול, ריבוע וכד' ועד שימוש בצורות א-סימטריות כמו גל.
היישום ב-css
#4 גראדיאנטים
הטרנד
שימוש בגראדיאנטים בכל מקום – החל מתמונות ועד רקעים, כפתורים ובורדרים.
היישום ב-css
- css background image – gradient
- כלי נחמד ליצירת גראדינטים
- טקסט וצורה עם גראדיאנט, כמו לדוגמה האתר של CSS TRICKS
- טקסט עם גראדיאנט
- טקסט עם רקע גראדיאנט
- לינקים במספר שורות גם גראדיאנט (נוסף ב 06.02.2020)
- בורדר עם גראדיאנט
#5 Micro-Interactions
הטרנד
שימוש במיקרו אינטראקציות בעיצוב כדי לשפר את חוויית המשתמש וזהות המוצר.
היישום ב-css
- css animation
- css transition
- עוד על micro-interactions (ממליצה לקרוא גם את הפוסט וגם את התגובות)
See the Pen
What's Your Mood Today? by Cyriane (@smartyyz)
on CodePen.
#6 נגישות
הטרנד
שימת דגש על נגישות לא רק של בעלי מוגבלות אלא נגישות באופן גורף לכלל האוכלוסייה מתוך הבנה שזה מועיל לכולם.
היישום ב-HTML
נכון, הפעם לא css אלא html, אבל בראייה שלי מי שמפתח css אחראי גם על ה-html.
- הקפדה על מבנה html סמנטי
- הבנה של חוקי aria
#7 גלילה
הטרנד
גלילה נעימה יותר, snap to scroll, גלילה אופקית
היישום ב-css
- בקטנה – עיצוב של ה-scroll-bar
- snap to scroll וגם פירגון לפוסט מוצלח של itzik pop בנושא
#8 Design Systems
הטרנד
האמת, לא כזה חדש אבל אולי 2020 תביא את הבשורה לשימוש נרחב ב-design system.
מה זה בעצם? מסמך אחד שמרכז את כל האלמנטים של העיצוב כדי לשמור על אחידות המותג. המסמך מכיל הגדרות לפונטים, טיפוגרפיה, צבעים, כפתורים ועוד ועוד. חלק מכלי העיצוב כמו סקץ' או פיגמה מאפשרים יצירה קלה ופשוטה של design system. איפה זה פוגש את הקוד שלנו? האמת, אני לא מספיק יודעת איך המערכות האלה מתממשקות עם ה-css. יש אפשרות להכניס שמות קלאסים ואת קוד ה-css, אבל איך זה מתממשק עם הקוד של ה-html לצערי אין לי תשובה (רוצה לומר עדיין אין לי תשובה לזה ואמן בעתיד הקרוב אני אדע ואפיץ את הבשורה).
היישום ב-css
- אם נניח ש-design system מיועד למעצבים ומנהלי פרויקט, אז style-guide הוא ללא ספק התשובה של המפתחים. לא אאריך במילים מה זה ולמה צריך. מוזמנים לקרוא את הפסט שלי על המסע אל עבר ה Style-Guide
תוספת 03/2020
כשעברתי על פוסטים של טרנדים לעיצוב לשנת 2020, אחד הטרנדים שדיברו עליו היה ניאומורפיזם (Neumorphism). אני אישית פחות מתחברת לסטייל, ולא מצאתי לנכון לתת לו פינה משל עצמו. מה גם שאחד הפוסטים שנתקלתי בו טען דווקא שניאומורפיזם לא יהיה טרנד בשנה הקרובה. אבל, כלי מדליק שיצא, הביא אותי להוסיף את הטרנד ואת המימוש שלו ב CSS. נסו ותהנו 🙂
שורה תחתונה
שנת 2020, כמו קודמתה, הולכת להיות מאוד מעניינת – הן בראייה של עיצוב והן בהיבט של היישום שלו.
יש למה לצפות! הכיף רק התחיל 🙂