5 اتجاهات تصاميم الويب الفعلية لعام 2016

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

1) ملء الشاشة وليس للتمرير

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

أساسيات الخصوصية في فيسبوك

ثلاثة أمثلة لمواقع ملء الشاشة دون التمرير:

  1. أساسيات خصوصية Facebook - موقع رائع ، وإن لم يكن مستجيبًا ، عن طريق Facebook يشرح كيف تعمل الخصوصية في خدمتهم خطوة بخطوة. الرسوم التوضيحية كبيرة!
  2. Fantasy - موقع وكالة Fantasy للتصميم الجديد الذي طال انتظاره والذي تم إطلاقه في وقت سابق من هذا العام ولم يخيب ظنك تحقق بشكل خاص من قسم العمل ، كل شيء يبقى في الشاشة.
  3. KLM 50 Travels - موقع حملة جميل لـ KLM. يأخذك عبر 50 وجهة ، شاشة واحدة في ذلك الوقت. انتقل باستخدام أسهم لوحة المفاتيح وشريط المساحة.

2. عنوان لزجة على الجانب

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

الكود والنظرية

ثلاثة أمثلة لعناوين الصحف اللزجة على الجانب:

  1. الرمز والنظرية - تظل عناوين المدينة في الصورة عند التمرير عبر المواقع المفتوحة على هذا الموقع الجميل.
  2. Stack Overflow - هذا الحساب لا يلائم الفاتورة مائة بالمائة ولكنه ليس موقع وكالة بحيث يمنحه تصريحًا. عند التمرير ، يبقى التنقل الفرعي مثبتًا على اليمين. لطيف.
  3. DDB Sthlm - أنا من السويد لذلك أرمي مثالًا سويديًا أيضًا. إذا قمت بالضغط على "العمل من" في قائمتهم وانتقل لأسفل ، فسترى أن العنوان العمودي يبقى على الجانب.

3) الشعار هو محمل

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

أداة

ثلاثة أمثلة لاستخدام الشعار كمحمل:

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

4) صور الخلفية تعطلت

إن امتلاك صور خلفية تملأ نافذة المتصفح بأكملها ليس بالأمر الجديد ، فقد يكون في الجزء العلوي من المنشور الكلاسيكي Actual Web Design Trends 2013 ، لكن هذا ينقله إلى مستوى جديد. أضف بعض تأثيرات تحريك الماوس على صورة الخلفية الخاصة بك وأنت على ما يرام.

نظرية نشطة

ثلاثة أمثلة على صور الخلفية المعطلة:

  1. اجعلني أشعر بالنبض - حرك الماوس فوق الخلفية وشاهد الجبال تنبض بالحياة ، وقد تمت بشكل جيد جدًا.
  2. النظرية النشطة - إذا كنت تقوم بإنشاء موقع ويب لوكالتك ، فما هي أفضل طريقة لإظهار حصولك على بعض مهارات الويب المجنونة بدلاً من جعلها تبدو وكأنها تجربة Google؟ لا شيء.
  3. التفاصيل - هذا سيستغرق بعض التمرير. يبدو أن وكالة التصميم السويسرية لا تؤمن بروابط الربط ، لذا إذا قمت بالتمرير لأسفل إلى أسفل الصفحة 4/4 Nos Experts وتحريك الصور التي سترى تشويهاً بسيطًا عليها. لطيف!

5) على أعلى الرسوم المتحركة

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

Waaark

ثلاثة أمثلة لأكثر من الرسوم المتحركة الأعلى:

  1. Waaark - Lol ، أنتج هذا الاستوديو الصغير التصميم أكثر التجارب البصرية المذهلة لهذا العام. اترك الأمر للفرنسيين للذهاب إلى القمة عندما يتعلق الأمر بالرسوم المتحركة.
  2. Animocons - هذه بعض الأمثلة على الرموز التي تحتوي على رسوم متحركة مذهلة للنقر ، وكل ذلك يتم باستخدام كود الويب.
  3. يقوم Rally Interactive Beta - Rally بعمل رائع لعدم امتلاكه فقط القدر المناسب من الرسوم المتحركة على موقعه. لقد أصبحوا مجانين في الأعلى ، ثم احتفظوا به في حالة نقر عند النقر فوق شيء ما.

المكافأة: ليست في الحقيقة اتجاه حتى الآن ، فقط رؤيتها في مكان واحد أو اثنين ولكن بناء مواقع مستجيبة تستجيب إلى ما لا نهاية ستكون ضخمة. بمعنى آخر ، يبدو الموقع تمامًا على شاشة 1280 بكسل كما هو الحال على شاشة Retina 5100+ px + iMac 27 ، وهو أكبر حجمًا فقط. تحقق من الموقع الرائع لمشغل الاتصالات البرازيلية Oi على سبيل المثال.

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

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