10 مقتطفات من التعليمات البرمجية لإنشاء أشكال جميلة

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

من الضروري التأكد من عمل النماذج الخاصة بك ، لذا فإن سهولة الاستخدام هي رقم 1. لكن الجماليات مهمة أيضًا لأن التصاميم الجديرة بالثقة تكون دائمًا أكثر جاذبية.

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

بالإضافة إلى أن هذه كلها مستضافة مجانًا حتى تتمكن من نسخ ولعب arouns مع الكود حسب رغبتك.

1. تصميم المواد

يعرف الجميع لغة تصميم المواد في Google خلال صعودها إلى الشهرة في السنوات القليلة الماضية. كانت مفاهيم التصميم متعدد الأبعاد تستهدف تطبيقات Android ولكنها انتشرت بسرعة على الويب.

إذا كنت تحب النمط البسيط لواجهة مستخدم Google المادية ، فراجع نموذج المواد هذا الذي أنشأه جون أولمان.

يعمل على Sass and Pug للمعالجة المسبقة لـ CSS / HTML. إنه أيضًا شكل خفيف الوزن جدًا ويجب أن تظهر عناصر التصميم المادي نفسها في جميع المتصفحات.

حقًا هو مصدر إلهام لكل مصممي المواد الموجودين لديك.

2. تحت البحر

قم برحلة إلى المحيط في نموذج الاتصال الفريد جدًا هذا المصمم بأسلوب مائي.

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

بالإضافة إلى أنه كلما قمت بتحديد حقل إدخال ، يظهر الأخطبوط الودود للتحية. كم هي غريبة!

3. نموذج Bootstrap 3

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

يقوم نموذج BS3 هذا بعمل الأشياء بشكل صحيح من خلال البناء فوق إطار عمل Bootstrap. يستخدم عددًا قليلاً من عمليات إعادة التصميم في حقول الإدخال وزر الإرسال لإنشاء نموذج Bootstrap محبوب لا تعرفه أبدًا أنه Bootstrap'd.

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

4. اتصال أنيق

باستخدام أيقونات Font Awesome وبعض الأنماط الأساسية سريعة الاستجابة ، يعد نموذج الاتصال هذا حقًا فريدًا من نوعه.

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

تضيف هذه الرموز البسيطة إشارة إلى كل حقل ، لذا من السهل معرفة نوع المعلومات المطلوبة في لمح البصر.

وإذا كنت تبحث عن شيء فريد من نوعه ، فحاول إضافة رمز مختلف إلى هذا المزيج.

5. تسجيل الدخول الصغير

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

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

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

6. كومبو تسجيل الدخول والاشتراك

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

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

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

7. الاتصال السبورة

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

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

يستخدم Creator Greg Sweet أيضًا خط ويب مخصصًا يشبه الكتابة اليدوية البشرية النموذجية. يعد هذا مثاليًا لإضافة اللمسة الأخيرة على النموذج حتى تشعر أنك عدت إلى المدرسة حقًا.

8. الخروج من بطاقة الائتمان

لقد رأيت الكثير من نماذج الخروج ولكن هذا التصميم من قبل فابيو أوتافياني ربما يكون أفضل ما صادفته على الإطلاق.

إنها تستخدم JavaScript للتعامل مع التحقق من صحة حقل الإدخال ولكن بطاقة الائتمان كلها CSS. إنه يتحرك بناءً على الأرقام التي تثقبها في النموذج بل إنه يدور إلى الخلف عندما تكتب رقم بطاقة الائتمان CVV.

9. تسجيل مخصص

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

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

كلما قمت بتمييز حقل ، تضيء الحدود إلى اللون الأخضر الطحلب. ستلاحظ أن الرمز يغير الألوان أيضًا! حتى القوائم المحددة لبطاقات الائتمان لها أنماطها المخصصة.

يعد هذا تأثيرًا معقدًا جدًا يمكن تحقيقه فقط في CSS ولكن المطور Jose Carneiro جعله يحدث.

10. تسميات عائمة

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

ألق نظرة خاطفة على نموذج الملصق العائم هذا الذي يعمل على CSS3 و Compass.

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

بغض النظر عن نمط النموذج الذي تريده ، آمل بالتأكيد أن يمنحك هذا المعرض بعض الأفكار والمقتطفات للمضي قدمًا.

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