ב 22/06/2021 העברתי הרצאונת בנושא "Design system – מה, למה ואיך" ב-FED on Beer שמארגנת נטקראפט. הייתי משתפת את המצגת שלי במקום לכתוב עליה פוסט, אבל מי שמכיר אותי יודע שאם יש משהו שאני דוגלת בו במצגות, זה כמה שפחות מלל וכמה שיותר תמונות, ואם מעניין אתכם איך – צילום הרצאה שלי על איך לעשות מצגת טובה. אז מאחר שהמצגת שלי בפני עצמה וללא תמלול היא חסרת משמעות, וכל מי שניצל מלשמוע אותי בלייב ובכל זאת חשקה נפשו לשמוע מה יש לי לומר – מוזמנ.ת לקרוא את הפוסט 🙂
לא רוצים לקרוא ומעדיפים לראות? בבקשה:
בספטמבר 2018 כתבתי פוסט בשם המסע אל עבר ה-Style-guide שבו תיארתי את הרפתקאותיי בחיפוש אחרי הכלי התאים למימוש ה-Style-guide. מאז קרה המון – שינויי צוותים, החלפת פרויקטים, קורונה, מבצעים, וקצרה היריעה מלפרט את הכל – ובזמן הזה החכמתי ולמדתי, ושוב יש לי תובנות לחלוק עם העולם, עם קוראיי או סתם עם דפי הבלוג שלי.
למה מתכוונים כשאומרים Design system, ומדוע כל ארגון צריך אותו. האם Design system הוא באחריות העיצוב או הפיתוח? ואולי הוא בכלל החוליה המחברת? איך עושים את זה, ובעיקר למה בכלל צריך Design system?
Design system – קווים לדמותו (מה זה בכלל?)
כדי להבין מה זה בכלל Design system אני רוצה לחזור קצת אחורה בזמן. פעם, לפני המון שנים – עוד לפני שהאינטרנט היה כלי שלא ידענו איך אפשר להסתדר בלעדיו, ואנציקלופדיה לא הייתה מילה נרדפת למעצור דלת, לחברות גדולות שהחשיבו את עצמן (וכנראה גם לקטנות) היה Brand book (=ספר מותג. בחיי, איך בעברית הכל נשמע כל-כך….). הספר הזה (שבאמת היה ספר) הכיל בתוכו את כל ערכי המותג: את הצבעים שלו (בערכים של CMYK או פנטונים), הפונטים שבהם יש להשתמש כשמוצאים מודעה לעיתון, כשמפרסמים פרסומת חוצות, ועוד. ה-Brand Book היה המקום שמאגד את כל המידע על המותג כדי לשמור על שלמותו ועל אחידותו של המותג. לקוקה קולה, למשל, יש ב-Brand Book שלהם אפילו הנחיות לאיך בקבוקי הזכוכית שלה צריכים להיראות (הבקבוק עצמו, כן? לא רק התווית). הספר הזה איפשר לשמור על המותג ועל הניראות שלו, לא משנה מי הוא זה שמוציא את התוצר הסופי.
בואו נתקדם כמה שנים קדימה – האינטרנט קורם עור וגידים ואתרי אינטרנט הולכים נבנים. כמה עשורים קדימה, אתר הוא לא רק עמוד אחד – הוא יכול להיות כמות אינסופית של עמודים, של תתי אתרים – ועוד לא התחלנו לדבר על אפליקציות. כמות המעצבים שעובדת על כל אתר/מותג היא גדולה מאוד, וכדי לעשות סדר בבלאגן, וגם כדי לשמור על שלמות המותג, נוצר כלי משלים ל-Brand book בעולם הוובי: ה-Style-guide. פה מרכזים את ה"נכסים" (=אסטים / assets) של המותג, כמו צבעים, עיצוב של כפתורים, אייקונים, טיפוגרפיה, וגם אלמנטים מורכבים יותר – כמו חלונות בחירת תאריך, תפריטים ועוד. כמובן שגם ענקיות כלי העיצוב משנסות מותניים – פוטושופ עם ה-smart object שלה שאותו אפשר לשתף בין כמה מסמכים כדי לשמור על אחידות (מניסיון – לא היה כזה מוצלח אבל הרעיון נחמד), וגם פיגמה וסקץ'. היום אני מקווה שכל סטודיו עיצוב עובד עם כלי כזה או אחר לייצר לו Style-guide.
ולפני שתחשבו לעצמכם – זה סיכום של הרצאה של FED on Beer או עיצוב?! הנה הגעתי אל המטרה לשמה התכנסנו: ה-Design system.
אני אוהבת לחשוב על תהליך הפיתוח כמו על הרכבה בלגו, ועל-Design system בתור מקום אחד שמרכז את כל חלקי הלגו הבסיסיים ביותר (וגם המורכבים יותר) שאיתם אפשר ליצור מבנים מורכבים ומפורטים. אפשר לומר בעצם ש-Style-guide הוא הבסיס העיצובי ליצירת Design system. בפועל, היתרון של Design system על פני ה-Style-guide של העיצוב, הוא העובדה שהוא מכיל קטעי קוד – או קומפוננטות – שאפשר להטמיע ולהשתמש בהם באתר שוב ושוב וכך לשמור על אחידות המותג וגם לחסוך חזרתיות בקוד.
Design system – איך?
את ההשאלה של "איך" אני רוצה לחלק לשלושה חלקים:
איך בונים Design system?
יש מגוון אפשרויות, ולהמחשה אני מצרפת 2 לינקים לעמודים שמרכזים כלים ליצירת Design system:
אחד הכלים הפופולריים הוא storybook, ואולי הוא פופולרי בעיניי כי היום אני משתמשת בו 😉 אבל יצא לי ליצור Design system גם ב-Astrum, שקל מאוד לתפעול, אבל החסרון הגדול שלו לעומת ה- storybook הוא שה-HTML שלו סטטי, ולא מתעדכן אם נעשה שינוי באתר עצמו.
מי אחראי על בניית ה-Design system?
בקצרה – צוות הפיתוח. באירוך – לצוות הפיתוח יש אומנם אחריות על יצירת ה-Design system, אבל הוא לא אחראי בלעדי. אחד היתרונות החשובים, לטעמי, של Design system, הוא היותו גשר, ומדריך לשפה משותפת, בין העיצוב לפיתוח (וכמובן בינם לעוד גופים ששייכים לתהליך, כמו בעלי עניין, פרודקט ועוד). ככל שהדאגה והאכפתיות כלפי יצירת Design system ותחזוקה שלו יהיו חשובים הן לפיתוח והן לעיצוב – ככה ייטב למוצר הסופי. יצירת אבני יסוד של עיצוב ובניית שפה משותפת אחידה ומובנת לכל הצדדים, תקל הן על האפיון, הן על העיצוב, וכמובן על הפיתוח, ובסופו של דבר – המוצר יהיה טוב יותר.
מתי בונים Design system?
ל-Nathan Curtis יש פוסט מצוין על The Component Cut-Up Workshop שבו אפשר לראות תהליך עבודה של חלוקה של אתר לחלקיקים שמרכיבים את ה-Design system. בעולם אידאלי, המעצבים מסיימים את העבודה על הרכיבים שלהם ומכינים את ה Style-guide, ואז המפתחים מייצרים את ה Design system – בשיתוף עם המעצבים כמובן – ורק אחרי זה מתחילים את הפיתוח. אבל המציאות היא לא קופסה של לגו מוכנה להרכבה, ותמיד יש אילוצים. יש פרויקטים שאכן זה המצב בהם, אבל לפעמים זה לא כך. חן פלדמן, בהרצאה שלו על Bullet Proof Testing for your Design System, טוען שדווקא עדיף להתחיל עם Design System מאוד בסיסי, הוא אפילו קורא לו Style-Guide התחלתי ורק אחרי שרצים שנה עם הפרויקט והוא בשל ועובד, עושים ריפקטור ומוציאים קומפוננטות ל-Design System. בשנה האחרונה אני עובדת על פרויקט שמלכתחילה לא נבנה לו Design system ואין לו Style guide. כל זה לא מנע מאיתנו, בשלב מאוחר יותר, להחליט שאנחנו יוצרים Design system ומתחילים להשתמש בו (לאט לאט, קומפוננטה קומפוננטה). נכון, זה לא אידאלי, אבל עדיף משום דבר 🙂
Design system – למה צריך את זה?
בשלוש השנים האחרונות יצא לי לייצר 2 Design system-ים. אם לדייק, הראשון היה יותר Style-guide כי הוא לא היה סקיילבילי ודינאמי, אבל ללא ספק כל אחד מהם היה חשוב ומשמעותי: יצרנו מקום אחד שמרכז את הכל – החל ממערכת האייקונים, הצבעוניות, היררכיית הטקסטים וכו', ועד לאלמנטים קטנים וגדולים שאיתם אנו מרכיבים את הפרויקט שלנו.
אני מאוד אוהבת את ה-Design system של מוזילה: הוא מאוד יפה, ברור ושימושי. שימו לב לחלוקה שלהם ל-Fundamentals, Atoms, Molecules ועוד, עפ"י השיטה Atomic Design של בראד פרוסט. אני מביאה גם לינק ל-Style Guide של מוזילה משתי סיבות: הראשונה כי הוא פשוט מאוד מאוד יפה, והשנייה, כדי להמחיש את ההבדל המהותי בין 2 הכלים: ב-Style Guide אין לנו קוד שאפשר להשתמש בו.
אז למה כל מוצר דיגיטלי צריך Design system?
- משפר חווית משתמש ושומר על עקביות המותג (עיצוב קבוע, דפוס קבוע של התנהגויות, מחוות, אינטראקציות)
- יוצר סדר בבלאגן, עוזר לנקיון של קוד, ומונע שכפולי קוד
- משפר את זמן הפיתוח
- מאפשר שינויים רוחביים בקלות
- חוסך הרבה זמן וכסף לחברה
- מאפשר למעצבים לקבל החלטות טובות יותר
באחד הפוסטים שקראתי נתקלתי במשפט הזה, ונראה לי שהוא מסכם את כל הנושא:
Any Design System is better than no design system at all
כי לא משנה באיזה שלב נבנה ה-Design System, או כמה הוא מכיל, העיקר שיש Design System שאפשר לעבוד איתו, להוסיף ךו קומפוננטות ולשפר את הפיתוח ואת כל התהליך.
מקורות מידע על הנושא (ותודה ליונתן לב ארי):
- https://designsystemsrepo.com/
- Design Systems. What, How, and Why Your Digital Product Needs One
- Design Systems in React Native
- אוסף משובח של פוסטים של Nathan Curtis
- The Design Systems Podcast
- דיזיין סיסטם: החיבור המופלא בין מעצבים למפתחים עם אלינה חזנובה ויונתן לב ארי (סרטון)
- Your guide to design systems from the world’s leading brands
- Eight Things You Need To Know About Design Systems
- Why most design systems implode (נוסף ב 06.2022)
- The design system guide (נוסף ב- 01.2023)
דוגמאות ל-Design system
- https://protocol.mozilla.org/patterns/atoms/typographic.html
- React Wix Design System
- Shopify Polaris Storybook
- Shopify Polaris
- IBM’s design system
- אחרון חביב – אמנם לא Design-System אבל מאוד נחמד בעייני לתת חשיבות גם לתוכן כדי לשמור על שלמות המותג – Mailchimp Content Style Guide