UX/UI Professional Academy

מסלול מקצועי וממוקד ללימוד UX/UI, מהיסודות ועד עבודה מקצועית, עם היררכיה ברורה של תחומים, שיעורים ותתי־תחומים.

חמשת תחומי הליבה

בחר תחום בסרגל העליון. לאחר הבחירה יוצגו השיעורים שלו באותו אזור.

01 · UX

מחקר, משתמשים, בעיות, ארכיטקטורת מידע, User Flow, Wireframes, בדיקות ואיטרציה.

02 · UI

עקרונות עיצוב, צבע, טיפוגרפיה, Grid, Spacing, Components, Design System ונגישות.

03 · Figma

מבנה קבצים, Layers, Auto Layout, Components, Variants, Prototype ו־Handoff.

04 · טכנולוגיה

HTML, CSS, Box Model, Flexbox, Grid, Responsive, Accessibility ועבודה עם פיתוח.

05 · מקצוע וקריירה

תהליך עבודה מלא, פרויקט, Case Study, Portfolio, QA, Handoff וסטנדרט מקצועי.

סדר העבודה המקצועי

  1. Brief והבנת הבעיה.
  2. מחקר והבנת המשתמש.
  3. הגדרת מטרות ודרישות.
  4. Information Architecture.
  5. User Flow.
  6. Wireframes.
  7. UI Direction.
  8. Design System.
  9. High Fidelity.
  10. Prototype.
  11. Usability Testing.
  12. Iteration.
  13. Responsive.
  14. Handoff.
  15. QA.
  16. Case Study ו־Portfolio.

01 · UX — חוויית משתמש

תכנון המוצר מנקודת המבט של המשתמש: צורך → בעיה → מבנה → פעולה → בדיקה → שיפור.

1. יסודות UX

1.1 מהו UX

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

1.2 Usability

  • Effectiveness — האם המשתמש מצליח?
  • Efficiency — כמה מאמץ נדרש?
  • Learnability — כמה קל ללמוד?
  • Error Prevention — האם המערכת מונעת טעויות?
  • Memorability — האם קל לחזור ולהשתמש?

1.3 Heuristics

  1. Visibility of System Status.
  2. Match Between System and Real World.
  3. User Control and Freedom.
  4. Consistency and Standards.
  5. Error Prevention.
  6. Recognition Rather Than Recall.
  7. Flexibility and Efficiency.
  8. Minimalist Design.
  9. Error Recovery.
  10. Help and Documentation.

2. מחקר משתמשים

2.1 שיטות מחקר

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

2.2 מחקר איכותני מול כמותי

סוג מטרה
איכותני להבין למה ואיך.
כמותי למדוד כמה ובאיזו תדירות.

2.3 Persona

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

2.4 Jobs To Be Done

מגדירים את ה־Job שהמשתמש מנסה לבצע, ולא רק את מאפייני המשתמש.

  • Situation.
  • Motivation.
  • Desired Outcome.
  • Barriers.

3. הגדרת הבעיה

3.1 Problem Statement

  • מי המשתמש?
  • מה הוא מנסה להשיג?
  • מה מונע ממנו להשיג זאת?
  • מה ההשפעה של הבעיה?

3.2 מטרות ומדדים

  • User Goal.
  • Business Goal.
  • Success Metric.
  • Constraint.
  • KPI.

3.3 Prioritization

  • Impact.
  • Effort.
  • Risk.
  • Frequency.
  • Business Value.

4. Information Architecture

4.1 היררכיית מידע

  • Content Inventory.
  • Categories.
  • Labels.
  • Hierarchy.
  • Navigation.
  • Search.

4.2 Navigation

  • Primary Navigation.
  • Secondary Navigation.
  • Breadcrumbs.
  • Contextual Navigation.
  • Footer Navigation.

5. User Flow

5.1 מבנה Flow

  1. Entry Point.
  2. Action.
  3. Decision.
  4. System Response.
  5. Success.
  6. Error.
  7. Exit.

5.2 מצבים שחייבים להגדיר

  • Default.
  • Loading.
  • Empty.
  • Error.
  • Success.
  • Disabled.
  • Permission.

6. Wireframes

6.1 מטרות

  • בדיקת מבנה.
  • בדיקת היררכיה.
  • בדיקת Navigation.
  • בדיקת פעולות.
  • איתור בעיות לפני UI.

6.2 Fidelity

  • Low Fidelity.
  • Mid Fidelity.
  • High Fidelity.

