חוויה דיגיטלית עם תהודה רגשית עבור מותג וולנס סנסורי
לקוח
פיל-דיס
תעשייה
וולנס ולייף סטייל
שירותים
עיצוב אתרים, פיתוח ב-Framer, חוויות אינטראקטיביות (Ambient Interactions), מוכן לאי-קומרס
ארסנל טכנולוגי
Framer, אנימציות CSS, מערכות ניהול תוכן (CMS), אינטראקציות גלילה
שנה
2024
כיצד סטודיו AGR יצר עבור FeelThis אתר וולנס חווייתי וסוחף, עם אנימציות אמביינט, שפת עיצוב חושית ואינטראקציות קשובות שמבוססות על Framer.
FeelThis הוא מותג wellness המתרכז בחוויות חושיות – מוצרים שעוצבו במיוחד כדי להפעיל את חושי המגע והריח, ולעודד קשיבות (mindfulness). האתר שלהם לא יכול היה רק לתאר את החוויות הללו; הוא היה חייב לעורר אותן באופן דיגיטלי. כל אינטראקציה, כל מעבר וכל בחירת צבע היו חייבים לתרום לתחושה של כוונה רגועה וממוקדת.
האתגר האמיתי היה לייצר חוויה חושית סוחפת (immersive) בתוך המגבלות של דפדפן אינטרנט – ללא VR וללא חומרה מותאמת אישית, אלא אך ורק באמצעות עיצוב קפדני שגורם למבקרים להאט את הקצב, להתחבר לתוכן, ולא פשוט לרפרף ולנטוש.
מחקר סנסורי של עיצוב (Sensory Design)
חקרנו כיצד מותגי ספא יוקרתיים, אפליקציות מדיטציה ובתי בישום עילית מעצבים את החוויות הדיגיטליות שלהם. המכנה המשותף שעלה: קצב איטי יותר. חוויות דיגיטליות בתחום הוולנס מצליחות כשהן מתנגדות לתחושת הדחיפות המובנית של האינטרנט, ומציעות אנימציות איטיות יותר, יותר שטח לבן (whitespace), מעברים רכים יותר ופלטות צבעים מעודנות.
מיפינו את חוויית המבקר כך שתשקף במדויק את חוויית המוצר: שלב הכניסה לאתר צריך להרגיש כמו כניסה למרחב שקט ורגוע, הדפדפדף והחיפוש צריכים להרגיש נינוחים וללא חיפזון, ותהליך הרכישה צריך להרגיש כמו בחירה מושכלת ושקולה ולא כמו דחף רגע.
שפת עיצוב אמביינטית
המערכת החזותית עושה שימוש בגוונים רכים וחמים המופקים מחומרים טבעיים כמו אבן, חימר, פשתן וטחב. הטיפוגרפיה אלגנטית ומרווחת במיוחד. האנימציות איטיות במכוון – אלמנטים מופיעים בהדרגה (fade in) לאורך 800 מילי-שניות במקום 300 מילי-שניות הרגילים, אפקט הגלילה (parallax) נע במהירות של 0.3x במקום 0.5x, ומעברים במצב ריחוף (hover) נמשכים 400 מילי-שניות.
בחירות התזמון הללו הן מכוונות ושיטתיות: כל משך אנימציה הוא כפולה של 200 מילי-שניות, מה שיוצר תחושה קצבית ועקבית המשדרת באופן תת-מודע תשומת לב לפרטים וייחודיות.
פרדוקס הביצועים
אנימציות שמרגישות נינוחות ואיטיות עדיין דורשות דפים שנטענים במהירות שיא. ביצענו אופטימיזציה לכל נכס דיגיטלי: תמונות בפורמט AVIF עם גיבוי של WebP, פונטים מצומצמים רק לתווים שבשימוש, ואנימציות CSS על גבי מאפיינים מאיצי GPU בלבד. התוצאה היא אתר שמשדר רוגע ונינוחות, אך בפועל נטען מהר יותר מרוב אתרי המתחרים.
מערכת ה-CMS של המוצר תומכת בתוכן עשיר, סיפורי רכיבים, טקסי שימוש ותיאורים חושיים – ומעניקה ל-FeelThis את הכלים המושלמים למכור באמצעות סטוריטלינג סוחף, במקום רק רשימת מפרטים.
u05eau05d4u05d5u05d5u05d3u05ea u05d4u05deu05d5u05eau05d2
u05d4u05d0u05eau05e8 u05d4u05e4u05da u05dcu05d4u05deu05e9u05da u05d9u05e9u05d9u05e8 u05e9u05dc u05d4u05d7u05d5u05d5u05d9u05d4 u05d4u05deu05d5u05e6u05e8u05d9u05ea. u05d4u05deu05d1u05e7u05e8u05d9u05dd u05d1u05d9u05dcu05d5 u05d1u05d0u05eau05e8 u05d6u05deu05df u05e8u05d1 u05d1u05d0u05d5u05e4u05df u05deu05e9u05deu05e2u05d5u05eau05d9 u05deu05d4u05deu05e7u05d5u05d1u05dc u05d1u05e2u05e0u05e3, u05dcu05d0 u05deu05eau05d5u05da u05d1u05dcu05d1u05d5u05dc, u05d0u05dcu05d0 u05deu05e4u05e0u05d9 u05e9u05d4u05d7u05d5u05d5u05d9u05d4 u05e2u05e6u05deu05d4 u05eau05deu05dbu05d4 u05d5u05e2u05d5u05d3u05d3u05d4 u05e9u05d9u05d5u05d8 u05e0u05d9u05d7u05d5u05d7 u05d5u05deu05e2u05deu05d9u05e7. u05d2u05d9u05e9u05ea u05d4u05e2u05d9u05e6u05d5u05d1 u05d4u05d0u05eau05e1u05eau05d8u05d9u05ea u05d5u05d4u05d0u05d5u05d5u05d9u05e8u05eau05d9u05ea u05d4u05eau05d0u05d9u05deu05d4 u05d1u05d0u05d5u05e4u05df u05deu05d5u05e9u05dcu05dd u05dcu05e2u05e8u05dbu05d9 u05d4u05deu05d5u05eau05d2 u05e9u05dc FeelThis, u05d5u05d9u05e6u05e8u05d4 u05e1u05d9u05e0u05e8u05d2u05d9u05d4 u05deu05dcu05d0u05d4 u05d1u05d9u05df u05d4u05deu05e4u05d2u05e9 u05d4u05d3u05d9u05d2u05d9u05eau05dcu05d9 u05dcu05e4u05d9u05d4 u05d4u05e4u05d9u05d6u05d9.
בסיס של 200 מילישניות
מערכת אנימציה
פחות מ-2 שניות
טעינת עמוד
4 שבועות
ציר זמן
