المجتمع والإلهام

25 أمثلة على Web 2.0 وقواعد التصميم التقليدية المتوافقة معًا

في النطاق الواسع لعالم التصميم ، يعتبر مصطلح "Web 2.0" جديدًا نسبيًا.

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

أمثلة لا حصر لها من مواقع الويب 2.0 قد خرقت قواعد ما كان يعتبر في وقت من الأوقات تصميم قوي.

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

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

في ما يلي مجموعة من 25 موقعًا تُظهر كيفية تعاون الويب 2.0 وممارسات التصميم التقليدية معًا لتشكيل مواقع ويب مذهلة حقًا.

1. تصميم مصفوفة بكسل

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

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

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

الجوانب التقليدية:

  • نظام شبكة كبيرة.
  • نظرية الألوان الرائعة
  • التسلسل الهرمي القوي للمعلومات

تحسينات الويب 2.0:

  • تدرجات جميلة.
  • التفاصيل الدقيقة.
  • خيارات كبيرة للخط واضحة القراءة.
  • عدد كبير من الطرق للبقاء على اتصال.
  • حتى نموذج الاتصال لديه تطبيق جميل من الزوايا الدائرية!

2. MuttInk

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

الانتباه إلى التفاصيل ، والملمس ، وهوية قوية يضع هذا باعتباره fave الشخصية.

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

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

الجوانب التقليدية:

  • اهتمام وثيق للغاية بالتفاصيل.
  • نوع جميل (على الرغم من صغر حجمه).
  • هوية علامة تجارية رائعة.
  • استخدام كبير للفضاء ، خاصة في صفحات المحفظة.

تحسينات الويب 2.0:

  • استخدام كبير من الملمس.
  • صور كبيرة ومحترفة تعرض العمل.
  • الوصول السريع إلى الربط الاجتماعي.

3. 45 رويال

لا تقتصر المحفظة الموجودة في 45 Royale على عرض مجموعة رائعة من الأعمال فحسب ، بل تُظهر أيضًا أن الفريق وراء الموقع يتفهم الاستخدام الجيد لمعايير التصميم المتعددة. إنه مزيج رائع من Web 2.0 fallbacks ، ولكن لديه قاعدة صلبة في معايير التصميم التقليدية (وننظر فقط إلى تلك الألوان!).

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

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

ألوان زاهية تحيط بلوحة ثانوية من الرمادي والأبيض والأسود؟ رائع.

الجوانب التقليدية:

  • واحدة من أفضل الأمثلة على نظام الشبكة.
  • الكثير من المساحة البيضاء وغرفة التنفس.
  • اختيار اللون الرائع.
  • تدفق جيد للمعلومات.

تحسينات الويب 2.0:

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

4. قرصة التكبير

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

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

تذكر في وقت متأخر من التسعينات عندما كان فلاش كل الغضب؟ تذكر كيف مرض من فلاش وصلنا جميعا بعد ذلك؟ إن معايير ويب 2.0 جيدة تدور حول الانضباط بقدر ما يتعلق الأمر بالتصميم ، وقد تمت السيطرة على Pinch Zoom بشكل جيد.

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

الجوانب التقليدية:

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

تحسينات الويب 2.0:

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

5. كاميرون مول

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

فالألوان نابضة بالحياة وتتناغم خيارات الخطوط مع الإحساس العام ، ولكن مرة أخرى ، يمكن أن يحصل هذا النوع صغيرًا جدًا في الأماكن ، وهو Web 2.0 no-no. ولكن من أنا لأحب الاختيار؟ لقد حقق كاميرون نجاحًا كبيرًا وهو الرجل وراء Authenticjobs.com ، وهو مورد رائع للمصممين (وهو واحد ساعد في دفع فواتيري).

الجوانب التقليدية:

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

تحسينات الويب 2.0:

  • استخدام لطيف جدا من الملمس.
  • تحتوي المحفظة على صور جميلة للعمل ، والتي هي واضحة جدا وسهلة للتنقل.

6. موضوع "Fluid" Tumblr في Metalab

موضوع Tumblr الوحيد الذي يصنع القائمة هو بعنوان "Fluid" ، من تصميم Metalab. جعلت القائمة قائمة لسبب بسيط: إنه مثال رائع غريب على الويب 2.0 في أفضل حالاته. بسيطة ونظيفة ولامعة مع اللون.

