שמירה וניהול של אסטים כמו תמונות ואיורים, למשל כאלה המשמשים ל-Empty States, מאפשרת גישה מהירה אליהם ושימוש עקבי בתוך הממשק.

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

ספריית איורים במערכת עיצוב, המציגה אוסף מגוון של איורים בסגנון אחיד עם צבעוניות עקבית בגווני כתום וירוק. האיורים מאורגנים בצורה מסודרת ומתאימים למצבים שונים כמו הצלחה, שגיאה, תשלום ונסיעות. — יצירת ספריית איורים בפייג' ייעודי בדיזיין סיסטם – מתוך Orbit Design System של Kiwi

דוגמה לניהול קומפוננטות slot content בדיזיין סיסטם המציגה שלוש קטגוריות של איורים - בדיקת קוד, קובץ חדש ושמירת קוד - כל אחד מהם מוצג בשילוב עם איור ויזואלי מתאים. — קומפוננטת סלוט עבור איורים ל-Empty State – מתוך Atlassian Design System

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

גדלים סטנדרטיים בהם משתמשים באופן עקבי (למשל S, M, L)
יחסי גובה-רוחב (Ratios) קבועים, כמו 1:1, 2:3, 16:9 וכו'

ממשק עריכת וריאנטים של קומפוננטת Illustration Wrapper בדיזיין סיסטם, המציג חמישה גדלים שונים של אותו איור (מגן עם חץ) ותפריט עריכה המאפשר הגדרת גדלים סטנדרטיים מ-Extra Small ועד Display. — קומפוננטת wrapper עם וריאנטים סטנדרטיים של גודל – מתוך Orbit Design System של Kiwi

יחסי תצוגה (Aspect Ratio) בדיזיין סיסטם של Carbon, המציג מערך של יחסי גובה-רוחב שונים כמו 1:1, 4:3, 3:2, 16:9 ו-2:1 בגרסאות פורטרט ולנדסקייפ, עם פלייסהולדרים לתמונות. — קומפוננטת Aspect Ratio, המאפשרת לשמור על יחסי גובה-רוחב אחידים עבור אסטים – מתוך Carbon Design System של IBM

את קומפוננטת ה-wrapper אפשר לשלב בתוך קומפוננטות אחרות, כמו למשל Empty State, כדי לשמור על אחידות בשימוש. כך ניתן גם לשמור על גמישות מבלי לשבור את הקומפוננטות או להוסיף וריאנטים מיותרים.

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

איך לארגן ולנהל אסטים גרפיים, לדוג' איורים, בדיזיין סיסטם?