15 نماذج تسجيل دخول رائعة لإلهام التصميم

نشرت: 2020-09-02

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

جدول المحتويات إخفاء
1. حلو:
2 - زينديسك:
3. Squarespace:
4. التقدم:
5. VSCO:
6. بالتنقيط:
7. المراجعة:
8. مجداف:
9. أوبر:
10. ناشيونال جيوغرافيك:
11. موقع Medium.com:
12. واشنطن بوست:
13. Mailchimp:
14. سيفورا:
15. ديبريلا:

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

1. حلو:

دبوس

Sweet هو موقع إلكتروني يتعامل مع المؤثرين والفنانين. يمكنك أن تكون إما فنانًا أو مؤثرًا إذا كنت تستخدم الموقع. يحتوي موقع الويب على سمة ملونة تشبه حلوى الآيس كريم. علاوة على ذلك ، يحتوي شعار الموقع أيضًا على حلوى الآيس كريم في تشكيلها. نموذج تسجيل الدخول لهذا الموقع مذهل ، حيث يتحول اللون الأزرق تدريجياً نحو ظلال مختلفة من اللون الأرجواني. يمكنك تسجيل الدخول إلى موقع الويب باستخدام اسم المستخدم أو رقم الهاتف أو عنوان البريد الإلكتروني. يتيح لك أيضًا تسجيل الدخول عبر Facebook و Twitter و Google إذا كان التركيز على أي من حقول الإدخال ، يتغير ظل التسطير إلى اللون الأزرق.

2 - زينديسك:

دبوس

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

3. Squarespace:

دبوس

Squarespace هو موقع ويب آخر يتعامل مع التسويق الرقمي ولديه بعض قوالب التصميم الجاهزة للاستخدام. لديهم صفحة رئيسية جديدة مع تصاميم مفصلة. لكن صفحة تسجيل الدخول الخاصة بهم لها تصميم بسيط. لا تحتوي صفحة تسجيل الدخول هذه أيضًا على رأس وتذييل لإلهاء المستخدم عن عملية تسجيل الدخول. يطلب منك حقل الإدخال إدخال عنوان البريد الإلكتروني وكلمة المرور. إلى جانب ذلك ، يمكنك أيضًا تسجيل الدخول باستخدام حسابات Google و Apple و Facebook و Twitter. عبارة CTA الخاصة بتسجيل الدخول بسيطة ولكنها فعالة.

4. التقدم:

دبوس

Headway هو موقع ويب يوفر سجل تغيير لإبقاء العملاء على اطلاع بشأن خدمة أو منتج معين. تم رسم موقع الويب الخاص بهم بالكامل باللون الأبيض بأبسط تصميم ممكن. لديهم صفحة تسجيل دخول أبسط حيث لا توجد تفاصيل رأس أو تذييل يمكن أن تشتت انتباهك. مع وجود صورة فقط في الهامش الأيسر ، لديهم صفحة تسجيل دخول حيث يمكنك ملء عنوان بريدك الإلكتروني وكلمة المرور. يُسمح لك أيضًا بتسجيل الدخول باستخدام تفاصيل حساب Google الخاص بك. صفحة تسجيل الدخول بسيطة وذات خلفية بيضاء ولا توجد عناصر رائعة لواجهة المستخدم.

5. VSCO:

دبوس

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

6. بالتنقيط:

دبوس

