בחר את השפה שלך
קורס UX ועיצוב אתרים רספונסיבי
יותר מ-2 מיליון תלמידים ברחבי העולם

קורס UX ועיצוב אתרים רספונסיבי

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

Dedika לעסקים

מה תלמדו בקורס:

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

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

  • media queries

  • עצב/י ממשקים נגישים ועקביים מבחינה חזותית המבוססים על מערכת עיצוב מובנית.

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

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

איך לומדים בצורה מעשית קורס UX ועיצוב אתרים רספונסיבי

איך מתרגלים קורס UX ועיצוב אתרים רספונסיבי

לעסק שלך שרוצה להכשיר את הצוות

ב-Dedika לעסקים, הקורס כולל תרגילים ודוגמאות מהעסק עצמו ובאופן שמתאים בדיוק למה שהחברה שלך צריכה.

לחצו כאן

תוכן הקורס

8 פרקים • 37 שיעוריםמשך בין 4 ל-360 שעות (אתה מחליט)

פרק 1ראה פרטים

יסודות עיצוב UX

  • שיעור 1 • תהליך חשיבה עיצובית

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

  • שיעור 2 • מה עיצוב UX באמת אומר

    מגדיר UX מעבר לאסתטיקה, וכולל שימושיות, תועלת ורצויות. מבסס את אוצר המילים המשמש לאורך הקורס.

  • שיעור 3 • נגישות ועיצוב כוללני

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

  • שיעור 4 • פסיכולוגיית משתמש ומודלים מנטליים

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

פרק 2ראה פרטים

שיטות מחקר משתמשים

  • שיעור 1 • סקרים ושיטות כמותניות

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

  • שיעור 2 • ראיונות וחקירה הקשרית

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

  • שיעור 3 • תכנון מחקר

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

  • שיעור 4 • סינתזה של מחקר לתובנות

    הופך נתונים גולמיים לאישיות, מפות מסע ותחומי הזדמנות. מגשר בין מחקר לעיצוב על ידי יצירת תוצרים ניתנים לשיתוף ופעולה.

פרק 3ראה פרטים

ארכיטקטורת מידע וניווט

  • שיעור 1 • מפות אתרים והיררכיות תוכן

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

  • שיעור 2 • מיון קלפים ובדיקת עצים

    מלמד מיון קלפים פתוח וסגור לאימות מבני קטגוריות עם משתמשים. בדיקת עצים מאמתת תוויות ניווט לפני יישום עיצוב חזותי.

  • שיעור 3 • עיצוב מערכות ניווט

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

  • שיעור 4 • עקרונות יסוד של ארכיטקטורת מידע

    מכסה סכימות ארגון, מערכות תיוג ומערכות חיפוש כמרכיבי IA. מבסס את החשיבה המבנית הדרושה לפני תחילת כל עיצוב חזותי.

פרק 4ראה פרטים

ווירפריימינג ואבות-טיפוס

  • שיעור 1 • כלי ווירפריימינג דיגיטליים

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

  • שיעור 2 • סקיצות וווירפריימים בנאמנות נמוכה

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

  • שיעור 3 • בניית אבות-טיפוס אינטראקטיביים

    מחבר ווירפריימים לזרימות ניתנות ללחיצה המדמות התנהגות מוצר אמיתית. אבות-טיפוס מתוחמים לבדיקת משימות משתמש ספציפיות שזוהו במחקר.

  • שיעור 4 • בדיקות שימושיות עם אבות-טיפוס

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

  • שיעור 5 • יסודות עיצוב אינטראקציה

    מגדיר דפוסי אינטראקציה, מיקרו-אינטראקציות ושינויי מצב המנחים התנהגות משתמש. מספק את אוצר המילים לאינטראקציה המשמש בבניית אב-טיפוס.

פרק 5ראה פרטים

עיצוב חזותי לממשקי אינטרנט

  • שיעור 1 • פריסה, ריווח והיררכיה חזותית

    מיישם מערכות גריד, קני מידה של ריווח ומשקל חזותי להכוונת תשומת לב המשתמש. ריווח והיררכיה עקביים מפחיתים עומס קוגניטיבי ומשפרים סריקות.

  • שיעור 2 • טיפוגרפיה לממשקים דיגיטליים

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

  • שיעור 3 • תורת הצבע ומערכות צבע בממשק משתמש

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

  • שיעור 4 • אייקונים ותמונות

    מכסה עקרונות עיצוב אייקונים, בחירת תמונות וסגנון איור להקשרי UI. נכסים חזותיים חייבים לחזק משמעות מבלי ליצור עמימות.

  • שיעור 5 • בניית מערכת עיצוב

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

פרק 6ראה פרטים

