Modern Login

صفحة مصنوعة بواسطة HTML, CSS, JavaScript

توحي بالحداثية و مستقبل البرمجة

Web design-تصميم موقع

مكون من صفحة واحد

صفحة تسجيل الدخول:

التخطيط: يتم وضع نموذج تسجيل الدخول على الجانب الأيسر من الواجهة، بتصميم بسيط وواضح. يحتوي الجانب الأيمن على رسالة ترحيب، تشجع المستخدمين الجدد على التسجيل.

خيارات تسجيل الدخول إلى وسائل التواصل الاجتماعي: في الجزء العلوي، توجد أزرار لخيارات تسجيل الدخول إلى وسائل التواصل الاجتماعي (Google، وFacebook، وLinkedIn). وهذا يوفر للمستخدمين سهولة تسجيل الدخول باستخدام حساباتهم الحالية على وسائل التواصل الاجتماعي.

حقول النموذج: يتضمن النموذج حقلين للإدخال:

البريد الإلكتروني: للمستخدمين لإدخال عنوان بريدهم الإلكتروني.

كلمة المرور: للمستخدمين لإدخال كلمة المرور الخاصة بهم.

خيارات إضافية: أسفل حقول النموذج، يوجد خيار "هل نسيت كلمة المرور؟" الرابط، والذي يسمح للمستخدمين بإعادة تعيين كلمة المرور الخاصة بهم إذا نسوا ذلك.

زر تسجيل الدخول: يوجد زر "تسجيل الدخول" للمستخدمين لإرسال معلومات تسجيل الدخول الخاصة بهم.

التصميم المرئي: يستخدم التصميم خلفية بيضاء لمنطقة النموذج، مع منطقة مظللة باللون الأزرق الفاتح على اليمين. نظام الألوان هذا هادئ واحترافي، ويوفر تجربة سهلة الاستخدام.

صفحة التسجيل:

التخطيط: تحتوي صفحة التسجيل على تخطيط معكوس مقارنةً بصفحة تسجيل الدخول. النموذج على اليمين، بينما يتضمن الجانب الأيسر رسالة ترحيب للمستخدمين العائدين.

خيارات الاشتراك في وسائل التواصل الاجتماعي: على غرار صفحة تسجيل الدخول، هناك خيارات للتسجيل باستخدام حسابات وسائل التواصل الاجتماعي (Google، Facebook، LinkedIn)، الموجودة في الجزء العلوي من النموذج.

حقول النموذج: يتضمن نموذج التسجيل ثلاثة حقول إدخال:

الاسم: للمستخدمين لإدخال أسمائهم الكاملة.

البريد الإلكتروني: للمستخدمين لتقديم عنوان بريدهم الإلكتروني.

كلمة المرور: للمستخدمين لإنشاء كلمة مرور لحسابهم الجديد.

زر التسجيل: يتوفر زر "تسجيل" للمستخدمين لإرسال تفاصيل التسجيل الخاصة بهم.

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

عناصر التصميم الشاملة:

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

الطباعة: النص واضح ومقروء، والعناوين بخط غامق لجذب الانتباه.

الزوايا الدائرية: استخدام الزوايا الدائرية في حقول الإدخال والأزرار يضيف لمسة عصرية إلى التصميم.

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