הגדרת לייאאוט ונקודות שבירה כחלק מהדיזיין סיסטם מאפשרת עקביות בכל גודל מסך, חוסכת זמן פיתוח ומובילה לחוויית משתמש טובה יותר בכל המכשירים.
הגדרת נקודות שבירה – כדאי להגדיר נקודות שבירה כטוקנים בדיזיין סיסטם, בדיוק כמו צבעים וטיפוגרפיה. זה מבטיח שימוש עקבי בהן לאורך כל המוצר ומאפשר עדכון כשצריך. הגדירו מספר מצומצם של נקודות שבירה סטנדרטיות. לרוב 3-5 נקודות מספיקות לכיסוי רוב המכשירים (למשל: מובייל, טאבלט, מחשב נייד, מסך רחב).
גריד – אם אתם משתמשים בגריד בעיצובים, תעדו את ההנחיות על רוחב העמודות, מרווחים, כיווץ במסכים קטנים (לדוג' גריד 12 עמודות שהופך ל4 עמודות) וכו'
תיעוד כללים ברורים למעבר בין גדלים – הגדירו איך אלמנטים אמורים להתנהג בכל נקודת שבירה. למשל, האם תפריט הופך להמבורגר במובייל? האם גריד של כרטיסיות משתנה מ-4 בשורה ל-2 ואז ל-1?
גדלי טקסטים רספונסיביים – אם גדלי הטקסטים במערכת שלכם משתנים כתלות בגודל מסך, אפשר לייצר ט'ים (מוד) עבור טיפוגרפיה. בדיוק כמו שמייצרים לייט ודארק ט'ים בצבעים, אפשר לייצר ט'ים לדסקטופ ומובייל בטיפוגרפיה.
מהניסיון שצברנו 