דף הנחיתה, שנקרא גם אתר תדמית, הוא הדבר הראשון שיראה כל מי שמתעניין בסטארטאפ שלכם: לקוחות, משקיעים, או חברים שרוצים לעזור. זה הרושם הראשוני של החברה שלכם, וכמו שאתם יודעים, רושם ראשוני קשה לתקן.ֿ
בשנים האחרונות קמו עשרות כלים שעוזרים לסטארטאפים ועסקים בכלל ליצור דפי נחיתה. Webflow (וובפלואו) היא ללא ספק הכוכבת העולה.
בפוסט הזה אסקור את היכולות של Webflow ומה מייחד אותה משאר הפלטפורמות לבניית אתרים. בהמשך הפוסט אפרט על איך תוכלו לבנות דף נחיתה שנראה מעולה בעזרת וובפלואו תוך מספר ימים בודדים.
מה זה Webflow בכלל?
וובפלואו היא פלטפורמה ויזאולית לבניית אתרים ללא צורך בכתיבת קוד. בעזרת Webflow תוכלו לבנות דפי נחיתה (Landing Pages) ועד לאתרי תוכן מרכבים. תוכלו לעצב אותם, ולחבר אותם לדומיין שלכם - במינימום מאמץ.
בניית האתר נעשת בצורה ויזאולית ע״י גרירת אבני בניין כמו כותרות, טקסט, תמונות וכו׳ לתוך המסך. בזמן שאתם עורכים את האתר, אתם גם רואים את התוצאה הסופית, ככה שאין הפתעות - מה שנקרא גם WYSIWYG ( קיצור של What you see it's what you get). בנוסף לכל, תוכלו להתאים לגדלים שונים של מסכים וגם למובייל עם ממשק ייעודי למסכים הללו.
בשונה מפלטפורמות אחרות לבניית אתרים, וובפלואו מאפשרת להשתמש במגוון הרחב של היכולות ועקרונות המנחים של HTML, CSS וJavascript (הטכנולוגיות העיקרית לבניית אתרים) בעזרת כלי ויזואלי, מה שמאפשר גמישות מרבית מבחינת רמת הדיוק של העיצוב וכל זאת מבלי לכתוב שורת קוד אחת.
באמצעות וובלפאו תוכלו לבנות מגוון רחב של אתרים: דף נחיתה לסטארט-אפ, בלוג, אתר תדמית לעסק, חנות אינטרנטית, הזמנה לאירוע, תיק עבודות ועוד.
💡 הידעתם?
וובפלואו נוסדה ב-2013, אבל בשנים האחרונות הפך להיות הבחירה המועדפת לבניית אתרים, במיוחד עבור סטארטאפים. לשם השוואה, Wordpress, המתחרה הגדול של Webflow והפלטפורמה עם נתח השוק הגדול ביותר לבניית אתרים, נוסדה ב2003. לפי גוגל Trends, הפער ביניהם הצטמצם ביותר מ50% ב-5 השנים האחרונות.
מה הופך את Webflow למיוחד?
הסיבה המרכזית שבגללה יותר ויותר אנשים בוחרים ב-Webflow היא היכולת ליצור דפי נחיתה שנראים לא פחות ממעולה בזמן קצר, כל זאת מבלי לכתוב שורת קוד אחת.
כלים מובילים אחרים כמו Wix או Squarespace ושחקנים דומים בשוק, צברו מוניטין רב לפני וובפלואו. אבל וובפלואו הביאה לשולחן רמה חדשה של גמישות וכוח שמאפשרת לבנות דפי נחיתה שנראים לא פחות ממדהים.
Webflow הוא כלי ויזאולי שמאפשר עיצוב בעזרת CSS, טכנולוגיית העיצוב הנפוצה ביותר. בעזרת Webflow, מעצבים יכולים להשתמש בכל מגוון האפשרויות של CSS בעצמם מבלי צורך בפיתוח, ולהגיע לתוצאות שהן Pixel Perfect.
בנוסף, Webflow השקיעו המון ביצירת מאגר טמפלטים ברמה גבוהה, מה שמקצר לאין שיעור את תהליך בניית האתר, ויותר מזה, מאפשר לכל אחת ואחד להגיע לתוצאות מדהימות מבלי ניסיון מוקדם בעיצוב.
בעזרת וובפלואו הרבה יותר אנשים יכולים לבנות דף נחיתה שנראה פשוט מעולה.
איזה יכולות יש ל-Webflow?
בנוסף ליכולת המרכזית לעצב ולבנות אתרים, לוובפלואו יש מספר יכולות נוספות שהופכות את הכלי לרלוונטי עבור מגוון רחב של שימושים. להלן כמה מה הפיצ׳רים העיקריים:
עורך דפים ללא קוד
מוצר הדגל של Webflow. מאפשר עיצוב של כל חלק בדף הנחיתה, עד הפרטים הקטנים ביותר הכל בסגנון Drag & Drop. אין דבר שתוכלו לעשות עם HTML וCSS שלא תוכלו לעשות עם Webflow. העורך מאפשר גם להגדיר חלקים מסוימים של העמוד כאבני בניין (Symbols), ולהשתמש בהם שוב ושוב בעמודים נוספים. למרות שהעורף מאפשר יכולות הרבות, העיצוב שלו יחסית פשוט, וקל להתחיל עם האפשרויות הבסיסיות שלו.
מערכת CMS (ניהול תוכן)
Content Management System או CMS בקצרה, היא מערכת שמאפשרת לכם לשמור מידע דינמי באתר - כמו פוסטים לבלוג, רשימה של מסעדות, גלרייה של תמונות או כל מידע אחרת שתרצו לנהל בתוך האתר. באמצעות ה-CMS של וובפלואו, תוכלו ליצור תוכן דינמי מבלי להעתיק שוב ושוב את העיצוב עבור כל עמוד. אתם מגדירים את המבנה של התוכן ואז בהתאמה את האופן שבו הוא מופיע בעמוד, ומה שוובפלואו עושה זה לקחת את התוכן המתאים לאותה רשומה מהמאגר ו״להצמיד״ אותו אל המקומות המתאימים בעמוד.
לדוגמא, נגיד ואתם בונים מאגר של כלים לסטארט-אפים. אתם יכולים ליצור עיצוב אחד של עמוד עבור תצוגה של כלי ואז לחבר אותו ל-CMS של הכלים שיצרתם. לאחר מכן, וובפלואו יצור לכם עמוד מתאים עבור כל כלי עם המידע שמשויך אליו. מאגר הכלים באתר הזה נבנה בידיוק ככה.
הסרטו הזה מציג דוגמא לשימוש במאגר CMS (של רהיטים במקרה זה):
פלטפורמת E-Commerce
על גבי ה-CMS, בוובפלואו בנו פלטפורמה שלמה לEcommerce. הפלטפורמה מאפשרת בניית חנות אינטרנטית עם גביית תשלומים, ניהול אספקה, עגלת קניות ושליחת חשבוניות באימייל. העיצוב של החנות יעשה באמצעות העורך של וובפלואו, בדיוק כמו כל עמוד נחיתה אחר, עם גמישות גדולה ובלי צורך בפיתוח.
אינטראקציות ואנימציות
בוופלואו שמו דגש משמעותי על כך שכל דבר שאפשר לעשות בעזרת HTML וCSS, נוכל לעשות בצורה ויזאולית ללא צורך בפיתוח. אחד היכולות האלו הן אינטרקציות (Interactions) שמאפשרות לשנות את העיצוב של האתר בצורה דינמית בהתאם להתנהגות של מי שמבקר בעמוד הנחיתה - החל מאנימציות שמופיעות ברקע, אפקטים מיוחדים בלחיצה על כפתורים, אנימציה תוך כדי גלילה ועוד.
למי Webflow מתאים?
וובפלואו מתאימה במיוחד עבור אנשים שרוצים לבנות אתר שצפוי לשרת אותם לאורך זמן, וירצו להמשיך להשקיע וללמוד את הניואנסים השונים בפלטפורמה. Webflow מאפשרת להגיע לתוצאות ראשוניות מהר מאוד, אבל דורשת עקומת למידה גבוהה יותר מאשר חלק מהמתחרים שלה בגלל העומק של הכלי והיכולת להגיע לתוצאות שהם Pixel Perfect.
עבור מי שרוצה לבנות אתר פשוט, פלטפורמות כמו Cardd יהוו אלטרנטיבה קלה יותר ללמידה.
בשנים האחרונות פיתחו בWebflow מגוון חדש של אפשרויות על מנת להפוך לאנטרנטיבה אמיתית בשווקים נוספים. מערכת הCMS הופכת אותה למתחרה בWordpress עבור בלוגים ופלטפורמת הEcommerce מאפשרת לה להתחרות בShopify עבור חנויות אינטרנטית.
היכולות האלו עדיין לא באותה רמת הגימור של בונה האתרים של Webflow, אבל מאפשרות לקחת את בונה האתרים המעולה, ולהשתמש בו למגוון חדש של שימושים.
כמה עולה Webflow?
ניתן להתנסות בבניית אתר בוובפלואו בחינם. ברגע שתרצו לחבר את הדומיין שלכם, תצטרכו לעבור לחבילה בתשלום.
נכון לעכשיו, הגרסה הבסיסית של וובפלואו עולה 15$ דולר לחודש. במידה ותרצו להוסיף CMS, המחיר יעלה ל20$ לחודש ועבור חנות אינטרנטית תצטרכו לשלם 29$ לחודש.
בנוסף, אם תרצו לרכוש טמפלייט (מומלץ ביותר) תצטרכו לשלם בין 50$ ל130$ חד פעמי.
עבודה עם Webflow לסטארט-אפים
למה Webflow הוא פתרון מעולה לסטארטאפים?
מרבית היזמים פונים ל-Fiverr או Upwork בשביל ליצור דף נחיתה עבור הסטארטאפ שלהם. זה מאוד מפתה. שמים כמה מאות דולרים, כמה שעות של אפיון, ויש לכם עמוד נחיתה מוכן בתוך כמה ימים. יש לכם כל כך הרבה על הראש, אז למה ללמוד כלי נוסף שהוא לא המומחיות שלכם?
לדעתי, משתי סיבות:
- דף נחיתה זה הדבר הראשון שיראה כל מי שמתעניין בחברה שלכם: לקוחות, משקיעים, או חברים שרוצים לעזור. אם זה נראה חצי כוח, זה מאוד מוריד.
- למרות הפיתוי של להשקיע כמה שעות וכמה מאות דולרים בשביל לקבל אתר מוכן, רוב העבודה מגיעה אחרי הבנייה הראשונית של הדף נחיתה. הכיוון שלכם ישתנה ותרצו לערוך ולשנות את הדף נחיתה. מעבר לעלות הכספית, הזמן שתשקיעו בזה ילך ויגדל בגלל שתצטרכו לתקשר עם אדם נוסף שלא מכיר את החברה שלכם לעומק כדי לבצע שינויים.
לבנות את הדף נחיתה בעצמכם ידרוש קצת יותר השקעה ראשונית, אבל אחרי זה תוכלו להיות גאים בו, וגם לערוך אותו בקלות
אז איך בונים דף נחיתה עם וובפלואו בימים בודדים?
להלן הצעדים הבסיסיים הדרושים על מנת שתוכלו לבנות דף נחיתה עם Webflow עבור המוצר/עסק/סטארט-אפ שלכם:
1. בוחרים טמפלייט (חצי יום - יום)
השלב הראשון שעליו נבנה הבסיס הוא הטמפלייט. לוובפלואו יש מלא טמפלייטים שנראים טוב, מסודרים לפי קטגוריות. לדוגמא טמפלייטים לחברות טכנולוגיה. הטמפלייטים נבנים על ידי חברות צד שלישי. רוב הטמפלייטים בתשלום, אבל יש גם טמפלייטים שנתרמו על ידי הקהילה וזמינים בחינם.
שאתם בוחרים טמפלייט, כדאי לבדוק את המבנה הכללי של העמוד, ה-Navigation, הדוגמאות לסשקנים בעמודים השונים, הצבעים והפונט (שאפשר גם לשנות בהמשך).
שווה להשקיע בבחירה של הטמפלייט חצי יום - יום. כל דבר שתעשו אחרי יהיה מבוסס עליו, אז חשוב שתהיו גאים בו.
2. יוצרים פרויקט חדש עם הטמפלייט (שעה - שעתיים)
ברגע שבחרתם את הטמפלייט, תצטרכו לשלם עליו (נע בין 50$-130$ לטמפלייטים בתשלום), ואז תקבלו פרויקט חדש עם הטמפלייט הנבחר. ברגע שתיצרו פרויקט חדש תוכלו לשנות ולהתאים אותו כאוות נפשכם. אתם לא צריכים לחשוש לשנות, וובפלואו שומר לכם גרסאות בצורה אוטומטית, אז תמיד תוכלו לחזור אחורה.
3. מרכיבים את העמוד מתוך הסקשנים שאהבתם (חצי יום עד יום)
בשביל ליצור גרסה ראשונית תוך כמה ימים, כדאי להתחיל עם Mix and Match של סקשנים קיימים. לבנות סקשנים חדשים ייקח קצת יותר זמן. קל מאוד להעתיק סקשנים מעמוד לעמוד (זה ממש Copy paste), אז תוכלו לבנות את העמוד נחיתה שלכם מתוך הסקשנים שמופיעים בכל העמודים של הטמפלייט.
4. משנים את הטקסט (יום)
ה-Copy הוא חלק משמעותי מאוד בדף הנחיתה. גם אם הייתם בונים עמוד נחיתה דרך Fiverr או Upwork, הייתם צריך לחשוב על הטקסט בעצמכם. לא ארחיב על התהליך פה, אבל רק אגיד שרוב הזמן ביצירת דף נחיתה מושקע בכתיבת הטקסט וביצירת אילוסטרציות.
5. מוסיפים אילוסטרציות (יום)
זה אולי החלק המורכב ביותר, במיוחד לאנשים שלא יצרו דף נחיתה בעבר. בדומה לחלקים הקודמים, על מנת להגיע לגרסה ראשונית תוך ימים בודדים, לא מומלץ להתחיל עם עיצוב אילוסטרציות בעצמכם. הנה 4 כלים לעיצוב ליצירת אילוסטרציות בעצמכם:
- מאגר האילוסטרציות המטורף של unDraw. אפשר גם לבחור צבע שיתאימו לצבעים של הדף שלכם.
- אם יש לכם מוצר או MVP, ואתם עובדים עם Mac, הכלי המצוין של Cleanshot יכול לעזור לכם לקחת סקרינשוטים מקצועיים. אם זה מוצר וובי, תוכלו לעשות Zoom in בכרום כדי לא להעמיס בפרטים.
- מאגר האייקונים של Flaticon.
- הטמפלייט של Webflow בדרך כלל מגיע עם אילוסטרציות מוכנות. לפעמים, כמו במקרה של מפתח הטמפלייטים Brix templates, תוכלו לבקש את קובץ הFigma של הטמפלייט ולערוך את האילוסטרציות. זה אולי נשמע מסובך למי שאף פעם לא השתמש בFigma, אבל אם אתם רק עורכים אילוסטרציות קיימות, זה לא נורא בכלל, ואתם יכולים לצאת עם תוצר ממש איכותי בזמן קצר.
6. מוסיפים דומיין ועושים PUBLISH (שעה - שעתיים)
השלב האחרון זה להוסיף את הדומיין שלכם. לWebflow יש מדריכים של איך להגדיר את הדומיין באתרים פופולריים כמו GoDaddy.
לסיכום
אז נכון, כל זה דורש קצת יותר עבודה, ויש עקומת למידה. אבל זה לא יהיה לשווא, ובטווח הארוך אתם גם תחסכו זמן, וגם תהיו יותר גאים בעמוד נחיתה שלכם.
אם תרצו ללמוד עוד, ל-Webflow יש אקדמיה עם אחלה תוכן לימודי ויש גם קהילה נפלאה של אנשי וובפלואו בישראל. במידה ויש לכם טיפים נוספים או שאלות, תכתבו לי בתגובות ואשתדל להתייחס.
