מה חשוב לדעת כשמעצבים טפסים נגישים?
טפסים נגישים מאפשרים לכל המשתמשים למלא פרטים ולהשלים תהליכים בצורה עצמאית ונוחה, וזה בדיוק מה שההנחיות של WCAG 2.2 שואפות לקדם. כשהטופס בנוי נכון, הוא לא רק עומד בתקן, אלא גם משפר את החוויה עבור כולם, עם שדות ברורים, הנחיות מדויקות וחיווי נגיש בכל שלב. שמירה על קונטרסט לטקסטים בטפסים נדרש קונטרסט של לפחות 4.5:1 […]
איך דואגים שהצבעים בממשק יהיו נגישים?
צבעים הם חלק מרכזי בכל ממשק. הם מעבירים מסר, יוצרים היררכיה ומחברים אותנו למותג. אבל כדי שכולם יוכלו להבין ולהשתמש בממשק, גם אנשים עם לקות ראייה או עיוורון צבעים, חשוב לוודא שהשימוש בצבעים עומד בהנחיות נגישות ברורות. קונטרסט הוא הבסיס העיקרון הראשון בנגישות צבעים הוא קונטרסט, כלומר כמה צבע הטקסט או האלמנט בולט לעומת הרקע […]
איך מציגים חיוויים כמו שגיאה או הצלחה בצורה נגישה?
סטטוסים כמו שגיאה, הצלחה או אזהרה הם חלק חשוב בתקשורת מול המשתמש והדרך שבה הם מוצגים צריכה להיות נגישה לכל אחד, גם בלי להסתמך רק על צבע. ארבעה רכיבים שחיוניים לחיווי נגיש: לפי הנחיות WCAG, חשוב לוודא שלפחות שלושה מתוך ארבעת הרכיבים ישולבו בכל חיווי, כדי שהסטטוס יהיה ברור ונגיש גם למי שלא רואה צבעים […]
איך נכון לשיים טוקנים בדיזיין סיסטם?
קונבנציות שיום עקביות הן מפתח ליצירת דיזיין סיסטם יעיל ולניהול תקשורת יעילה מול הפיתוח. הן משתנות בין פריימוורקים ושפות, לכן חשוב להתייעץ עם צוות הפיתוח ולבחור גישת שיום שמתאימה לתשתית הטכנולוגית שלכם. כדאי להשתמש במוסכמות סטנדרטיות: בחרו באותיות קטנות ללא רווחים והפרידו מילים באמצעות מקפים (kebab-case), קווים תחתונים (snake_case) או אותיות גדולות באמצע המילה (camelCase). […]
מתי כדאי לבנות דיזיין סיסטם מאפס, ומתי עדיף להשתמש בספרייה קיימת? מהם היתרונות והחסרונות של כל גישה?
אחת ההחלטות החשובות ביותר בתהליך בניית דיזיין סיסטם חדש היא האם לבנות מאפס, או לבחור בספרייה קיימת. התשובה לשאלה הזו תלויה בצרכי המוצר, במשאבים הזמינים ואף באופי המותג ולכל גישה יתרונות וחסרונות משלה. למה לבחור בספרייה קיימת? שימוש בספרייה קיימת, כמו לדוגמה MUI, Ant Design או Tailwind, מאפשר למעצבים ולמפתחים לרוץ מהר. הספריות הללו מספקות […]
איך לארגן ולנהל אסטים גרפיים, לדוג' איורים, בדיזיין סיסטם?
שמירה וניהול של אסטים כמו תמונות ואיורים, למשל כאלה המשמשים ל-Empty States, מאפשרת גישה מהירה אליהם ושימוש עקבי בתוך הממשק. מומלץ ליצור פייג' ייעודי בתוך הדיזיין סיסטם בו תרכזו את כל האסטים במקום אחד. כשמספר האסטים גדול במיוחד, אפשר גם לייצר קובץ נפרד וייעודי שיכיל רק אסטים גרפיים, כדי לא להכביד על קובץ הדיזיין סיסטם […]
איך כדאי להתייחס ללייאאוט של המסך ונקודות שבירה בדיזיין סיסטם?
הגדרת לייאאוט ונקודות שבירה כחלק מהדיזיין סיסטם מאפשרת עקביות בכל גודל מסך, חוסכת זמן פיתוח ומובילה לחוויית משתמש טובה יותר בכל המכשירים. הגדרת נקודות שבירה – כדאי להגדיר נקודות שבירה כטוקנים בדיזיין סיסטם, בדיוק כמו צבעים וטיפוגרפיה. זה מבטיח שימוש עקבי בהן לאורך כל המוצר ומאפשר עדכון כשצריך. הגדירו מספר מצומצם של נקודות שבירה סטנדרטיות. […]
איזו דוקומנטציה ממש חייבים ומה בעדיפות נמוכה יותר?
לפעמים אין ברירה וצריך לרוץ קדימה ולא תמיד יש זמן לתעד הכל, לכן חשוב להתמקד תחילה במה שבאמת הכרחי ולהשלים את השאר בהדרגה. דוקומנטציה הכרחית Good to have – תיעוד שאפשר להוסיף בשלב מאוחר יותר צריכים עזרה בכתיבת הדוקומנטציה? כאן אפשר להוריד את קובץ הטמפלט החינמי שלנו בקומיוניטי של פיגמה, שיחסוך לכם שעות של עבודה.
האם כדאי לשלב שקיפות צבע בדיזיין סיסטם ואיך עושים את זה נכון?
לשקיפות של צבע יש מספר יתרונות בולטים: גמישות עיצובית, יכולת להתמזג עם רקעים שונים, ויצירת היררכיה ויזואלית. שקיפויות גם יכולות לצמצם את מספר הטוקנים הדרושים במערכת, מכיוון שצבע אחד עם שקיפויות שונות יכול לשמש למגוון מטרות. דוגמה מצוינת לניצול יתרונות השקיפות נמצאת ב-Material Design, שם שקיפויות משחקות תפקיד מרכזי במערכת ה-theming. בגישה של מטריאל, צבע […]
מה ההבדל בין שקיפות צבע לשקיפות של אלמנט שלם בממשק?
שקיפות צבע מתייחסת לשינוי ערך האלפא של הצבע עצמו, בעוד ששקיפות של אלמנט משפיעה על האלמנט כולו, כולל כל הצבעים והתוכן שבו. כששקיפות מוחלת על אלמנט שלם, כל מה שבתוכו (טקסט, אייקונים וכו') יהפוך שקוף באותה מידה. הנה שלושה מקרי שימוש נפוצים לשקיפות: אפשר לייצר טוקן עקבי עבור שקיפות למצבי disabled (למשל 40%) כדי ליצור […]