מ-Figma לוורדפרס

קובץ ה-Figma שלכם הופך לתבנית וורדפרס אמיתית.

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

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

Trusted by development & marketing teams at

bigpanda.com
similarweb.com
forter.com
redis.io
monday.com
intel.com
theculturetrip.com
yotpo.com
logz.io

מה הופך קובץ Figma לקובץ שאפשר לבנות ממנו

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

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

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

02

Properties אמיתיים לרכיב

כרטיס עם tier ו-featured הופך לתבנית אחת. שישה עותקים מנותקים הופכים לשש תבניות.

03

Variants עם שמות של מצבים

Default, hover, disabled מתורגמים ישירות ל-CSS. ”Frame 214“ לא מתורגם לשום דבר.

04

טיפוגרפיה וצבעים כ-Styles

Styles הופכים ל-design tokens של התבנית. ערכי hex מפוזרים הופכים לארבעים גוונים כמעט זהים של אפור.

מרגע קבלת הקובץ ועד העלייה לאוויר

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

    קבלת הקובץ ותכנון

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

  2. 02

    Frontend ב-Tailwind

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

  3. 03

    ארכיטקטורת התבנית

    Template parts ושכבת tokens, כך שהעמוד השני נבנה בחלק קטן מהמאמץ שנדרש לראשון.

  4. 04

    אינטגרציה עם וורדפרס

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

  5. 05

    תשתית SEO

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

  6. 06

    אבטחה ויציבות

    Escaping לפלט, מינימום תוספים, ובנייה ששורדת עדכוני ליבה.

  7. 07

    בדיקות והשקה

    מכשירים אמיתיים, תוכן אמיתי ו-Core Web Vitals שנבדקים לפני ההשקה ולא אחריה.

עיצובים שהפכו לתבניות בפרודקשן

אתרים שקובץ העיצוב היה נקודת הפתיחה שלהם, והתבנית שבניתי היא זו שרצה בהם היום.
אתר Forter www.forter.com
תבנית ייעודית

Forter

פלטפורמה למניעת הונאות.

מה נבנה: פיתוח התבנית ולוקליזציה.

אתר TASC Consulting www.tasc-consulting.com
תבנית ייעודית

TASC Consulting

חברת ייעוץ ניהולי.

מה נבנה: תבנית ייעודית ועבודת ביצועים.

אתר Storyboards storyboards.io
תבנית ייעודית

Storyboards

פלטפורמה לשיתוף פעולה בווידאו.

מה נבנה: תבנית הוורדפרס הייעודית.

He does precise work, taking designs and creating ultra-fast WordPress pages accordingly.
Limor AlmagorMARCOM at Onebeat.co
I had the chance to work with Roee on a collaboration project, where Roee produced a high quality and fast turn-around WordPress based website.
Vova NurenbergProduct Design Manager at Meta

מה מקבלים בסוף

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

תבנית ייעודית, לא תבנית מדף

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

עריכה

הצוות שלכם עורך

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

מהירות

מהירה מהבסיס

אין עומס של בילדר שצריך לייעל אחר כך.

חיפוש

מוכנה לקידום

מבנה סמנטי ו-Schema בתוך התבנית מהיום הראשון.

מחיר לפי פרויקט, אחרי שאני קורא את הקובץ

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

מה משפיע על המחיר

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

איך עובדת הצעת המחיר

  1. אתם שולחים קישור ל-Figma ומספרים מה האתר צריך לעשות.
  2. אני קורא את הקובץ וחוזר אליכם עם שאלות, בדרך כלל תוך 48 שעות.
  3. אתם מקבלים מחיר אחד סגור בכתב, להיקף מוסכם.
  4. העבודה מתחילה אחרי שאתם מאשרים. בלי חיוב לפי שעה ובלי הפתעות.

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

מכינים את הקובץ בעצמכם?

המדריך על component properties ו-Code Connect מסביר מה אני בודק, והוא כתוב למעצבים.

למדריך ההכנה

שאלות שאני מקבל לפני הצעת המחיר

לא מצאתם את השאלה שלכם? שלחו אותה ואענה.

שאלו בוואטסאפ

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

Sketch, XD וסט מסודר של ייצואים עובדים גם הם. עם Figma זה הכי פשוט, כי אני קורא את הרכיבים ואת ה-properties שלהם ישירות במקום למדוד תמונות. אם מה שיש לכם הוא אפליקציה שנוצרה ב-v0, ב-Lovable או ב-Bolt ולא קובץ עיצוב, זו כבר בנייה מחדש מווייב קודינג לוורדפרס.

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

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

מ-Figma לוורדפרס

שלחו את הקובץ. קבלו תשובה אמיתית.

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

בדרך כלל עונה תוך שעה.