Webflow למעצבים

מושגי יסוד בעבודה בדפדפנים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

וידיאו

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

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

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

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

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

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

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

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

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

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

אנימציות Parallax 

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

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

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

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

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

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

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

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

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