🛠️ 🐌 🕺🏾 ألمع اتجاهات تصميم الويب في عام 2016 🛩️ ☝🏼 🔄

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

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

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

1. WebGL (مكتبة رسومات الويب)

من بين أحدث الإنجازات التكنولوجيا الملحوظة WebGL (مكتبة رسومات الويب). تستخدم الكثير من المواقع المدهشة التي ظهرت مؤخرًا.

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

1.1 تطبيق WebGL التفاعلي ثلاثي الأبعاد

تجربة الفضول (NASA)

كان WebGL أحد الموضوعات المركزية في مؤتمر SIGGRAPH لعام 2015 . يمكنك مشاهدة العرض التقديمي على الرسومات ثلاثية الأبعاد و WebGL على قناة YouTube هذه .

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

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

يستخدم موقع Beloola موقع three.js (مكتبة جافا سكريبت)

Beloola هي أول شبكة اجتماعية تم تصميمها على شكل عالم ثلاثي الأبعاد. يشبه Linden Lab في Second Life ، ولكنه لا يتطلب أي برامج خاصة بخلاف المتصفح نفسه.

1.2 WEBGL "فيديو" ثلاثي الأبعاد

Angry Wife (Disp. Madeo)

نوع آخر من 3D في WebGL هو الترويج للعبة Angry Wife . للوهلة الأولى ، يبدو الفيديو العادي ، ولكنه ليس كذلك على الإطلاق. في الواقع ، يستخدم المشهد ثلاثي الأبعاد المدمج في صفحة الويب مكتبة جافا سكريبت three.js .

قام مشروع "The Boat" التلفزيوني SBS TV (أستراليا)

بتحويل قصة الكاتب الفيتنامي Nam Le "The Boat" إلى قصة فيديو تفاعلية باستخدام WebGL. يتكون التطبيق من عدة أجزاء مع رسوم متحركة ممتازة ورسوم توضيحية مرسومة يدويًا. يستخدم Three.js هنا أيضًا ، كما في المثال السابق.

لأن الاستدعاء

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

1.3 تصور البيانات باستخدام WebGL

توصيف الأنسجة (ماتان Stauber)

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

"متحف العالم" (الذي طوره المتحف البريطاني وجوجل)

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

يمكنك التقدم للأمام والخلف في الوقت على طول المحور Z أو Y والقارات باستخدام المحور X. وباستخدام القائمة ، يمكنك تحديد علامات للكائنات التي تم تجميعها حسب الموضوعات الرئيسية (التجارة والصراع وما إلى ذلك).

1.4 الرسوم المتحركة ثنائية الأبعاد على أساس WebGL

Nouvelles-Ecrisions from FranceTV

مشروع " Nouvelles Ecrisions " (المترجم تقريبًا. "مخطوطات حديثة") لقناة FranceTV التلفزيونية الفرنسية هو موقع به تطبيق مثير للاهتمام للغاية للرسوم المتحركة WebGL 2D في متصفح. الشعور بأنك تقرأ لفيفة مصورة غنية تمرر بسلاسة عموديًا. ونفذ المشروع بمساعدة جافا سكريبت المكتبات Pixi.js .

من وجهة نظر فنية ، هو رسم متحرك ثنائي الأبعاد متواصل يعمل في مساحة ثلاثية الأبعاد زائفة. تبدو رائعة للغاية!

2. VR (الواقع الافتراضي)

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

هل سمعت عن Google Cardboard ؟ مع هاتف Android وقطعة من الورق المقوى ، يمكنك الشعور بالواقع الافتراضي في المنزل. أضافت Google إلى النظارات المؤقتة تطبيق Android خاصًا - Cardboard Camera ، والذي يتيح لك عرض الصور الافتراضية. كان هذا التطبيق واحدًا من أفضل التطبيقات وفقًا لصحيفة الغارديان في يناير 2016.

ومع ذلك ، إذا كنت ترغب في "واقع افتراضي" أفضل ، يمكنك طلب مجموعة Rift VR مسبقًامن Oculus (حوالي 600 دولار). هناك تقاطع بين Google Cardboard و Oculus - إنه Samsung
VR GEAR (100 دولار).
هل هناك فرق في تصميم الويب؟ ليس بعد ، ولكن ألق نظرة على WebVR (واجهة برمجة تطبيقات JavaScript التي توفر الوصول إلى أجهزة VR) وبعض المشاريع التي تستخدم هذه التقنية. يمكن العثور على أمثلة عمل على موقع Mozilla VR على الويب . إليك ما يقوله المطورون أنفسهم: "نريد إنشاء نظام واقع افتراضي مفتوح وعالي الأداء للمواقع".

