20 اتجاهات في تصميم مواقع الويب التي يجب مشاهدتها في عام 2017
لقد مر عام آخر ويتطلع المصممون إلى المستقبل. كثير اتجاهات التصميم الواعدة لا بد أن تندلع في عام 2017. في العام الماضي ، غطيت أفضل اتجاهات التصميم لعام 2016 ورأينا الكثير من التغييرات منذ ذلك الحين.
لذلك ، لهذا المنصب لقد اخترت أفضل 20 اتجاهات لقد لاحظت ذلك الحصول على الجر في عام 2017. هذه الاتجاهات التصميم يمكن أن تنطبق على أي موقع, لذلك ابق عينيك على هذه التقنيات ونحن نمضي حتى عام 2017 وما بعده.
1. “يعلن عنه في” شارات
الشركات الناشئة والمدونات ومشاريع SaaS وحتى الشركات الصغيرة تستخدم الآن “كما هو موضح في” شارات على مواقعها على شبكة الإنترنت. هذه الشارات في كثير من الأحيان رابط لمقالات على بلوق السائدة مثل HuffPo و Forbes و CNN و Fox ومنافذ الأخبار الأخرى.
الهدف هو التحقق من صحة موقع على شبكة الإنترنت و بناء الثقة مع الزوار الجدد. من الأسهل بالنسبة لشخص ما أن يثق في موقع ويب عندما يرى أنه كان كذلك المذكورة في المنشورات موثوقة.
في الواقع العديد من كبار بلوق نقدر التعرض, لذلك يساعد حقا كل المعنيين. هذه المواقع الكبيرة في كثير من الأحيان الافراج عن الشعارات الخاصة بهم على الانترنت ولكن يمكنك أيضًا العثور على ملفات PNG أو SVGs الشفافة بمجرد استخدام googling.
كما ينصح لك رابط العودة إلى المقال الأصلي ذكر موقعك. هذا يثبت ذلك لقد ذكرت حقا على الموقع ، ولا تقوم فقط بإعداد الدعاوى.
2. جريئة جميع التنقلات وصلات
رأيت العشرات من قوائم الملاحة أنيق كل الاعتماد على هذا التصميم نفسه. هذه الروابط التنقل تختلف في الخط والحجم لكنهم عادة لديها ميزات مماثلة, مثل:
- جميع القبعات
- بالخط العريض
- متباعدة بالتساوي
- محاذاة إلى الزاوية اليمنى
الصفحة الرئيسية ل Zazzle هي مثال رائع. ولكن يمكنك أن تجد هذا على العديد من مواقع بدء التشغيل لأنه طريقة نظيفة لتبادل الروابط التي هي سهلة القراءة وسهلة التصفح.
أنا في الغالب ربط هذا الاتجاه مع الشركات والشركات الناشئة التكنولوجيا ولكن يمكن أن يكون سائدا على بلوق أيضا.
سجل في المرة التالية التي ترى فيها هذا الاتجاه لأنه في كل مكان. وأتوقع أن تستمر في النمو بشكل جيد حتى عام 2017.
3. بلوق على غرار مجلة
كان التدوين مفهومًا مناسبًا في أوائل الألفية الجديدة. إذا كنت تدير مدونة في عام 2003 ، فقد اعتبرتها هواية صغيرة لطيفة. في ما يزيد قليلاً عن عقد من الزمن ، تغير هذا الاتجاه بشكل جذري. الآن بلوق يمكن توفير دخل بدوام كامل, وبدأوا في ذلك تبدو أكثر مثل المجلات الرقمية.
انظر إلى التصميم الأصلي لـ TechCrunch عندما تم إطلاقه لأول مرة في عام 2006. يبدو أنه مدونة WordPress عامة مباشرة?
الآن انظر إلى الصفحة الرئيسية الحالية لـ Techcrunch في عام 2017:
ليس فقط يشبه المجلة, هذا ايضا وظائف مثل واحد. تنشر TechCrunch العشرات (إن لم يكن المئات) من المشاركات الجديدة كل يوم. إنهم المصدر الأول للحصول على أخبار بدء التشغيل.
اتجاهات التصميم على غرار مجلة تحدث فرقا كبيرا. تستخدم الصفحة الرئيسية قسم قصة مميزة كبيرة, كل وظيفة لديه الصورة المصغرة الخاصة به, وصفحات المادة مركز حول العنوان.
عندما تفكر في الأمر ، لم يتغير TechCrunch كثيرًا. ما زال “مجرد مدونة”. لكن انها مصممة وتدار مثل مجلة, وهذا يجعل كل الفرق.
4. خلفيات الفيديو
ربما يكون تشغيل القراءة التلقائية هو الاتجاه الأكثر إزعاجًا على الويب. لكن من المستغرب, تشغيل الفيديو تلقائيًا (بدون صوت) هو الاتجاه المتزايد بسرعة. يمكنك تحديد هذا على عشرات المواقع التجارية حيث خلفية الفيديو يأخذ على كامل الشاشة.
أنا حقا أحب هذه التقنية عندما يتم تطبيقها بشكل صحيح. طالما أن فيديو يتعلق بالموقع و لا يعرقل المحتوى, أعتقد أنه تأثير رائع لاستخدامه في رأسك.
5. أزرار الشبح
مثل بساطتها يغذي كذلك في تصميم المواقع الإلكترونية ، العديد من الاتجاهات الجديدة الناشئة. واحد مثل هذا الاتجاه هو صعود أزرار الأشباح التي ليس لها تعبئة داخلية ولكن لها حدود خارجية.
معظم الوقت هذه الأزرار على النقيض من الآخرين لكي يلفت الانظار. يمكنك رؤية ذلك على الصفحة الرئيسية لـ Instantmojo باستخدام زر التسجيل الأخضر يقع بجوار زر شبح ربط عرض حي.
وقد اعتمدت مواقع أخرى أسلوب تصميم محض شبح إلى أزرارهم sitewide. مثال رائع هنا هو تصميم Bootstrap الجديد.
أعتقد أن أزرار الأشباح تعمل على المواقع التي تميل نحو بساطتها. قد لا تكون مناسبة تمامًا لكل موقع ويب ، لكنني أرى أن استخدامها يزداد مع مرور كل عام.
6. نافذة مشروط التقيد
نوافذ Modal مزعجة للغاية ، ولا أستطيع أن أتخيل أن أي مستخدم يريدها. ومع ذلك ثبت أنها لزيادة الاشتراكات, ولا يمكن للمسوقين تجاهل التقنيات التي تعمل.
هذا هو السبب في أنني أعتقد أن نوافذ التقيد المشروط ستفعل ذلك مواصلة الصعود في عام 2017.
إنهم ليسوا الشيء المفضل لدي ، ولا أضيفهم أبدًا إلى مواقع الويب الخاصة بي. ولكن إذا كان الهدف هو زيادة عدد الاشتراكات ، فإن النوافذ المشروطة هي وسيلة مؤكدة لإشعال الأمور.
الإضافات الجديدة يمكن حتى الهدف نية الخروج التي يطلق مشروط كلما حاول المستخدم مغادرة الموقع. تظهر الوسائط الأخرى بعد x ثوانٍ أو يتم ضبطها عند التمرير إلى الأسفل بدرجة كافية.
بغض النظر عن الطريقة التي يتم بها تشغيل الوسائط ، أو كيفية تصميمها ، أو كيف تشعر حيالها ، أعتقد أنها ستظل موجودة لفترة طويلة.
7. التوضيح والفن المتجه
مع برامج تصميم المتجهات الجديدة ، مثل Sketch و Affinity Designer ، هناك موجة جديدة من الرسامين الذين يتصفحون الويب. يدمج التصميم الجرافيكي وتصميم الواجهات باستمرار مع عدد أكبر من المصممين متعددي التخصصات الآن أكثر من أي وقت مضى.
هذا يعني أننا سنرى الكثير من الرموز المخصصة و الرسوم التوضيحية كاملة الصفحة في المستقبل القريب.
العديد من الرسامين فنانين تمارسهم لذا أعتقد أننا سنرى المزيد من الخلفيات صفحة كاملة مصنوعة من برنامج اللوحة الرقمية ، المقدمة بالتفصيل مثل مفهوم الفن.
8. أشرطة التمرير الجانبية الثابتة
الموجة الأولى من التصميم الثابت تركز على أشرطة التنقل. هذه كلها شائعة جدًا خاصة في التصميمات سريعة الاستجابة حيث يكون شريط التنقل الثابت يكرر الشعور بتطبيق الهاتف المحمول الأصلي.
لكن في عام 2017 ، أتوقع أن أرى عنصرًا أكثر لزجة-الشريط الجانبي لزجة.
تستخدم كل مدونة رئيسية تقريبًا هذا النوع من الشريط الجانبي اللاصق. هذا يبقي المحتوى في الرأي في جميع الأوقات ويزيد من احتمال أن المستخدمين سوف التفاعل مع محتوى الشريط الجانبي.
بالإضافة إلى العشرات من الإضافات jQuery المجانية التي يمكنها ذلك تكرار تأثير الشريط الجانبي لزجة. من الأسهل من أي وقت مضى إعداد هذا على أي موقع ويب.
9. في جدول المحتويات
وجدت دراسة حالة حديثة ذلك محتوى longform يتفوق على shortform في كل من التصنيف وجودة الاحتفاظ المستخدم. منحت هذا ليس صحيحًا دائمًا لأن بعض الاستفسارات يمكن الإجابة عليها بسرعة.
ولكن مع وجود محتوى طويل للغاية على الويب ، من الطبيعي أن نرى ذلك المزيد من جداول المحتويات المضافة في المقالات. سترى هذا على مواقع المراجعة الطويلة أو في المقالات التي تنقسم إلى العناصر المدرجة.
إضافة جدول المحتويات يمكن تحسين تجربة المستخدم ويساعد على تفريق القراءة إلى قطع أصغر. جدول المحتويات يمكن أيضا مساعدة موقعك رتبة أفضل! إذا وجدت Google صفحتك ذات قيمة ، فقد تقوم بذلك الحصول على وصلات القفز في نتائج البحث.
قد يكون صحيحًا أن ToCs شحيحة إلى حد ما في الوقت الحالي. لكنني أتوقع أن ينفجر هذا الاتجاه خلال عام 2017 وبعد سنوات عديدة.
10. التصاميم الملونة الزاهية
لست متأكدًا مما إذا كان هذا الاتجاه قد نشأ عن الحد الأدنى أو كرد فعل على تصميم المواد من Google. لكنني عثرت على عشرات المواقع التي تستخدم ألوان باستيل مشرقة ممزوجة بألوان زاهية أخرى لخلق مظهر خيالي جدا.
تعتبر صفحة Rentberry الرئيسية مثالًا رائعًا يستخدم أيضًا طن من التدرجات. وحتى لديه ما سبق “يعلن عنه في” شارات تقع تحت! اتجاهان على موقع واحد.
ستلاحظ أن الألوان لا تتخلل الصفحة بأكملها, وهم كتموا مع ظلال أخرى من الأبيض والرمادي.
لقد رأيت ما يكفي من هذه مخططات الألوان نابضة بالحياة للاعتقاد بأنهم في ارتفاع.
11. انتقل الرسوم المتحركة
يعرف مصممو الويب عن لعبة التمرير ومدى فظائعها. ولكن هذا ليس ما قصدته مع العنوان “التمرير الرسوم المتحركة”. لقد رأيت العديد من المواقع الآن تنشيط المحتوى في العرض عند التمرير الماضي قسم معين من الصفحة.
هذا الاتجاه هو في الغالب يقتصر على بدء تشغيل الصفحات الرئيسية وشركات ادارة العلاقات مع التي تريد بعض pizzazz في تصميمها.
لا يمكنني القول ما إذا كان هذا الاتجاه مفيدًا بشكل خاص. بالتأكيد هل انتزاع العين لكنني لا أعتقد أنه يقدم الكثير وراء الجمال. لا يزال ، هو اتجاه يبدو أنه ينتشر بسرعة ، ومتى تستخدم لماما يمكن أن يكون أنيق حقا.
12. التطبيقات أحادية الصفحة (SPA)
تطبيقات صفحة واحدة هي مواقع الويب بنيت بحتة مع أجاكس يدعو. جافا سكريبت تسحب المحتوى من الخادم و تحميله بشكل حيوي, لذلك الصفحة لا ينعش.
الأمثلة الشائعة هي مواقع مثل Gmail و Facebook. لكن مع المزيد من التكنولوجيا JS, لقد لاحظت المزيد والمزيد من SPA تم تطويرها في كل وقت. هيك ، حتى CodePen يمكن اعتبار SPA.
مع المكتبات الأمامية القوية مثل React & Aurelia ، سيكون من الأسهل إنشاء منتجع صحي من البداية في عام 2017.
13. Toggleable أشرطة البحث
اعتادت أن تكون تلك الحقول البحث كان دائما في الرأي في مكان ما على صفحة ويب ، إما في الشريط الجانبي أو في التنقل. لكنني لاحظت مؤخرًا الكثير من حقول البحث التي تحصل عليها خفية افتراضيا, ويجب أن يكون تبديل في الرأي.
بالتأكيد اتجاه مفيد ل توفير مساحة على الصفحة بينما لايزال الحفاظ على ميزة البحث في متناول. إذا كنت غير متأكد من مكان وضع نموذج بحث في تصميم جديد ، فقد تفكر في استخدام حقل تبديل مرتبط بأيقونة عدسة مكبرة في التنقل.
14. رسائل Adblock
لا يوجد إنكار حقيقة ذلك حظر الإعلانات آخذ في الارتفاع. والسؤال الوحيد هو كيف سيتعامل الناشرون مع هذا الاتجاه. بعض المواقع بأدب إضافة رسائل إلى المساحات الإعلانية مثل Time.com. على Hongkiat ، ستلاحظ الإعلانات الداخلية لملء الفراغ هذا الرابط كذلك في الموقع.
اتجاه خطير واحد أرى أنه يتزايد كتل المحتوى adblock. هذه هي تقنية ل “منع حاصرات الإعلانات”. هذه الميزة موجودة بالفعل في العديد من المواقع الكبيرة مثل Business Insider و Forbes. لسوء الحظ ، هذا يضر كل من المستخدم والناشر ، وينبع كل ذلك من تقنيات الإعلان ذات الجودة الرديئة.
في نهاية المطاف ، لا يهم من أنت المسؤول أو المكان الذي تقف فيه في نقاش منع الإعلانات. يقوم المزيد من الأشخاص بتثبيت الإضافات adblock ، وأنا أتوقع المزيد من الناشرين للرد.
15. أيقونات SVG نقية
رسومات SVG قد تسربت بالفعل إلى شبكة الإنترنت ولكنها تنمو بشكل أكبر كل يوم. ولدي شعور بأن 2017 سيكون عام ضخم ل SVGs على الويب.
يمكنك أن تجد الآلاف من مجموعات أيقونات SVG المجانية على مواقع مثل Flaticon إذا كنت تعرف كيفية البحث. ولكن يمكنك أيضا رمز SVGs إلى HTML, على سبيل المثال عن طريق استخدام هذا المثال على CodePen.
لذلك ، لدى المصممين طريقة لاستخدام SVGs ، والمطورين لديهم طريقة لاستخدام SVGs كذلك. دعم المتصفح الحديث يبدو جيدا في جميع المجالات ، لذلك لا توجد مشكلة مع التوافق. كل ما هو مطلوب هو ما يكفي من المصممين ل التعرف على قوة SVGs وابدأ استخدامها!
16. أدوبي XD
أدوبي اخماد نسخة تجريبية كاملة من Adobe XD في عام 2016 ، ومنذ ذلك الحين نمت بسرعة. حاليا يدعم كلا من ماك وويندوز, وانها في مرحلة الاختبار قبل أن يتم طرحها بالكامل.
يمكنك الاستهزاء بفكرة أي برنامج يتخطى Sketch لكن Adobe هي شركة البرمجيات الرئيسية للأعمال الإبداعية لسبب ما. لا يزال Plus Sketch يعمل بنظام Mac فقط أثناء استخدام Adobe نتطلع لدعم الجميع.
أعتقد اعتقادا راسخا أننا سنقرأ المزيد عن Adobe XD في العام المقبل. قد يصبح برنامج الانتقال إلى تصميم نماذج بالحجم الطبيعي UI-حتى نتمكن في النهاية من استخدام Photoshop كأداة لمعالجة الصور (كما هو مقصود).
مع ظهور برامج جديدة ، يأتي العشرات من البرامج التعليمية ومجموعات واجهة المستخدم الرسومية الهدية الترويجية كذلك. يمكنك العثور على الكثير من برامج Adobe XD المجانية في Dribbble مع موقعين فريسينغ جديدين يركزان على XD Designmine و XD جورو.
17. المزيد من القوائم همبرغر
أحبها أو أكرهها همبرغر هو هنا للبقاء. هناك الكثير من دراسات قابلية الاستخدام يجادل ضد القوائم المخفية عن الأنظار. ولكن مع وجود شاشة صغيرة وبدائل كثيرة فقط ، لا يوجد بديل أفضل في الوقت الحالي.
الرموز همبرغر ببطء تصبح الرموز التعرف عليها لقوائم التنقل. تماما مثل رمز العدسة المكبرة يعني “بحث”, سيكون رمز الهامبرغر ذو الثلاثة أشرطة مرادفًا له قريبًا “قائمة طعام”.
هذا صحيح بالفعل بالنسبة لمعظم الأفراد الأذكياء. ولكن مع مرور كل عام ، يحصل المزيد من الناس على هواتف ذكية ويبدأون في تصفح الويب على الهاتف المحمول. وهم يتعلمون ربط هذا همبرغر مع قائمة التنقل مع عدم وجود نهاية في الأفق.
18. أيقونات ميزة المنتج
كتبت عن هذا الاتجاه في تري هاوس ولكن لم أذكره مؤخرًا. والذهاب إلى 2017 هذا الاتجاه هو سيصبح ضخم. ربما تكون الطريقة الأكثر شيوعًا ل مشاركة ميزات المنتج على الصفحة الرئيسية.
أنت تبدأ من قبل صنع قائمة من الميزات لمنتجك. يمكن أن يكون المنتج أي شيء من برنامج SaaS إلى سمة WordPress أو حتى عنصر مادي.
ثم يمكنك أيضا تصميم الرموز المخصصة أو العثور على مجموعة الرموز لتمثيل هذه الميزات. من الأفضل أن تجنب الميزات العامة مثل “موثوق” أو “بسرعة” لأن معظم الناس يتوقعون هذه الأشياء.
بدلا من ذلك ، قائمة الميزات هذا يهم فعلا. إذا كان هناك سمة مميزة لبرنامج WP ، فربما تدرج أنها تستجيب ، أو عدد الأدوات المصاحبة لها ، أو كيفية عمل القائمة.
هذه الرموز الميزة العمل مثل الصور للمساعدة بيع كل ميزة. النص وحده هو من الصعب أن تستهلك لكن الصور هي أسهل بكثير ل فهم في لمحة.
19. CTAs أعلاه
ندعو إلى اتخاذ إجراءات تقليديا وضعت في جميع أنحاء الموقع. لكن مع الزوار قضاء وقت أقل على المواقع, من الأهمية بمكان أن يكون لديك CTA قوي الحق فوق أضعاف.
قد تكون "دعوة إلى الإجراءات" هذه عبارة عن أزرار أو نماذج تمكين أو غيرها من المدخلات دفع الناس إلى اتخاذ بعض الإجراءات مثل الاشتراك أو قراءة منشور المدونة.
لا يمكنني إخبارك بكيفية تصميم CTA أو كيفية تحسينه للتحويلات. لكن يمكنني القول أن الاتجاه يبدو أنه يضع هذه الاتفاقيات فوق أضعاف وبوضوح الرؤية لجميع الزوار لرؤية.
20. أصغر مجالات المحتوى
لقد نمت الشاشات بشكل كبير لدرجة أن معظم مواقع الويب عليها تعيين الحد الأقصى للعرض. من الصعب قراءة الجمل عندما يكون عرضها 2000 بكسل مقارنة بعرض 700 بكسل فقط.
محتوى أصغر هو أسهل في الاستهلاك, ويخلق في النهاية تجربة أفضل على المواقع ذات المحتوى الثقيل.
أعتقد أن المزيد من المصممين يدركون ذلك ، وسوف يفعلون ذلك ببطء تقليل حجم مناطق المحتوى الخاصة بهم. أفضل عرض 750 بكسل كحد أقصى ولكن يمكن أن تكون صغيرة مثل 600 بكسل أو أقل.
فقرات أقصر مع الجمل أقل و مناطق محتوى أصغر سوف دائما زيادة سهولة القراءة. قد تنحرف المنشورات الرئيسية مثل نيويورك تايمز عن طريق إرشادات هيكلية خاصة بها. ولكن بالنسبة إلى مدونة أو موقع أعمال بسيط ، فإن الاتجاه يسير نحو الأمام محتوى أطول مع فقرات أصغر ومناطق محتوى.
تغليف
هناك العديد من الاتجاهات الأخرى التي لم أتمكن من تغطيتها في هذا المنشور ، لكنني أعتقد أن هذه العشرين هي الأكثر إثارة للاهتمام. مع تقدمنا إلى عام 2017 ، يجب أن يكون من الواضح الاتجاهات التي تنفجر وأيها ليست كذلك.
وإذا كانت لديك أفكار أو اقتراحات أخرى لاتجاهات التصميم القادمة ، فلا تتردد في إسقاط تعليق أدناه.
