9 مواقع ويب بها رسوم متحركة تلهمنا كمصممي ويب

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

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

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

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

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

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

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

يستخدم Best Day Ever أسلوب الرسوم المتحركة المتكرر بحيث لا تعتمد الرسوم التوضيحية للحيوانات على المحفزات لمواصلة الحركة. أيًا كان الرسم التوضيحي المرئي لزائر الموقع يتحرك باستمرار طالما يمكن رؤيته على الشاشة.

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

يُعد موقع Best Day Ever مثالاً رئيسًا على كيفية أخذ فكرة واحدة ومبدأ التصميم (في هذه الحالة موضوع الجمع بين النضارة الحيوية والبراعة) وتمثيلها باستمرار من خلال مخطط الألوان الخاص بك واستراتيجية المحتوى وتأثيرات التصميم المتقدمة.

من منا لا يحب حفرة الكرة الكلاسيكية؟ باستخدام ألوان علامتها التجارية الكلاسيكية على خلفية بيضاء ، تضرب Google اللون الذهبي مرة أخرى.

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

تمكن Google من تزويدنا بفهم فوري ومثير لما هو هذا المنتج ، ويقومون بذلك من خلال وصف عنوان نص بطل بسيط وزر CTA.

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

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

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

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

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

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

كيف يمكن لأي شخص رؤية هذه الصفحة الرئيسية ولا يرغب في استكشاف الموقع بشكل أكبر؟ فقط إذا قمت بذلك ، يمكنك حينئذٍ رؤية الرسوم المتحركة التي تسقط الفك تصبح أكثر روعة أثناء التمرير لأسفل.

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

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

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

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

إنه القليل من كل شيء.

مخطط الألوان هنا يقطع شوطًا طويلاً. تعمل ظلال اللون البرتقالي المحاطة بالكثير من المساحات البيضاء وخط sans-serif البسيط المستدير معًا بشكل كلي. ولكن ما يأخذ الكعكة هنا حقًا هو تقنيات الرسوم المتحركة المستخدمة في الرسم التوضيحي لبطاقة الائتمان.

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

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

الكلمات المبسطة والمتطورة هي كل ما يمكننا التفكير فيه هنا. إذا كانت الصورة تحتوي على ألف كلمة ، فسنقول أن الصورة المتحركة تخبرنا بـ 5000 كلمة أو ربما أكثر.

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