ה-css משנה את פני העיצוב

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

זה לא סוד שהאחריות על יישום העיצוב של האתר תלויה הרבה ביכולות של ה-css (וכמובן גם של מי שכותב אותו 🙂 ). השינויים והתמורות שחלים בתחום ה-css הם ענקיים ומשמעותיים, ומשפיעים מאוד על עיצוב אתרים. בסוף שנת 2015 קראתי פוסט של ליאור יאיר געגועיי לחדשנות: למה כל האתרים נראים אותו הדבר? ליאור דיבר על איבוד הייחודיות של אתרי האינטרנט ועל התחושה שכולם נראים פחות או יותר אותו הדבר. הדבר נבע בזמנו מכמה סיבות, כשביניהן השימוש בתבניות מוכנות או מערכות המייצרות אתרים (כדוגמת WIX, Weebly ועוד). ואני מוסיפה – גם השימוש בבוטסטראפ די שיטח את נוף האתרים. פוסטים רבים נכתבו בעניין כמו זה למשל  וגם Longing for Innovation.

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

גריד – Layout

לרגע אל תטעו – אני לא מדברת על גריד של בוטסטראפ או על ספריית grid, אלא על המאפיין display: grid. זהו מאפיין חדש יחסית שנכנס ל-spec ונתמך כבר מגרסת edge של אקספלורר, ובגרסת ie-11 עם פריפיקס (לאלה מכם שדואגים לאקספלורר). כמו כל מאפיין, לקח זמן עד שממש התחילו להשתמש בו, אבל היום השימוש בו כבר מאוד גדול, ולראיה – יש אלפי פוסטים בנוגע לשימוש בו: ישנו הפוסט גריד-פרולוג שלי שמכיל הרבה הפניות למקורות לימוד ושימוש, וכמובן יש רבים נוספים.

 

דף בית שעוצד בשימוש עם גריד
צילום מסך מתוך דף הבית המבוסס על גריד של : https://labs.jensimmons.com

 

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

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

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

  • Lynn Fisher, אמנית, מעצבת ומפתחת, יצרה את עמוד הבית שלה בעזרת המאפיין גריד. כדי להראות את קלות השימוש בו והאפשרויות הגלומות בו, היא שינתה את התצוגה לגמרי בכל רזולוציה. ממליצה בחום להיכנס ולהסתכל, וכמובן להגדיל להקטין את הדפדפן 🙂
  • ל- Max Böck יש פוסט מעולה בשם The Layouts of Tomorrow. בפוסט הוא מדבר על האפשרויות הרבות שגריד פתח בפני המתכנתים, ומביא דוגמאות עיצוב וכמובן גם דוגמה חיה אחת. שווה להיכנס ולקרוא.
  • ל Chen Hui Jing יש פוסט על צורת החשיבה של תכנון אתר בזכות השינוי שהביא איתו הגריד. מעניין לראות את התוצר הסופי וגם את הדרך.
  • פוסט על  CSS Grid Challenge של smashing-magazine המכיל המון דוגמאות.
  • עוד פוסט על Art Directing For The Web. הפוסט מעניין מאוד ומציג את המגמה של חזרה לשימוש בגרידים ששימשו לעיצוב דפוס. יצירת גריד לעיתון היא לא דבר פשוט, ומגזינים, ובמיוחד מגזיני עיצוב, מתהדרים בגרידים מיוחדים ועיצובי כפולות יחודיים. הרבה מגזיני עיצוב נפלו במעבר למדיה הדיגיטלית ולא הצליחו לשמר את ייחודיות המגזין המודפס והחוויה שהוא הכיל כשעברו לגרסת ה-web (מסייגת את האמירה הזו לשנים הראשונות של המעבר לווב). קשה לי לומר אם זה היה בשל חוסר הבנה והכרה של המדיום או מכורח המציאות של יכולות מוגבלות של עיצוב בדפדפן לעומת עיצוב בדפוס. display: grid מביא איתו את הבשורה של גרידים עיצוביים שונים וקפיצת מדרגה בעולם של עיצוב האתרים.
    אני לא מתיימרת לחזות את העתיד, אבל ללא ספק – אני רואה את "גריד הדפוס" מגיע לווב עם כוחות מחודשים וחדשניים.
  • עוד דוגמה נהדרת למימוש של גריד של מגזין בעזרת display: grid (נוסף ב 21.08.2018, תודה ללאה על הלינק)
grid-magazine
צילום מסך מתוך הפרויקט של Andy Clarke עם קווים של grid מעליו

 

פילטרים ושיטות שילוב