Drip هو موقع ويب يصمم أشياء من الرسوم الهزلية والأفلام والفيديو وأنواع الموسيقى. مثل VSCO و Squarespace ، فإن نموذج تسجيل الدخول لهذا الموقع مصنوع أيضًا بموضوع أبيض اللون. في الجزء العلوي ، يمكنك ملاحظة أنهم كتبوا: "تسجيل الدخول إلى Kickstarter". لكن Drip هو جزء من فريق Kickstarter. يمكنك تسجيل الدخول إلى موقع الويب باستخدام معرف Kickstarter وكلمة المرور الخاصة به. لديهم أيضًا رابط نسيت كلمة المرور مع تفاصيل تسجيل الدخول. يمكنك أيضًا تسجيل الدخول باستخدام تفاصيل تسجيل الدخول إلى Facebook. أثناء التمرير في أسفل الصفحة ، يمكنك أن ترى أن Drip جزء من عائلة Kickstarter. ليس لديهم أي روابط أخرى تذهب ذهابًا وإيابًا إلى صفحات مختلفة من الموقع. إذا كنت ترغب في زيارة الموقع ، فما عليك سوى النقر فوق شعار Drip أعلى نموذج تسجيل الدخول.

7. المراجعة:

دبوس

Lookback هو موقع ويب يتيح للمستخدمين إنجاز مهام مختلفة من خلال تطبيقاتهم. لديهم صفحة نموذج تسجيل دخول وظيفية ومباشرة المظهر. لقد كتبوا بأحرف كبيرة وجريئة ، "يسعدني رؤيتك مرة أخرى!" أسفل ذلك ، كتبوا "تسجيل الدخول للبدء" بأحرف صغيرة. يمكنك تسجيل الدخول إلى موقع الويب الخاص بهم من خلال عنوان البريد الإلكتروني الخاص بك أو اسم المستخدم وكلمة المرور المخصصين. لديهم زر تسجيل الدخول الأخضر الذي يحدد زر CTA الخاص بهم ، ومن السهل ملاحظة أن أول شيء عند فتح الصفحة. يحتوي تذييل الصفحة على روابط قليلة ، لكن يظل رأس الصفحة فارغًا.

8. مجداف:

دبوس

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

9. أوبر:

دبوس

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

10. ناشيونال جيوغرافيك:

دبوس

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

11. موقع Medium.com:

دبوس

يعد موقع Medium.com موقعًا شائعًا يتيح للمدونين تحميل مدوناتهم على النظام الأساسي. يتحدث موقع الويب الخاص بهم عن المقالات والمدونات من مختلف المجالات والمنافذ. لكن صفحة تسجيل الدخول الخاصة بهم تبدو ممتعة للغاية. لم يستخدموا أي عبارات CTA جذابة على صفحة تسجيل الدخول الخاصة بهم. بدلاً من ذلك ، يبدو أن الصفحة لها تصميم بسيط. يمكنك تسجيل الدخول إلى موقع الويب الخاص بهم باستخدام Google و Facebook و Apple و Twitter وعنوان بريدك الإلكتروني. تعد تعددية استخدامات تسجيل الدخول إلى موقع الويب أفضل جزء في صفحة تسجيل الدخول الخاصة بهم. يمكنك التسجيل في موقع الويب الخاص بهم من خلال النقر على رابط إنشاء واحد. ليس لديهم أي روابط أخرى في رأس الصفحة وتذييلها. يمكن العثور فقط على شروط الخدمة وسياسة الخصوصية لروابط الموقع أسفل نموذج تسجيل الدخول.

12. واشنطن بوست:

دبوس

The Washington Post هي صحيفة أمريكية تُنشر يوميًا في واشنطن العاصمة ، وهم يديرون الموقع تحت نفس الاسم ، The Washington Post. عند الوصول إلى صفحة تسجيل الدخول الخاصة بهم ، فقد قاموا بتصميم نموذج تسجيل دخول مباشر بخلفية زرقاء داكنة. يمكنك تسجيل الدخول باستخدام عنوان بريدك الإلكتروني ، أو يمكنك اختيار تسجيل الدخول من خلال رابط تم إرساله على عنوان بريدك الإلكتروني. علاوة على ذلك ، يسمح لك أيضًا بتسجيل الدخول باستخدام Amazon و Facebook و Google و Apple. أسفل نموذج تسجيل الدخول ، يمكنك أيضًا تحديد رابط التسجيل. في تذييل صفحة تسجيل الدخول ، يمكنك العثور على روابط سياسة الخصوصية وصفحات المساعدة والاتصال.

