Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Inspiration
Webdesign

الأتجاهات الشائعه لتصميمات الويب الحالية : الصفحات الرئيسية على كامل الشاشة

by
Length:LongLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Sorry About This: 40 Examples of 404 Pages
Designing Comments, Discussion, and Feedback For the Web

Arabic (العربية/عربي) translation by Mohammad Hussein Alasawedah (you can also view the original English article)

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

ملاحظة على التقارب في التصميم 

مصطلح "التقارب في التصميم" يشير إلى أن الطريقة التي تتبع بها التصميمات عادةً تصبح متشابهة ومتقاربة مع مرور الوقت.  حديثا jongold@ قام بتغريد التالي: 

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

أو كما صرح بول بواغ ، هل نحن مجرد جزء من مشهد تصميم الويب الناضج؟   هل نحن نبني ما يريده المستخدمون ، ما يتوقعونه ، وبالتالي جعل منتجاتنا أسهل  للاستخدام؟

"كلما كان الجسم أطول كلما كان تصميمه أكثر توحيدًا" - بول بواج

سوف أترك الأمر لك لتقرر. في الوقت الحالي ، لنلقِ نظرة على بعض تصاميم الويب كاملة الشاشة !

من الأعلى الى الأسفل ، من اليسار الى اليمين 

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

تصميم Makeshift يستخدم هذا النمط لإبقاء شريط التنقل الثانوي في أسفل الشاشة،  مع بعض روابط السابق/التالي في اليمين و اليسار. تستخدم صورة الخلفية الخصائص التالية  background-size: cover ؛ على figure  ضخم .

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

جيمس تيبير يخرج من أسفل الشاشة من خلال إعطاء موقع صورة وجهة الخصائص التالية  ;background-position: center bottom البقعه الصفراء الضخمة مصنوعة بأناقة بالتساوي مع ارتفاع إطار العرض باستخدام CSS الأصلي ; height: 100vh .

تعلم المزيد حول طريقتين ال CSS : 

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

Soul هو قالب شوبيفاي ، وواحد من تصاميمه عباره عن شريط منزلق بملئ الشاشة مع روابط تنقل موجوده على اليمين.

إستمر بالتمرير رجاءاً  ↓ 

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

 Blandly اختارت السهم الذي يشير إلى الأسفل بإتجاه رأس السهم المدبب ليقول "انظر إلى الأسفل هنا".

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

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

فيديو

 دامر كوتوريتش ، المصمم السابق لـ UX في Envato  ،بدأ شركة Falcon Films نتيجة لشغفه بالتصوير الجوي. من المنطقي فقط أن يلعب الفيديو دورًا كبيرًا في الصفحة الرئيسية لموقع  Falcon Films ؛ تحقق من الخلفية <video> ، ثم شاهد اللقطة  لتصوير ملبورن من الطائرة من دون طيار.

مرة أخرى ، استخدم دامر CSS الأصلي min-height: 100vh؛ لإنشاء قسم البطل بكامل الشاشة .

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

Style

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

مثال ال Landscape السابق يستخدم لون الكوبالت الأزرق الجميل (أحد الأسباب التي أحبه) و Voog يفعل شيئًا مماثلاً ،  مما يجعله يبدو رائعًا.

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

مؤتمر Bloomberg Businessweek Design (هل ستذهب؟) يستخدم تصميم خلاصة مطبعية لإظهار وجهة نظره.  التقارب في التصميم ؟ ليس هنا يا صاح

هل سبق أن ذكرت مشروع Envato Tuts + Translation؟ ممكن ، على أي حال ، أنا أحب عرض هذا المظهر للبرنامج النصي RTL - تحقق من Proland ، وهو نموذج بوستراب لصفحة هبوط تم بناؤه مع العديد من خيارات تنسيق الشاشة الكاملة.

هل أخذت فكرة وافية؟

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.