AG
→ الأعمال

دراسة حالة — 05

AB Interiors

الدور
بناء ووردبريس
البناء
ووردبريس، إليمنتور — شغل فردي
النوع
استوديو تصميم داخلي وخارجي ولاندسكيب
التركيز
قالب واحد بيتكرر على تلات هويات خدمة
هيرو الصفحة الرئيسية لـ AB Interiors: عنوان Designing Spaces That Inspire Living فوق صورة غرفة نوم داكنة، مع زر Get Free Consultation والتنقل الكامل
01 التحدي

تلات تخصصات تصميم، استوديو واحد، سكرول واحد.

AB Interiors بتبيع التصميم الداخلي، الخارجي، واللاندسكيب كتلات خدمات منفصلة، بمعرض صور فيه أكتر من 50 صورة للعقارات وفيديو تعريفي من عميل حقيقي — محتوى أوسع بكتير من موقع استوديو خدمة واحدة، وطريقة سهلة إنه يتحول لسكرول طويل من الرندرات مش متمايز.

المهمة هنا كانت البناء نفسه: تحويل المحتوى والصور ده لموقع ووردبريس وإليمنتور شغال، فردي — بما في ذلك القرارات الهيكلية اللي المحتوى نفسه مكانش حاسمها ليا.

02 التفكير

كل خدمة ليها هويتها، من غير تلات قوالب صفحات مختلفة.

مع تلات خدمات بتتشارك صفحة رئيسية واحدة، أسرع طريقة كانت هتخليهم كلهم زي بعض هي تكرار نفس كارت واحد. بدل ده، كل خدمة فضلت على نفس فكرة شريط الصور مع كارت العرض، بس العنصر اللي "عايم" بيختلف — عشان التلات أقسام تحس إنها قرايب من بعض، مش نسخ مكررة.

نمط واحد، تلات صيغ

التصميم الداخلي بيستخدم قايمة عادية، اللاندسكيب كارت بلونين متداخل، والتصميم الخارجي كارت قايمة عايم — فكرة واحدة، تلات تراكيب مختلفة.

الدليل قبل العرض

شريط أرقام جامد — 250 مشروع، 180 عميل، 10 سنين، 80 تصميم — موجود على طول بعد مقدمة الاستوديو، قبل أي تفاصيل خدمة.

أسماء ناس، مش فورم

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

03 التوجه البصري

لون برونزي دافي على خلفيتين نيوترال مختلفتين، مش واحدة.

العناوين، الأزرار، وأرقام الإحصائيات كلها بتتشارك نفس اللون البرونزي الدافي، بس الخلفيات بتتبادل بين أزرق-رمادي بارد وبين كريمي عاجي دافي من قسم لقسم — عشان الصفحة تتنفس بين الأقسام بدل ما تحس إنها بلوك واحد مسطح بنفس لون الخلفية.

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

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

أساسي#8A6239
حبر#303133
أبيض#FFFFFF
سطح أزرق#F0F5F9
سطح كريمي#FFF8F0
نص#575B5E
أزرق مساعد#33679F

عنوان إنجليزي

Playfair Display

نص إنجليزي

Poppins

الألوان والخطوط مأخوذة مباشرة من الموقع الفعلي — مفيش ملفات مصدر اتوفرت للمشروع ده.

04 على الأجهزة المختلفة

الكارت العايم بيتحول لبلوك مكدس.

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

قسم Exterior Design على الديسكتوب: كارت معلومات كريمي بخمس عناصر قايمة بأيقونات عايم فوق ومتداخل مع الحافة اليسرى لشريط من تلات صور لفلل خارجية
الديسكتوب — الكارت بيتداخل مع شريط الصور، متدرج زي صفحة مجلة.
قسم Exterior Design على الموبايل: نفس كارت المعلومات الكريمي مكدس بعرض كامل فوق شريط التلات صور، من غير أي تداخل
الموبايل — نفس الكارت بينقل لفوق الصور، عرض كامل، من غير تداخل.
05 البناء

اتبنى بشكل فردي بالووردبريس والإليمنتور، من صور الرندر لمعرض فيه أكتر من 50 صورة.

أنا اللي عملت البناء بالكامل: هيكلة تلات أقسام الخدمة كأنماط إليمنتور قابلة لإعادة الاستخدام، وترتيب معرض صور العقارات على شكل ماسونري من صور الرندر المعمارية الخاصة بالعميل، وربط أقسام الإحصائيات، آراء العملاء، والنشرة البريدية بثيم واحد متماسك.

شاشة الهيرو على الموبايل بصورة مختلفة عن الديسكتوب: تراس خارجي فيه نخلة، خلف نفس العنوان والنص الفرعي وزر Get Free Consultation
صورة الهيرو بتتغير حسب الجهاز — غرفة نوم داخلية على الديسكتوب، تراس خارجي على الموبايل — انطباعين أوليين مختلفين خلف نفس العنوان.
06 اللي بيميزه

شوية قرارات بتحس إنها مقصودة، مش افتراضية.

بالنظر له بعين الـUX، تلات قرارات بتشتغل أكتر من اللي تبدو عليه:

صورة هيرو مختلفة لكل جهاز

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

رندرات حقيقية، مش صور جاهزة

كل قسم خدمة والمعرض الكامل للعقارات بيستخدموا صور الرندر المعمارية الخاصة بالعميل نفسه، عشان المعرض يكون في نفس الوقت دليل على شغل التصميم ذات نفسه.

ناس، مش طابور تذاكر

أسماء المؤسسين الاتنين، مسمياتهم، إيميلاتهم المباشرة، وأرقام تليفوناتهم موجودة في الدعوة الأخيرة للتواصل، قبل آراء العملاء — استوديو حاطط اسمه ورا النتيجة.

07 الصقل

المعرض فضل عرض مختارات، مش الكتالوج بالكامل.

معرض صور العقارات مجموعة مختارة من الرندرات في شبكة ماسونري واحدة بدل كتالوج مقسم على صفحات — كفاية عشان تثبت تنوع الشغل بين التصميم الداخلي، الخارجي، واللاندسكيب من غير ما تحول الصفحة الرئيسية لمكتبة صور الزائر محتاج يبحث فيها.

08 النتيجة

تلات خدمات، استوديو واحد، بيتقرا بنظرة واحدة.

أي خدمة كان الزائر جاي عشانها، نفس الباليت البرونزي على النيوترال، نفس نمط شريط الصور، ونفس شريط الإحصائيات موجودين على طول — هوية استوديو واحدة شايلة تلات أنواع مختلفة من شغل التصميم.