20 أهم الاتجاهات التي ستشكل تصميم مواقع الويب تعال 2016

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

من الصعب التنبؤ بالاتجاهات الدقيقة التي ستجذب الانتباه الأكبر. بعد التاريخ الحديث يظهر نمط من الاتجاهات التي كانت تنمو مثل النار في الهشيم. لقد نظمت 20 اتجاهًا فريدًا اكتسبت قوة جذب خلال عام 2015 ومن المرجح أن تستمر حتى عام 2016.

1. رسم التطبيق لتصميم واجهة المستخدم

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

تطبيق Sketch App هو تطبيق Mac فقط صُمم خصيصًا لمصممي الويب والجوّال. يوفر بيئة عمل أكثر سلاسة لصياغة عناصر متجهة لأي واجهة ، ومع ذلك يحتفظ أيضًا بالعديد من الميزات التي تتوقعها من Photoshop مثل تأثيرات النص وأنماط الطبقة.

على الرغم من عدم وجود دليل على أنه سيتم إصدار Sketch لنظام التشغيل Windows ، إلا أنه لا يزال خيارًا قيِّمًا لدى مستخدمي OS X. يتيح سير العمل المُبسَّط وسعر التكلفة الأرخص لـ Adobe تشغيلًا مقابل المال. إذا استمرت Sketch في تقديم أفضل تجربة تصميم واجهة مستخدم ، فستستمر بالتأكيد في النمو جيدًا في عام 2016 وما بعده.

2. IDE المستندة إلى المستعرض

توجد IDE لسطح المكتب على مدار عقود مع خيارات تتراوح ما بين Notepad ++ و Xcode و Visual Studio. يسهل IDE كتابة التعليمات البرمجية مع اقتراحات وتمييز بناء الجملة (من بين ميزات أخرى).

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

تعمل أجهزة IDE السحابية بشكل أكبر مثل تطبيقات الويب حيث يمكنك حفظ مقتطفات الكود في حسابك للمشاركة أو التخزين الشخصي. CodePen هي واحدة من IDEs الأكثر شعبية مع دعم HTML / CSS / JS إلى جانب المعالجة المسبقة المخصصة مثل Jade / Haml و LESS / SCSS.

Mozilla Thimble هو IDE آخر لبدء المطورين الذين يرغبون في التعلم أثناء ترميزهم. يعد Codeply أيضًا رائعًا لاختبار الأطر المستجيبة المحددة مثل Bootstrap أو Zurb's Foundation دون الحاجة إلى تنزيل أي ملفات.

3. خال من ساس / SCSS الخلطات

لطالما كانت المعالجات المسبقة عصرية منذ سنوات ولكن لم تصبح مؤخرًا سوى التيار السائد بما يكفي لتشعر في كل مكان في جميع مجالات تصميم / تطوير الويب. في هذه الأيام ، يبدو من الغريب أن تكتب الفانيليا CSS عندما تستطيع Sass / SCSS توفير المزيد.

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

بعض المخلوطات تأتي في مكتبات مثل بوربون بينما البعض الآخر يمكن أن يكون عناصر قائمة بذاتها. حاول إجراء بحث في GitHub عن خلاصات Sass / SCSS لمعرفة ما يمكنك العثور عليه.

4. تخطيطات البطاقة

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

من الأفضل استخدام تخطيط البطاقة على الصفحات التي تحتوي على الكثير من البيانات التي يجب أن تكون قابلة للفحص. تستخدم الصفحة المقصودة لـ Google Now تخطيط بطاقة للإعلان عن البطاقات الاختيارية لتطبيق Google Now.

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

5. مخصص فيديو الشرح

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

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

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

6. يعيش معاينات المنتج

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

خذ على سبيل المثال صفحة المنتج سلاك. ويتميز بجولة فيديو ورسومات متجهة تغطي واجهة Slack. تهدف معاينات المنتج هذه إلى إعطاء المستخدمين المحتملين لمحة عن كيفية عمل المنتج.

Webydo هو مثال رائع آخر مع الرسوم المتحركة الحية التي تلعب على الصفحة الرئيسية. يتيح هذا للزوار رؤية Webydo في العمل دون الحاجة إلى عرض المنتج يدويًا. لكنك لست بحاجة دائمًا إلى الاعتماد على الرسوم المتحركة لمعاينات المنتجات. يستخدم Iconjar لقطة شاشة PNG بسيطة لإظهار ماهية المنتج وكيف يعمل.

7. الآلي العدائين المهمة

لقد تغير عالم تطوير الواجهة الأمامية كثيرًا بفضل مجموعة من أفضل الممارسات الجديدة لإنشاء موقع الويب. يتم استخدام المتسابقين / أنظمة البناء مثل Gulp و Grunt بشكل أكثر تكرارا لعدد كبير من المهام التي كانت تتطلب جهد يدوي في السابق.

الأتمتة هي شريان الحياة للتحول السريع وانتعاش رمز الجودة. لا ترتكب الآلات أخطاء ، لذا كلما زادت قدرتك على العمل آليا بثقة ، قل عدد المشكلات التي تواجهها (نظريًا).

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

8. تطبيقات JS موبايل الأصلية

أنا مدافع كبير عن استخدام الأدوات المناسبة لهذا المنصب. في حالة تطوير تطبيقات الأجهزة المحمولة ، فإن هذا يعني استخدام Java لنظام Android و Objective-C / Swift لنظام التشغيل iOS.

