عرض لمواقع ويب مفردة
عند تصميم موقع ويب يحتوي على عدد قليل من الصفحات وليس عددًا قليلاً من المحتوى ، يمكن أن يكون تصميم الصفحة الواحدة طريقة مبتكرة لتمييز الموقع.
غالبًا ما تستخدم مواقع الويب ذات الصفحات الفردية جافا سكريبت وفلاش ، جنبًا إلى جنب مع HTML و CSS لتناسب المزيد من المحتوى على الصفحة دون زيادة أوقات التحميل بشكل كبير.
يجب إيلاء اعتبار خاص للملاحة عندما يتعلق الأمر بالمواقع ذات الصفحة الواحدة ، للتأكد من أن الزوار يمكنهم العودة إلى القسم الرئيسي من الصفحة بدون مشاكل ، والتنقل من أي قسم إلى أي قسم آخر. يتم تحقيق ذلك غالبًا من خلال الرؤوس اللزجة أو التنقل المتكرر في كل قسم.
تعتبر المواقع أدناه أمثلة ممتازة على مواقع الويب ذات الصفحة الواحدة. وهي قابلة للاستخدام وجميلة من الناحية الجمالية ، وتستفيد استفادة كاملة من تنسيق الصفحة الواحدة.
Roaaar
يشتمل موقع Roaaar على رابط "الرجوع إلى الأعلى" في أسفل كل قسم ، مما يسهل على الزائرين العودة إلى التنقل في رأس الصفحة.
Duplos بواسطة ريكاردو ميستر
يتخذ موقع Duplos منهجًا مختلفًا ، حيث يضع المحتوى الرئيسي في أسفل الصفحة. ينقلك التنقل إلى أعلى الصفحة وليس إلى الأسفل.
جرزيجورز كوزاك
يدير شكل المنارة هنا كامل طول الصفحة ، حيث ينتقل من الفضاء إلى مستوى الأرض. تعودك اللافتات المعلقة من النوافذ على المنارة إلى أعلى الصفحة حيث يكون التنقل.
المشكال
يستخدم موقع Kaleidoscope صورًا وصورًا أساسية مختلفة خلف كل جزء من الموقع. يميز هذا كل منطقة محتوى من كل منطقة محتوى أخرى.
دان سكوتون
تعمل الصفحات القصيرة مثل هذه التي تحتوي على الحد الأدنى من المحتوى بشكل جيد. يظل التنقل في الشريط الجانبي عند التمرير لأسفل الصفحة.
فيكتور شفايكو
يستخدم هذا الموقع منزلق أفقي لتحميل محتوى جديد ، من خلال تمرير محتويات أخرى للوصول إلى الصفحة التي انتقلت إليها. يظل شريط التنقل في المقدمة بغض النظر عن الصفحة التي تتصفحها.
جون راندل
تتلاءم مواقع الويب الشخصية البسيطة مثل هذا تمامًا مع تصميم صفحة واحدة. تضيف الأيقونات وألوان اللكنة اهتمامًا أكثر بصريًا إلى التصميم ، والذي يكون محايدة جدًا.
جايسون ريد
يعمل استخدام تأثير الأكورديون لعرض محتوى جديد بشكل جيد عندما لا يكون المحتوى طويلاً جدًا. صورة الرأس المصورة ونظام الألوان الرمادي والبرتقالي يجعلان الموقع بارزًا.
تويت
يجعل استخدام القوام والرسوم التوضيحية البسيطة موقع Twitter CC جذابًا في حين أنه يبقى بسيطًا أيضًا مع نظام ألوان أحادي اللون.
تخطيط PSD
يمكن أن تعمل المواقع التي تقدم خدمات مباشرة إلى الأمام بشكل جيد في شكل صفحة واحدة. ليس هناك الكثير من المعلومات التي يمكن تقديمها والاحتفاظ بها في صفحة واحدة تسهِّل على العملاء المحتملين العثور بسرعة على ما يحتاجون إليه.
Feelwire
موقع Feelwire يبقي الأمور بسيطة ، ويوفر معلومات إضافية مع تلميحات الأدوات. تحافظ الخلفية البيضاء على الحد الأدنى وتضيف الرموز العريضة اهتمامًا مرئيًا.
النيزك الساخن
يستخدم موقع Hot Meteor تصميمًا يركز على اللون والرمادي والأحمر. رأس الصفحة مثبت ، مع الاحتفاظ بالملاحة في أعلى الصفحة.
ميا ماكيلا
يختلف موقع Mia Makila قليلاً عن معظم المواقع الأخرى المضمّنة هنا ، باستخدام تصميم أكثر تقليدية من 3 أعمدة. يتم استخدام JavaScript لعرض العمل الفني في كل فئة.
كوستاس ثيوهاريس
يستخدم هذا الموقع تأثير منزلق مثيرًا للاهتمام ، حيث ينزلق كل قسم (الرأس والمحتوى الرئيسي وتذييل الصفحة) بشكل منفصل عن بعضها البعض.
جاوان مخمللي
لا ينظر إلى تصميم الشبكة المستخدم هنا في كثير من الأحيان في تصميمات صفحة واحدة. ولكن مع الكثير من المساحة البيضاء ، تعمل بشكل جيد لتضمين الكثير من المحتويات المختلفة في تصميم انسيابي للغاية.
فريق البدوي
التصميم هنا بسيط ومباشر ، والتصميم المكون من عمودين يعمل بشكل جيد ليلائم المزيد من المحتوى على الصفحة دون جعله يبدو ثقيلاً.
خورخي فينو
يضع موقع Jorge Fino التركيز بشكل مباشر على التصميمات. التنقل غير موجود (بخلاف التمرير) ويتم تضمين معلومات جهة الاتصال في كل من الرأس والتذييل.
مولى ييم
وهنا موقع آخر مع عدم وجود الملاحة. إنها تبقى لفترة معقولة ، لذا فهي ليست مشكلة.
جوستين تسانج
الملاحة هنا مختلفة بعض الشيء. بدلاً من تضمين الأزرار التي تعيدك إلى الأعلى ، أو التنقل على كل شاشة ، يتم تضمين الأزرار بجوار كل مشروع ومنطقة محتوى للانتقال لأعلى أو لأسفل شاشة واحدة. يوجد أيضًا شريط تنقل في الأعلى للانتقال إلى كل قسم رئيسي.
Mogulista
تعتبر مواقع الويب المؤقتة وقتًا رائعًا لاستخدام موقع من صفحة واحدة. يستخدم هذا الموقع جافا سكريبت لتحميل محتوى جديد لكل "صفحة" على الموقع.
شيراج سولانكي
يجمع التنقل في هذا الموقع بين كل من التنقل الرئيسي والروابط في نهاية كل قسم لإرجاع الزوار إلى أعلى الصفحة. تربط رسومات الشعار المبتكرة معًا كل قسم ، مما يمنح الشعور بالاستمرارية للصفحة بأكملها.
الطيار استوديوهات
يعد تصميم موقع Deluge Studios أحد أكثر العروض الفريدة هنا. يوفر عمودين خمسة مناطق محتوى ، وكلها مرتبطة من التنقل العلوي. بما في ذلك أقسام المحتوى الرئيسية في عمود "الشريط الجانبي" الأصغر ، تجعل الصفحة أقصر بكثير.
ستوديو المرحلة الخامسة
موقع ستوديو Stage 5 قصير ، بدون تنقل. تنقل روابط "اقرأ المزيد" مزيدًا من المعلومات حول كل مشروع ، بينما يتم الاحتفاظ بالمحتويات الأخرى في "الشريط الجانبي".
SmartCube
يستخدم الموقع SmartCube رأس مثبت للحفاظ على التنقل على الشاشة في جميع الأوقات. كما أنه يستخدم مزيجًا من التنسيقات المكونة من 1 و 2 عمودًا ، اعتمادًا على المحتوى.
التصاميم Eclectique
يتم تمييز أقسام المحتوى هنا بواسطة زخارف خلفية فريدة. تسحب الطباعة كل شيء معًا خلال الصفحة ، ويتم استخدام جافا سكريبت لعرض منتجات إضافية دون شغل مساحة أكبر.
داخل أسرار لتطبيق آي فون
هذا هو واحد من أطول المواقع صفحة واحدة ظهرت هنا. ويستخدم رأس لزجة مع الملاحة لتسهيل الوصول من قسم إلى آخر.
قتل الانسكاب
من المؤكد أن الحفاظ على موقع خيري مثل هذا الموقع القصير والنهائي سيزيد من عدد التبرعات القادمة. الطباعة الجريئة ، والصور البيانية ، وتضمين نموذج التبرع في الأسفل كلها تعمل بشكل مثالي معًا.
إميلي وايت سميث
إليك موقعًا آخر يبدأ تشغيله في أسفل الصفحة. يقوم النقر فوق ارتباط "اكتشف المزيد" بتمرير الصفحة إلى منطقة المحفظة. النوافذ الملحقة هناك تعطي لقطات مقربة لكل نسيج.
نشرة إعلانية
مواقع الويب للتطبيقات مناسبة تمامًا لتصميمات الصفحات الفردية ، نظرًا لأن لها غالبًا محتوى محدودًا ولقطات شاشة أو صورتين فقط.
هايلي سميث
إليكم صفحة طويلة أخرى. يتكرر التنقل في أعلى كل قسم ، وينزلق الشعار لأسفل الصفحة أثناء تمريرها.
كونواي اندرسون
يستخدم موقع Conway Anderson مزيجًا من أشرطة التمرير (للمعلومات حول ومعلومات الاتصال) والنوافذ المشروطة (للعمل) لعرض المحتوى. التصميم البسيط القائم على الشبكة ونظام الألوان أحادي اللون يبقي الأشياء بسيطة وحديثة المظهر.
دانيال موير
موقع دانيال موير بسيط مع الحد الأدنى من المحتوى وعدم التنقل. ينظم التصميم المكون من عمودين أنواعًا مختلفة من المحتوى على الموقع ويبقيها أقصر.
لاتيه في اليوم
تعتبر مواقع ما قبل الإطلاق مناسبة تمامًا لتصميمات الصفحات الفردية ، كما هو موضح هنا. لا يوجد محتوى كافٍ حتى الآن لتبرير موقع متعدد الصفحات.
سوق خلية النحل
هنا هو موقع صفحة واحدة أطول. تضفي الخلفية الصفراء الساطعة وتوضيحات النحلة على الموقع بأكمله معًا ، وتكرر التنقل في أعلى كل قسم.
Rubidine
يستخدم موقع Rubidine رأسًا لزجًا مع خلفية شفافة تمتزج مع كل قسم محتوى فردي.
ياكوب زيمانسكي
يستخدم هذا الموقع جافا سكريبت لتحميل محتوى جديد والانزلاق إلى أسفل الصفحة. يظهر التذييل اللزج بعد "الصفحة" المنزلية مع رابط "العودة إلى الأعلى".
تايلر تيرميني
موقع Tyler Termini قصير ، مع الملاحة فقط في العنوان. نظرًا لأنها ليست صفحة طويلة جدًا ، فهي ليست مشكلة في الحقيقة أن تضطر إلى التمرير مرة أخرى إلى الأعلى (أو التمرير عبر كل قسم دون استخدام التنقل على الإطلاق).
جوش سيندر
نظام الألوان الرمادي هنا يبدو رائعًا. ينتقل العمل المعروض إلى اللون الكامل عند تمريره ، وعندما يتم النقر فوق نافذة مشروطة بالألوان يتم فتحها بإصدار أكبر.
مكتوبة ومجمعة حصرا ل WDD من قبل كاميرون تشابمان .
ما الذي يعجبك أكثر شيئ في المواقع ذات الصفحات الواحدة؟ هل لديك أي تفضيلات لم تكن مميزة هنا؟ شاركنا بالتعليق في الأسفل…