قد ينظر المرء إلى جانب واحد في هذه المقارنة (إنه Web 2.0 catch-all). هذا لأن Metalab معروف بوضع المعايير في مجال Web 2.0 ، وهذا الموقع هو دليل على هذه الحقيقة. ومع ذلك ، فإن تصميم Metalab يبقي القواعد الأساسية في الاعتبار ، ويحافظ على الهيكل بسيطًا ومنظمة بشكل جيد.

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

الجوانب التقليدية:

  • بنية بسيطة وفعالة.
  • يبرز في الجماهير من المواضيع Tumblr.
  • نظام ألوان معاصر (بسيط).

تحسينات الويب 2.0:

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

7. فييت

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

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

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

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

الجوانب التقليدية:

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

تحسينات الويب 2.0:

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

8. FeelWire

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

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

عند التراجع عن هذه الأيقونات ، كنت سعيدًا للغاية بما وجدته: حالة بسيطة جدًا كانت تمنحك المعلومات التي كنت أبحث عنها ، وذلك باستخدام Web Speech Bubble الشهير. لمسة رائعة.

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

الجوانب التقليدية:

  • قصيرة ، حلوة ، وإلى النقطة: موقع صفحة واحدة.
  • مساحة بيضاء!
  • خيارات الخط الدقيق ، لذيذ.
  • نيس ، التصميم الأساسي.

تحسينات الويب 2.0:

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

9. العجمي المبدع

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

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

النقر فوق صفحة محفظة ، ستلاحظ تخطيط مع كمية مثالية من مساحة التنفس ونظام شبكة قوية.

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

الجوانب التقليدية:

  • استخدام أكثر جمالا لنظرية اللون.
  • عمل فني رائع.
  • مزيج مثير للاهتمام من نوع / الخطوط.
  • الشعار الفني المرسوم يدويًا لديه شعور يحمله في جميع أنحاء الموقع.

تحسينات الويب 2.0:

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

10. اديت شوكلا

موقع آخر بنهج توضيحي رائع ، مصمم Adit Shukla يعرف أيضًا كيفية وضع مخطط ألوان رائع ، بل ويلعب أيضًا مع حل لطيف للشريط الجانبي.

لسبب غريب ، العديد من القضبان الجانبية قذرة ويتم التغاضي عنها ، كما لو أن المصممين لديهم الإذن بتجاهل قواعد التصميم الجيد عند رمي الشريط الجانبي للموقع. ليس مع هذا الموقع.

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

الجوانب التقليدية:

  • ألوان نابضة بالحياة.
  • حلول مبتكرة للعناصر المشتركة ، مثل الشريط الجانبي والرأس.
  • يضيف التوضيح الكثير من العمق.

تحسينات الويب 2.0:

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

12. كريم سكوب

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

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

الجوانب التقليدية:

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

تحسينات الويب 2.0:

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

13. Carbonica

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

تأكد من التمرير لأسفل قليلاً والتحقق من الرموز ، التي تناسب المظهر تمامًا أيضًا!

الجوانب التقليدية:

  • البنية الأساسية في اللعب.
  • تتطابق الحروف الحرفية اليدوية مع موضوع الموقع.
  • الرسوم المتحركة هي لمسة لطيفة (ولكن آسف ، فإن استخدام الفلاش يبقي هذه النقطة خارج فئة Web 2.0).

تحسينات الويب 2.0:

  • الملمس رائع.
  • تضيف الظلال المسقطة عمقًا واقعيًا.
  • أيقونات جميلة وصور وتوضيحات.

14. DSGN + DVLP

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

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

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

الجوانب التقليدية:

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

تحسينات الويب 2.0:

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

15. مارشان دي تروكس

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

الجوانب التقليدية:

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

تحسينات الويب 2.0:

  • استخدام لطيف للغاية من التوضيح كرأس
  • رموز كبيرة نسبيا.

16. بايكو

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

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

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

الجوانب التقليدية:

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

تحسينات الويب 2.0:

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

17. مات ديمبسي

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

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

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