ولكن ليس الجميع يريد أن يتعلم لغة جديدة فقط لبناء تطبيق جوال. لحسن الحظ ، أصبح إنشاء التطبيقات الأصلية وتجميعها أسهل مع مكتبات بديلة مثل NativeScript أو React Native.

الفجوة في أن تصبح مبرمجًا لتطبيقات الهاتف المحمول تختصر مع القدرة على إنشاء تطبيقات الجوال عبر JavaScript. PhoneGap هو خيار آخر يعتمد على كود HTML / CSS / JS.

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

9. أدوات التعاون للتصميم

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

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

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

10. الأطر الأمامية المستجيبة

لقد كانت الأطر الأمامية مثل Bootstrap موجودة منذ سنوات وتستمر في إثبات فائدتها في المشروعات الشخصية والمهنية. التصميم التجاوب قد شق طريقه إلى الأطر وخلق طلبًا على الكود الأمامي بدلاً من الواجهة الخلفية فقط (Django ، Laravel ، إلخ).

بالانتقال إلى عام 2016 ، أعتقد أننا سنقرأ المزيد حول أطر الواجهة الأمامية سريعة الاستجابة وقيمتها في مشاريع الويب. ينتظر العديد من المطورين بفارغ الصبر إصدار Foundation 6 والإصدار العام v1 من Bootstrap 4.

تشمل الأطر الأخرى الأقل شهرة التي يمكنك التحقق منها Gumby و Pure CSS.

11. زيادة التركيز على تصميم UX

سيستمر مجال تصميم تجربة المستخدم في النمو بسرعة مع المزيد من المصممين والمطورين الذين يلاحظون ذلك. تصميم UI هو جزء من تصميم UX لكنه ليس الهدف النهائي. واجهة المستخدم هي وسيلة لتحقيق غاية ، مع كونها تجربة مستخدم رائعة.

قبل 5 سنوات فقط ، كنت على دراية بالكاد UX أو كيف تم تطبيقه على تصميم الواجهة. الآن لدينا موارد مثل UX Stack Exchange وكتب UX المجانية. إذا كنت لا تعرف الكثير عن تجربة المستخدم ، فهو الآن أفضل وقت للدراسة ومعرفة كيفية تطبيق مبادئ UX على جميع أشكال الواجهات الرقمية.

12. حزمة مديري

ارتفع مديرو الحزم الرقمية بسرعة كبيرة بحيث أصبحوا من الناحية العملية مطلبًا لتطوير الويب الحديث. حلول مثل Bower و NPM يمكن أن توفر الكثير من الوقت لبدء مشاريع جديدة.

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

13. الرسوم المتحركة المتقدمة واجهة المستخدم

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

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

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

14. المصممين يتعلمون الكود

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

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

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

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

15. أدوات مجانية على الإنترنت و Webapps

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

ستجد كل شيء بدءًا من تشفير / فك تشفير URL إلى محرر Markdown المجاني تمامًا. حتى Google Drive نقلت منتجات Microsoft Office إلى المستعرض (مرة أخرى ، مجاني تمامًا).

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

16. نمو مكونات الويب

تحاول مكونات الويب حل مشكلات التعقيد للمطورين. يحتوي موقع WebComponents على موارد ومواد كبيرة لمنح المطورين بداية سريعة في هذا الموضوع.

إذا لم تكن متأكدًا من كيفية فهم مكونات الويب المعيارية ، فراجع هذا المنشور لمعرفة المزيد.

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

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

17. مصادر التعلم عبر الإنترنت

نعلم جميعًا أن الآن هو أسهل وقت لتعلم أي مهارة من راحة جهاز الكمبيوتر الخاص بك. يبدو أن سوق التعلم عبر الإنترنت ينمو بشكل كبير مع ظهور دورات ومواقع جديدة كل عام.

أشعر بثقة أكبر من أي وقت مضى بأننا سنشهد زيادة في التعلم عبر الإنترنت. تقدم المواقع المعروفة مثل Treehouse و CodeSchool دورات لا تصدق إلى جانب مواقع أحدث مثل Bitfountain و Learn-Verified.

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

18. خادم جانب جافا سكريبت

على الرغم من وجود خيارات سابقة لـ JS من جانب الخادم ، لم يتخلل أي منها بنفس سرعة Node.js. سقطت مطوري جافا سكريبت JavaScript في هذه المكتبة وشاهدوها في منافسة مباشرة مع اللغات الخلفية الأخرى مثل Python أو PHP.

تتيح العقدة للمطورين إنشاء مواقع ويب باستخدام لغة واحدة لكود الواجهة الأمامية + الخلفية. والموارد مثل Node Package Manager تعطي قيمة أكبر لـ Node.js.

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

19. ميزات الموقع المدعومة باللمس

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

تم تصميم المكونات الإضافية مثل Photoswipe و Dragend.js للتعامل مع الضرب والتنصت على شاشات اللمس. يبدو أن مطوري الويب لا يقومون فقط بإنشاء مواقع ويب سريعة الاستجابة ، ولكن أيضًا مواقع الويب التي تعمل باللمس أيضًا.

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

20. تصميم المواد على شبكة الإنترنت

كان إصدار Google لتصميم المواد بمثابة نجاح هائل لمصممي Android. يعتبر تصميم المواد لغة تصميم تهدف إلى تبسيط عملية صياغة واجهات المستخدم للهواتف الذكية التي تعمل بنظام Android.

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

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

إغلاق

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

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