• UX: איכות החוויה הכוללת של המשתמש במוצר.
• UI: הממשק החזותי והאינטראקטיבי.
• Usability: מידת הקלות שבה ניתן לבצע משימה.
• Accessibility: יכולת שימוש גם עבור אנשים עם מגבלות.
• Information Architecture: ארגון המידע והניווט.

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

• ראיונות משתמשים.
• סקרים.
• תצפיות.
• Usability Testing.
• ניתוח מתחרים.
• ניתוח נתוני שימוש.
• Card Sorting.

Persona היא ייצוג מחקרי של קבוצת משתמשים.

• מטרה.
• צרכים.
• כאבים.
• התנהגות.
• מוטיבציות.
• הקשר שימוש.

• מי המשתמש?
• מה הוא מנסה להשיג?
• מה מונע ממנו להשיג זאת?
• מה הוא עושה כיום?
• איזה מידע חסר לו?
• איפה הוא טועה?

מנסחים בצורה מדויקת: מי המשתמש, מה הצורך, מה הבעיה ומה ההשפעה של הבעיה.

• Business Goal — מטרה עסקית.
• User Goal — מטרת המשתמש.
• Success Metric — מדד הצלחה.
• Constraint — מגבלה.

• חלוקת תוכן לקטגוריות.
• הגדרת היררכיה.
• שמות ברורים.
• קבוצות מידע.
• ניווט ראשי ומשני.

• פשטות.
• עקביות.
• יכולת חיזוי.
• Labels ברורים.
• עומק ניווט מינימלי ככל האפשר.

• Entry Point.
• Action.
• Decision.
• System Response.
• Success State.
• Error State.
• Exit.

• כל פעולה משמעותית מקבלת תוצאה ברורה.
• יש להגדיר מצבי שגיאה.
• יש להגדיר Empty State.
• יש להגדיר Loading.
• אין להשאיר פעולה ללא Feedback.

• בדיקת מבנה לפני עיצוב.
• בדיקת היררכיה.
• בדיקת Navigation.
• בדיקת פעולות.
• זיהוי בעיות מוקדם.

• Low Fidelity — מבנה בסיסי.
• Mid Fidelity — מבנה מפורט.
• High Fidelity — קרוב למוצר הסופי.

1. הגדרת מטרת הבדיקה.
2. בחירת משימות.
3. בחירת משתמשים.
4. צפייה בביצוע.
5. תיעוד בעיות.
6. תעדוף.
7. שיפור.
8. בדיקה חוזרת.

• Task Success Rate.
• Completion Time.
• Error Rate.
• Drop-off.
• User Satisfaction.

• Contrast: יצירת הבדל ברור בין אלמנטים.
• Hierarchy: סדר חשיבות חזותי.
• Alignment: יישור לפי מערכת משותפת.
• Proximity: קירוב אלמנטים קשורים.
• Repetition: חזרה על דפוסים.
• Consistency: עקביות.
• Balance: איזון חזותי.
• Whitespace: שטח ריק.
• Scale: יחסי גודל.

• Primary.
• Secondary.
• Accent.
• Background.
• Surface.
• Text.
• Border.
• Success.
• Warning.
• Error.
• Info.

טקסט חייב להיות קריא מול הרקע. יש לבדוק Contrast ולא להסתמך רק על צבע להעברת מידע.

• הגבלת מספר משפחות גופנים.
• שמירה על היררכיה.
• Line Height מתאים.
• משקל שונה לפי חשיבות.
• רוחב שורה נוח לקריאה.
• ניגודיות מספקת.

מומלץ לעבוד עם Scale עקבי:

• Container.
• Columns.
• Gutters.
• Margins.
• Rows.
• Breakpoints.

• יישור.
• עקביות.
• שליטה ברוחב תוכן.
• התאמה למסכים.

• Button.
• Input.
• Select.
• Checkbox.
• Radio.
• Switch.
• Card.
• Modal.
• Tooltip.
• Dropdown.
• Tabs.
• Navigation.
• Breadcrumb.
• Pagination.
• Toast.
• Alert.

• Default.
• Hover.
• Focus.
• Active.
• Disabled.
• Loading.
• Error.
• Success.

• Design Tokens.
• Colors.
• Typography.
• Spacing.
• Grid.
• Icons.
• Components.
• Patterns.
• Documentation.

• עקביות.
• מהירות עבודה.
• יכולת תחזוקה.
• Scalability.
• חיבור בין Design לקוד.

• ניגודיות מספקת.
• טקסט קריא.
• Focus ברור.
• שימוש במקלדת.
• Labels לשדות.
• משמעות שאינה תלויה בצבע בלבד.
• Targets בגודל מתאים.
• מבנה סמנטי.
• תמיכה בטכנולוגיות מסייעות.