7. Usability Testing

7.1 תהליך

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

7.2 מדדים

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

02 · UI — עיצוב ממשק

בניית שפה חזותית ברורה, עקבית, נגישה וניתנת להרחבה.

1. עקרונות עיצוב

1.1 עקרונות בסיס

  • Contrast.
  • Hierarchy.
  • Alignment.
  • Proximity.
  • Repetition.
  • Consistency.
  • Balance.
  • Whitespace.
  • Scale.

1.2 Visual Hierarchy

  • גודל.
  • משקל.
  • צבע.
  • מיקום.
  • ניגודיות.
  • Spacing.

2. צבע

2.1 Color System

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

2.2 שימוש בצבע

  • צבע אינו מחליף היררכיה.
  • צבע פעולה צריך להיות עקבי.
  • אין להעביר מידע באמצעות צבע בלבד.
  • יש לבדוק Contrast.

3. Typography

3.1 היררכיה

רמה שימוש
Display כותרת מרכזית.
H1 כותרת ראשית.
H2 כותרת אזור.
H3 כותרת משנה.
Body תוכן.
Caption מידע משני.

3.2 כללי טיפוגרפיה

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

4. Spacing

4.1 מערכת מרווחים

4px 8px 12px 16px 24px 32px 48px 64px

5. Grid

5.1 רכיבים

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

6. Components

6.1 רכיבים

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

6.2 States

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

7. Design System

7.1 שכבות המערכת

  1. Design Tokens.
  2. Foundations.
  3. Components.
  4. Patterns.
  5. Templates.
  6. Documentation.

7.2 Design Tokens

  • Color Tokens.
  • Spacing Tokens.
  • Typography Tokens.
  • Radius Tokens.
  • Shadow Tokens.
  • Motion Tokens.

8. נגישות

8.1 עקרונות

  • Contrast.
  • Focus.
  • Keyboard Navigation.
  • Labels.
  • Semantic Structure.
  • Touch Targets.
  • לא להסתמך על צבע בלבד.

03 · Figma

עבודה מקצועית ב־Figma: מבנה, Components, Auto Layout, Prototype, Design System ו־Handoff.

1. יסודות Figma

1.1 כלי בסיס

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

2. מבנה קובץ

2.1 היררכיה

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

2.2 Naming

  • שמות פונקציונליים.
  • היררכיה עקבית.
  • שמות Variants ברורים.
  • אין שכבות לא מזוהות.

3. Auto Layout

3.1 יכולות

  • Horizontal.
  • Vertical.
  • Gap.
  • Padding.
  • Alignment.
  • Hug Contents.
  • Fill Container.
  • Fixed.
  • Wrap.

4. Components

4.1 מערכת Components

  • Main Component.
  • Instance.
  • Variants.
  • Properties.
  • Nested Components.
  • Component Sets.

5. Prototype

5.1 אינטראקציות

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

6. Handoff

6.1 מידע לפיתוח

  • Dimensions.
  • Spacing.
  • Colors.
  • Typography.
  • Components.
  • States.
  • Assets.
  • Responsive Rules.
  • Interactions.

04 · טכנולוגיה ופיתוח

הידע הטכני הדרוש למעצב UX/UI כדי להבין מבנה, Layout, Responsive ותקשורת עם פיתוח.

1. HTML

1.1 מבנה מסמך

<header> <nav></nav> </header> <main> <section> <h1>Title</h1> <p>Content</p> <button>Action</button> </section> </main> <footer> </footer>
  • HTML מגדיר מבנה.
  • Elements מגדירים רכיבים.
  • Attributes מוסיפים מידע.
  • Semantic HTML מגדיל משמעות ונגישות.

1.2 Semantic HTML

  • header.
  • nav.
  • main.
  • section.
  • article.
  • aside.
  • footer.
  • button.
  • form.

2. CSS

2.1 חמשת תחומי הליבה של CSS

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

2.2 Selectors

p {} .card {} #header {} button:hover {} input:focus {}

2.3 Box Model

.box { width: 300px; padding: 16px; border: 1px solid #ddd; margin: 24px; box-sizing: border-box; }
  • Content.
  • Padding.
  • Border.
  • Margin.

3. Layout

3.1 Flexbox

.container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
  • ציר ראשי.
  • ציר משני.
  • Alignment.
  • Gap.
  • Wrap.

3.2 CSS Grid

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

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

3.3 Position

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

4. Responsive Design

4.1 עקרונות

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

4.2 Media Query

@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } .container { padding: 16px; } }

