العميل: Suhail Ventures
القطاع: صندوق استثماري رأس مالي جريء (Venture Capital) في المرحلة المبكرة — يدعم الشركات الناشئة التقنية سريعة النمو في منطقة الشرق الأوسط وشمال أفريقيا
ما التحدي الذي واجهته Suhail Ventures؟
Suhail Ventures صندوق استثماري سعودي متخصص في تمويل الشركات الناشئة التقنية في مراحلها المبكرة، بشراكات مع لاعبين رئيسيين في السوق الإقليمي. الفريق كان يملك تصميم Figma احترافي جاهز — لكن كان يحتاج لتحويله إلى موقع فعلي يعمل، بأداء عالٍ، وبتجربة متطابقة تمامًا مع رؤية المصمم.
المشاكل التي كانت تواجه المشروع قبل البداية
- تصميم Figma متكامل وجاهز، لكن بلا أي تنفيذ برمجي فعلي على أرض الواقع
- الحاجة لموقع يخدم جمهورين مختلفين تمامًا: مؤسسين ناطقين بالعربية وشركاء دوليين ناطقين بالإنجليزية
- ضرورة أن يعمل الموقع بسلاسة تامة على كل الأجهزة — من شاشات الديسكتوب الكبيرة إلى الموبايل، دون أي فقد في جودة التصميم الأصلي
- تعقيد تقني في تحويل تفاصيل Figma الدقيقة (Typography، المسافات، الحركات، التفاعلات) إلى كود WordPress حقيقي بدون أي انحراف عن التصميم
- الحاجة لبنية تحتية مرنة (CMS) تتيح لفريق Suhail تحديث المحتوى — الشركاء، فريق العمل، المدونة — دون العودة للمطور في كل مرة
كيف فكرنا في الحل؟
قبل أي سطر كود، درسنا ملف Figma بالكامل — كل Component، كل حالة تفاعل، وكل Breakpoint — لضمان أن الموقع النهائي طبق الأصل من رؤية التصميم، وليس مجرد نسخة تقريبية منه. المحور الأول — تحويل دقيق من Figma إلى WordPressالمحور الأول — تحويل دقيق من Figma إلى WordPress
لم نتعامل مع التصميم كمرجع عام، بل كمواصفة دقيقة: الألوان، المسافات، الخطوط (Typography Scale)، وحالات الـ Hover والـ Interaction — كل تفصيلة تم تنفيذها بأمانة كاملة داخل بيئة WordPress، باستخدام Elementor كمحرك بناء مرن يسمح لفريق العميل بالتحكم لاحقًا.المحور الثاني — بنية Responsive حقيقية وليست تقريبية
الكثير من التحويلات من Figma تُهمل حالات الشاشات المتوسطة (Tablets) أو تكسر التصميم عند نقاط انتقال معينة. بنينا كل قسم في الموقع (Hero، Why Suhail، Business Partners، Team، FAQ) ليتكيف بذكاء عبر جميع الأحجام — موبايل، تابلت، ديسكتوب — دون فقد التوازن البصري للتصميم الأصلي.المحور الثالث — نظام ثنائي اللغة (عربي/إنجليزي) متكامل
بما أن جمهور الصندوق يضم مؤسسين وشركاء عربًا وأجانب، بنينا الموقع بنظام تبديل لغة كامل (EN/AR) يشمل انعكاس الاتجاه (RTL/LTR) بشكل صحيح لكل عنصر في الصفحة — من القوائم إلى الأزرار إلى نماذج التقديم — بحيث تكون تجربة المستخدم العربي مطابقة تمامًا في الجودة لتجربة المستخدم الإنجليزي، وليست ترجمة سطحية فوق تصميم مصمم للإنجليزية فقط.التنفيذ — قائمة كاملة بما أنجزناه
أولاً — تحويل التصميم والبنية التقنية
- تحويل ملف Figma الكامل إلى موقع WordPress حي، صفحة بصفحة وقسم بقسم
- بناء الصفحة الرئيسية بكل أقسامها: Hero، Why Suhail، Business Partners، المدونة، فريق العمل، معايير الاستثمار، الأسئلة الشائعة
- بناء صفحات فرعية: Portfolio، Business Partners، Blog، Contact Us، Apply Now
- تصميم Mobile-First لضمان تجربة سلسة لأي مؤسس يتصفح الموقع من هاتفه أثناء التنقل
ثانياً — التجاوب الكامل مع الأجهزة (Responsive Design)
- اختبار وتنفيذ كل قسم عبر نقاط انتقال متعددة (Desktop / Tablet / Mobile)
- الحفاظ على تسلسل هرمي بصري صحيح للمحتوى عند تصغير الشاشة (Hero، ثم القيم، ثم الشركاء، ثم الفريق)
- شبكة (Grid) شعارات الشركاء مصممة لتتكيف تلقائيًا من عرض أفقي كامل على الديسكتوب إلى شبكة مضغوطة على الموبايل
- أزرار الدعوة لاتخاذ إجراء (Get Funded) واضحة وسهلة اللمس على كل حجم شاشة
ثالثاً — النظام ثنائي اللغة
- تفعيل التبديل الكامل بين النسخة الإنجليزية والعربية عبر نظام ترجمة متكامل
- ضبط اتجاه الصفحة (RTL) بشكل كامل للنسخة العربية — القوائم، الأيقونات، محاذاة النصوص، والنماذج
- ترجمة كل عناصر الموقع: الأقسام الرئيسية، الأسئلة الشائعة، بطاقات فريق العمل، ونموذج النشرة البريدية
- تجربة تنقل موحدة بين اللغتين دون فقد أي وظيفة أو عنصر تصميمي
رابعاً — لوحة تحكم مرنة لفريق العميل
- بناء الموقع بمحرر Elementor ليتمكن فريق Suhail من تحديث الشركاء، أعضاء الفريق، والمدونة بأنفسهم
- تنظيم أقسام قابلة لإعادة الترتيب دون الحاجة لتدخل تقني مستمر
- نموذج “Apply Now” و”Newsletter” مربوطين وجاهزين للاستخدام الفعلي
- موقع حي مطابق بدقة لتصميم Figma الأصلي، بلا فروقات بصرية ملحوظة
- تجربة متجاوبة متكاملة عبر كل الأجهزة دون أي كسر في التصميم
- موقع ثنائي اللغة يخدم كلا الجمهورين — المؤسسين العرب والشركاء الدوليين — بنفس مستوى الجودة
- بنية تحتية مرنة تتيح لفريق Suhail إدارة المحتوى دون الاعتماد المستمر على مطور خارجي
