20 اتجاهًا مهيمنًا لتصميم الويب لعام 2022

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

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

أحد الموضوعات المشتركة بين هذه الاتجاهات هو تصميم الحركة. يعتقد Gary Simon ، مصمم UI / UX ومطور الواجهة الأمامية ، أن تصميم الحركة سيكون في كل مكان في عام 2022. لمشاهدة العديد من الأمثلة على مواقع الويب التي تستخدم الرسوم المتحركة القائمة على التمرير ، وتأثيرات المنظر ، وصور SVG المتحركة والمزيد ، تحقق من الفيديو الخاص به:

1. التنقل التجريبي

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

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

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

2. تأثيرات التمرير

ما نحبه: يمكن أن تحفز تأثيرات التمرير الزوار وتشجعهم على الاستمرار في التمرير.

يمكن أن تؤدي تأثيرات التمرير - الرسوم المتحركة التي يتم تشغيلها بواسطة إجراء التمرير - إلى إنشاء تجارب ويب أكثر ديناميكية. يتم استخدامها بشكل متزايد على مواقع الويب التفاعلية لإثارة اهتمام القراء بالاستمرار في التمرير ، والإشارة إلى حدوث انقطاع في المحتوى ، وإنشاء تجربة ثلاثية الأبعاد.

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

3. الطباعة الحركية

ما نحبه: يمكن للطباعة الحركية أن تسعد الزوار وتساعدهم على استيعاب المحتوى الخاص بك.

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

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

4. اسحب التفاعل

ما نحبه: يمكن أن يوفر تفاعل السحب للمستخدمين إحساسًا بالتحكم في تجربتهم.

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

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

5. ريترو الطباعة

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

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

هذا جزء من اتجاه أكبر يسمى "Neue Nouveau". في تقرير اتجاهات النوع لعام 2022 ، تصف شركة Monotype المسبك والتكنولوجيا Neue Nouveau بأنه تطور في حركة Art Nouveau ، والتي تميزت بتصميمات زخرفية ونهايات مزخرفة وأشكال شخصية قطرية ومثلثة. يمكننا أن نرى بعض هذه الخصائص نفسها - مثل الأشكال العضوية والازدهار - في الطباعة اليوم ، وفقًا للتقرير.

هذا مثال من المطعم الفرنسي Picky Joe. يتطابق العنوان ذو المظهر المخدر مع التصميم الداخلي القديم للمطعم كما هو موضح في الصورة على اليمين.

يمكنك التحقق من تصميمات مواقع المطاعم الأخرى هنا .

6. سينماغرافس

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

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

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

7. الوحشية

ما نحبه: الهمجية تعطي الأولوية للبساطة والوظائف ، وهما ركيزتان لتجربة المستخدم.

لتبرز في بحر من المواقع الإلكترونية المنظمة والمرتبة ، يختار بعض المصممين هياكل انتقائية أكثر تتحدى الاتفاقيات. على الرغم من أن الأمر قد يبدو مزعجًا في البداية ، إلا أن العديد من العلامات التجارية الشهيرة تدمج الآن عناصر التصميم البديلة بقوة في مواقعها ، مثل Bloomberg.

ظهرت الوحشية كرد فعل للتوحيد القياسي المتزايد لتصميم الويب وغالبًا ما تتميز بصور صارخة وغير متكافئة وغير مطابقة ، ونقص واضح في التسلسل الهرمي والنظام. بعبارة أخرى ، من الصعب وصفها ولكنك تعرفها عندما تراها - كما هو الحال في المثال أدناه من Chrissie Abbott.

8. التدرجات أحادية اللون

ما نحبه: التدرجات أحادية اللون مثيرة للاهتمام بصريًا ولكنها لا تشتت الانتباه.

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

قالت Kendra Pembroke ، المصممة المرئية في Red Ventures ، "أرى الكثير من التدرجات اللونية ، خاصة التدرجات أحادية اللون ، والتي تعطي إحساسًا بالعمق والاهتمام البصري دون أن تكون مشتتة للغاية."

يوضح Creative Studio Better Half مثالًا رائعًا لكيفية جعل هذا التأثير يبدو منعشًا وحديثًا. فهو يجمع بين الطباعة الجريئة والرسوم المتحركة بالمرور مع خلفية متدرجة باللون الأصفر الباستيل أحادية اللون.