13. Mailchimp:

دبوس

MailChimp هي شركة أمريكية تتعامل مع التسويق عبر البريد الإلكتروني وخدمات أتمتة التسويق منذ عام 2001. كما يمكنك أن ترى أن موقع الويب مصمم بخلفية بيضاء. وبالمثل ، فقد صمموا صفحة تسجيل الدخول الخاصة بهم بخلفية بيضاء ، وتم وضع نموذج تسجيل الدخول بشكل استراتيجي على الجانب الأيسر من صفحة الويب. على الجانب الأيمن ، يمكنك تحديد المعلومات حول أحدث بودكاست ، The Jump. لقد وضعوا عبارة CTA الخاصة بهم على زر تسجيل الدخول الخاص بهم. يمكنك فقط تسجيل الدخول إلى موقع الويب الخاص بهم باستخدام عنوان بريدك الإلكتروني وكلمة المرور. لا يسمح بتسجيل الدخول من خلال أي حسابات وسائط اجتماعية أخرى.

14. سيفورا:

دبوس

Sephora هي شركة فرنسية متعددة الجنسيات تتعامل مع مصنعي مستحضرات التجميل على مستوى عالمي. يضم حوالي 3000 علامة تجارية لمستحضرات التجميل والجمال الشخصي من جميع أنحاء العالم. يعرض موقع الويب الخاص بهم جميع منتجاتهم ، وقد تم تصميم تخطيط الموقع باستخدام عناصر تفاعل المستخدم بالأبيض والأسود. الجزء الأكثر إثارة في موقع الويب الخاص بهم هو صفحة تسجيل الدخول الخاصة بهم. ليس لديهم صفحة تسجيل دخول فردية. بدلاً من ذلك ، قاموا بتصميم مربع منبثق ينبثق من الصفحة عند النقر فوق زر تسجيل الدخول. مثل MailChimp ، فأنت تطلب عنوان بريدك الإلكتروني لتسجيل الدخول إلى موقع الويب الخاص بهم. لا يمكنك تسجيل الدخول إلى موقع الويب الخاص بهم باستخدام حسابات وسائل التواصل الاجتماعي مثل Facebook و Amazon وغيرها. لقد وضعوا بشكل استراتيجي عبارتين للحث على اتخاذ إجراء بألوان متباينة. يكون زر تسجيل الدخول باللون الأسود بالكامل بينما يكون الزر "إنشاء حساب" باللون الأبيض. كلا عبارتا الحث على اتخاذ إجراء هما أول من يلفت انتباهك.

15. ديبريلا:

دبوس

Diprella هو موقع ويب مجتمعي يربط جميع المصممين من جميع أنحاء العالم ويسمح لهم بمشاركة مشاريعهم وعرض تصميماتهم على المنصة. نظرًا لأنه مجتمع من المصممين ، يجب أن يحتوي على صفحة تسجيل دخول مذهلة. لقد أنشأوا صفحة تسجيل دخول إبداعية للغاية. يمكنك رؤية شاشتين عند فتح صفحة تسجيل الدخول للموقع. على الجانب الأيسر ، يمكنك تحديد شاشة تسجيل الدخول حيث يمكنك تسجيل الدخول من خلال معرف البريد الإلكتروني وكلمة المرور أو حسابات الوسائط الاجتماعية الخاصة بك مثل Facebook. ولكن إذا كنت مستخدمًا جديدًا ، فيمكنك النقر فوق زر التسجيل الموجود على الجانب الأيمن من الصفحة. عندما تنقر على زر التسجيل ، تختفي صفحة تسجيل الدخول ، وتنزلق صفحة التسجيل إلى اليمين. يسمحون بإنشاء حساب مجانًا بتفاصيل محددة يطلبونها منك. يتم تعطيل زر التسجيل إلا إذا قمت بملء جميع التفاصيل في حقول الإدخال. يمكنك أيضًا التسجيل باستخدام حسابات الشبكات الاجتماعية.

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