منتج · نظام تصميم · 2025

Wuilt — أنماط الموقع، لوحة واحدة لتنسيق موقع كامل

محرّك ثيمات يتيح لغير المصمّمين تنسيق موقع كامل — الألوان، الخطوط، الأزرار، الاستمارات، الحركة — من لوحة واحدة هادئة، بمعاينة حيّة لا تكذب أبدًا.

Wuilt (أداة بناء مواقع بلا كود)

Wuilt — أنماط الموقع، لوحة واحدة لتنسيق موقع كامل cover
شكل 01 — Wuilt (أداة بناء مواقع بلا كود)

نظرة عامة

Wuilt أداة بناء مواقع بلا كود يستخدمها أصحاب أعمال صغيرة ومستقلّون ووكالات. Site Styles هو نظام الثيمات الذي صمّمته ليحكم كل رمز بصري في موقع المستخدم — الألوان، الطباعة، الأزرار، حقول الاستمارات، والحركة. يشحن ارتفاعين في سطح واحد: منتقي ثيمات مُنسَّق لمن يريد فقط أن يبدو موقعه صحيحًا، ومحرّر لكل رمز مع طبقة تجاوزات متقدّمة لمن يريد ضبط كل زاوية. كل تغيير يُعاين حيًّا على الصفحة الفعلية، والثيمات المحفوظة عناصر أساسية، وهناك مخارج طوارئ آمنة (تجاهل، إعادة ضبط، حذف) عند كل تفرّع.

المشكلة

تغيير مظهر موقع Wuilt كان يعني تعديل الألوان والخطوط والأزرار والاستمارات في شاشات منفصلة بلا معاينة مشتركة. المبتدئون كانوا مرهَقين بكثرة الخيارات وخائفين من النقر على أي شيء. المستخدمون المتقدّمون كانوا يصطدمون بسقوف عند اللوحات المتقدّمة والتحكّم لكل عنوان، ويعيدون بناء الثيمات نفسها لكل عميل جديد. احتاج النظام لخدمة الفئتين دون الانقسام إلى منتجين — وكان يجب أن يكون كل تغيير مرئيًا، قابلًا للتراجع، وآمنًا.

منهجية العمل

رسمت سبعة تدفّقات نموذجية و11 نقطة تفرّع بحيث لا تتحوّل أي حالة إلى طريق مسدود.

الشاشات

أنماط الموقع — السطح المدخلي. بطاقة الثيم الحالي مع بلاطات للألوان، الطباعة، الأزرار، الاستمارات، والحركة.
01أنماط الموقع — السطح المدخلي. بطاقة الثيم الحالي مع بلاطات للألوان، الطباعة، الأزرار، الاستمارات، والحركة.
تغيير الثيم — ثيمات مميّزة وثيمات المستخدم المحفوظة، مع إجراءات حذف وتطبيق.
02تغيير الثيم — ثيمات مميّزة وثيمات المستخدم المحفوظة، مع إجراءات حذف وتطبيق.
تنسيق الألوان — مجموعات العلامة، الثانوي، الأساسي، والمميّز، كل واحدة بدرجات مولَّدة.
03تنسيق الألوان — مجموعات العلامة، الثانوي، الأساسي، والمميّز، كل واحدة بدرجات مولَّدة.
الإعدادات المتقدّمة — ألوان نص لكل عنوان، أزواج خلفية، وتراكب منتقي ألوان الثيم.
04الإعدادات المتقدّمة — ألوان نص لكل عنوان، أزواج خلفية، وتراكب منتقي ألوان الثيم.
تنسيق الأزرار — تبويبات أساسي / ثانوي / ثالثي مع ضوابط الحشو، الاستدارة، والطباعة.
05تنسيق الأزرار — تبويبات أساسي / ثانوي / ثالثي مع ضوابط الحشو، الاستدارة، والطباعة.
تنسيق الاستمارات — نمط الحقل (حاد / مستدير / كبسولة)، الحجم، التعبئة، ونمط الحدود.
06تنسيق الاستمارات — نمط الحقل (حاد / مستدير / كبسولة)، الحجم، التعبئة، ونمط الحدود.
تنسيق أنماط النص — خطوط العناوين والفقرات مع إعدادات تفصيلية.
07تنسيق أنماط النص — خطوط العناوين والفقرات مع إعدادات تفصيلية.
تنسيق الحركة — تحكّم واحد في سجل حركة الموقع، من بلا تأثير إلى Flex.
08تنسيق الحركة — تحكّم واحد في سجل حركة الموقع، من بلا تأثير إلى Flex.
مكوّن — بطاقة الثيم. معاينة مشتركة للعنوان، الفقرة، اللوحة، والأزرار عبر كل ثيم.
09مكوّن — بطاقة الثيم. معاينة مشتركة للعنوان، الفقرة، اللوحة، والأزرار عبر كل ثيم.
مكوّن — الأزرار. متغيّرات أساسي، ثانوي، وثالثي عبر رموز أحجام S / M / L.
10مكوّن — الأزرار. متغيّرات أساسي، ثانوي، وثالثي عبر رموز أحجام S / M / L.
مكوّن — حقول الاستمارة. أشكال حاد / مستدير / كبسولة، ثلاثة أحجام، حالتا افتراضي وتركيز.
11مكوّن — حقول الاستمارة. أشكال حاد / مستدير / كبسولة، ثلاثة أحجام، حالتا افتراضي وتركيز.
مكوّن — القائمة المنسدلة. حالات افتراضية، مفتوحة، وتركيز مستخدَمة عبر كل لوحة محرّر.
12مكوّن — القائمة المنسدلة. حالات افتراضية، مفتوحة، وتركيز مستخدَمة عبر كل لوحة محرّر.
مكوّن — منتقي الألوان. نافذة لون مخصّص بتدرّج لوني، شفافية، إدخال hex، وتطبيق / إلغاء.
13مكوّن — منتقي الألوان. نافذة لون مخصّص بتدرّج لوني، شفافية، إدخال hex، وتطبيق / إلغاء.
مكوّن — نافذة التأكيد. نمط مشترك لتدفّقات التطبيق، الحذف، وتجاهل التغييرات.
14مكوّن — نافذة التأكيد. نمط مشترك لتدفّقات التطبيق، الحذف، وتجاهل التغييرات.