كل المشاريع

تصميم UI/UX

Butter

Butter: شرح محرر فيديو قائم على الكتل في صفحة واحدة

موقع منتج لمحرر فيديو في المتصفح مبني من كتل قابلة لإعادة الاستخدام. تقود صورة ثلاثية الأبعاد مرحة لميدالية مفاتيح إلى مكتبة كتل وثلاث طرق للإنشاء ومعرض قوالب وإضافة Figma.

الصفحة الرئيسية لـ Butter، الشاشة الأولىbutter.video
المنتج

ما يشرحه الموقع

يُوصف Butter بأنه محرر فيديو عبر الإنترنت يشغّل خطه الزمني كتلًا قابلة لإعادة الاستخدام: رسومًا متحركة ونصوصًا حركية وتأثيرات ثلاثية الأبعاد وتظليلًا، يمكن ضبطها بمؤشرات ومنزلقات ونصوص أوامر أو شيفرة.

تسير الصفحة من الاستيراد إلى النشر، ثم تعرض ثلاث طرق للإنشاء (إعادة المزج والوصف والبرمجة) وتغيير الأحجام للصيغ الشائعة ومجموعات الأدوات للفرق.

التصميم والتجربة

فاتح ورحب ومتحرك

تضع الصفحة الفاتحة جسمًا ثلاثي الأبعاد كبيرًا فوق عنوان ضخم وزر داكن واحد. وتتناوب الأقسام القصيرة التالية بين لقطات الشاشة وعناصر تحكم متحركة ومعرض قوالب أفقي مقسّم بحسب المجال.

تُظهر حركات صغيرة متكررة عمل المؤشرات والمنزلقات، فترى فكرة الكتل القابلة للضبط بدل أن تقرأها.

البناء وقابلية الاكتشاف

موقع منفصل عن التطبيق

تأتي الصور من نظام Prismic لإدارة المحتوى، ويعيش المحرر نفسه على نطاق فرعي منفصل بصفحات دخول وقوالب وكتل خاصة. ويرتبط الموقع بإضافة Figma وبمدونة وحسابات اجتماعية.

المحتوى بالإنجليزية فقط، مع صفحة أسعار ودعوة لتجربة مجانية.

تفاصيل لافتة

  • صورة ثلاثية الأبعاد لميدالية مفاتيح
  • عناصر تحكم متحركة للكتل
  • معرض قوالب بحسب الفئة
  • رابط إضافة Figma

مشاريع أخرى

هل أنت مستعد لبناء منتج آمن؟

حدّثنا عن منتجك، وسنرد بخطة واضحة.

ابدأ مشروعك

نود استخدام Microsoft Clarity لفهم كيف يستخدم الزوار الموقع حتى نحسّنه. يضع ملفات ارتباط ويبقى متوقفًا ما لم توافق. سياسة ملفات الارتباط