2.1 فيديو VR

قبض على التنين ("قبض على التنين") من قبل بيجو يعد

العرض الترويجي Peugeot 208 مثالاً رائعًا على تفاعل أجهزة الواقع الافتراضي والفيديو. عند بدء التشغيل ، يُقترح تحديد خيار العرض المطلوب: VR (لـ Google Cardboard) أو فيديو بانورامي 360. كلا الإصدارين تفاعليان بالكامل. إذا كنت تستخدم جهازًا مزودًا بجيروسكوب ، فسيتعين عليك أن تدير رأسك بنشاط "لالتقاط التنين".

3. نظم الجسيمات

بدأ استخدام

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

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

4. مناظر بانورامية

Rainforest (Rainforest) بواسطة Rainnskogfondet

Rainforest ليست مجرد صورة بانورامية. مع كل خطوة ، ستنغمس أكثر فأكثر في الغابة من خلال رؤية 360 درجة كاملة.

هنا ، مشهد ثلاثي الأبعاد عالي الجودة ، بانوراما ملء الشاشة. ومع ذلك ، فإن دمج العناصر الملاحية في هيكل "العالم" يبدو أكثر إثارة للاهتمام.

5. فيديو بملء الشاشة مع مشاهد وعناصر تفاعلية

يستخدم Milka's Christmas Express (Christmas Express) مجموعة من حلقات الفيديو مفصولة بمشاهد تفاعلية. يستغل

موقع Christmas Express أيضًا فكرة الفيديو بملء الشاشة ، ولكن كما أفهمها ، لا يوجد أي علاقة بـ WebGL.

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

6. قصص الرسوم المتحركة

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

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

التقرير السنوي من كراون الدنمارك (أكبر منتج للحوم الخنزير في أوروبا)

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

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

أسهل قرار في العالم

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

يوضح هذا المثال تمامًا مدى جودة الجمع بين التصميم المسطح والقوام.

7. الملاحة الخطية

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

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

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

فيديو محفظة من موقع Julien Belmonte

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

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

فرانشيسكو بيرتيلي عبر الإنترنت CSV توصلت

فرانشيسكو بيرتيلي إلى نهج مبتكر لـ CSV عبر الإنترنت. يبدو التقويم التفاعلي المستخدم ممتعًا من الناحية الجمالية وهو أداة فعالة لإثبات النمو المهني للمرء.

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

8. التنقل في الصفحة

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

تستخدم الشركة

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

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

متحف فان جوخ في أمستردام

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

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

9. الصفحة مؤطرة

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

فرع خبز الزنجبيل من PNC Financial Services Group، Inc.

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

wloks

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

Beer 34 وجد

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

10. التعرف على تحويل CSS

يدعوك Stand4humanrights

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

Species In Pieces يستخدم

Species In Pieces رسومًا متحركة من CSS لمعرضه التفاعلي ، والذي يقدم 30 نوعًا من الأنواع المهددة بالانقراض من جميع أنحاء العالم لاستكشافها. تتكون النماذج الحيوانية من قطع منفصلة تضاف عند الانتقال من شيء إلى آخر(ملاحظة المترجم. للعمل يتطلب متصفح Chrome) .

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

holohalo في

الواقع يبدو من الغريب أنه يوجد عدد قليل جدًا من الصفحات التي تستخدم تقنية Scalable Vector Graphics (SVG) الكلاسيكية لعرض شيء أكثر إثارة للاهتمام من الرموز القابلة للتحجيم لدرجات دقة مختلفة. Holo Halo هو استثناء للقاعدة ويمكن أن يكون بمثابة مصدر إلهام للمصممين ، ويوضح ما يمكن القيام به باستخدام SVG.

الملخص

من دون شك ، فإن الاتجاه الرائد في تصميم الويب في عام 2016 هو WebGL في جميع مظاهره: الفيديو التفاعلي والألعاب والرسوم المتحركة وتصور البيانات. من المتوقع أن يكون للواقع الافتراضي مستقبل عظيم ، ولكن يعتمد الكثير على توفر أجهزة الواقع الافتراضي.

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

وإذا تمكنت من إتقان هذه المقالة الكبيرة ، فستحصل على مكافأة صغيرة - الركوب على Delahaye 165 :

الوقت الزمني للموقع 165

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