כל מי שעיצב בפוטושופ מכיר את תיבת הנפלאות שמשנה שיטות שילוב של שכבה (blend-mode), ובעזרתה אפשר לשנות לגמרי את המראה של התמונה שלנו, ואת האופן שבו שכבה אחת משתלבת בשנייה או משפיעה עליה. שנים, בתור מעצבת, חשבתי על זה שחבל מאוד שאין ב css שילוב שכבות או אפקטים פשוטים שיש בפוטושופ כמו blur ו-invert ועוד. ופתאום – הנה הם כאן! אמנם לא חדש במיוחד (כבר פה כמה שנים), אבל לגמרי עוד מגמה שמשנה את פני הנוף של עיצוב האתרים. ב-2015, כתבה Sara Soueidan פוסט מקיף מאוד על שימוש בפילטרים ו-blend-modes. אמנם פוסט ארוך אבל שווה את הכניסה אליו, במיוחד כדי לראות את האפקטים שניתנים לביצוע בעזרת CSS בלבד! מצרפת עוד הפניה לספריית פילטרים כי היא נחמדה ושימושית 🙂 .

השינוי הגדול בהקשר הזה, בעייני, הוא השילוב של פילטרים או mix-blend-mode בהקשר של טקסט. בכלל, כל מה שנוגע לטקסט שווה כותרת משל עצמו (ואכן טקסט הוא המגמה הבאה בתור), אבל בהקשר של שילובים, הכוח של css והחידושים שבו מגיעים לרמה חדשה. לא עוד תמונות png של טקסט שקוף כדי ליישם עיצוב, אלא טקסט חי, נגיש משתנה ומשלב.

ממליצה בחום על המדריך המפורט של css tricks: Methods for Contrasting Text Against Backgrounds.

text-blend
צילום מסך מתוך עמוד 404 של סיינטיפק אמריקן ישראל

 

טקסט

טקסט מכיל בתוכו כל כך הרבה דברים. אם רק לפני 7-8 שנים יכולנו להשתמש רק בטקסט מערכת – לרוב Helvetica או Arial – ובשביל טקסט מעוצב יותר יצרנו קובץ תמונה, היום השמים הם הגבול. זה התחיל מהאפשרות של הטמעות פונטים ייחודיים באתר והיום זה לגמרי נורמה. ספריית הענק של גוגל פונטס היא ראיה טובה לזה, כמו גם הִתרבות הגופנים לווב בעברית, גם חינמיים וגם לא. ההבנה של המדיה שיכללה את הפונטים, וכתוצאה מכך הנִראות שלהם על פני הדפדפן טובה יותר. אבל אלו כבר חדשות ישנות. אז מה באמת חדש? הרבה!

Fluid Typography

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

כל זה מאוד מעשיר את העיצוב אבל לא כמו החידוש הבא:

Variable Font

זו המקפצה הבאה לנראות, לקריאות ולשימוש בפונטים באינטרנט. לא עוד התאמה של פונט המיועד לדפוס, אלא יצירה של פונט חדש המיועד ל-web ומותאם אליו: פונט בעל יכולות דינאמיות, פונט המכיל את המשקלים שונים בלי צורך לטעון פונט עם משקל נוסף, פונט שמאפשר שליטה נכונה יותר על ה-spacing וה-kerning. בקיצור – הפרארי של הפונטים. מוזמנים לבדוק ולהתנסות, וכמובן לקרוא עליו:

בהקשר של variable fonts אני רוצה לציין את החידוש של פונט וצבע. אמנם עדיין לא נתמך לגמרי, אבל שווה להכיר – פונט צבעוני. אפשר גם להוריד ולהתנסות 🙂 . נכון, אפשר לדמות צבע עם mix-blend-mode, אבל זה לא אותו הדבר. פונט שכבר מכיל בתוכו צבע הוא הרבה יותר פשוט. עניין של תמיכה ואנחנו שם. מעלף! למעצבים שביניכם – פוסט על איך יוצרים פונט צבעוני.

ואחד לקינוח (ותודה עליו לרותם הורוביץ)- אמנם עדיין לא קיים, אבל פרויקט מרשים ברמת החשיבה הן הטכנולוגית והן העיצובית. פונט דינאמי המשתנה ע"פ שילוב האותיות:

Futuracha Pro from holy on Vimeo.

 

טקסט וצורה

אם דיברתי קודם על השפעות של עולם הדפוס על עיצוב באינטרנט, הרי גם בנושא הזה המגמה מתאפשרת בזכות 2 מאפיינים חשובים: shape-inside ו- shape-outside. המאפיינים האלה מאפשרים לנו לתחום טקסט בתוך צורה, או מסביב לצורה.

דוגמה ל-shape-outside:

See the Pen Experimental Article Layout by Jess Poteralski (@jesspoteralski) on CodePen.11107

 

דוגמה ל-shape-inside:

See the Pen Mimicking CSS shape's shape-inside property by Noah Blon (@noahblon) on CodePen.

 

וכמובן – גם רשימת קריאה מומלצת:

 

מילים אחרונות

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

 

נוסף ב 28.09.2018

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

כתיבת תגובה

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