صفحة تسجيل دخول بوثر الإنفتاح والإنغلاق
تفاصيل العمل
الصورة تُظهر نموذج "تسجيل دخول" (Login Form) على خلفية متدرجة اللون من الأزرق إلى البنفسجي، بتصميم بسيط ومباشر. إليك وصفًا تفصيليًا:
---
وصف التصميم الثاني لواجهة تسجيل الدخول
الخلفية:
خلفية متدرجة gradient تبدأ من اللون الأزرق في الأعلى إلى البنفسجي في الأسفل، مما يعطي شكلًا أنيقًا وعصريًا.
الألوان مريحة للعين وتوحي بالاحتراف والهدوء.
? مربع تسجيل الدخول:
عبارة عن مستطيل أبيض بزوايا دائرية (Border Radius كبير)، وهو في وسط الشاشة، مما يجذب التركيز.
يحتوي على:
عنوان: "تسجيل الدخول" مكتوب بخط أزرق في الأعلى، مما يجعله واضحًا ومرئيًا جيدًا.
حقلان للإدخال:
الأول: "اسم المستخدم".
الثاني: "كلمة المرور".
كلا الحقلين بعرض مناسب، لكنه قد يكون باهتًا قليلًا وغير واضح بسبب قلة التباين.
زر الدخول:
الزر بيضاوي الشكل (مستدير جدًا)، باللون البنفسجي الغامق أو الأزرق الداكن.
بداخله النص "دخول" باللون الأبيض أو الرمادي الفاتح.
---
مميزات التصميم:
استخدام ألوان متناسقة (أزرق - بنفسجي - أبيض).
وجود زوايا ناعمة يعطي شعورًا بالحداثة والنعومة.
التصميم بسيط وسهل الفهم للمستخدم.
---
ملاحظات لتحسين التصميم (اقتراحات تطوير):
1. زيادة التباين بين الحقول والخلفية البيضاء، لجعلها أوضح (مثل وضع حدود رمادية خفيفة أو ظل).
2. يمكن إضافة:
خيار "نسيت كلمة المرور؟".
رابط "إنشاء حساب جديد".
تسجيل دخول بواسطة Google أو Facebook.
3. تحسين الخطوط وتوسيطها بشكل دقيق (line height - spacing).
---
هذا التصميم ممتاز كبداية لواجهة مستخدم بسيطة، ويُظهر فهمك لفكرة التركيز على الوضوح والبساطة.
هل تحب أساعدك تكتب الكود لهذا النموذج (HTML + CSS) أو تطور نسخة متجاوبة له؟