יסודות עיצוב אתרים רספונסיבי

  • שיעור 1 • Media Queries ונקודות שבירה

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

  • שיעור 2 • CSS Flexbox לפריסות רספונסיביות

    מלמד צירי Flexbox, יישור וגלישה לבניית רכיבים רספונסיביים חד-ממדיים. Flexbox מיושם על סרגלי ניווט, שורות כרטיסים ופריסות טפסים.

  • שיעור 3 • תמונות ומדיה רספונסיביים

    מלמד srcset, sizes ואלמנט picture להגשת תמונות בגדלים מתאימים. אספקת מדיה מותאמת משפרת ביצועים בכל סוגי המכשירים.

  • שיעור 4 • CSS Grid לפריסות מורכבות

    מכסה אזורי תבנית Grid, מיקום אוטומטי ושמות שורות לפריסות דו-ממדיות. Grid מאפשר מבנה ברמת עמוד ש-Flexbox לבדו אינו יכול להשיג.

  • שיעור 5 • עקרונות עיצוב רספונסיבי

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

פרק 7ראה פרטים

CSS מתקדם ואנימציה

  • שיעור 1 • סלקטורים מתקדמים וספציפיות

    מלמד פסאודו-מחלקות, פסאודו-אלמנטים וניהול ספציפיות ל-CSS שניתן לתחזוקה. מפחית התנגשויות סגנון הנפוצות בבסיסי קוד רספונסיביים גדולים.

  • שיעור 2 • ארכיטקטורת CSS וסקלביליות

    מציג BEM, utility-first ו-CSS Modules כמתודולוגיות לדפי סגנון ניתנים להרחבה. ארכיטקטורה ניתנת להרחבה מונעת התנגשויות ספציפיות בפרויקטים רספונסיביים גדולים.

  • שיעור 3 • מעברי CSS ומיקרו-אנימציות

    מיישם מאפייני מעבר ליצירת שינויי מצב חלקים המחזקים משוב אינטראקציה. מיקרו-אנימציות משפרות ביצועים נתפסים ומנחות תשומת לב משתמש.

  • שיעור 4 • אנימציות Keyframe ב-CSS

    בונה אנימציות מורכבות מרובות-שלבים באמצעות @keyframes למצבי טעינה וזרימות הדרכה. מכסה מאפיינים בטוחים לביצועים ותזמור אנימציה.

  • שיעור 5 • מאפיינים מותאמים אישית של CSS ו-Theming

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

פרק 8ראה פרטים

העברת עיצוב

  • שיעור 1 • שיטות עבודה מומלצות להעברת עיצוב

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

  • שיעור 2 • QA ובדיקות בעיצוב רספונסיבי

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

  • שיעור 3 • מדדי UX ומדידת הצלחה

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

  • שיעור 4 • פרויקט גמר והצגת תיק עבודות

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

  • שיעור 5 • עיצוב איטרטיבי ושיפור מתמיד

    מבסס לולאת משוב לאחר השקה באמצעות אנליטיקה, משוב משתמשים ובדיקות A/B. איטרציה מתמדת מקיימת איכות מוצר מעבר לשחרור הראשוני.

הסמכה

תעודת הסיום התקפה שלך

הקורס הזה מיועד עבורך:

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

  • מעצבים גרפיים: המעוניינים להרחיב את מיומנויותיהם לעיצוב מוצרים דיגיטליים.

  • מפתחי פרונט-אנד: המעוניינים לחזק את שיקול הדעת במחקר משתמשים ועיצוב ממשק.

  • אנשי שיווק: המעוניינים ליישם חשיבת UX בקמפיינים ובדפי נחיתה.

  • יזמים: הזקוקים לעצב ולהעריך את ממשקי המוצר שלהם באופן עצמאי.

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

מה התלמידים שלנו אומרים

השיעורים שלכם מושלמים. רכשתי את החבילה השנתית ולבסוף יש לי הזדמנות ללמוד נושאים שונים שמעניינים אותי מבלי להחליף פלטפורמה... תודה על כל מה שאתם עושים, כבר המלצתי עליכם לאנשים אחרים...
Giulio Carlo
Giulio Carloתלמיד שיווק דיגיטלי
אני אוהבת איך השיעורים הולכים ישר לעניין ואיך אני יכולה לעבור בין פרקים ולדלג על תוכן שאני לא צריכה.
Mariana Ferres
Mariana Ferresתלמידת צילום
אני אוהבת את התוכן ואת אופן ההצגה והתמלול של הסרטונים, מה שמאיץ את התהליך!
Luciana Alvarenga
Luciana Alvarengaתלמידת עיצוב ציפורניים
הפלטפורמה מהירה, פשוטה לשימוש. המגוון של התוכן והסרטונים המשלימים עוזרים מאוד בלמידה.
André Felipe
André Felipeתלמיד הנדסת פרומפטים

הכשרות מובילות

שאלות נפוצות

מי זו Dedika?

האם התעודה תקפה בישראל?

האם הקורסים חינמיים?

מהי היקף השעות של הקורס?

איך נראים הקורסים?

איך הקורסים עובדים?

מהי משך הקורסים?

מה העלות או המחיר של הקורסים?

מהו קורס EAD או קורס אונליין ואיך זה עובד?

קורס PDF