16 أمثلة HTML مذهلة

صفحة 1 من 2: صفحة 1

تستخدم بعض هذه المواقع أحدث التقنيات لدفع حدود ما هو ممكن على الويب ؛ يستخدم آخرون مبادئ التصميم التقليدية لبناء مواقع جميلة وقابلة للاستخدام. سواء كنت تستخدم HTML بسيطًا أو تتعمق في WebGL و 3D CSS ، ستجد شيئًا هنا يلهمك.

لدينا أيضًا مجموعة رائعة من الملهمات أمثلة على CSS لتستكشفها.

01. Appy Fizz

يمزج هذا التصميم بين العناصر فائقة المسطح والتأثير ثلاثي الأبعاد



يمزج هذا التصميم بين العناصر فائقة المسطح والتأثير ثلاثي الأبعاد

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

كيفية استيراد طبقات الرسام إلى التأثيرات اللاحقة

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

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

02. من صنع القليل

موقع المؤتمر هذا مليء بالمفاجآت الخفية

موقع المؤتمر هذا مليء بالمفاجآت الخفية

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

بينما تستكشف الموقع ، هناك المزيد من المفاجآت. يقول Arlton Lowry ، الشريك المؤسس لـ Few ومنظم المؤتمرات: 'في Few ، نحب الحوادث السارة ونشجع الاستكشاف'. بالتمسك بفلسفتهم في الاستكشاف ، هناك جواهر مخفية منتشرة في جميع أنحاء الموقع (لن نتخلى عنهم جميعًا ، ولكن حاول الوصول إلى كود Konami!).

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

03. Allbirds

يعطي التصوير الفوتوغرافي القوي للمنتج تأثيرًا لهذا الموقع

يجب وضع شعارات العلامات التجارية أعلى 2k18
يعطي التصوير الفوتوغرافي القوي للمنتج تأثيرًا لهذا الموقع

Allbirds هي ماركة أحذية رياضية من أرض 29،221،344 نعجة. بدأ الأمر عندما لاحظ المؤسس المشارك تيم براون الصفات المدهشة لصوف ميرينو ، وتساءل عن سبب عدم استخدامه في الأحذية من قبل.

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

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

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

04. Karim Rashid

أمثلة HTML: كريم رشيد

موقع الصخور الجديد لكريم راشد

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

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

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

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

05. النسيج

أمثلة HTML: النسيج

جدول زمني تفاعلي من Big Bang حتى يومنا هذا

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

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

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

06. على الشبكة

أمثلة HTML: On the Grid

دليل حي عالمي برعاية مصممين

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

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

كيفية جعل صورة غلاف الفيس بوك خاصة

ثم هناك اهتمام بالتفاصيل. من الشعار المتحرك إلى 100 (وأكثر) من الرسوم التوضيحية الفريدة للمدينة والرسوم المتحركة البسيطة ، من الواضح أن On the Grid ليست مجرد مدونة نمط حياة أخرى.

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

07. LS للإنتاج

أمثلة HTML: LS Productions

تم إنتاج الموقع الإلكتروني لشركة LS Productions بواسطة وكالة Whitespace في إدنبرة

وسعت LS Productions مؤخرًا آفاقها من الحصول على مواقع رائعة (تحت الاسم المستعار Location Scotland) لتصبح أكبر شركة لإنتاج الصور الثابتة والحركة في المملكة المتحدة. تم إنتاج علامتها التجارية وموقعها الإلكتروني من قبل وكالة إدنبرة مسافة بيضاء .

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

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

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

08. رب

أمثلة HTML: Lordz

يساعد الفيديو في التقاط قلب أكاديمية الرقص هذه

'اللعب أقدم من الثقافة ، فالثقافة ... تفترض دائمًا وجود مجتمع بشري ، والحيوانات لم تنتظر أن يعلمها الإنسان العزف'. هكذا يبدأ يوهان هويزينجا Homo Ludens ، حيث يناقش المؤلف تأثير اللعب في المجتمع.

عنصر اللعب هو عنصر تأخذه لوردز ، أكاديمية الرقص في سويسرا ، على محمل الجد. بالنسبة لوردز ، الرقص ليس مجرد حركة ؛ إنه شكل فني ، وسيلة مرحة للتعبير الثقافي. تكلف بتصميم موقع للأكاديمية ، Eidenbenz / Zürcher استخدمت هذه الروح لتوجيه اتجاهها الفني.

يوضح المدير الفني والشريك Daniel Zürcher قائلاً: 'أردنا إنشاء شيء يواجه التجربة الرقمية مع قلب Homo Ludens'. 'طريقة مرحة للتعرف على الممارسة اليومية للرقص ؛ الحركة والمشاعر وما إلى ذلك. لتحقيق ذلك ، استخدمنا أحدث التقنيات في التصوير وما بعد الإنتاج وبالطبع البرمجة.

كيفية الحفاظ على رسومات الباستيل الطباشير

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

الصفحة التالية: 8 أمثلة مذهلة أكثر من HTML

  • 1
  • اثنين

الصفحه الحاليه: صفحة 1

الصفحة التالية الصفحة 2