• Move / Select.
• Frame.
• Shape.
• Text.
• Pen.
• Image.
• Section.
• Component.
• Prototype.

• File.
• Pages.
• Sections.
• Frames.
• Layers.
• Components.

• שמות ברורים לכל שכבה.
• קבוצות לפי תפקיד.
• Pages לפי שלב או מערכת.
• Components באזור ייעודי.
• אין שכבות בשם "Frame 123".

• Direction — Horizontal / Vertical.
• Gap — מרווח בין ילדים.
• Padding — מרווח פנימי.
• Hug Contents.
• Fill Container.
• Fixed.
• Alignment.

• יצירת מקור יחיד לרכיב.
• Instances לשימוש חוזר.
• Variants למצבים.
• Properties לשליטה ברכיב.
• Nested Components לרכיבים מורכבים.

• On Click.
• While Hovering.
• While Pressing.
• After Delay.
• Navigate To.
• Open Overlay.
• Back.
• Smart Animate.

Prototype משמש לבדיקת זרימה והתנהגות לפני פיתוח, ואינו חייב לשחזר כל פרט טכני של המוצר.

• מידות.
• Spacing.
• Colors.
• Typography.
• States.
• Responsive behavior.
• Assets.
• Interactions.
• Exceptions.

• HTML מגדיר מבנה ותוכן.
• Elements יוצרים מבנה.
• Attributes מוסיפים מידע.
• Semantic HTML מגדיל משמעות ונגישות.

1. Typography — טקסט.
2. Color & Background — צבע ורקע.
3. Box Model — גודל, Padding, Border, Margin.
4. Layout — Flexbox, Grid, Position.
5. Responsive — התאמה למסכים.

• Content — התוכן.
• Padding — מרווח פנימי.
• Border — גבול.
• Margin — מרווח חיצוני.

• Flex מתאים לפריסה חד־ממדית.
• justify-content — ציר ראשי.
• align-items — ציר משני.
• gap — מרווח.
• flex-wrap — מעבר שורות.

Grid מתאים למבנים דו־ממדיים של שורות ועמודות.

• static.
• relative.
• absolute.
• fixed.
• sticky.
• z-index.

• Desktop.
• Tablet.
• Mobile.
• Fluid Width.
• Flexible Layout.
• Breakpoints.
• Responsive Typography.
• Touch Targets.

• Design Specifications.
• States.
• Responsive Rules.
• Components.
• Assets.
• Typography.
• Colors.
• Interactions.
• Error States.
• Empty States.
• Loading States.

• לא להניח שהפיתוח זהה ל־Figma בכל פרט.
• לא להתעלם ממגבלות טכנולוגיות.
• לא למסור מסך ללא States.
• לא להסתמך על הסבר בעל־פה בלבד.

1. Brief.
2. Research.
3. Problem Definition.
4. Goals.
5. Information Architecture.
6. User Flow.
7. Wireframes.
8. UI Direction.
9. Design System.
10. High Fidelity.
11. Prototype.
12. Testing.
13. Iteration.
14. Handoff.
15. QA.

• בעיה מוגדרת.
• קהל יעד.
• מחקר.
• Persona או User Segment.
• User Flow.
• Wireframes.
• מערכת מסכים עקבית.
• Design System בסיסי.
• Prototype.
• Responsive.
• States.
• בדיקת שימושיות.

1. Overview.
2. Problem.
3. Users.
4. Research.
5. Insights.
6. Goals.
7. User Flow.
8. Wireframes.
9. Visual Direction.
10. Design System.
11. Final UI.
12. Prototype.
13. Testing.
14. Iterations.
15. Final Result.
16. Lessons Learned.

• עמוד פתיחה ברור.
• הצגת התמחות.
• 2–4 פרויקטים חזקים.
• Case Study לכל פרויקט משמעותי.
• הצגת תהליך.
• הצגת תוצאה.
• תפקיד אישי בפרויקט.
• כלים וטכנולוגיות.
• קישור ל־Prototype כאשר רלוונטי.

• לזהות בעיה לפני עיצוב פתרון.
• להסביר החלטות עיצוביות.
• לעבוד עם מערכת ולא רק עם מסך.
• להבין משתמשים.
• לבצע בדיקות.
• להבין Responsive.
• להבין HTML/CSS ברמה שימושית.
• לתקשר עם מפתחים.
• לנהל Components.
• לשמור על עקביות.
• להתייחס לנגישות.
• להשתמש בנתונים כאשר הם זמינים.
• לשפר עיצוב באמצעות Iteration.