סטודיו תוכן · מיתוג ואתר
DOT
סטודיו תוכן ותנועה שנראה כמו העבודה שהוא מוכר — אתר שבו הטיפוגרפיה זזה, הווידאו נושם, והמותג מוכיח את עצמו עוד לפני שקראת מילה.
סקירה
סטודיו תוכן נמדד בסטנדרט אכזרי: האתר שלו הוא תיק העבודות שלו. אם האתר נראה כמו תבנית, אף אחד לא יאמין שהסטודיו יודע לביים. DOT הוא סטודיו וידאו, סטילס ותלת-ממד, והבריף היה לבנות לו נוכחות דיגיטלית שהיא בעצמה הוכחת יכולת — אתר שבו כל תנועה מכוונת, ושבו הסטודיו מדגים בכל גלילה את מה שהוא מוכר ללקוחות. הפתרון היה להפוך את הלוגו עצמו למנוע: שלוש אותיות שמסתובבות בלולאה מדורגת והופכות סימן סטטי לסצנה חיה.
המטרהשהמבקר יבין שהסטודיו יודע לביים תנועה — מהתנועה של האתר עצמו, ולא מרשימת שירותים.
האתגר
רוב אתרי הסטודיו נופלים לאותה מלכודת: גריד של תמונות ממוזערות ורשימת לקוחות. זה מציג עבודה, אבל לא מוכיח יכולת. האתגר היה לבנות אתר שהוא עצמו פיסת עבודה — מספיק נועז כדי לשדר ביטחון, אבל מרוסן מספיק כדי שהעבודות של הלקוחות יישארו הגיבור ולא ייבלעו באפקטים.
הגישה
הלוגו כמנוע
שלוש האותיות נפרסו לצלב וכל אחת מסתובבת בלולאה מדורגת. הסימן קריא רק בחלק מהזמן — וזה בדיוק מה שמחזיק את העין.
וידאו כרקע, לא כגלריה
העבודות רצות מאחורי הטיפוגרפיה במקום בתוך מסגרות. הסטודיו מציג את החומר שלו כאווירה, לא כקטלוג.
ליים אחד על דיו
פלטה של שני צבעים בלבד. הריסון הזה הוא מה שהופך את הליים לזיהוי מותגי ולא לעוד צבע אקצנט.
עברית שמובילה
RTL מלא שנבנה מההתחלה — כולל היפוך כיווני המרקיזות והסטגר, כדי שהטקסט העברי לא יזחל לכיוון הלא נכון.
מבט מהאתר
”סטודיו תנועה לא צריך לספר שהוא יודע לביים. האתר שלו צריך להוכיח את זה בגלילה הראשונה.“
החלטות עיצוב מרכזיות
הווידאו מתכווץ למסגרת
האתר נפתח במסך מלא ומתכווץ בגלילה אל חלון ממוסגר. המעבר הזה הוא הרגע שבו הסטודיו אומר "זה החומר שלי" ואז מזמין להיכנס פנימה.
פרלקסה של 0.45
ה-Hero נע בקצב חלקי מול המקטע שמחליק מעליו. היחס המדויק הזה יוצר עומק בלי שהתנועה תיראה כמו אפקט — הוא מורגש ולא נצפה.
מסגרת קבועה, תוכן נע
קצה התוכן נשאר במקומו לאורך כל הגלילה והתוכן זורם בתוכו. זה נותן לאתר תחושה של מסך עריכה — רמז לעולם שממנו הסטודיו מגיע.
מספרים בלי כותרות
ויתרתי על תוויות קטגוריה ומספור מקטעים. הם משדרים תבנית, והמותג הזה צריך לשדר החלטה.
איך זה נבנה
- שלב 01
מיצוב ושפה
הגדרתי את DOT כסטודיו שמוכר ביום ולא נפח הפקה — ומשם נגזרו הליים, הדיו והטון המרוסן.
- שלב 02
הסימן והתנועה
בניתי את צלב-האותיות ואת מקצב הסיבוב שלו — הרכיב שממנו נגזרה כל שפת התנועה של האתר.
- שלב 03
בנייה
HTML יחיד עם GSAP, ScrollTrigger ו-Lenis. כל אנימציה נכתבה ידנית, בלי תבניות מוכנות.
- שלב 04
שלוש שכבות רוחב
דסקטופ, טאבלט ומובייל — כל אחד עם פריסת בנטו משלו, כדי שהעבודות ייראו נכון בכל מסך.
התוצאה
- אתר סטודיו שהוא בעצמו הוכחת יכולת, ולא קטלוג של עבודות.
- סימן מותג שהוא רכיב חי — הלוגו עובד כאנימציה ולא כתמונה.
- שפת תנועה עקבית שחוזרת בכל מקטע, מהפתיחה ועד הסגירה.
- RTL מלא ושלוש שכבות רספונסיביות שנבנו כל אחת בנפרד.
מה כלול בפרויקט
- מיצוב ושפת מותג
- שפה ויזואלית (צבע, טיפוגרפיה, טון)
- קופירייטינג בעברית
- עיצוב ובניית האתר המלא
- שפת תנועה ואנימציות גלילה
- RTL מלא ורספונסיביות
הפרויקט הבא
לכל הפרויקטים ↖︎פרויקט קונספט. הכיוון הוויזואלי נשען על שפת העיצוב של HOY — House of Yellow.