מסלול UX/UI מקצועי
מסלול ממוקד לבניית ידע מקצועי בעיצוב, מחקר משתמשים, תכנון חוויית משתמש, עיצוב ממשקים והבנה טכנית הנדרשת לעבודה מול מפתחים.
יסודות העיצוב
הבסיס החזותי שעליו נשען כל תהליך UI מקצועי.
01 · עקרונות עיצוב
Balance — איזון
חלוקת משקל חזותי בין אלמנטים. יכול להיות סימטרי או א־סימטרי.
Contrast — ניגודיות
יצירת הבדל ברור בגודל, צבע, משקל, צורה או מרווח כדי להבליט מידע.
Repetition — חזרתיות
שימוש עקבי בצבעים, צורות, מרווחים וסגנונות ליצירת מערכת אחידה.
Alignment — יישור
יישור אלמנטים לצירים משותפים. מונע תחושת כאוס ומשפר סריקה.
Proximity — קרבה
אלמנטים השייכים לאותה משמעות ממוקמים קרוב זה לזה.
White Space — שטח ריק
המרחב סביב אלמנטים. משפר קריאות, היררכיה ומיקוד.
02 · Color — צבע
Hue — גוון
המשפחה הבסיסית של הצבע: אדום, כחול, ירוק וכדומה.
Saturation — רוויה
עוצמת הצבע ביחס לאפור.
Value — בהירות
רמת הבהירות או הכהות של הצבע.
Contrast Ratio — יחס ניגודיות
מדד להבדל בין צבעי טקסט ורקע. חשוב במיוחד לנגישות.
Primary Color — צבע ראשי
צבע המותג או הפעולה המרכזית.
Semantic Colors — צבעים סמנטיים
צבעים בעלי משמעות: הצלחה, אזהרה, שגיאה ומידע.
03 · Typography — טיפוגרפיה
Typeface — משפחת גופנים
המערכת החזותית של צורת האותיות.
Font Weight — משקל גופן
עובי האות. משמש ליצירת היררכיה.
Font Size — גודל גופן
גודל הטקסט ביחידות כמו px, rem או em.
Line Height — גובה שורה
המרווח האנכי בין שורות. משפיע ישירות על קריאות.
Letter Spacing — ריווח אותיות
המרחק האופקי בין אותיות.
Type Scale — סולם טיפוגרפי
מערכת גדלים עקבית לכותרות, טקסט, תוויות וטקסט משני.
04 · Composition — קומפוזיציה
קומפוזיציה היא אופן ארגון האלמנטים בתוך שטח נתון. המטרה היא ליצור סדר, מיקוד, קצב והיררכיה.
- Focal Point — נקודת מיקוד
- Visual Weight — משקל חזותי
- Rhythm — קצב חזותי
- Grouping — קיבוץ אלמנטים
- Spacing — מרווחים
05 · Hierarchy & Grid — היררכיה וגריד
Visual Hierarchy — היררכיה חזותית
קביעת סדר החשיבות של המידע באמצעות גודל, צבע, מיקום, משקל ומרווח.
Grid — גריד
מערכת קווים המגדירה עמודות, שורות, שוליים ומרווחים.
Container — מיכל תוכן
אזור המגדיר את רוחב התוכן ומרכז אותו.
Gutter — מרווח בין עמודות
המרווח בין אזורי הגריד.
UX Research — מחקר משתמשים
הבנת המשתמש, הבעיה, ההקשר והמטרות לפני תכנון הפתרון.
01 · User Research — מחקר משתמשים
Qualitative Research — מחקר איכותני
איסוף תובנות באמצעות ראיונות, תצפיות ובדיקות שימושיות.
Quantitative Research — מחקר כמותי
נתונים מספריים המאפשרים לזהות דפוסים, שיעורים ומגמות.
User Interview — ראיון משתמש
שיחה מובנית להבנת צרכים, התנהגויות, בעיות ומוטיבציות.
Observation — תצפית
בחינת ההתנהגות בפועל במקום להסתמך רק על דיווח המשתמש.
Usability Test — בדיקת שימושיות
משתמש מבצע משימות בזמן שהמעצב מזהה חסמים וטעויות.
Survey — סקר
איסוף תשובות ממספר גדול יחסית של משתמשים.
02 · Personas — פרופילי משתמשים
Persona הוא ייצוג מחקרי של קבוצת משתמשים בעלת מאפיינים, צרכים, מטרות והתנהגויות משותפים.
- Goals — מטרות
- Needs — צרכים
- Pain Points — נקודות כאב
- Behaviors — התנהגויות
- Context — הקשר שימוש
03 · User Journey — מסע משתמש
Stage — שלב
נקודה במסע המשתמש.
Touchpoint — נקודת מגע
מקום שבו המשתמש פוגש את המוצר או השירות.
Emotion — רגש
התחושה של המשתמש בכל שלב.
Pain Point — בעיה
חסם או תסכול המונע התקדמות.
04 · Requirements — דרישות
- Business Goal — יעד עסקי
- User Goal — יעד משתמש
- Functional Requirement — דרישה פונקציונלית
- Constraint — מגבלה
- Success Metric — מדד הצלחה
דרישה טובה צריכה להיות ברורה, מדידה, רלוונטית וניתנת לביצוע.
UX Design — תכנון חוויית משתמש
הפיכת ממצאי המחקר למבנה, זרימה ושלד שימושי.
01 · Information Architecture — ארכיטקטורת מידע
Content Structure — מבנה תוכן
הגדרת הקשר בין מסכים, קטגוריות ותוכן.
Navigation — ניווט
הדרך שבה המשתמש עובר בין אזורי המוצר.
Hierarchy — היררכיה
קביעת רמות חשיבות וקשרים בין פריטי מידע.
Labeling — תיוג
בחירת שמות ברורים לאזורים, פעולות וקטגוריות.
02 · User Flows — זרימות משתמש
User Flow מתאר את רצף הפעולות שמשתמש מבצע כדי להשלים מטרה.
- Entry Point — נקודת כניסה
- Action — פעולה
- Decision — החלטה
- Feedback — משוב
- Success State — מצב הצלחה
- Error State — מצב שגיאה
03 · Wireframes — שלדי מסך
Low Fidelity — נאמנות נמוכה
מבנה בסיסי ומהיר לבדיקת רעיון ופריסה.
Mid Fidelity — נאמנות בינונית
כולל מבנה מפורט יותר של תוכן, רכיבים ופעולות.
High Fidelity — נאמנות גבוהה
מתקרב לעיצוב הסופי מבחינת מראה והתנהגות.
Prototype — אב־טיפוס
גרסה אינטראקטיבית המדמה שימוש במוצר.
04 · Usability — שימושיות
Learnability — קלות למידה
כמה מהר משתמש חדש מבין כיצד להשתמש במערכת.
Efficiency — יעילות
כמה בקלות משתמש מנוסה משלים משימות.
Error Prevention — מניעת שגיאות
תכנון הממשק כך שימנע טעויות לפני שהן מתרחשות.
Feedback — משוב
המערכת מודיעה למשתמש מה קרה בעקבות הפעולה שלו.
UI Design — עיצוב ממשק
בניית שפה חזותית עקבית ומערכת רכיבים לשימוש חוזר.
01 · User Interface — ממשק משתמש
Button — כפתור
רכיב המפעיל פעולה.
Input — שדה קלט
רכיב המאפשר למשתמש להזין מידע.
Card — כרטיס
מיכל להצגת מידע מקובץ.
Modal — חלון מודאלי
שכבה המציגה פעולה או מידע הדורשים תשומת לב.
Navigation Bar — סרגל ניווט
אזור המאפשר מעבר בין חלקי המוצר.
State — מצב רכיב
מצבים כגון רגיל, Hover, Focus, Disabled, Loading ו־Error.
02 · Components — רכיבים
רכיב טוב מוגדר באמצעות מבנה, וריאנטים, מצבים, מידות והתנהגות.
- Variant — וריאציה
- State — מצב
- Property — מאפיין
- Spacing — מרווח
- Responsive Behavior — התנהגות במסכים שונים
03 · Design System — מערכת עיצוב
Design Tokens — משתני עיצוב
ערכים מרכזיים לצבע, ריווח, טיפוגרפיה, רדיוס וצל.
Components — רכיבים
אבני הבניין של הממשק.
Patterns — תבניות
פתרונות חוזרים למצבים נפוצים.
Guidelines — הנחיות
כללים המסבירים כיצד ומתי להשתמש ברכיבים.
04 · Responsive Design — התאמה למסכים
- Breakpoint — נקודת מעבר
- Fluid Layout — פריסה גמישה
- Mobile First — תכנון מובייל תחילה
- Desktop — מסך מחשב
- Tablet — טאבלט
אין לתכנן רק גודל מסך אחד. יש להגדיר כיצד המבנה, הטקסט, הרכיבים והמרווחים משתנים בהתאם לרוחב.
טכנולוגיה ופרקטיקה
הבסיס הטכני הנדרש למעצב UX/UI כדי להבין ולתקשר עם פיתוח.
01 · HTML — מבנה
HTML — HyperText Markup Language — שפת מבנה לאתר
HTML מגדיר את המבנה הסמנטי של העמוד: כותרות, פסקאות, קישורים, טפסים, תמונות, רשימות ואזורים.
<main>
<h1>UX/UI Portfolio</h1>
<p>Professional interface design</p>
<button>View Projects</button>
</main>Semantic HTML — HTML סמנטי
שימוש באלמנטים לפי המשמעות שלהם ולא רק לפי המראה.
DOM — מודל מסמך
ייצוג היררכי של אלמנטי HTML שהדפדפן עובד איתם.
Attributes — מאפיינים
מידע נוסף המוגדר בתוך תגיות.
Forms — טפסים
מבנה להזנת נתונים ושליחתם.
02 · CSS — עיצוב ופריסה
CSS — Cascading Style Sheets — שפת עיצוב ופריסה
CSS אחראי על צבעים, טיפוגרפיה, מרווחים, גדלים, גבולות, אנימציות ופריסת הממשק.
.card{
background:#11172c;
color:#ffffff;
padding:24px;
border-radius:16px;
display:grid;
gap:12px;
}
@media(max-width:700px){
.card{
padding:16px;
}
}Selector — בורר
מגדיר לאילו אלמנטים כללי CSS חלים.
Box Model — מודל הקופסה
Content, Padding, Border ו־Margin.
Flexbox — פריסה חד־ממדית
מערכת לפריסת אלמנטים בשורה או עמודה.
Grid — פריסה דו־ממדית
מערכת לשליטה בשורות ובעמודות.
Position — מיקום
שליטה במיקום אלמנטים ביחס לזרימת המסמך.
Media Query — התאמת מסך
שינוי עיצוב בהתאם לתנאי מסך כגון רוחב.
03 · Accessibility — נגישות
Keyboard Navigation — ניווט מקלדת
כל פעולה חשובה צריכה להיות נגישה ללא עכבר.
Focus — מיקוד
המשתמש צריך לדעת איזה רכיב פעיל.
Color Contrast — ניגודיות צבע
טקסט ואלמנטים צריכים להיות מובחנים מהרקע.
Alt Text — תיאור תמונה
טקסט חלופי המסביר תוכן משמעותי של תמונה.
ARIA — מידע נגישות
מאפיינים המסייעים לטכנולוגיות מסייעות להבין ממשק.
Semantic Elements — אלמנטים סמנטיים
שימוש נכון במבנה HTML משפר הבנה ונגישות.
04 · Design Handoff — מסירה לפיתוח
המעצב צריך להעביר למפתח מידע חד־משמעי על הממשק:
05 · Portfolio — תיק עבודות
Problem — הבעיה
מה היה הצורך או הכשל.
Research — מחקר
מה למדת על המשתמשים.
Process — תהליך
כיצד הגעת לפתרון.
Solution — פתרון
מה בנית ולמה.
Validation — אימות
כיצד בדקת את הפתרון.
Outcome — תוצאה
מה השתפר ומה למדת.