10 مواقع تفاعلية للإلهام
نشرت: 2020-07-06كمصمم واجهة مستخدم ، يتطلب الأمر الكثير من العمل الشاق لتصميم موقع ويب يكون تفاعليًا وممتعًا للعين ، إلى جانب تحقيق هدف موقع الويب. ولكن أثناء تصميم مواقع ويب معينة ، غالبًا ما يتراجع الإبداع جنبًا إلى جنب مع إمكانية قراءة موقع الويب ، ويبدو أن مواقع الويب ليست تفاعلية للغاية. يجب أن تحتوي مواقع الويب على تصميمات بحيث يرغب الزائر في زيارة موقعك في كثير من الأحيان ، فقط لتجربة متعة استخدام الموقع والتفاعل مع صفحات الويب.
لقد ولت الأيام التي استخدم فيها المستخدمون مواقع الويب البسيطة التي أنجزت المزيد. الآن ، الهدف هو جعل المستخدم يستخدم الموقع من خلال زيادة التفاعل والحفاظ على مشاركته. يعد موقع الويب الخاص بك أحد الأصول لمؤسستك إذا استمر المستخدم في العودة لمزيد من التفاعل مع موقع الويب الخاص بك في المستقبل.
تبحث هذه المدونة في مواقع الويب التفاعلية والتي تتمتع بإبداع خارج الصندوق.
1. Cyclemon:
Cyclemon هو موقع إلكتروني يحتوي على تصميمات متنوعة للدراجات يمكنك طلبها وركوبها. يستخدم موقع الويب هذا التمرير لإعطائك لمحة عن منتجاتهم. عليك فقط الاستمرار في التمرير لرؤية جميع تصميمات المنتج. شعار الشركة يقول "أنت ما تركب!" وهذا يجعل المستخدم يقوم بالتمرير لأسفل إلى أسفل الصفحة للعثور على تصميم دراجة مناسب لنفسه. ومن ثم ، فإنك تجبر المستخدم على الاستمرار في التمرير حتى تظهر جميع النماذج.
يمكنك طلب الدراجة التي تعتقد أنها تناسب شخصيتك. لقد طبقت علم النفس البشري وراء التصميم. يحتوي موقع الويب على جميع النماذج ، وهي تجعلك تقوم بالتمرير حتى "تشعر" أنك وجدت النموذج الذي يناسبك.
2. أليكس بوجا:
Alex Buga مصمم من بوخارست في رومانيا ولديه موقعه الإلكتروني الذي يعمل كمحفظة أعماله. عندما تفتح صفحة فهرس الموقع ، فقد صمم مربعات عبر الشاشة حيث تحتوي المربعات الفردية على صور التقطها ، وبعض المربعات بها روابط فيديو YouTube. بصرف النظر عن تصميم مواقع الويب ، فهو أيضًا مصور فوتوغرافي وموسيقي.
عمل كمدير إبداعي في MB Dragan لديه خبرة عمل واسعة لمدة 7 سنوات في تصميم الويب. موقع الويب الذي طوره لديه تصميم خارج الصندوق.
3. إيفانز هالشو - سيارات بوند:
Evans Halshaw هي بوابة للسيارات الجديدة والمستعملة. لقد عملوا في 130 موقعًا عبر إنجلترا واسكتلندا وويلز. موقع الويب الخاص بهم مشابه لموقع Cyclemon. الفرق هو أنهم استخدموا نماذج سيارات مختلفة كانت موجودة في أفلام جيمس بوند. كل صورة لها عام ونموذج السيارة واسم الفيلم الذي تظهر فيه. أثناء التمرير لأسفل الصفحة الرئيسية ، ستظهر لك المركبات المختلفة التي تصغير الصورة السابقة.
التصميم سيبقي محبي السيارة مستمتعا لبضع لحظات. بالإضافة إلى ذلك ، سيستمر متعصب أفلام جيمس بوند في تصفح الموقع لمشاهدة جميع السيارات المستخدمة في أفلام بوند. إلى جانب الصور ، لديهم وصف موجز يعتمد على الفيلم ، في الزاوية السفلية اليمنى من الشاشة لكل سيارة.
4. تشغيل نقطة إلى نقطة:
هذا الموقع هو الأكثر تفاعلية للاعبين. إنها تتميز بلعبة تتضمن ضم النقاط من أرقامها بترتيب تنازلي. انها تستخدم جهاز توقيت. يجب عليك توصيل النقاط المحددة في نافذة زمنية محددة ، وتنتقل إلى اللعبة التالية. لا بد أن يبقيك مشغولاً ويمكن أن يثبت أنه المفضل لدى الأطفال أيضًا.
مستوى التفاعل مع هذا الموقع هو الأعلى ، حيث أننا جميعًا مهووسون بضم النقاط المرقمة بترتيب تنازلي. الواجهة واضحة ومباشرة ، ومع ذلك يمكن أن تبقيك مشغولاً لساعات.
5. ركلة عاداتي:
Kick My Habits هو موقع ويب يساعدك في حساب نفقاتك على أشياء معينة مثل مجموعات أدوات التجميل ، وتناول الطعام بالخارج ، والتدخين ، وشرب الكحول ، والحفلات. يخبرك مقدار الأموال التي يتم إنفاقها على هذه العادات السيئة كل عام وكل هذا بطريقة تفاعلية للغاية.
يسألك عن مقدار الأموال التي يتم إنفاقها على العادات السيئة في الأسبوع. بمجرد قيامك بتغذية جميع البيانات لممارسة واحدة ، فإنه يأخذك إلى النمط التالي. يمكنك اختيار "ليس لدي هذه العادة" إذا لم تكن لديك هذه العادة. بعد تحليل كل ممارسة تقوم بتغذية البيانات من أجلها ، يقوم بفحص مقدار الأموال التي تنفقها في عام واحد في مطاردة هذه العادات. يمكن لأي شخص حساب هذه النفقات التي يستثمرون فيها ، كل عام. لكن واجهة المستخدم التفاعلية للموقع لديها أجمل تصميم ، وهو الأكثر أهمية هنا. في النهاية ، يُظهر إجمالي مدخراتك سنويًا وأسبوعيًا ، جنبًا إلى جنب مع المبلغ الذي سيظهر بعد أن تضع هذه الأموال في الحساب المصرفي.
6. Zervice:
Zervice هي مجموعة بها العديد من العلامات التجارية ذات الامتياز المختلفة التي تقود الطريق. إنه تصميم موقع ذكي ومبدع ، وكان من أكثر المواقع التي حازت على جوائز. يبدأ الموقع بالسفر عبر المدينة. استخدم الموقع الصور ومسار SVG الذي تتحرك عليه السيارة. تجعل السحب مظهرًا للتفاعل مثل الاختبارات والأسئلة. يبدو موقع الويب وكأنه نموذج ثلاثي الأبعاد عندما تمر السيارة فوق وتحت بعض جوانب الموقع.
تفتح الصفحة بفقاعة فكرية ورسالة ترحيب وإطلالة على المدينة. أيضًا ، يحتوي على زر "Go" الذي يقود السيارة إلى النقطة التالية. شاشة أخرى عبارة عن شاشة متطورة مع إطار مستطيل عائم ومبنى حيث تمر السيارة. مع بعض التوقفات والاختبارات معهم ، ستتعرف على خدمات Zervice. الطرق المتعرجة ، والبناء ، وأفضل جزء هو القطار المتحرك الذي تسير تحته السيارة هو مشهد يستحق المشاهدة. حتى إذا لم تكن بحاجة إلى معرفة خدماتهم ، فيجب عليك زيارته مرة واحدة لتجربة الوصف أعلاه.
7. مستقبل مشاركة السيارات:
يتحدث هذا الموقع عن مشاركة السيارة بدلاً من شرائها. هذا الموقع تفاعلي للغاية بطريقة مختلفة. عندما تصل إلى الصفحة الرئيسية للموقع ، ترى سيارة خضراء يمكنها التنقل للأمام وللخلف عن طريق الضغط على مفتاحي الأسهم الأيمن والأيسر. تعرض الصفحة المقصودة نوع مشاركة السيارة وإحصائياتها. عندما تضغط على المفتاح الأيمن ، تبدأ السيارة في التحرك للأمام نحو الجانب الأيمن ، حيث يظهر تصنيف مشاركة السيارة ووصفها.
التصنيف الأول هو P2P ، أي مفهوم مشاركة السيارة من نظير إلى نظير. تحدد مجموعة السيارات التي يمتلكها عدد معين من الأشخاص. يقوم أصحاب السيارات بتأجير السيارات للسائقين. فئة أخرى هي B2C ، مما يعني من شركة إلى مستهلكين. هنا ، تمتلك شركة مجموعة من السيارات تشترك فيها بين أعضاء الشركة. وهي تشمل شركات تصنيع السيارات ، والعلامات التجارية للتأجير ، والعلامات التجارية لمشاركة السيارات. الفئة الثالثة هي NFP ، والتي تعني غير هادفة للربح. يشارك المجتمع المحلي السيارة لإجراء تغيير في عادات القيادة للسائق بدلاً من استئجار السيارة لكسب الربح منها.
بينما نبحر أكثر ، يبدو أن السيارة الخضراء تتحرك عبر الجبال ، على الرغم من أن الطريق يبدو خطيًا. ثم تبدأ السيارة الخضراء في الركض فوق الجسر بينما تمر عبر كومة ضخمة من القمامة ثم تعبر العمود الذي يحمل علم الولايات المتحدة. توجد رسومات قوية عبر الصفحة ، وهناك العديد من الأشياء التي يمكن للمستخدم القيام بها لاستكشافها. مثلما تحوم الماوس فوق البرج ، ترى مؤشر الماوس يتحول إلى يد ، مما يشير إلى أنه ارتباط تشعبي.
بينما تتنقل أكثر عبر الصفحة ، ترى سحبًا تطفو ، وشمبانزي معلق على البرج. ترى خيارات رائعة لمشاركة السيارة عند تحريك الماوس فوق أعلام الدولة. كلما تقدمت أكثر ، تجد أن المزيد والمزيد من المدن والولايات قد اختارت خيارات مشاركة السيارات. يحتوي موقع الويب على تصميم بحيث يتعين عليك تمرير الشاشة أفقيًا ، مما يعرض حقائق مختلفة في شكل رسوم متحركة.
8. روبي ليوناردي:
Robby Leonardi هو مصمم جرافيك يقدم خبرة في تصميم الجرافيك والتوضيح والرسوم المتحركة وتطوير الواجهة الأمامية. لديه خبرة كبيرة أثناء العمل في صناعة الترفيه. قام بتطوير هذا الموقع لتقديم سيرته الذاتية بطريقة إبداعية للغاية.
يشبه موقع الويب هذا مواقع ويب Future of Car Sharing ويتم تمريره أفقيًا ، ومع ذلك فإن شريط التمرير في موقع الويب عمودي. يمكنك التنقل عبر الموقع باستخدام مفتاح السهم لأعلى ولأسفل. عندما تضغط على مفتاح السهم لأسفل ، يبدأ الرجل في المواصفات ، يرتدي عباءة ، في الركض. القسم الأول الذي تصادفه هو قسم "حول" ، حيث لديه أربعة حقول التصميم والتوضيح والرمز والرسوم المتحركة. ويظهر مستوى خبرته من خلال أزهار تتفتح حسب المستويات. على سبيل المثال ، لديه خبرة في التصميم ، وبعد ذلك ستصل الأزهار المتفتحة حتى تصل إلى خط "الخبير" مما يدل على أنه خبير في ذلك.
عندما تمضي قدمًا ، يقفز الرجل عبر العقبة ويظهر أنه يعمل ويعيش في مدينة نيويورك ، حيث تظهر الأبراج وتمثال الحرية شيطانًا جالسًا بداخلها. المضي قدمًا ، يقفز الرجل مرة أخرى عبر العقبة ويظهر أنه من مشجعي فريق كرة القدم NBA. هنا ، يبدو أن اللاعب يأتي ويرمي كرة السلة عبر الشبكة.
للمضي قدمًا ، تواجه قسمًا للمهارات حيث توضح أعداد الأسماك مستوى الخبرة التي يتمتع بها ، في كل قسم. في نفس الجزء ، هناك قسم فرعي آخر يسلط فيه الضوء على خبرته في لغات البرمجة ، حيث يُظهر السرطانات مستوى معرفته.
علاوة على ذلك ، فإن القسم الفرعي التالي يدور حول خبرته في برامج الفيديو والبرامج ثلاثية الأبعاد ، حيث توضح لك السلاحف مستويات خبرته في كل مجال. يأتي بعد ذلك القسم الذي يسلط فيه الضوء على خبرته العملية في شكل الأخطبوط ومركبات مائية أخرى. يعرض القسم الثاني الأخير جوائزه ومنشوراته التي حصل عليها حتى الآن في شكل ملصقات. يقفز الرجل في المظلة ويطير بالعلامات التي تحدد جوائزه بينما يواصل الطيران. بينما تستمر في الطيران ، تصل إلى نهاية صفحة الويب ، حيث تقدم تفاصيل الاتصال الخاصة بك وتسقط رسالة له.
9. دليل عيد الميلاد البولندي:
دليل عيد الميلاد البولندي هو موقع ويب يساعد الأشخاص من جميع الأعمار على التعرف على عيد الميلاد البولندي وكيفية الاحتفال به كل عام. يبدأ الأمر بسانتا كلوز اللطيفة مع مزلقة لحمل الأشياء التي يحتاجها للاحتفال بعيد الميلاد في بولندا. سيحب الأطفال هذا الموقع بينما يستمر سانتا في جمع العناصر في مزلقة أثناء تقديم الحقائق والمعلومات حول الأشياء التي تم جمعها وأشياء أخرى.
يمثل عيد الميلاد في بولندا تقليد إرسال الهدايا وتلقيها من بعضنا البعض. كما أنها تحافظ على ثقافة مشاركة الوجبة مع أشخاص آخرين قد يزورونك دون إشعار مسبق عشية عيد الميلاد. يعمل هذا الموقع على التوضيح والخلفية الموسيقية. عندما تتصفح الموقع ، فإن التجربة تشبه تجربة لعب لعبة.
في نهاية الموقع ، هناك رسالة تنشر الوعي حول الأطفال المعتدى عليهم ودعوتهم لمساعدة هؤلاء الأطفال وحمايتهم.
10. المتسلق:
طور المتسلق موقعه التفاعلي الذي يخبرك بكل شيء عن الشركة الإبداعية ، المسماة Interactive Production Company ، والتي تنتج بعض المنتجات الرقمية الرائعة وتجارب المستخدم. يبدأ بموضوع فريد يعتمد على الغابات والأخشاب. من خلال العناصر المختلفة التي تسمح لك بالتفاعل معهم ، يمكنك استعراض محفظتهم بطريقة إبداعية للغاية. يعرض مشاريع التصميم الخاصة به في شكل رسوم متحركة مختلفة من خلال التمرير وبمجرد نقرة على الماوس.
في إحدى الشاشات ، يظهر النص عن طريق تحريك الماوس ، وهو مشهد يستحق المشاهدة. عندما تتغير الشاشة ، تنقسم إلى مربعات مختلفة ، وتسقط من الشاشة ، وتسمح لك بالدخول إلى شاشة أخرى. إذا كنت تبحث عن إنشاء موقع ويب لشركتك غير ذي صلة بما تتعامل معه ، فيجب أن تستلهم من موقع Climber المستوحى من الرسومات.
استنتاج:
إن تمثيلنا لمواقع الويب هو الذي يلهم مصمم الجرافيك لإبراز إبداعه وتقديم أفضل ما لديه أثناء تصميم الموقع. هذه الأنواع من المواقع ليست فقط مشهدًا مبهجًا ، ولكنها تساعد أيضًا مالك موقع الويب في الحفاظ على مشاركة الزائر واهتمامه. هناك العديد من أفكار التصميم في جميع المواقع ، كما ذكرنا سابقًا ، والتي يمكنك اعتمادها. يتضمن ذلك الرسوم المتحركة وشاشة الألعاب والرسوم المتحركة وغير ذلك الكثير التي يمكنك أن تأخذ منها الأفكار.