9. التصفيف

ما نحبه: يمكن أن يساعد التصفيف في إضافة عمق للموقع وإخبار قصة العلامة التجارية.

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

10. نص فقط

ما نحبه: يضمن هذا النهج البسيط حصول الزوار على المعلومات الأساسية فقط.

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

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

11. الرسوم التوضيحية المتحركة

ما نحبه: تساعد الرسوم التوضيحية المتحركة في نقل الأفكار المعقدة وإضافة بعض السمات إلى الموقع.

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

في تصميمات مواقع الويب هذا العام ، غالبًا ما يتم تحريك هذه الرسوم التوضيحية لإضافة التفاعل.

على سبيل المثال ، إذا قمت بالتمرير فوق أحد الرسوم التوضيحية على موقع NewActon (المصمم من قبل الوكالة الرقمية الأسترالية ED) ، فسوف يتذبذب الرسم التوضيحي وتلك الموجودة في المنطقة المحيطة. بعد ذلك ، فقط الرسم التوضيحي الذي تحوم فوقه سيستمر في التحرك في دائرة صغيرة. هذا التصميم عملي أيضًا: يمثل كل رسم توضيحي إحدى الفئات من قائمة التنقل على اليمين.

12. بساطتها فائقة

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

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

يتمحور الموقع من المصمم Mathieu Boulet حول عدد قليل من روابط الاختيار إلى ملفاتهم الشخصية ومعلوماتهم الاجتماعية.

13. خلط نص أفقي ورأسي

ما نحبه: يتحدى المزج بين النص الأفقي والعمودي التقاليد ، وبالتالي يمكن أن يفرح ويثير اهتمام بعض المستخدمين.

يؤدي تحرير النص من المحاذاة الأفقية المعتادة ووضعه عموديًا على الصفحة إلى إضافة بعض أبعاد التحديث. خذ هذا المثال من منتجي الفيديوهات الرياضية المفعمة بالحيوية Prime Park Sessions ، والتي تجمع محاذاة النص الأفقية والعمودية في صفحة صغيرة.

14. الأشكال والأنماط الهندسية

ما نحبه: يمكن للأشكال والأنماط الهندسية توجيه انتباه الزائر إلى منتجات معينة أو عبارات تحث المستخدم على اتخاذ إجراء.

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

15. الخطوط الرقيقة Serif

ما نحبه: يضيف هذا الاتجاه مستوى من التطور إلى العلامة التجارية.

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

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

كما رأينا في The Sill ، يضيف العنوان الرقيق الأنيق جرعة من الرقي والأناقة.

16. تداخل النص والصور

ما نحبه: يؤدي تداخل النصوص والصور إلى زيادة المساحة على الصفحة.

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

17. شبكات مكسورة

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

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

18. الأشكال العضوية

ما نحبه: تضيف الأشكال العضوية طابعًا مميزًا دون تشتيت الانتباه عن المحتوى.

لقد ولت أيام التخطيطات الشبكية الصارمة والحواف الحادة - الآن الأمر كله يتعلق بالخطوط المنحنية والأشكال العضوية اللينة.

قال بيمبروك: "يمكن أن تساعد الأشكال العضوية في إضافة بعض المرح دون التأثير على طريقة عرض المعلومات".

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

19. نسيج الويب

ما نحبه: نسيج الويب يلفت الانتباه إلى قسم معين على موقع الويب.

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

20. خطوط الشبكة

ما نحبه: يؤكد هذا الاتجاه على الشبكة كمبدأ منظم.

بدأت خطوط الشبكة في الظهور أكثر فأكثر في الأشهر الأخيرة ، ولسبب وجيه. تقوم خطوط الشبكة ببناء المحتوى بطريقة تسهل قراءته وفهمه - ولكنها تضيف أيضًا جمالية حديثة. في أسس موقع Better Oregon على الويب ، تُستخدم خطوط الشبكة لإنشاء تخطيط واضح يبدو مستقبليًا.

اتجاهات التصميم التي يمكنك استخدامها على موقع الويب الخاص بك

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

ملاحظة المحرر: تم نشر هذا المنشور في الأصل في يناير 2018 وتم تحديثه للشمول.