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

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

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

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

!Let The Battle Begin

בואו נעשה לכם קצת סדר

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

אלמנטור הוא תוסף אדיר למערכת ה-CMS וורדפרס – שעליה בנויים 30% מהאתרים החיים היום. באמצעותו ניתן לעצב אתרים חיים, פונקציונאליים ומושלמים ברמת הפיקסל. התוסף הוא פרי מוחם של שני ישראלים, ויש לו קהילה ישראלית ובין לאומית גדולה מאוד. השימוש בכלי קל ואינטואיטיבי – עם תהליך פשוט שנועד לעבודה יעילה, נוחה ומהירה. הוא מתממשק בצורה מוצלחת עם תוספים אחרים – מה שמאפשר לבנות אתרים מורכבים איתו ללא בעיות, היופי – לא צריך לכתוב אפילו שורת קוד אחת! הממשק שלו קל ללימוד.

ממשק

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

4.5/5

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

4/5

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

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

4/5

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

5/5

מערכת ניהול תוכן

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

4.5/5

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

4/5

אתרי איקומרס

אלמנטור – המערכת הפופולארית ביותר לאיקומרס עם וורדפרס היא Woocommerce – שעליה בנויות 20% מהחנויות באינטרנט ו-94% מחנויות הוורדפרס. אלמנטור מאפשר לנו לעצב את עמודי הארכיון והמוצר בצורה חופשית לחלוטין, עם וידג'טים שמותאים לווקומרס. בעזרת תוספים אפשר להוסיף לחנות פיצ'רים כמו: מועדון לקוחות, גיפט קארדס, מערכת קורסים(מערכת הקורסים של פיקסל פרפקט בנויה עליו) ועוד. הממשק של ווקומרס מאוד מתקדם אבל נוח מאוד – כל פאנל הניהול של החנות נמצא במקום אחד. לקוחות מאוד אוהבים את ווקומרס ומתמצאים בו בקלות. בנוסף, לווקומרס יש את האפשרות לאינסוף אינטגרציות עם מערכות חיצוניות שיעזרו לכם לנהל את החנות שלכם בצורה טובה יותר.

4.5/5

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

2.5/5

אחסון האתר

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

5/5

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

3.5/5

ביטחון בעתיד

אלמנטור – וורדפרס היא מערכת קוד פתוח עליה בנויים 40% מהאתרים באינטרנט הנראה לעין. היא קיימת 10 שנים ורק מתפתחת עם הזמן, הקהילה שלה מונה מיליוני אנשים והתמיכה שבה אינסופית. החברות הגדולות ביותר באינטרנט בוחרות להשתמש בה. היא לא בבעלות אף אחד ולכן לא תלויה באף חברה. היא עצמאית ויציבה לחלוטין. היא חינמית ולכן כדי לקיים את חיי האתר אתם צריכים לשלם רק על אחסון ועל דומיין – כל דבר מעבר הוא אופציונאלי ולא הכרחי לקיום האתר – אבל מומלץ.

4.5/5

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

3.5/5

ביצועי האתר ומהירותו

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

4/5

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

4/5

פלקסיביליות

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

5/5

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

3/5

יציבות האתר

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

3.5/5

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

4.5/5

מסירה ללקוח

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

5/5

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

5/5

ספריית אלמנטים

אלמנטור – עם אלמנטור פרו יש לכם גישה ל-80 רכיבים(וידג'טים) מוכנים מראש עם פונקצנאליות בילט-אין – שכל אחד מהם מיוחד יותר מהשני. כולם הכרחיים ושימושיים מאוד כדי ליצור אתר מעניין יותר, מושך יותר וממיר יותר. הם מוכנים – אתם רק צריכים לגרור אותם ולעצב איך שתרצו, יש לכם שליטה מלאה על כל הפרטים הקטנים שבהם – כדי להבטיח עיצוב פיקסל פרפקט.

5/5

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

3.5/5

תבניות מוכנות מראש

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

5/5

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

3.5/5

אז לסיכום

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

הדעה האישית שלי

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

Share

קצת על המחבר:

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

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

אשמח לשלוח לך פרטים!

אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
;