חברות כמו Airbnb, אובר ו־IBM חוללו שינוי באופן שבו הן מעצבות מוצרים דיגיטליים, בכך שעשו שימוש במערכות העיצוב הייחודיות שלהן. בכך שניצלו אוסף של רכיבים שניתן לחזור עליהם שוב ושוב ומערכת סטנדרטים שמנחה את השימוש ברכיבים הללו, כל אחת מהחברות הללו הצליחה לשנות את קצב היצירה והחדשנות בצוותים שלהם.
לארגונים רבים יש משהו שהם מכנים 'מערכת עיצוב' (Design System) אבל האוספים הללו, בדרך כלל, הם לא יותר מאוסף של אלמנטים ופיסות קוד. בעוד שמדריך סגנון (Style Guide) או ספריית דפוסים (Pattern Library) יכולים להיות נקודות התחלה למערכת עיצוב, הם אינם הרכיבים היחידים. במאמר זה נחקור את היסודות של מערכות עיצוב, נתכנן כיצד אתם יכולים לבנות אחת כזו וליישם אותה בארגון שלכם, ונחקור מספר דוגמאות של ארגונים המשתמשים במערכות עיצוב כדי להשיג הצלחה.
חשיבותן של מערכות עיצוב
מהי מערכת עיצוב?
מערכת עיצוב היא אוסף של רכיבים הניתנים לשימוש שוב ושוב, מונחית לפי סטנדרטים ברורים, שניתן לאסוף אותם כדי לבנות כל מספר של אפליקציות.
מה ההבדל בין מערכת עיצוב ומדריך סגנון או ספריית דפוסים?
מערכת עיצוב איננה רק אוסף של נכסים ורכיבים שהשתמשתם בהם כדי לבנות מוצר דיגיטלי. לפי אמט קונולי, מנהל עיצוב מוצר בחברת אינטרקון: "…רוב מערכות העיצוב הן באמת רק ספריות דפוסים: קופסה גדולה של פיסות לגו UI שניתן לחבר אותן יחד כמעט באינסוף דרכים. אולי כל הפיסות עקביות, אבל זה לא אומר שהתוצאות שיתקבלו יהיו עקביות. המוצר שלכם הוא יותר מסתם ערימה של אלמנטי UI ניתנים למחזור. יש לו מבנה ומשמעות. הוא איננו דף אינטרנט גנרי, הוא התגלמות מערכת של קונספטים".
מרקו סוארז, אחד ממעצבי המוצרים כאן ב־InVision, מוסיף כי: "כדי ליצור חווית משתמש מעולה, קריטי להבין לא רק את המה, אלא גם את הלמה מאחורי העיצוב של מערכת. הגדרה של סטנדרטים והצמדות אליהם היא האופן בו אנחנו יוצרים את ההבנה הזו".
אם לומר זאת בפשטות, ההבדל הוא בסטנדרטים ובתיעוד (דוקומנטציה) שמלווים את הנכסים. עם מדריך המתווה למה וכיצד להשתמש בהם, רכיבי עיצוב הופכים קלים יותר לשימוש וקלים יותר לאבחנה.
בניית מערכת עיצוב
מהם הצעדים והיתרונות העיקריים בבניית מערכת עיצוב?
1. ערכו ביקורת ויזואלית
הצעד הראשון לבניית מערכת עיצוב היא לערוך ביקורת ויזואלית של העיצובים הנוכחיים שלכם, בין אם מדובר בעיצוב של אפליקציה, אתר, או כל מוצר דיגיטלי אחר. עריכת מלאי של ה־CSS שאתם משתמשים בו והתכונות הוויזואליות של האלמנטים יכולה לעזור לכם להעריך עד כמה מורכב יהיה התהליך.
2. צרו שפת עיצוב ויזואלית
שפת העיצוב הוויזואלית נמצאת בליבה של מערכת העיצוב. היא מורכבת מרכיבים ברורים לעין, שתשתמשו בהם כדי לבנות את המוצר הדיגיטלי שלכם. שפת העיצוב הוויזואלית שלכם מורכבת מארבע קטגוריות עיקריות, ואתם צריכים לשקול איזה תפקיד כל אחד מאלמנטי העיצוב ממלא בכל רכיב על המסך.
- צבע – צבעים נפוצים במערכת עיצוב, כוללים 1-3 צבעים עיקריים שמייצגים את המותג שלכם. אולי תרצו לכלול מגוון של גוונים (צבע המעורב בלבן) וצללים (צבע מעורב בשחור) כדי לתת למעצבים שלכם יותר אפשרויות.
- טיפוגרפיה – רוב מערכות העיצוב כוללות רק 2 גופנים: גופן אחד לכותרות וגוף הקופי, וגופן ברוחב אחיד (monospace) עבור הצגת קוד. הקפידו שהגופנים יהיו פשוטים כדי למנוע העמסת יתר ובלבול של המשתמשים. שמרו על מספר נמוך של גופנים – זה לא רק הנוהג הטוב ביותר בעיצוב טיפוגרפי, זה גם מונע בעיות ביצועים ואיטיות שנגרמות משימוש מופרז בגופני רשת.
- גודל ורווח – המערכת שאתם משתמשים בה לקביעת הגודל והרווח של הגופנים נראית הכי טוב כשיש לכם מקצב ואיזון. הפופולריות של סקאלה על בסיס 4 (כלומר, שימוש בגדלים המתחלקים ב־4, למשל: 16, 24, 32, וכן הלאה) כסקאלה המומלצת, עולה בשנים האחרונות בזכות השימוש בה בסטנדרטים של אנדרואיד ו־IOS, פורמטי ICO, ואפילו בגודל הגופנים הסטנדרטי של דפדפנים.
- תמונות – המפתח להצלחה עם תמונות בשפת העיצוב הוויזואלית שלכם, הוא להכין תוכנית ולהיצמד אליה. קבעו קווים מנחים לאילוסטרציות ואייקונים והשתמשו בפורמט התמונה הטוב ביותר עבור הסיטואציה.
3. צרו ספריית UI/דפוסים
שלא כמו הביקורת הוויזואלית שכבר ביצעתם (שהתבוננה בתכונות הוויזואליות של אלמנטי העיצוב שלכם), הצעד הזה של התהליך מסתכל על הרכיבים הממשיים של ה־UI שלכם. אספו את כל החלקים ופיסות ה־UI שכרגע בשלבי ייצור. זה אומר כל כפתור, טופס, פופ־אפ ותמונה. מזגו לפי הצורך והסירו את מה שאינכם צריכים.
4. תעדו מהו כל רכיב ומתי יש להשתמש בו
הצעד הזה חשוב. תיעוד וסטנדרטים הם הדברים שמבדילים בין ספריית דגמים ומערכת עיצוב אמיתית.
הדרך הקלה ביותר להתחיל לבנות את מערכת העיצוב שלכם היא להשתמש בפלאגין Craft Library ב־Sketch.
הדרך הקלה ביותר להתחיל לבנות את מערכת העיצוב שלכם היא להשתמש בפלאגין Craft Library עבור Sketch (זמין גם לפוטושופ). הפלאגין מאפשר לכם לייצר מדריך סגנון מותאם בתוך התוכנה, כולל לוח צבעים, גופנים ומדריכי טקסט.
כדי שלכל הצוות יהיו קבצים מסונכרנים, אתם יכולים לשלוח התראות על שינויים בסמלים בספריה המשותפת, כמו גם לשתף סמלים, טקסטים וסגנונות צבע. אם אתם משתפים את התיקייה דרך דרופבוקס או תיקיה משותפת אחרת, Craft אפילו יעדכן אתכם כאשר עדכונים חדשים לנכסים שלהם הופכים זמינים בענן, והורדת השינויים הללו דורשת רק לחיצה אחת על העכבר.
מספר דוגמאות למערכות עיצוב נכונות
- מערכת העיצוב של חברת Atlassian משתמשת ב'דמויות' כדי לחבר בין כלים ואנשים. או, כפי שהם מתארים זאת, 'פרקטיות עם קריצה'. העיצוב הוא אישי, תוסס, ומביע הצהרת כוונות ברורה של המותג. בלוח הצבעים שלהם מופיעים צבעים בשמות כמו 'דם דרקון', 'פיצוץ סודיום', וכן הלאה.
- נגישות חשובה לחברה והעיצוב שלהם נצמד לניגודיות הסטנדרטית שמאפשרת למשתמשים עם קשיי ראייה לראות את המוצרים שלהם ולהתשמש בהם. בתמצית, המותג הוא הוא אופטימי ומתמקד בלהיות 'אנושי'.
- מערכת העיצוב של Shopify קרויה פולאריס. זו מערכת שמשקפת את הנוכחות הגלובלית העצומה של החברה. היא מתמקדת בסְקֵילָבִּילִיוּת (סילוּמיוּת) וקלות שימוש, והקופי והעיצוב שלהם מדוייקים במיוחד. Shopify מתמקדת אך ורק בחוויה של הסוחרים המשתמשים בה. קל לראות איך Shopify מסייעת לעסקים לנהל מורכבות גלובלית עם חוויה שנותנת 'אפילו ליזם הכי מתחיל את הסיכוי הטוב ביותר להצליח'.
פולריס שמה דגש גם על נגישות ועיצוב מתוכנן. להצמיח עסק זה כמו לטפס על הר, והחלטות העיצוב שלהם שואפות לגרום לכל משתמש להרגיש שהוא יכול להתמודד עם האתגר.
המאמר נכתב ע"י: וויל פנגוי, אחראי תכנים בInVision.
המאמר הופיע במקור בבלוג של אינוויז'ן ותורגם במיוחד למגזין הפורמה במסגרת שיתוף הפעולה.