الجوانب التقليدية:

  • صدق أو لا تصدق ، هناك نظام شبكة بسيط يكمن وراء النسيج.
  • مميزة وفريدة من نوعها
  • لا تخاف من كسر بعض القواعد

تحسينات الويب 2.0:

  • يستخدم Matt أسلوب Web 2.0 الواضح لخطوطه وشعاره
  • الاستخدام الجيد للتكنولوجيا على الصفحات الداخلية (شريط التمرير JavaScript هو لمسة رائعة).
  • كل جزء من المعلومات المهمة ضخم وسهل القراءة.
  • يقدم Portfolio العمل بطريقة ممتعة وعالية التكنولوجيا.

18. الهريس الرقمية

باستخدام Digital Mash ، يمكنك أن ترى أن الكثير من التفكير قد ذهب إلى العناصر التي يرغبون في تضمينها في الموقع ، أو الأفضل من ذلك ، العناصر التي اختاروا إبعادها.

إن القدرة على تقليص الدهون هي ممارسة مهمة لأي مصمم ، ويضع Digital Mash الأساسيات ، والأساسيات فقط. افتح الصفحة وستعرف في غضون ثوانٍ ما يدور حوله مؤلف الموقع.

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

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

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

الجوانب التقليدية:

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

تحسينات الويب 2.0:

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

19. كيان ميديا

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

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

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

الجوانب التقليدية:

  • كل شيء لديه شعور قوي للغاية.
  • التنسيق العام لكل صفحة قوي
  • التسلسل الهرمي المعلوماتي هو عظيم.
  • الخطوط ، والرؤوس ، وألوان الخطوط متسقة طوال الوقت.

تحسينات الويب 2.0:

  • لوحة زرقاء زاهية اللون.
  • استخدام متعة التوضيح (الذين لا يحبون الغيوم؟).
  • التصوير الفوتوغرافي
  • حسن تنفيذ التكنولوجيا.
  • قطرات خفية تضيف العمق.
  • خطوط واضحة للغاية ورؤوس كبيرة الحجم.

20. روكاتي

حسنا ، تقول "التصميم الوظيفي" في العنوان ، لذلك كان العمل أفضل ، أليس كذلك؟ لحسن الحظ ، هذا الموقع. إنه مثال آخر على كيفية زحف الملمس إلى سوق تصميم الويب وتأكيد فكرة أننا في عصر السرعة العالية لتصفح الويب.

شيء قد تلاحظه هو أن Rockatee لديها عدد غير قليل من المشاريع المعروضة في قسم المحفظة ، لذلك كان الحل المبسط أمرًا مؤكدًا. لقد فعلوا ذلك بسلسلة من اللقطات التي تعرض عمق محفظتهم الكبيرة. اعمل في نفسك معروف وتأكد منه.

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

الجوانب التقليدية:

  • كل شيء لديه شعور قوي للغاية.
  • التنسيق العام لكل صفحة قوي.
  • يتم استكشاف نظرية اللون وتنفيذها بشكل جيد.
  • اهتماما قويا بالتفاصيل.

تحسينات الويب 2.0:

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

21. الأشياء التي هي براون

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

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

فريق محترف ، ولكن سهل الوصول ، هو بالضبط نوع الفريق الذي أرغب في العمل معه. هؤلاء الناس حقيقيون.

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

الجوانب التقليدية:

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

تحسينات الويب 2.0:

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

22. أندرو برادشو

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

يعتبر التنقل عنصرًا مميزًا ، مع ظهور ألوان مختلفة أثناء التمرير فوق علامات التبويب ؛ لمسة أنيقة للغاية.

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

الجوانب التقليدية:

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

تحسينات الويب 2.0:

  • لقطة مختلفة على الأزرار.
  • استخدام باهر للتصوير الفوتوغرافي وعرض الصور.
  • تفاصيل رائعة في الملاحة.

23. جيمس لاي

في الآونة الأخيرة ، لديّ شيء بالنسبة إلى مواقع الويب ذات الصفحة الواحدة ، وكما كنت قد خمّنت على الأرجح ، فأنا مُخْلِق للمادة أيضًا. أدخل James Lai ، مصمم يعرف كيف يقدم نفسه من خلال استخدام رائع للنوع والملمس والرسوم المتحركة.

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

الجوانب التقليدية: