الدليل الشامل لتصميم الخلفيات 2024

إذا قمت بالاشتراك في خدمة من رابط على هذه الصفحة ، فقد تحصل شركة Reeves and Sons Limited على عمولة. انظر لدينا بيان الأخلاق.

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

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

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

لماذا تغيرت الأشياء بسبب الحاجة إلى responsive التصميم وتنوع أحجام الشاشات المختلفة وأنواع الشاشات التي قد يستخدمها الأشخاص.

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

هل الخلفيات مهمة حقا؟ لمعرفة ذلك ، قمنا بتفتيش المواقع الأعلى مرتبة 30 (لا بما في ذلك تكرار) والنتائج مثيرة جدا للاهتمام.

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

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

في مواقع 30 العلوية لـ 2017 ، كانت المواقع الوحيدة ذات الخلفيات المناسبة هي:

  • Twitter، مع خلفية فوتوغرافية (المرتبة العاشرة)
  • Live (Outlook) ، مع خلفية بلون خالص (المرتبة 12th)
  • NetFlix ، مع خلفية مجمّعة (المرتبة 21st)
  • WordPress ، مع خلفية بلون خالص (المرتبة 26th)
  • بنج ، مع خلفية فوتوغرافية (المرتبة 29th)
  • تمبلر ، مع خلفية فوتوغرافية (المرتبة 30th)

لذلك كان لدى 20 فقط من المواقع العليا لـ 30 خلفيات ، وكانت تلك التي كانت في أسفل القائمة.

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

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

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

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

يجب احتواء الخلفيات

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

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

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

تُظهر هذه الصورة الهيكل المثالي لقالب تصميم الخلفية:

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

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

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

صياغة

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

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

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

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

باستخدام التحجيم responsiveنيس

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

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

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

كما ترى ، يكون التصميم على ما يرام تمامًا عند القياس ، حتى عندما يكون لديك 640 x 360 pixels فقط للعمل معه. التالي لدينا iPad في اتجاه عمودي.

والمناظر الطبيعية.

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

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

وبالتالي ، فإن ميزة التدرج هي عندما تريد التأكد من أن بعض المكونات تظل معروضة دائمًا ، بغض النظر عن الظروف.

استخدام الإخفاء والكشف المرحلي responsiveنيس

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

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

Samsung Galaxy S5 landscape.

صورة باد.

باد المشهد.

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

عندما يتم عرض نفس الموقع على جهاز iPad ، فإن الخلفية تظهر دائمًا بغض النظر عن الاتجاه ، ولكن هناك بعض الاختلاف في ما يُرى.

أفضل المفاهيم لتصميم الخلفية (بالترتيب)

1. لون خالص (أو بدون لون)

2. التصوير الفوتوغرافي (تمدد)

3. بلاط صغير (سلس كامل)

4. بلاط كبير (سلس كامل)

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

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

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

رأس الصورة مجاملة من

بوجدان رانسيا

بوجدان هو أحد الأعضاء المؤسسين لشركة Inspired Mag ، حيث اكتسب خبرة تقرب من سنوات 6 خلال هذه الفترة. يحب في وقت فراغه دراسة الموسيقى الكلاسيكية واستكشاف الفنون البصرية. انه مهووس جدا مع إصلاحات كذلك. يمتلك 5 بالفعل.

التعليقات الردود 0

اترك تعليق

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المشار إليها إلزامية *

التقييم *

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.