8
24
4,700המחיר אינו כולל מע"מ

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

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


תוכנית הלימודים


24
8
0930-1230
1

מיכאל שוורץ

מנהל תוכנית webflow

בוגר המחלקה לתקשורת חזותית בשנקר, מעצב ממשקים ואתרים. עובד עם סטארטאפים בתחומים שונים ותמיד על התפר בין עיצוב מוצר (Product Designer) לעיצוב שיווקי (Marketing Designer).  מנחה את 'דיבור עצמאי' - פודקאסט על עיצוב ועסקים.

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

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

מה ניתן לעשות עם Webflow?

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

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

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

אתרי one-pager מרשימים. תמיד רציתם לעצב אתרים מלאים באנימציות ממשק וגלילה? אתרי Parallex מדליקים? אין בעיה, אחרי הקורס תוכלו לייצר אותם ובדיוק בצורה שהעיצוב דורש.

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

למי מיועד הקורס?

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

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

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

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

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

עם מערכת ניהול התוכן של Webflow תוכלו לייצר אתרים שניתן לתמוך בהם בקלות

תוכלו לערוך את האתרים או לאפשר ללקוחות שלכם לערוך אותם בקלות וללא התעסקות בקוד

עם מערכת ניהול התוכן של Webflow תוכלו לייצר אתרים שניתן לתמוך בהם בקלות

תוכנית הלימודים

  • מבוא לסביבת העבודה
  • עיצוב בדפדפן
  • עבודה עם רכיבים מוכנים מראש
  • אנימציות ממשק 
  • הכנה להשקה
  • מושגי יסוד בעבודה בדפדפנים
  • עקרונות בסיס ב- HTML ו- CSS
  • הצגת תוכן בדפדפנים
  • בנייה נכונה של גריד ו-Layout באתרים 
  • עקרונות מנחים לטיפוגרפיה דיגיטלית
  • עבודה עם תמונות
  • עיצוב רספונסיבי
  • עיצוב ובניית בטפסים
  • סרגלי ניווט, טאבים ותפריטים
  • חלוניות נפתחות וגלריות
  • וידיאו
  • מבוא לאנימציה
  • יצירת אנימציות ממשק פשוטות
  • אנימציות גלילה ומעברי עמוד
  • אנימציות טעינה
  • אנימציות Parallax 
  • אנימציות תנועת עכבר
  • הכנה למנועי חיפוש ו-SEO
  • בדיקות ביצועים
  • דומיין, אחסון, עלייה לרשת
  • מושגי יסוד בעבודה בדפדפנים

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

    עקרונות בסיס ב- HTML ו- CSS

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

    הצגת תוכן בדפדפנים

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

    בנייה נכונה של גריד ו-Layout באתרים 

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

    עקרונות מנחים לטיפוגרפיה דיגיטלית

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

    עבודה עם תמונות

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

    עיצוב רספונסיבי

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

    עיצוב ובניית בטפסים

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

    סרגלי ניווט, טאבים ותפריטים

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

    חלוניות נפתחות וגלריות

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

    וידיאו

    אחד היתרונות הברורים ב-Webflow הוא השימוש הנרחב בוידאו. שימוש בסרטונים כחלק מהעיצוב יכולים להשפיע רבות על השפה העיצובית ועל רמת התוצר (וזה גם מגניב בטירוף!). אנו נלמד לשלב רכיבי וידאו ברקע או כרכיב בפני עצמו. בנוסף, נלמד להטמיע סרטונים משירותים מוכרים כמו Youtube ו- vimeo. 

    מבוא לאנימציה

    אנימציות ממשק הן כבר ממזמן כלי להעברת מסר - וכזה שמעצבים לא יכולים לא להרשות לעצמם לשלוט בו.
    כדי שנוכל להשתמש נכון באנימציות ממשק אנו נקדיש זמן כדי להבין עקרונות בסיס באנימציות. בין השאר נדבר על תזוזת חומר בעולם האמיתי (Material animations), תאוטה/תאוצה ונבחן דוגמאות לאנימציות ממשק מובילות.  

    יצירת אנימציות ממשק פשוטות

    נלמד לייצר אנימציות מצבים לאובייקטי ממשק. כך לדוגמה נייצר אנימציות שונות למצבים שונים (לחיצה, גרירה, מעבר עכבר).

    אנימציות גלילה ומעברי עמוד

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

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

    אנימציות טעינה

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

    אנימציות Parallax 

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

    אנימציות תנועת עכבר

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

    הכנה למנועי חיפוש ו-SEO

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

    בדיקות ביצועים

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

    דומיין, אחסון, עלייה לרשת

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

    להנות מכל היתרונות של קוד מתקדם, מבלי לכתוב אותו בעצמנו

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

    להנות מכל היתרונות של קוד מתקדם, מבלי לכתוב אותו בעצמנו

    יצירת מיקרו-אנימציות ואנימציות שנוצרות תוך כדי גלילה

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

    יצירת מיקרו-אנימציות ואנימציות שנוצרות תוך כדי גלילה

    חלק קטן מהחברות שכבר עשו את המעבר


    חלק קטן מהחברות שכבר עשו את המעבר

    מחזורים קרובים

    נובמבר 2019 / תל-אביב

    נותרו מקומות פנויים
    להרשמה

    פברואר 2020 / תל-אביב

    נותרו מקומות פנויים
    להרשמה

    רוצים לפגוש אותנו ולהתייעץ בנוגע להתקדמות המקצועית שלכם?
    יש לכם שאלות נוספות?

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

    במידה ותרצו ליצור איתנו קשר טלפונית - אתם מוזמנים להתקשר ל 054-673-8659

     

     
     

    שתף באמצעות: