---
title: "FlyCode: אתר Framer לכלי פיתוח SaaS | AGR Studio"
description: "AGR Studio עיצב ב-Framer את אתר השיווק של FlyCode, עם דמו אינטראקטיבי ותצוגת אינטגרציות, כדי להציג קטגוריה חדשה של כלי פיתוח."
url: https://agr.studio/he/projects/flycode
language: he
---

[פרויקטים](https://agr.studio/he/projects) כלי מפתחים / SaaS · 2023

# FlyCode

לא דומה שמיעה לראייה.

[כניסה לאתר](https://www.flycode.com/)

![תמונת הנושא של FlyCode מאת AGR Studio](https://cdn.sanity.io/images/coun0bog/production/0878b6701be5954f06bccd9724f043291a8d4e46-3680x2760.png?w=1600&q=82&auto=format)

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

לקוח: FlyCode
מיקום: בוסטון, ארה״ב
תעשייה: כלי מפתחים / SaaS
שנה: 2023

שירותים: -   עיצוב אתרים
-   פיתוח ב-Framer
-   דמויים אינטראקטיביים
-   והצגת אינטגרציות

טכנולוגיות: -   פריימר
-   רכיבי קוד מותאמים אישית
-   CMS

## התובנה

### אף אחד לא מחפש מוצר שהוא לא יודע שקיים

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

![אתר FlyCode, תמונה 1, על ידי AGR Studio](https://cdn.sanity.io/images/coun0bog/production/4798d4dd9e4b49022589beebb8ceae88be12823d-1200x879.jpg?w=1600&q=82&auto=format)

## האתגר

### מוצר אחד, שני קהלים חשדנים

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

![אתר FlyCode, תמונה 2, על ידי AGR Studio](https://cdn.sanity.io/images/coun0bog/production/df8eaceb930ef4c40c0cc6f17de89b4214bc1695-289x2000.png?w=1600&q=82&auto=format)

## הפתרון

### נותנים למוצר להוכיח את עצמו

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

הלב של האתר הוא [דמו אינטראקטיבי](https://agr.studio/he/solutions/interactive-website-design): המבקר עורך שורת טקסט בממשק של FlyCode ורואה אותה משתנה באפליקציה מדומה. אינטראקציה אחת שמסבירה יותר מכל פסקה. לצידו יש תצוגת אינטגרציות: ספרייה עם סינון שבנויה כקולקציה ב-CMS של Framer, ולכל אינטגרציה שלבי התקנה, קטעי קוד ומידע על תאימות. סימון schema תופס חיפושים ארוכים וממוקדים כמו ״manage React feature flags without code deploys״. בנינו את האתר ב-Framer עם רכיבי קוד מותאמים, וכל קריאה לפעולה מובילה ישר להרשמה ל-FlyCode דרך GitHub, עם הפרטים כבר ממולאים.

![אתר FlyCode, תמונה 3, מאת AGR Studio](https://cdn.sanity.io/images/coun0bog/production/730e122d9bf0cf9d4d23a2a46d24c3b8e102e3a6-2000x1500.png?w=1600&q=82&auto=format)

## השינוי

### מרעיון חדש לקטגוריה חדשה

FlyCode חיפשה שותף לבניית האתר, שיידע להפוך מוצר לא מוכר למשהו ששני קהלים מבינים מיד. [אתר ה-SaaS](https://agr.studio/he/solutions/saas-website-design) עשה בדיוק את זה. ההרשמות לניסיון מתוך הדמו עברו את המקובל בהשקות של כלי פיתוח, וספריית האינטגרציות הפכה לנכס ה-SEO הכי חזק באתר: היא מביאה מפתחים שמחפשים פתרון בדיוק לבעיות ש-FlyCode פותרת.

![אתר FlyCode, תמונה 4, מאת AGR Studio](https://cdn.sanity.io/images/coun0bog/production/5044aeed21d4b965f7289fb796fd5a5378175ea8-2000x1466.png?w=1600&q=82&auto=format)

## עוד עבודות שלנו

-   ![תמונת שער לפרויקט SenseHawk של AGR Studio](https://cdn.sanity.io/images/coun0bog/production/5d688a5013d719644fc24f31cc0dabf70863ce8f-2838x2129.png?w=1400&q=82&auto=format)
    
    ### SenseHawk
    
    קליימטק / SaaS ארגוני
    
    → https://agr.studio/he/projects/sensehawk-enterprise-solar-platform-redesigned-for-impact
    
-   ![תמונת הנושא של Fluxora בעיצוב AGR Studio](https://cdn.sanity.io/images/coun0bog/production/067d0c0da5d481c552d2a53278b14d1c034c2844-2839x2129.png?w=1400&q=82&auto=format)
    
    ### Fluxora
    
    סליקה ומערכות קופה
    
    → https://agr.studio/he/projects/fluxora-redesigned-from-scratch-migrated-to-framer