تصميم الخلفيات لمواقع الويب

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

صياغة

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

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

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

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

استخدام القياس من أجل الاستجابة

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

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

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

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

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

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

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

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

استخدام الإخفاء المرحلي والكشف عن الاستجابة

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

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

Samsung Galaxy S5 landscape.

صورة باد.

باد المشهد.

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

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

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

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

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

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

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

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

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

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

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

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

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