15 اتجاهات تصميم مواقع الويب التي يجب الانتباه إليها في عام 2012
أحدث عام 2011 بعض التغييرات المدهشة في التصميم وتكنولوجيا الإنترنت. أصبح تطوير الويب موضوعًا أكثر سلاسة للقفز إلى التعلم ، ناهيك عن المكتبات المفتوحة المصدر التي لا تعد ولا تحصى والمفيدة في تبسيط العملية. ومع ذلك ، يبدو أن مجتمع التصميم العالمي بعيد عن رمي المنشفة.
أريد أن أقدم 15 فكرة نمت بسرعة كبيرة خلال العام الماضي. تشمل هذه الاتجاهات تقنيات تصميم مواقع الويب والرسومات التي من المحتمل أن تلعب دورًا كبيرًا في عام 2012. وربما تكون قد رأيت عددًا قليلاً من هذه الصور ممثلة في العديد من مواقعك المفضلة على الإنترنت.
والحمد لله ، أصبحت أساليب تطبيق هذه الميزات أسهل في الفهم وأقل في الشفرة.
1. تصميم واجهة استجابة
ربما تكون تجربة المستخدم المتوسط أهم جانب يجب مراعاته عند تصميم موقع ويب. تريد أن تستجيب عناصر الصفحة بسرعة لإدخال لوحة المفاتيح / الماوس وتتصرف كما هو متوقع. قد تتضمن بعض الأمثلة قوائم الطيران الجانبية والمربعات المنسدلة والنوافذ المنبثقة.
بما في ذلك مكتبات JavaScript الشهيرة مثل MooTools و jQuery ، فقد أصبح تنشيط هذه الميزات أسهل بكثير. تدعم معظم المتصفحات الحديثة هذه الشفرة وحتى تتحلل برشاقة عندما لا تكون البرامج النصية متوفرة. في النهاية تريد أن تجعل المستخدم يشعر بالراحة عند التفاعل مع أي مكان في التصميم.
وبالمثل ، يجب أن تأخذ في الاعتبار إدخال البيانات والتحقق من البيانات. في العديد من صفحات التسجيل ، ستتلقى إجابات صغيرة أثناء عملك في كل منطقة إدخال. يمكنك أتمتة التحقق من عناوين البريد الإلكتروني الصالحة وتكرار أسماء المستخدمين وحتى التحقق من إدخال كلمة المرور. سيوفر هذا الوقت على نهاية المستخدم ويوفر دليلًا مفيدًا طوال عملية الاشتراك.
2. الأجهزة المحمولة التي تعمل باللمس
في العامين الماضيين ، أصبح من الواضح أن الهواتف الذكية تكتسب الدعم بين المتحمسين غير التقنيين. لكن منذ عام 2011 فقط ، شاهدنا انفجارًا لمواقع الجوال والقوالب الخاصة بالجوال.
تعني شعبية أجهزة iPhone و iPad جنبًا إلى جنب مع الهواتف التي تعمل بنظام Android أنه سيكون لديك زوار يتفاعلون بشكل كامل مع صفحاتك من خلال أوامر اللمس. هذا يجب أن يصبح اعتبارًا واقعيًا مع كل نموذج بالحجم الطبيعي. أظهرت الاتجاهات في تصميم مواقع الويب للجوّال أن بناء سمة متنقلة منفصلة تمامًا يوفر أفضل النتائج. وبهذه الطريقة ، يمكنك الاحتفاظ بجميع المحتوى الديناميكي في مكانه على التصميم الرئيسي الخاص بك أثناء تقديم نسخة ضئيلة من الموقع لمستخدمي الأجهزة المحمولة.
3. طن من المجانية!
من يستطيع أن يقول أنهم بصراحة لا يستمتعون بالتنزيلات المجانية؟ يقوم مصممو الويب بمشاركة محتواهم عبر الإنترنت لسنوات ، ولكن في الآونة الأخيرة فقط أصبح هذا اتجاهًا شائعًا للغاية بين الفنانين الرقميين. كان هناك عدد قليل من المجتمعات التي بنيت خصيصا حول تقديم التنزيلات المجانية لمصممي الويب والرسوم البيانية.
اثنين من مفضلاتي الشخصية هما تنزيل PSD و Designmoo ، وكلاهما يتم تحديثهما بشكل متكرر من قبل أعضاء أعلى جودة. بالإضافة إلى ذلك ، يحتوي أرشيف Hongkiat Freebies على الكثير من الأشياء اللذيذة التي يجب عليك التحقق منها. في أي حقبة قبل ذلك ، لم يكن من السهل مطلقًا تنزيل واجهات الويب المجانية والتخطيطات والشعارات واللافتات وأي نوع آخر من ملفات PSD / AI عمليًا!
بعض التنزيلات أنيق
فيما يلي بعض الهدايا المجانية التي يمكنك تسجيل الخروج منها في وقت مبكر من عام 2011. وإذا كنت تعتقد أن هذه القائمة تحتوي على بعض الملفات الرائعة ، فما عليك سوى الانتظار حتى تدوم 2012.!
مجموعة الويب البسيطة UI
الظلام البسيطة مشغل موسيقى
انزلاق العلامات
صور الظلام المتزلج
صناديق البحث
تسجيل الدخول / نموذج تسجيل الدخول
مربع تسجيل الدخول مشروط
نموذج تسجيل الدخول النظيف
جداول التسعير
الحد الأدنى تحميل القضبان
مرفق المنبثقة
4. HTML5 و CSS3 المعايير
تراكمت كلا النموذجين التصميميين الجديدين على هذا النحو المتنامي طوال عام 2011. ظل مصممو الويب الدلاليون ينتظرون سنوات لإطلاق تصميمات CSS فقط لتقديم زوايا مدورة وظلال مظللة. بالإضافة إلى ذلك ، أحرز W3C الكثير من التقدم في الحصول على الدعم من المتصفحات الأكثر شعبية.
أستطيع فقط رؤية الأشياء الجيدة لمستقبل تطوير الويب HTML5 / CSS3. غالبًا ما يتم تجاهل مصممي الواجهة الأمامية في حقل اليوم ، ومع ذلك يخدمون هذه الأهمية الكبيرة لعملية التكوين بأكملها. حاول ألا تضغط على "مجموعة" في أي مجموعة بناءً على التقنيات التي تعرفها وتمارسها يوميًا. نحن نقدم دليل إرشادي للمبتدئين لترميز HTML5 / CSS3 إذا كنت تشعر بالحاجة إلى اللحاق بالركب.
إن الالتزام بهذه المعايير الجديدة سيجعل التطوير في JavaScript و jQuery أسهل بكثير. يقوم المطورون بالفعل بنشر ومشاركة كود مشروع HTML5 / CSS3 الخاص بهم عبر الإنترنت ، وإذا استمرت الأمور ، فسنلاحظ بالتأكيد المزيد من هذا كله حتى العام المقبل.
5. شرائط ورايات
على الرغم من أن تقنية التصميم هذه ليست بالضبط “الجديد” لم يخترق التيار الرئيسي حتى وقت قريب. ربما تكون قد شاهدت أمثلة لشرائط الزوايا وأشرطة التنقل في الشارات وشارات الشريط الصغيرة. من المحتمل أن تكون هذه الاتجاهات قد انفجرت بسبب التراكم الهائل للدروس المفصلة التي يمكن العثور عليها من خلال Google.
مصممي الويب أكثر كفاءة هذه الأيام في إطلاق المدونات الخاصة بهم لمشاركة المعلومات. يمكن الآن بسهولة نقل التقنيات البسيطة بين المصممين لتكرار التأثيرات الأكثر شيوعًا. حتى أن هناك ملفات PSD مجانية يمكنك تنزيلها لتوفير الجهد لك.
6. بريميوم وورد المواضيع
تضمن الإصدار النهائي من WordPress 3.0 مجموعة من الميزات التي طال انتظارها مثل أنواع المنشورات المخصصة وصور المقالات الفريدة. ومع ذلك ، فإن أعمق التغييرات التي رأيتها تأتي من متاجر تطوير WordPress التي تتخصص في موضوعات WP المتميزة.
بعد شراء مثل هذا المظهر ، تكون عملية التثبيت مشابهة لأي عملية أخرى. ومع ذلك ، فمن الممكن الآن تضمين وظائف المكونات الإضافية المخصصة ، والسمات الفرعية ، وقوائم المشرف الجديدة ، ومجموعة كاملة من الميزات الأخرى مباشرة من داخل السمة! WooThemes و ElegantThemes و Rocket Themes هي بعض العلامات التجارية التي تميزني قبل كل شيء. جودتها لا تشوبها شائبة وأشعر أن مطوريها يتخطون الحدود لإنشاء أفضل النماذج وقوائم المشرف الأكثر سهولة.
في عام 2012 ، لا يمكنني إلا أن أتخيل أن WordPress سوف يصبح أسهل في الاستخدام. وهذا يعني إصدار المزيد من الموضوعات عالية الجودة ، وإطلاق المزيد من المدونات الرائعة.
7. المجلات على الانترنت
عند الحديث عن موضوعات WordPress ، يجب علينا أيضًا طرح النجاح السريع للمجلات عبر الإنترنت. لا تختلف مواقع الويب هذه عن أي مدونة WordPress عامة بصرف النظر عن الهيكل العام وتخطيط الصفحة. يمكنك اكتشاف هذه العلامات الكبيرة من خلال العرض التقديمي المطلق لصفحتهم الرئيسية ، ومجموعة من المؤلفين الذين يكتبون للموقع.
مع بدء نشر المجلات عبر الإنترنت ، ستصبح مصدر دخل للعديد من الكتاب. منحت موضوعًا مثل "تصميم المواقع الإلكترونية" مكانًا أصغر حجمًا من الألعاب أو الاقتصاد على سبيل المثال. ولكن حقيقة أننا نرى المزيد من مجلات التصميم على الإنترنت أكثر من المطبوعات ، توضح أين يمكن أن يتجه العالم في السنوات القادمة.
8. من السهل إسقاط الظلال
كواجهة من CSS3 أصبح الآن أسهل من أي وقت مضى للمصممين تطبيق الظل المسقط في أي مكان على الصفحة. تم إعطاء عناصر نص مربع وعناصر نمط مربع خصائص خاصة لتقديم تأثيرات ظل واضحة.
بناء جملة نص الظل من السهل جدًا حفظه واتباعه على هيئة مربع الظل. نظرًا لأن الصور غير ضرورية الآن في تقديم هذه التأثيرات ، يمكن لمطوري الويب التركيز على توسيع هذه الأفكار الأساسية بشكل أكبر.
9. الطباعة الديناميكية
تعتبر الخطوط جزءًا كبيرًا من المجال الذي يشمل تقاليد تصميم الويب. الخطوط الأكثر شهرة بما في ذلك Arial و Helvetica و Georgia و Trebuchet MS موجودة منذ سنوات. على الرغم من أنها لا تزال تخدم غرضًا عميقًا في معايير الويب ، إلا أن هناك الكثير من الخيارات البديلة لطباعة صفحات الويب المتقدمة.
يتطلب Typekit على سبيل المثال فقط سطرين من التعليمات البرمجية ليتم تضمينهما في رأس المستند. بعد ذلك ، يمكنك تحديد أسماء الخطوط المراد تضمينها وإلحاقها في CSS. أفضل جزء في هذه التقنية هو أنها تعتمد في الغالب على جافا سكريبت ، وبالتالي فإن المستخدم النهائي غير مطلوب لتثبيت الخطوط.
البديل الآخر هو Google Web Fonts الذي يتصرف بطريقة مشابهة لـ Typekit. أوصي المصممين المهتمين بالتحقق من استعلام وسائط CSS3 @ font-face ، نظرًا لأنك تحصل على المزيد من الإبداع. يمكن استخدام هذا الرمز لاستيراد .الصناديق أو .اللوبي ملف الخط من خادم الويب الخاص بك وإدراجه كخط ورقة أنماط قابلة للاستخدام! مع وجود العديد من الأنظمة البديلة المستخدمة لبناء خطوط ديناميكية ، أتوقع أن يحمل 2012 طفرة من الابتكار وتصميم المواهب في هذا المجال.
10. معرض الصور
مع الشعبية اللاحقة لـ jQuery ، اكتشفت المزيد والمزيد من عروض شرائح الصور التي يتم إسقاطها في تخطيطات الويب. تعد المعارض مثالية لعرض لمحة سريعة عن محتوى الصفحة الداخلية. يمكن أن يكون هذا مجموعة من إدخالات الحافظة ، والصور ، ومشاركات المدونة مع الصور المميزة ، لقطات الشاشة التجريبية ، إلخ.
عندما تفكر في العديد من الرسوم المتحركة الفريدة للانزلاق والبهت ، لم يكن من السهل إنشاء عرض شرائح سريع لصفحتك الرئيسية. أنا واثق من أن عام 2012 سيشهد ارتفاعًا في هذه الاتجاهات ، وليس فقط بين المصممين. تستخدم تطبيقات الويب وشركات البرامج عبر الإنترنت عروض الشرائح كدروس تعليمية موجهة لعرض لقطات الشاشة وميزات فريدة.
11. صناديق المنبثقة مشروط
أشعر أن مربعات الوسائط لا تزال جديدة إلى حد ما على الإنترنت بالنظر إلى أنها قد ظهرت في برامج سطح المكتب وتطبيقات الأجهزة المحمولة لسنوات. الغرض من نافذة مشروطة هو تقديم محتوى مربع (مثل تسجيل المستخدم أو تسجيل الدخول) أعلى الصفحة الحالية دون التحميل على صفحة جديدة.
تستخدم العديد من البرامج النصية لمعرض الصور مفتوح المصدر نوعًا من تأثير lightbox حيث تتلاشى الخلفية أغمق من المربع المنبثق. أستمتع حقًا بهذه الميزة كلما أراها ، على الرغم من أنه لم يتم اعتمادها من قبل الكثيرين. وعلى الرغم من أن الصناديق الشرطية جذابة وأنيقة ، إلا أنه قد يكون من الصعب للغاية ترميزها والعمل بشكل صحيح.
للحصول على أفكار لمواقع الويب الخاصة بك ، تحقق من بعض مجتمعات مشاركة الأخبار الاجتماعية الأكثر شعبية. يعد كل من Reddit و Digg هما الأولان اللذان يتبادران إلى الذهن حيث يتميز كلاهما بصناديق مشروط للتسجيل / تسجيل الدخول مع تصميم نموذجي. بالإضافة إلى ذلك ، تتميز تأثيرات واجهة المستخدم في Google+ بوجود قدر كبير من وظائف الوسائط.
12. قوائم ملهمة
ظهرت مجموعات من عناصر القائمة منذ الأيام الأولى لتصميم الويب. أثناء انتقالنا إلى مصممي القرن الجديد ، بدأوا في استخدام قوائم HTML مرتبة وغير مرتبة لإيواء قوائم التنقل. لكن في الوقت الحاضر ، يمكن استخدام القوائم والمزيد.
في معظم سمات المدونة ، أجد أن الشريط الجانبي بالكامل محمل بالقوائم! ناهيك عن المصممين الذين وضعوا أنماط CSS رهيبة للقوائم في إدخالات المقالة. قمنا بتغطية أنماط القوائم الملهمة في منشور آخر في وقت سابق من هذا العام والتي قد تمنحك المزيد من التبصر لهذه المسألة. أتطلع إلى عام 2012 أتوقع بعض الأمثلة الإبداعية حقًا ، ربما على قدم المساواة مع تخطيط Flowapp المخصص للمهام والمهام.
13. صورة مصغرة ولدت
في عالم الويب ، يمكننا أن نتفق على أن المحتوى هو الملك. لكن معظم المصممين سيوافقون أيضًا على أن صفحة من النص الفارغ تصبح مملة بسرعة حقيقية. يمكن للصور إضافة تلك التوابل الإضافية إذا كنت تعرف كيفية رشها بلطف. إحدى هذه الطرق هي استخدام الصور المصغرة الديناميكية لتوفير معاينات لكل صفحة أو مقالة.
تواصل المدونات اليوم اعتماد اتجاه الصورة المميز ، فلماذا لا تطبق الصور المصغرة التي تم إنشاؤها في نسقك أيضًا؟ هذه غالبا ما لفت انتباهي نحو عنوان المقالة وتساعد على تفتيت صفحة كاملة من الروابط النصية.
كمثال آخر ، يوفر Dribbble قائمة كاملة بالمعرض للصور المصغرة لكل لقطة تصميم. في مثل هذا التخطيط على غرار صف الجدول ، من السهل جدًا التعرف على كل صورة مصغرة والتمرير خلالها للعثور على ما تبحث عنه. أثبت هذا التكتيك جذب انتباه مجتمع التصميم بأكمله! إيه ، على الأقل أعضاء Dribbble في أحسن الأحوال. لا أستطيع إلا أن أتوقع أن يشهد عام 2012 المزيد من هذه الأفكار بناءً على مثل هذه الأمثلة من الماضي.
14. الرموز المتضخم
ينبع هذا الاتجاه الفريد من شعبية تصاميم أيقونات Mac OS X. عندما بدأ المبرمجون في إطلاق مواقع الويب لتطبيقات Mac الخاصة بهم ، رأينا جميعًا في كثير من الأحيان الأحجام الهائلة المتمثلة في العلامة التجارية. وفقًا لذلك ، تم اختيار هذا الاتجاه أيضًا من خلال مطوري iOS وهو الآن مريح في ثقافة التصميم الحديثة.
من الصعب التنبؤ بكيفية عدل هذه الاتجاهات مع تقدمنا في عام 2012. فمن ناحية ، يمكن أن تكون هذه الأيقونات غير متقنة وتستهلك مساحة أكبر من اللازم. ومع ذلك ، فنحن لسنا قريبين من الوصول إلى نقص في تطبيقات iOS / OSX ، ولا يزال المصممون ينفذون مواصفات أيقونة بكسل مثالية. ناهيك عن أن مصممي الويب يقومون الآن بتضمين أيقونات كبيرة الحجم ضمن أي علامة تجارية للصفحة! إنها طريقة جيدة لجذب انتباه الزائر المباشر وبناء اسم لشركتك.
15. مبالغ فيها الارتباطات التشعبية
روابط مرساة هي بالتأكيد ضمن أهم خمسة عناصر في أي موقع ويب. من الواضح أن هذه قد قطعت شوطًا طويلًا منذ التسعينيات ، كما أن اتجاهات التصميم الشعبية لم تنمو إلا بشكل كبير. يبدو أننا ننتقل إلى عصر يكون فيه التصميم المبالغ فيه له الأسبقية.
تحقق من بعض أمثلة الارتباط من Patterntap لمعرفة ما إذا كان هناك أي قفزة وجذب انتباهك. هناك العديد من الأفكار المذهلة لتصميم الارتباط التشعبي ، سواء في التأثيرات القياسية أو التحويم. تضيف الزوايا الدائرية CSS3 وظلال النص وعائلات الخطوط المخصصة أفكارًا رائعة أكثر إلى المزيج! أحد الأمثلة المفضلة لدي هو SimpleBits الذي يستخدم رسمًا ديناميكيًا قصيرًا على كل رابط من الروابط الدائمة الخاصة بالمدونة.
استنتاج
هذه الأفكار ليست سوى بعض من الاتجاهات الأكثر شيوعًا التي لاحظتها اكتساب الأسبقية طوال عام 2011. إن تصميم الويب الرائع يدور دائمًا حول التركيز والحفاظ على نوايا المستخدم كأولوية قصوى. من غير المحتمل أن تختلف هذه الفلسفات عن الانتقال إلى عام 2012 ، ولكن كيف نقوم ببناء مخططات وتقديم البيانات تتغير دائمًا. أخبرنا أفكارك أو أسئلتك في منطقة مناقشة التعليقات.
