איך להכין Content Design System ב-5 צעדים

רגע, מה זה Content Design System ולמה זה טוב?

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

ה-Content Design System (שמעכשיו נקרא לה CDS) משולבת בתוך הדיזיין סיסטם וכוללת תבניות של קופי שחוזר על עצמו במוצר ורכיבים כתובים מוכנים מראש, כך שלצוותי הדיזיין והכתיבה יש בסיס אחיד ואיכותי של קופי לרוב רכיבי המערכת.

אז איך תכינו לעצמכם CDS ב-5 צעדים?

1. לאסוף את מי שצריך מסביב לשולחן

ה-CDS היא חלק מהדיזיין סיסטם, וממש חשוב שהיא תשתלב בתוכה, לכן הכתיבה והדיזיין צריכים לשתף פעולה מהרגע הראשון. אם אתם המעצבים, זכיתם, יש לכם גישה ישירה לדיזיין סיסטם. אם אתם בצוות הכתיבה / ניהול מוצר / פונקציה אחרת, זה הזמן לקנות ל-Head of Design קפה כדי להניע את התהליך.

2. לבדוק מה חוזר על עצמו במוצר

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

3. לזהות דפוסים

אחרי שמצאנו ואספנו את הרכיבים החוזרים, זה הזמן לחפש את החוקיות ולהגדיר כללים לכתיבה. בשביל זה נעבור על כל רכיב חוזר בנפרד ונגדיר עקרונית מה חשוב שייכתב בו ובאיזו תבנית. נתבסס על Best practices של כתיבת UX בשילוב ה-Style guide שלנו. אפשר לעשות את זה עם כל מי שיש לו נגיעה בקופי במוצר - סוגרים את זה בכמה שעות עם קצת פחמימות על השולחן.

4. להכניס את הכללים לדיזיין סיסטם בצורת טמפלטים

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

טיפ בונוס 1: אם לקומפוננטה מסוימת יש כמה מצבים (למשל: הודעה עם או בלי הסבר בין הכותרת לכפתורים), אפשר להשתמש ב-Variant בפיגמה כדי לייצר שתי תבניות מותאמות:

טיפ בונוס 2: אם רוצים להוסיף מידע והנחיות נוספות לכתיבה של הקומפוננטה הספציפית, אפשר להוסיף אותן להסבר של הקומפוננטה (בלחיצה על Component configuration), כך שהן יהיו נגישות תמיד לכל מי שישתמש בקומפוננטה הזו בעיצוב:

5. לשתף את כולם

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

בהצלחה!