اتجاهات تصميم الويب في عام 2018 , حصيلة السنة

اتجاهات تصميم الويب في عام 2018 , حصيلة السنة

شارك هذا المقال:



عام 2018 شارف على النهاية , ونتجه حاليا الى عام 2019 محملين بالمزيد من الخبرة ومزيد من الأفكار في التصميم وكما يعرف عن تصميم الويب فهو سريع التغير وعالي المرونة , ومن الأمور الأساسية بالنسبة لنا كمصمممين أن نبقى دائماً على اطلاع بجديد عالم التصميم وموضوعنا هنا بالذات هو تصميم الويب . نقدم لكم قائمة من 15 اتجاه لتصميم الويب لعام 2018.

1- البساطة و الراحة

الأقل هو الأفضل : يستمر نجاح البساطة في تصميم الويب هذا العام ومع مزيد من المساحات الفارغة , تصميم بسيط و متعدد الأغراض لكن يوجه رسالة واضحة للمستخدم

الراحة يتم انشائها عن طريق الأنيميشن , لا أتحدث عن أي انيميشن عشوائي لكن أتحدث خصيصاً عن البطيئ و المفصل منها , محتوى بسيط و مركز على الشاشة يجعل المستخدم يفهم رسالتك من النظرة الأولى , ومن المعروف أن الانطباع الأول يدوم أكثر

Slow & Comfort

 

2- التصاميم المستقبلية 

المصممون يتفوقون على مخرجي الأفلام في انشاء المستقبل

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

New Design

New Design 2

3- الرسوم ومقاطع الفيديو المخصصة

صورة لنقل رسالة تساوي ألف كلمة , كما أنها توفر مساحة وتثير أهتمام المستخدم

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

ولاقناعك بتلك المعلومة , فمعدلات مشاركات المستخدم على انستغرام أكثر ب 59 مرة من على فيسبوك , بسبب الصور

Illustrations

وحسب الدراسات , يقضي المستخدم وقتأ أطول بنسبة 100% على الصفحة التي يوجد بها ملف مرئي واحد على الأقل (صورة - فيديو) مقارنة بالصفحات الجامدة 

ومما يثير الاعجاب أكثر , ان المتسوقين عبر المواقع أكثر أحتمالاً لشراء المنتج بنسبة 85% بعد مشاهدة عرض تجريبي له , وهو ما يكون غالباً صورة أو فيديو

4- الظلال تعطي عمق أكبر للعنصر

تؤثر الظلال في نفس المستخدم , فهي تخلق شعور بالوهم بشكل عميق , وهي المفضلة في عالم التصميم , مع ذلك فالظلال تحول موقعك من تصميم مسطح الى شبه مسطح Flat to Semi Flat

Shadows

يمكنك استخدام الظلال والألوان مع تباين بسيط فيما يلي :

1- لجعل أزرار CTA أو ما يعرف ب Call to Action تبدو كانها مرفوعة قليلاً وجاهزة ليتم النقر عليها

2- لانشاء تسلسل هرمي بين العناصر , وهذه مهمة لتجربة الاستخدام 

ولكن احذر , لا تستخدم الظلال بشكل مفرط

5- موقع وشعار متجاوب (الهاتف أولاً)

في 2018 الهواتف المحولة نالت نصيب الأسد في تصفح الويب , لذا نجد أن جوجل قامت بتحويل محرك البحث الخاص بها الى تصميم الهاتف أولاً , ومصممي الويب الآن أكثر راحة باستخدام التصاميم المتجاوبة .

 Responsive Brands

في عام 2018 يجب أن يكون موقع و شعار الشركة متجاوباً للحفاظ على صورتهم أمام جمهورهم بغض النظر عن نوع أجهزتهم , أبق ذلك في اعتبارك.

6- الحد الأدنى من الصور الحقيقية

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

يتم استخدام هذه الطريقة بشكل معمق في مواقع التسوق الإلكتروني , ولا زالت تحقق نتائج جيدة ويبدو شكلها جميل واحترافي , فلم لا ؟

Less Studio Images

7- مزيد من المساحات السلبية

المساحات السلبية هي الفراغات بين و حول المحتوى , يمكنك اختيار اللون المناسب لها وليس الأبيض بالضرورة _استخدام الفضاء السلبي هو عنصر أساسي في التركيب الفني , ويكيبيديا

