صفحة هبوط لموقع كورسات بالوضع الداكن - Landing Page
الوصف
يستعرض هذا العمل تصميم قسمين رئيسيين لصفحة هبوط (Landing Page) بتوجه بصري عصري يعتمد على الـ Dark Mode ودرجات اللون البنفسجي، مع التركيز بشكل أساسي على الاستخدام المتقدم لأداة الـ Auto Layout في Figma لضمان استجابة (Responsiveness) وترتيب مثالي للعناصر.
- السيكشن الأول: صفحة تسجيل الدخول (Sign-in Page)
المفهوم: تصميم شاشة تسجيل دخول (Login Screen) بسيطة وأنيقة (Minimalist) تتوسط الصفحة.
استخدام Auto Layout: تم استخدام الـ Auto Layout لضمان توسيط النموذج (Form) بشكل مثالي، وللحفاظ على مسافات متساوية ومنظمة بين عناصر الإدخال (Email, Password)، والأزرار (Sign-in, Google)، ونصوص الـ "نسيت كلمة المرور".
- السيكشن الثاني: بطاقات الدورات (Course Cards Section)
المفهوم: تصميم قسم لعرض البطاقات (Cards) الخاصة بالدورات التدريبية المتاحة، مع تفاصيل كل دورة.
استخدام Auto Layout: تم الاعتماد كلياً على الـ Auto Layout في بناء البطاقات الثلاث:
لضمان ترتيب المحتوى الداخلي لكل بطاقة (الصورة، الوسوم، العنوان، المدة، النص الوصفي، قائمة المشاركين، والأزرار).
لتوزيع البطاقات الثلاث بشكل متساوي ومتجاوب داخل حاوية واحدة (Container)، مما يسهل عملية تعديل المحتوى أو زيادة عدد البطاقات دون الإخلال بالهيكل العام.
- أهلاً بك.. أنا مصممة واجهات وتجربة مستخدم (UI/UX Designer)، ومهندسة حاسبات ونظم تحكم. - من خلفيتي الهندسية، أتعامل مع التصميم كعملية تحليلية وحل ذكي للمشكلات قبل أن يكون مجرد شكل جمالي. أدمج التفكير المنظم مع الإبداع البصري لأحول الأفكار المعقدة إلى منتجات رقمية بسيطة، جذابة، وفعالة؛ إيماناً بمبدأ: "Design for humans, not just screens" - ماذا أقدم لك: تصميم واجهات تطبيقات الموبايل (Mobile App Design - iOS/Android): بناء تجربة مستخدم سلسة وعصرية. تصميم مواقع الويب وصفحات الهبوط (Web Design & Landing Pages): واجهات احترافية متجاوبة مع كافة الشاشات. رسم المخططات الهيكلية (Wireframing): بناء الهيكل البنائي لضمان ترتيب المحتوى ومنطقية الاستخدام. بناء النماذج التفاعلية (Interactive Prototyping): محاكاة واقعية للتطبيق قبل البدء في مرحلة البرمجة. تحليل وتطوير تجربة المستخدم (UX Research): دراسة سلوك المستخدم لضمان سهولة الوصول والتعامل. - منهجية العمل والأدوات: أضمن لك جودة العمل عبر خطوات مدروسة تبدأ بـ تحليل المتطلبات، ثم رسم الـ Wireframes، وصولاً إلى بناء النماذج التفاعلية واختيار الهوية البصرية المناسبة. - الأدوات الاحترافية المستخدمة: Figma | Adobe XD | Adobe Photoshop | Illustrator - لماذا تختار التعامل معي؟ لأن هدفي هو الربط بين الابتكار وأهداف مشروعك، مما يضمن لك عملاً يتميز بالتفرد، ويعزز من ربحية العمل، ويقدم حلولاً تركز على المستخدم وتمنحك راحة البال. يسعدني تواصلك معي الآن لمناقشة تفاصيل مشروعك القادم وبدء رحلة النجاح معاً!