24 تصاميم موقع ذكي التي تجمع بين مسج والجرافيك
بفضل قوة جافا سكريبت ، لم تعد الكلمات "الديناميكية" و "التوضيح" تنطبق بشكل حصري على مواقع الويب المستندة إلى فلاش.
الآن ، أصبحت HTML الديناميكية حقيقة في معظم المتصفحات المستخدمة بشكل شائع ، وهناك الكثير من مكتبات جافا سكريبت الفارغة موجودة لجعل استخدامها سهلاً ، يمكن لمواقع CSS استعادة بعض من بيانات الشوارع التي تحتفظ بها بشدة برنامج Flash.
من بين مكتبات جافا سكريبت الجديدة هذه ، أصبح jQuery واحدًا من أكثر المكتبات انتشارًا نظرًا لسهولة استخدامه ، واتساع نطاق الميزات والتركيز المبدئي على التفرد البصري.
إليك 24 مثالًا ذكيًا لتصميمات مواقع الويب باستخدام jQuery و Illustration .
1.Form خمس وخمسون
الميزات: تغيير رأس التوضيح. عدة نوافذ عرض الشرائح الصغيرة.
الوصف: لا يقتصر هذا الموقع الإلكتروني على الكثير من المحتوى ذي الصلة بالتصميم الجيد ، ولكن يتم استخدام jQuery بعدة طرق لتحسين مظهر موقع الويب وقابليته للاستخدام. إضافة في خلفية توضيحية متغيرة بشكل دوري وبعض ضوابط واجهة تعميم لطيفة ولديك زواج جميل من jQuery والتوضيح.
الصفحة الرئيسية مع صورة التوضيح: 
العمود الأيسر مع علامات مثبت على: 
رأس تظليل النافذة لتسجيل الدخول: 
2. فروزن
الميزات: انزلاق رأسي وأفقي.
وصف: في ما عدا الدوائر الكبيرة ذات الألوان الزاهية التي تحتوي على أرقام ، كانت الميزة التي لاحظتها أكثرها هي الصور الشخصية المصورة. لذا ، قمت بالنقر عليها. حدث ذلك عندما حدث السحر: تظليل النوافذ الرأسي والأفقي الذي فتح مجموعة كاملة من إدخالات المدونة مع فيديوهات Vimeo مضمنة. التدرج التذييل المستمر هو تأثير مثير عندما تقوم بالتمرير لأسفل.
الدوائر الكبيرة والرسوم التوضيحية للمؤلف على الصفحة الرئيسية: 
توسيع المحتوى رأسيًا: 
توسيع رسومات التوضيحات للكشف عن مداخل المدونة والفيديو: 
3. فون Mockup
الميزات: السحب والإسقاط والاستهداف
الوصف: إذا كنت قد فكرت في إنشاء تطبيق لـ iPhone (وأي مطوّر برامج على الويب) ، فربما يكون هذا موقع ويب لتسجيل الخروج. فهي تسمح لك بسحب وإفلات عناصر الواجهة المرسومة بالحاسب الآلي أو رسمها على رسم تخطيطي أو رسم تخطيطي لجهاز iPhone. على الرغم من كونه عظامًا جميلة في التصميم ، إلا أنه استخدام مبتكر للتوضيح الذي كان من الممكن أن يتم سحبه سابقًا باستخدام برنامج Flash.
محرّر iPhone مخصّص للكمبيوتر: 
محرر رسمت فون: 
4. فلوريدا تزدهر
الميزات: Mouseovers مع الشفافية ، عرض الشرائح
وصف: الألوان الرائعة وتفاصيل الشجرة المصورة في صفحة البداية هذه هي عوامل جذب فورية. انقر على أي من الفئات المتفرعة من الشجرة ولن تحصل فقط على محتوى وصفي مقتبس من jQuery ولكن أيضًا شجرة مختلفة تمامًا. قم بالتمرير لأسفل وسترى عرض شرائح محوريًا لطيفًا وتذيلاً يأخذ الفكرة الطبيعية تحت الأرض.
عرض كامل للصفحة الرئيسية ، مع شجرة كبيرة وعرض الشرائح وتذييل الصفحة: 
شجرة "سهولة الاستخدام": 
شجرة "المرونة": 
5. جولة الشاي التطبيق
الميزات: عرض الشرائح ، والرسوم المتحركة طفيفة ، والأدوات المنزلقة
الوصف: ربما أنا أو علامة على أن شركة Apple تمتلك مصممين بارعين ، ولكني أحب مواقع الويب التي تم اقتصاصها عبر صور iPhone. يحتوي موقع الويب هذا على صورة متحركة ، مع عرض شرائح في الشاشة يتم تشغيله عن طريق الماوس فوق بعض الأزرار المصممة جيدًا. يمتزج نوع Helvetica الدائر بشكل جيد مع تصميم الهاتف والأزرار. الرسوم التوضيحية تحت عنوان الشاي على الصفحة وفي لقطات من التطبيق ربط كل شيء معا.
الرسوم المتحركة داخل رسم iPhone على الصفحة: 
النافذة المنبثقة تعرض شاشة التطبيق: 
شاشة تطبيق Round Tea أخرى معروضة في رسم iPhone: 
6. أفضل من قبل
الميزات: تحديد المواقع الشاشة ، والرسوم المتحركة الملاحة
الوصف: إذا كانت مواقع الويب يمكن أن تتناول منشطات jQuery ، فستكون هذه هي باري بوندز على الويب. مع جميع العناصر الديناميكية المرئية ، يمكن بسهولة أن يخطئ موقع الويب هذا على موقع ويب Flash. بعد الفحص الدقيق ، ستجد أن الصفحة ليست فلاش ولا معقدة من وجهة نظر البرمجة. لكن الإدراك بأن لا يوجد أثر للفلاش موجود سيظل محفورا في نفسك.
القائمة الرئيسية: 
المزيد من الأشياء في الأقواس المتعرجة: 
القائمة الفرعية والمحافظ: 
الرسوم المتحركة
إن العثور على تصميم موقع إلكتروني تم اختيار DHTML من أجله لإنشاء الرسوم المتحركة يعد دائمًا مفاجأة. أفضل جزء بالنسبة لي هو أنني أستطيع رؤيته على iPhone الخاص بي. أنا متأكد من أن هذا ليس هو السبب الرئيسي وراء اختيار المصممين تجاهل Flash وأدواته التي تناسب الرسوم المتحركة. لا أعرف مدى اعتمادهم على jQuery لترميز صورهم المتحركة ، لكن كان عليهم أن يكون لديهم نزعات سادية من نوع ما لإخراجها.
7. عين توري
الميزات: الطيور الأوريغامي تحلق أفقيا.
الوصف: من يفكر في استخدام اوريغامي على صفحة ويب؟ ومن يفكر في استخدام طيور الأوريجامي باللون الأزرق لتمثيل التغريدات ، بدلاً من التوضيح الأزرق القياسي؟ ومن يفكر في تحريك التغريدات؟ الإجابة على هذه الأسئلة هي ، منشئو عين توري. أنشئ موقعًا على الويب باستخدام أي من هذه الميزات وسيكون لديك شيء أصلي تمامًا. بالنسبة إلى هؤلاء المنشئين ، لم تكن جميع هذه الميزات كافية. لقد اتخذوا قرارًا بديهيًا للقيام بكل الرسوم المتحركة بدون فلاش!
اوريغامي التغريد الطيور تحلق عبر المناظر الطبيعية: 
8. أكياس
الميزات: عرض الشرائح والرسوم المتحركة تذييل مع أيقونات لون واحد.
الوصف: يعد استخدام jQuery هنا أكثر وضوحًا عندما يتم تشغيل عرض الشرائح بنقرة واحدة في منطقة التنقل. تضفي المساحة البيضاء الممتدة ، والنوع الأسود والرسوم التوضيحية المتطابقة للرمز موقعًا رائعًا على الويب. لكن لو و ، ها ، لم تتوقف الرسوم المتحركة في الذيل عن العمل منذ وصولك. انقر بزر الماوس الأيمن على الرسوم المتحركة السوداء الصلبة وستكتشف سر الفيلم الطويل على الموقع: Sprites و DHTML.
الصفحة الرئيسية مع الكثير من المساحة البيضاء: 
الرموز الكبيرة المنتشرة في جميع أنحاء محتوى عرض الشرائح: 
تعمل حركة "تذييل الصفحة" بشكل مستمر ، بغض النظر عن مكان تواجدك على موقع الويب: 
9. كيد 81
الميزات: رأس الرسوم المتحركة السفر أفقيا.
الوصف: تجذب الرسومات ذات الألوان الساطعة الشتوية انتباهك على الفور ، كما يمتاز التصميم بالاستمرارية وصولاً إلى الذيل. مثل بعض مواقع الويب الأخرى التي تستخدم jQuery لتحريك الكائنات ، تبدو الصور المتحركة السلسة غير مميزة عن Flash للوهلة الأولى. ومع ذلك ، فإن التثليج على الكعكة ، هو "Dow" لا أستطيع أن أصدق أنك تستطيع سحب هذه الرموز.
الرسوم المتحركة لرأس الصفحة الرئيسية: 
تذييل مع نفس الموضوع الموضح: 
يحتوي قسم المتجر على نفس الحرف والألوان: 
عامود استعراض
يمكن لبعض أدوات JavaScript تشغيل التمرير السلس بين أقسام الصفحة. إن jQuery ، بالطبع ، أكثر من قدرة على تنفيذ هذا التأثير ، وعلى الأقل بعض مواقع الويب في هذا القسم تأخذ هذا الطريق. التمرير الديناميكي هو تأثير جيد ، ولكن مع رسومات إبداعية وتفصيلية ، فإن هذه الميزة ما هي إلا جزء واحد من الصورة الأكبر.
10. توماس بويتا
الميزات: السماء ، المحيط ، تحت الماء.
الوصف: مثل عدد قليل من المواقع الأخرى في هذا القسم ، تتبنى Pojeta فكرة تنتقل من ارتفاع عالٍ إلى أقل من السطح. الجزء العلوي من الموقع موجود في الفضاء الخارجي ، بصاروخه وقرده شديد التفصيل. انتقل لأسفل وسترى الأجانب والبالونات في الغلاف الجوي السفلي. مزيد من أسفل هو قطعة من أرض تطل على جزيرة عيد الفصح في وسط الماء ، مما يؤدي إلى منظر تحت الماء مع غواصة. كل رسم توضيحي مناسب ، كما أن التحولات تتم بشكل سلس مثلما تحصل.
صاروخ وقرد في الفضاء: 
جزيرة الفصح والطوقان: 
الغواصة تحت الماء: 
11. مورفيكس
الميزات: الفضاء ، السماء ، الأرض ، تحت الأرض.
الوصف: يبدأ Morphix أيضًا مع بعض الإجراءات الجوية العليا ، ولكن بعد ذلك ينتقل إلى اليابسة بدلاً من البحر ، وينتهي بخرق تحت الأرض. من الواضح أن النمط مختلف ، لكن الرسم التوضيحي لكل طبقة يمتد عرض الصفحة ، مثل الصورة الأخيرة ، مما يخلق شعوراً بالأفق. ومرة أخرى ، الانتقال من السماء إلى التدفق تحت الأرض بسلاسة ، خاصة مع التمرير الديناميكي.
الجو العلوي ، مع محفظة: 
الطابق الأرضي ، مع الأبقار وناطحات السحاب: 
تحت الأرض ، مع جذور الأشجار والجرذان الأرضية: 
12. GANDRWeb
الميزات: الرسوم البيانية المختلفة.
الوصف: على عكس الموقعين السابقين ، يستخدم هذا الموقع الرسوم البيانية بدلاً من الشخصيات والمناظر الطبيعية والخلفيات. يشرح كل قسم من الصفحة الرسم المصاحب. الجزء السفلي من ميزات الصفحة ، من غير المستغرب ، نموذج ويب كبير. نادرًا ما يكون الموقع الإلكتروني المرتبط بالمبيعات والذي يستخدم الكثير من التوضيح الجيد. تضيف الانتقالات التي تشغلها jQuery لمعانًا للرسالة.
معلومات تفصيلية توضح الفوائد والأسعار: 
رسم توضيحي يشرح عملية التصميم: 
نموذج ويب: 
13. اورمان كلارك
الميزات: الغيوم والأجسام الأرضية والطيران
الوصف: على غرار أول موقعين في هذا القسم ، يبدأ موقع أورمان كلارك بالسماء ، ولكن الصفحة الطويلة تلتصق بسحاب السحب على طول الطريق إلى التذييل ، حيث نصل إلى الأرض. الفارق الملحوظ بين هذه الصفحة ومعظم الآخرين في هذه المقالة هو الموقع الثابت للملاحة الرئيسية والتوضيح. ويبرز ذلك بفعل الانفجار النجمي في الجزء العلوي من الخلفية الذي يسلط الضوء على البويضة العائمة. كما يقدم الموقع أيضًا عرض شرائح jQuery متكاملاً للمحفظة.
البالون والبقرة والبيض: 
عرض شرائح Biplane و jQuery: 
نموذج الويب وتذييل الصفحة والملاحة الثابتة: 
14. Dreamerlines
الميزات: مجموعة متنوعة من الفن التصويري.
الوصف: يأخذ موقع Dreamerlines نهجا منفصلا. مثل GANDRweb ، يحتوي كل قسم على رسم مميز مرتبط بأقسامه المجاورة فقط بالمساحة البيضاء. كل قسم ، على الرغم من ذلك ، هو فريد من نوعه ، والتفصيل ، والملونة والاستيلاء على الاهتمام. الرسوم التوضيحية الثقيلة والنص العريض الكبير وتلوين الخلفية تحدد النغمة.
نص كبير للبدء: 
ملصقة داخل وجهك: 
نموذج ويب محاط بالعديد من المرئيات: 
15. سناك سناك
الميزات: الأسلاك والطيور والأرض.
الوصف: لا يتغير مظهر السماء أبدًا ، ويمكن للمصممين الاختيار من بين أي عدد من لوحات الألوان لتلوين أفقهم. أفق Snack الاجتماعية هو ضبابي بعض الشيء ، مع الأخضر والبني واضح. الطيور تجلس على الأسلاك المنتشرة عموديا في جميع أنحاء الصفحة إلى أقسام منفصلة. ينتهي الموقع مع سطح. على الرغم من أن المدونة لا تحتوي على تمرين jQuery سلس ، إلا أن العنوان الممتع المصور بأحرف جذابة يستحق الذكر.
لوحة الألوان والعرض الطائر في الأعلى: 
إطارات صور الفريق تتدلى من سلك طائر: 
شخصيات لطيف في قسم المدونة: 
عرض الشرائح
واحد من أكثر استخدامات jQuery المتكررة والمعروفة هو عرض الشرائح الموقر. عندما ترى محتوى مزلق عبر الشاشة بعد النقر بالماوس ، ولا يمكن العثور على فلاش ، فمن المحتمل أن يكون jQuery. يمكنك العثور على عروض الشرائح على مواقع الويب للشركات ، والصفحات المقصودة ، ومحافظ الوكالات ، ومواقع التجارة الإلكترونية ، في كل مكان. هم في كل مكان. فيما يلي بعض الأمثلة على عروض الشرائح التي تظهر حيًا بسبب الرسوم التوضيحية الحادة.
16. GoSiteWave
الميزات: عرض الشرائح العمودية مع الملاحة الأفقية والرموز الجذابة.
الوصف: عرض الشرائح التمرير العمودي ، مع الرموز والصور ، هي القصة الحقيقية هنا. من المتوقع أن يتم التمرير الأفقي للشرائح عرضًا أفقيًا ، لذلك فإن العكس هنا هو ملفت للنظر. تضفي الألوان الزاهية والبرتقال والأزرار المستديرة الباهتة والخلفية الداكنة مع خطوط مضاءة من الضوء بمهارة مزيدًا من التأثير. بالطبع ، إذا لم تكن الأيقونات جيدة ، فقد لا يكون موقع الويب قد أجرى هذا التخفيض.
رسومات الشرائح الصفحة الرئيسية: 
عرض شرائح آخر: 
17. Sketchen
الميزات: عرض شرائح أفقي لأفلام Flash ، مع محتوى محمّل مسبقًا ونصوص كبيرة ورسوم توضيحية.
الوصف: إذا كنت تحب اللون الأصفر ، فسوف تحب هذا الموقع. تتميز هذه الشرائح برسوم توضيحية كبيرة مستوية تحافظ على الخلفية الصفراء سليمة. يحتوي عرض شرائح إضافي في "صندوق الضوء" المنبثق على المحفظة. هل ذكرت أن الرسوم التوضيحية كانت كبيرة؟ إنها تستهلك الكثير من المساحة ، لكنها تتم بشكل جيد للغاية. يتم تمييز ألوان الخلفية والصور من خلال عناصر التنقل الخضراء والبيضاء ، ويضمن التباين الحاد أن تكون قابلية الاستخدام ليست مصدر قلق.
مكبر الصوت: 
التذييل الأبيض: 
تفاحة: 
محفظة في "العلبة الخفيفة": 
18. شكل خمسة وخمسون
الميزات: التمرير العمودي السلس ، محتوى المدونة المولدة ديناميكيًا ، عرض الشرائح ، تمييز التنقل الرئيسي ،
الوصف: لا تدع لوحة الألوان أحادية اللون والرسومات الخطية البسيطة تخدعك. يحتوي موقع الوكالة هذا على كل شيء. التمرير العمودي السلس ، التذييل الثابت الذي يركب المحتوى ، عرض شرائح محفظة ، محتوى مدونات مضمن ديناميكي ، إلخ. مع كل هذه الوظائف التي تسير بها ، ما يميز الموقع بشكل فعلي هو العدد الإجمالي للرسم التوضيحي العشوائي ، وحقيقة أنه إعادة كل مضحك جدا. على طول هذه الخطوط ، لا تكتمل زيارة الموقع بدون أخذ عينات من الفيديو "فرحان" المضحك.
الكثير من الرسوم التوضيحية في شاشة البداية
تتطابق الخطوط مع نمط الرسم التوضيحي
عرض شرائح المحفظة
تبرز عناوين التنقل في التذييل أثناء التمرير
التمرير الأفقي
على عكس عرض الشرائح ، والذي عادة ما يقتصر على قسم من موقع الويب ، يحدث التمرير الأفقي (كما هو موضح هنا) على مستوى المتصفح ، أو على الأقل يشعر بهذه الطريقة. لا يحتوي التمرير الأفقي الديناميكي على العديد من الأمثلة الرائعة مثل التمرير العمودي؛ ولكن كما سترى ، فإن المصممين الذين يفكرون أفقيًا لديهم تصورات رائعة.
19. قطع المسلسل
الميزات: رسوم توضيحية كبيرة للحافظة. التمرير الأفقي والرأسي.
الوصف: تم تصميم عرض الشرائح هذا حقًا ليشغل منطقة العرض في المتصفح. لا يمكنك التمرير لليسار أو اليمين ، ولكن هل هذا مهم؟ تُعد الرسوم التوضيحية والتصميم بارزًا جدًا لدرجة أن المطور كان يمكن أن يكون متقاطعًا أو مقلوبًا أو أي طريقة أخرى غير مبالية في التنقل ، وما زال الناس يقضون الجهد في معرفة ما سيحدث لاحقًا. ما يساعد حقاً هو حجم رمز التنقل وأن الصور والصور الخاصة بالمحافظة تشغل الشاشة بأكملها.
القطارات: 
غلاف اسطوانة: 
الرجل ثلاثي الأبعاد مع الأحذية: 
20. تايلر فينك
الميزات: التحولات الأفقية ، مع الرسوم المتحركة التي تم إنشاؤها من الخلفية.
الوصف: إليك مثالاً رائعًا لاستخدام صورة الخلفية لإنشاء تأثير حركة لـ التمرير الأفقي الديناميكي. لوحة الألوان هي بالأسود بالأسود والأبيض. تتميز الخطوط بخط سميك ولها خلفيات ممتلئة في أماكن معينة ، والنوع الذي يستند إلى الصور له شكل سطحي. الحزمة الكاملة تعمل بشكل جيد.
الصفحة الرئيسية الحد الأدنى: 
السيرة الذاتية: 
المال الذي تم تصويره: 
وظائف أخرى
لا يمكن تصنيف بعض مواقع الويب التي تستخدم jQuery بسهولة. قد يكون لديهم ميزات غير شائعة أو يستخدمون الدقة في jQuery أو يكيّفون تقنية شائعة بطريقة غير معتادة. يُعد التحميل المسبق والإكمال التلقائي للنص والتلاشي والخروج وتوسيد النص على الصور بعض الحيل الموجودة في المجموعة الأخيرة من مواقع الويب في هذه المجموعة.
21. البرتقالي تسمية
الميزات: صورة التحميل المسبق.
الوصف: التحميل المسبق للصور هو مدى استخدام Orange Label لجوجري. أثناء التمرير لأسفل ، تتم إضافة عناصر الحافظة إلى الصفحة (مع رسم دائري يخبرك بأنه يتم تحميلها مسبقًا). من وجهة نظر قابلية الاستخدام ، تحافظ هذه الميزة المريحة على أن تحمّل الصفحة محتوى النقل عبر النطاق الترددي تلقائيًا. الرسم التوضيحي في الأعلى هو حلوى عين كبيرة وملونة وعالية التفصيل ولذيذة.
التوضيح: 
الرسم التوضيحي Zoomed: 
بند المحفظة وتذييلها: 
22. أيقونة الحرير مكتشف
الميزات: إكمال النص.
الوصف: اكتب اسم أيقونة ، ويقوم هذا الموقع بترتيب رموزه استنادًا إلى النتائج المحتملة لما كتبته حتى الآن. جودة الرموز جيدة ، والخدمة ملائمة تمامًا على وجه العموم. نظرًا لأن التصميم يتعلق بالفعل بنتائج البحث ، فإنه لا يتمتع إلا بقدر ضئيل من التشتيت البصري ، وهو عبارة عن إضافة كبيرة.
العرض الافتراضي: 
نتائج البحث عن "ضوء": 
23. فينيكنيت
الميزات: يتلاشى.
الوصف: يبدأ موقع الويب هذا برسم هندباء رائع ، وتخطيط جيد واختيار جميل من الخطوط. إن الإجراء الوحيد الذي يقوم به jQuery الملحوظ هو التلاشي والخروج الذي يحدث عند التنقل في علامات التبويب. شريحة صغيرة أخرى من السماء هي الطريقة التي تتداخل بها الهندباء مع علامات التبويب النشطة وغير النشطة. وإذا نظرت عن كثب إلى الخلفية ، سترى بعض دوامات الرياح المتقنة المصاحبة للحيوانات العائمة.
الهندباء البرية وافر: 
24. وكالة هالو
الميزات: عرض الشرائح التلقائي مع التوضيح في الخلفية. النص على الصور.
الوصف: خلفيات ، خلفيات ، خلفيات. التنقل عبر هذا الموقع وستجد مجموعة متنوعة من الديكورات المليئة بالرسوم التوضيحية الملونة ثلاثية الأبعاد. يمكن الوصول إلى محفظة رائعة من خلال عرض شرائح jQuery على الصفحة الرئيسية. بدلاً من ذلك ، يمكنك العثور على معلومات حول كل عنصر في قسم المحفظة (أو "العمل") من تراكب النص على الصورة المصغرة.
الصفحة الرئيسية مع عرض الشرائح: 
تراكب المحفظة النص على الصور: 
خلفية ملونة أخرى: 
مكتوبة حصريا ل WDD من موريس رايت. وهو مطور ويب ومصمم ومبدع Moluv.com . منذ عام 2000 ، كان مولوف مصدر إلهام للتصميم للعقول المبدعة التي تبحث عن أفضل المواقع على شبكة الإنترنت.
كيف قام jQuery بتغيير طريقة تصميم مواقع الويب الخاصة بك؟ يرجى التعليق أدناه ...