5. עבודה מול פיתוח

5.1 מה המעצב צריך למסור

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

5.2 ידע CSS הנדרש למעצב

  • Selectors.
  • Box Model.
  • Display.
  • Flexbox.
  • Grid.
  • Position.
  • Spacing.
  • Typography.
  • Colors.
  • Media Queries.
  • Responsive Units.
  • States.
מעצב UX/UI אינו חייב להיות מפתח, אך ידע CSS שימושי מאפשר תכנון ריאלי ותקשורת טובה יותר עם צוות הפיתוח.

05 · מקצוע, פרויקט ותיק עבודות

הפיכת הידע לתהליך מקצועי, פרויקט שלם ותיק עבודות.

1. תהליך עבודה End-to-End

1.1 שלבים

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

2. פרויקט מסכם

2.1 דרישות

  • בעיה מוגדרת.
  • קהל יעד.
  • מחקר.
  • Insights.
  • Goals.
  • User Flow.
  • Wireframes.
  • Design System.
  • High Fidelity.
  • Prototype.
  • Responsive.
  • States.
  • Usability Test.

3. Case Study

3.1 מבנה

  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.
Case Study מקצועי מציג את תהליך החשיבה, הבעיה, ההחלטות, הבדיקות והתוצאה — ולא רק את המסכים הסופיים.

4. Portfolio

4.1 מבנה

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

5. סטנדרט מקצועי

5.1 מעצב מקצועי יודע

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

מילון מושגים

מונחי חובה לעבודה מקצועית ב־UX/UI.

UX

חוויית המשתמש הכוללת.

UI

הממשק החזותי והאינטראקטיבי.

Wireframe

ייצוג מבני של מסך.

Prototype

מודל אינטראקטיבי המדמה התנהגות.

User Flow

המסלול שהמשתמש עובר לביצוע משימה.

Component

רכיב UI לשימוש חוזר.

Variant

גרסה של Component.

Auto Layout

מערכת לסידור דינמי ב־Figma.

Design System

מערכת Tokens, Components, Patterns וכללים.

Responsive

התאמת ממשק לגדלי מסך שונים.

Accessibility

תכנון המוצר כך שיהיה נגיש.

Usability

מידת הקלות בביצוע משימה.

CTA

Call To Action.

Empty State

מצב ללא תוכן להצגה.

Error State

מצב שבו פעולה נכשלה.

Loading State

מצב המתנה לטעינת מידע.

Handoff

העברת עיצוב והנחיות לפיתוח.

Grid

מערכת עמודות, שורות ומרווחים.

Design Token

ערך עיצובי מוגדר.

Breakpoint

נקודה שבה משתנה הפריסה.

רשימת בדיקה מקצועית

בדיקה לפני מסירה, הצגה או פרסום של פרויקט UX/UI.

UX

  • הבעיה מוגדרת.
  • המשתמש מוגדר.
  • היעדים ברורים.
  • Research קיים.
  • User Flow מלא.
  • Error States מוגדרים.
  • Empty States מוגדרים.
  • Usability נבדקה.

UI

  • Visual Hierarchy ברורה.
  • Typography עקבית.
  • Color System מוגדר.
  • Contrast נבדק.
  • Spacing עקבי.
  • Grid מוגדר.
  • Components אחידים.
  • States קיימים.

Figma

  • Layers מסודרים.
  • שמות ברורים.
  • Components משמשים במקום שכפול.
  • Variants מוגדרים.
  • Auto Layout בשימוש מתאים.
  • Prototype עובד.
  • הקובץ מאורגן.

Responsive

  • Desktop נבדק.
  • Tablet נבדק.
  • Mobile נבדק.
  • Breakpoints מוגדרים.
  • טקסט נשאר קריא.
  • רכיבים אינם נשברים.
  • Touch Targets מתאימים.

Handoff

  • מידות ברורות.
  • Colors מוגדרים.
  • Typography מוגדרת.
  • States מוגדרים.
  • Interactions מוגדרות.
  • Assets זמינים.
  • Responsive Rules ברורות.

Portfolio

  • הבעיה מוצגת.
  • המחקר מוצג.
  • תהליך החשיבה מוצג.
  • החלטות מוסברות.
  • התוצאה מוצגת.
  • התפקיד האישי ברור.
Hosted & Compiled with HtmlRunner.com