يستخدم مصممو الويب المساحات السلبية لجذب اهتمام المستخدم لشيئ مهم على الصفحة , انه طبعا زر CTA (Call to Action أو المنتج الخاص بك. يستخدم المصممون المساحات السلبية بشكل درامي لانشاء نقاط التواصل .

ما هي نقاط التواصل ؟ هي نقاط الاختلاف أو الاهتمام أو التركيز بين العناصر التي تجذب اهتمامنا...

Negative Space

8- الأنيماشن , الصور المتحركة و اللقطات السينمائية

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

نرى العناصر التي تتحرك في اتجاه واحد أكثر اتصالاً من تلك التي تتحرك في اتجاه معاكس أو تبقى ثابتة _استطلاع رأي 

استخدم الرسوم المتحركة والأنيماشن و اللقطات السينمائية في انشاء صفحات الهبوط Landing Page مميزة , ستجد لذلك نتائج مبهرة وأعتقد سابقاً أنك لاحظت ذلك , لأنك ببساطة تستخدم وسائل التواصل الاجتماعي , حاول دراسة نوعية المنشورات التي تثير اهتمامك أو تجد عليها كم كبير من الاهتمام , ماذا وجدت ؟ صحيح :)

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

Animations

10 - التدرجات اللامعة و الألوان الجذابة

التدرجات اللونية عادت الى الاستخدام ! بعد فترة طويلة عادت التدرجات بنسختها المثالية لتصبح مشهورة الاستخدام مؤخراً , يمكنك رؤية ذلك بوضوح من خلال Spotify و iPhoneX

Graidents

نشر موقع Awwwards مقالاً عن أفضل التدرجات , هذا لوحده دليل كاف على أنهم يحكمون الويب حالياً

11- الخطوط العريضة والنصوص الابداعية

أصبح تعدد الخطوط في 2018 أمر عادي , سابقاً كان الموقع يحتوي على نوع خط واحد أو نوعين لكن الآن قد تجد أن الموقع يحتوي 5 أو 6 خطوط منسقة بطرق مميزة لاعطاء نتيجة ابداعية , بدء المصممون يتجهون الى استخدام الخطوط لانشاء الابداع وتقليل الاعتماد على الصور أو محاذاة العناصر وغيرها 

الخطوط الكبيرة (أكبر حتى من h1) تستبدل الصور حالياً , ومن المتوقع أن نجد تطوراً أكبر في هذا القسم مع بداية 2019

Bold

12- خلفيات الجسيمات المجزئة

ان لم يتم تحميل موقعك خلال ثانتين , 90% من الزوار سيغادرونه , هذا ما تقوله جميع المدونات المختصة بتحسين محركات البحث و التسويق , وكل ثانية تأخير تقلل من رضا العملاء بنسبة 16% وتقلل نسب المبيعات بنسبة 7%

ما هي العلاقة بين السرعة وخلفيات الجسيمات ؟ الجواب بسيط , خلفية الجسيمات تتحمل بسرعة أكبر وتلفت انتباه المستخدم بسرعة وهذا يجنبك كل المشاكل الممكنة مع خلفيات الفيديو

Backgrounds

13- حقق المزيد من المساحة مع المحتوى المنقسم

اثنان بسعر واحد ! تقسيم الصفحة يعطيك المزيد من المساحة لاضافة المحتوى وتنسيقه الى عين المستخدم , كوضع الصور في جهة والنصوص في جهة أخرى مثلاً

Split Content

بهذه الطريقة يمكنك اضافة المزيد من المحتوى دون التأثير على تجربة الاستخدام , جربها في 2019 !

14- الأيقونات الملونة و الأيقونات المعدلة

الأيقونات الملونة سهلة القراءة وعميقة التأثير في نفس المستخدم

Icons

يمكنك استخدام أيقونات بحواف ملونة لترك مساحة بيضاء في الوسط , هذا النوع من الأيقونات يتم تحميله بسرعة ويعطي مظهر عصري لموقعك .

15- اجعل المحتوى جاهز للطباعة

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

Ready to Print

القائمة السابقة كانت هي الأكثر اهتماماً خلال عام 2018 في عالم تصميم الويب , كما سبق وذكرنا أن عالم التصميم يتغير بسرعة فقد نجد أن بعض عناصر القائمة السابقة لا يناسب التطور الحاصل في 2019 على سبيل المثال , لتوقع المستقبل علينا ان ننظر الى الاحصائات ونفهم المستخدم وحاجته وما سيتأمل الحصول عليه مستقبلاً , بذلك نستطيع توقع ما سيتم التركيز عليه في العام المقبل

تذكر أن التصميم يختلف عن الموضة , الموضة تعتمد على الفن أما التصميم فيعتمد على القواعد والا فانه ليس تصميم , انه فن.



ما رأيك في هذا المقال؟

كيف تقييم نوعية المحتوى في نقرة؟

5 4 3 2 1