01 — هيرو حر بتكوين كلاسيكي

العنوان والوصف والزرار كل واحد منهم عنصر مستقل يمكن تحريكه وحده بدون الالتزام بقالب الهيرو القديم.

02 — فصل النص عن العنصر البصري

النص موجود في اليمين، والأيقونة عنصر مستقل في مكان مختلف تمامًا داخل نفس نظام الإحداثيات.

03 — عناصر إحصائية موزعة

كل رقم له مكانه وحجمه، وليسوا مضطرين يدخلوا داخل Stack واحد أو قالب ثابت.

14

سنة خبرة

+90

صفحة خدمة

1

نظام تصميم

04 — Badge مستقل ومائل

الشارة ليست جزءًا من النص، وتقدر تدوّرها أو تحركها وحدها بدون تأثير على العنوان.

تصميم حر

مثل Wix

05 — قص العنصر خارج حدود الهيرو

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

Negative X/Y

يجب أن يتم قصي داخل الهيرو

06 — عنصر تحت ارتفاع الهيرو

العنصر الأحمر موضوع بعد 105svh؛ لا يجب أن يظهر فوق السكشن التالي لأن الأب يعمل clipping.

Outside Bottom

مكانه خارج ارتفاع الهيرو

08 — العنوان لا يجر الزر معه

مفيد لما تحتاج تعمل تكوين بصري واسع: العنوان في الأعلى، والـ CTA في أسفل الشاشة.

09 — أكثر من زر في شريط سفلي

الأزرار نفسها داخل Stack، والـ Stack كله عنصر حر له مكان مستقل داخل الهيرو.

10 — توزيع مختلف حسب الاتجاه

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

نفس العنصر

لكن بإحداثيات Portrait مختلفة

11 — Watermark مستقل

أيقونة ضخمة شفافة فوق الخلفية، ولا تتبع العنوان أو الوصف.

12 — CardsGr داخل FreeHero

يمكن وضع مجموعة كروت كاملة داخل عنصر واحد حر، مع التحكم في مكان المجموعة كلها.

13 — لوحة عرض سعر

السعر أو العرض الخاص يمكن وضعه في ركن مستقل، بعيد عن النص الرئيسي.

14 — خطوات متناثرة

كل خطوة عنصر مستقل، فتقدر تعمل مسار بصري بدل قائمة رأسية تقليدية.

01

استلام المطلوب

02

إعداد الرسم

03

التسليم

15 — CTA عائم في الركن

زر الاتصال لا يحتاج أن يكون أسفل النص، ويمكن تثبيته في أي ركن داخل الهيرو.

16 — فصل المعلومة الثانوية

المعلومة الصغيرة ممكن تتحط بعيد عن العنوان، كتعليق بصري أو ملاحظة في أسفل التصميم.

ملاحظة مستقلة

تتحرك وحدها دون التأثير على العنوان الرئيسي

17 — تكوين منتج/خامة

استخدام صورة مستقلة مع عنوان وزر، وكل جزء قابل للتموضع.

18 — تكوين قطري

العناصر المائلة ممكن تعمل حركة بصرية بدون أن يكون الودجت الأب عارف محتوى العنصر.

Diagonal Label

عنصر مستقل مائل

Second Line

نفس اتجاه التصميم

19 — عناصر أركان

يمكن تثبيت شارات أو رسائل قصيرة في أركان مختلفة من الهيرو كطبقات مستقلة.

Top Right

Top Left

Bottom Right

Bottom Left

20 — صفحة هيرو مثل Canvas

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

حر

مكان + حجم + طبقة