دوس و Don'Ts من تصميم المواقع المظلمة
تحظى تصاميم الويب الداكنة بشعبية كبيرة ويمكن أن يكون لها جاذبية أنيقة وإبداعية.
كما أنها مثالية للعديد من أنواع عمل العملاء ومع ذلك ، فهي ليست مناسبة لكل موقع ويب ويجب استخدامها فقط عند الاقتضاء.
على الرغم من التأثير المرئي المذهل الذي يمكن أن تحدثه هذه التصميمات المظلمة ، فإن العديد من المصممين لا يعرفون كيفية سحبها بشكل فعال دون إيقاف الزائر.
بفضل التصميم المظلل ، تقل سهولة القراءة ، ويقلل من جاذبية معظم القراء ويقلل من فرصة الحصول على عناصر التصميم التقليدية.
في هذه المشاركة ، سنناقش بعض النصائح لنجعل تصميمك المظلل القادم لموقع الويب جذابًا أمام جمهور أوسع ، مع السماح لك ، المصمم ، بالتعبير عن إبداعك.
ا استطلاع حديث للرأي يشير إلى أن تصميمات الضوء مفضلة لدى الجمهور العام عبر الويب بنسبة هائلة تصل إلى 47٪. السبب الرئيسي هو قابلية القراءة . لا يحب معظم الأشخاص مشاهدة النص الضوئي مقابل خلفية داكنة على مواقع الويب لأنه يجهد عيونهم ، مما يجعل تجربة ممتعة أقل بكثير.
على النقيض من ذلك ، قال 10٪ ممن شملهم الاستطلاع إنهم يفضلون دائمًا خلفيات داكنة لمواقع الويب ، في حين قال 36٪ آخرون أن الخيار الأفضل يعتمد على نوع موقع الويب.
إذن ما هو الجواب الصحيح؟ عندما يتعلق الأمر به ، لدى كل شخص رأيه الخاص ، وهذا هو ذلك.
ولكن مع وجود نسبة كبيرة من المستخدمين يقولون أن تصاميم المواقع المظلمة مقبولة وفي بعض الأحيان يفضلونها ، يتعين علينا كمصممي ويب أن نتعلم كيفية إنشاء تصاميم داكنة فعالة لأنفسنا ولعملائنا.
وهذا يعني إقناع جميع المؤمنين الحقيقيين للخلفيات الفاتحة بأن التصميم المظلم يمكن أن يكون أكثر قابلية للقراءة وسهل الاستخدام.
استخدم المزيد من المساحة البيضاء
أم يجب أن يطلق عليه "الفضاء الأسود"؟ يعد الاستخدام الفعال للمساحة البيضاء أمرًا مهمًا لأي نوع من أنواع التصميم ، ولكنه ضروري لمواقع الويب ذات الخلفية المظلمة.
تتميز التصميمات الداكنة بالميل إلى الشعور "بالثقل" ، كما أن ازدحامها يمكن أن يعزز هذا الشعور. ألقِ نظرة على بعض تصميمات الويب المظلمة الشائعة أدناه ، ولاحظ استخدامهم الليبرالي للفضاء الأبيض بشكل كبير.
بلاك ستيت وينظر في جميع أنحاء شبكة الإنترنت في مظلات تصميم الويب المظلم. إنه بالفعل تصميم جميل يستحق كل الاهتمام. يتم استخدام مساحة كبيرة من المساحة البيضاء في جميع أنحاء التصميم ، وما يجعل هذا التصميم الفريد من نوعه هو كيفية استخدام المساحة البيضاء لتحديد بعض العناصر بكفاءة.
يحتوي الشعار على الكثير من المساحة البيضاء حوله وهو أول شيء نراه كزائرين. نرى المحتوى الرئيسي والزجاجة على اليمين بعد ذلك. كما ترى ، يتم استخدام المساحة البيضاء بشكل مثالي لتسليط الضوء على النص على الزجاجة والعنوان الرئيسي للمحتوى.
المحتوى المميز في Tictoc يتم وضع الصورة المصاحبة في هذا التصميم مع معظم المساحة البيضاء. بينما ننزل إلى الأسفل ، نرى مساحة بيضاء أقل ، مما يجعلنا ننتبه إلى المحتوى الذي يتم عرضه.
النقطة هنا هي أن المساحة البيضاء توجه المستخدم تدريجيا إلى نهاية الصفحة .
الخلفية المظلمة تضيف العمق إلى التصميم. لأن موقع الويب يعتمد بشدة على المساحة البيضاء ، سيكون أقل إثارة للاهتمام بدون التأثير الإبداعي للخلفية المظلمة.
ال مارك ديجمان موقع يحتوي على مساحة بيضاء ليبرالية ومتوزعة بالتساوي في جميع أنحاء تخطيطها.
توفر المساحة البيضاء المؤطرة لكل قطعة محفظة الكثير من مساحة التنفس للمحتوى الذي تحتفظ به ، وهي نقطة راحة لطيفة قبل الانتقال إلى الجزء التالي.
إن الكثير من المساحات البيضاء ضرورية للتصاميم الداكنة لأنها لا تساعد فقط على إزالة التشويش عن التصميم بل في تأطير العناصر المهمة وإضافة الأناقة إلى المظهر العام.
مساحة بيضاء نصية
ولأن قابلية القراءة هي مصدر القلق الأول بالنسبة لأولئك الذين لا يحبون الخلفيات المظلمة ، يجب على المصممين أن يوليوا اهتمامًا وثيقًا للنص نفسه.
وكما هو الحال في التصميم العام ، تتمثل إحدى الطرق لتحسين قابلية القراءة على مواقع الويب المظلمة في زيادة المساحة البيضاء عن طريق ضبط حجم الفقرة وتقنين المسافات والقيادة .
يوضح المثال أدناه الفرق بين التباعد بين الحروف وحولها في مقارنة التنسيقات المظلمة والخفيفة.
هناك طريقة أخرى لتحسين إمكانية القراءة في تصميمات الويب المظلمة وهي زيادة حجم الخط . مثل معظم القواعد الأخرى في هذا المنشور ، فإن أحجام الخطوط الأكبر تعني مساحة بيضاء أكبر. كلما كانت الأحرف أكبر ، ستظهر المساحة البيضاء حول وداخل كل حرف.
على سبيل المثال ، يحصل الحرف "a" أدناه على مساحة بيضاء أكبر عندما يزداد حجمه ، سواء في المنطقة المحيطة به أو في الفراغ الموجود داخل العلبة وتحت العبء.
لاحظ كيف أن قراءة النص الصغير أسهل بكثير على خلفية فاتحة أكثر من الخلفية المظلمة. عند تعيين الطباعة لموقع ويب جديد ، تأكد من إلقاء نظرة على بعض النص الوهمي للتأكد من أنه مقروء . إذا لم يكن كذلك ، راجع ما إذا كان زيادة حجم النص يساعد.
تباين النص
يوافق الكثير من الناس على أن أكثر المواقع السوداء سوءًا تصيبهم إجهاد العين. كثيرا ما أو القليل جدا من التباين هو عادة الجاني. كيف يجد المرء التوازن المثالي؟
إذا كنت في غرفة سوداء ، فإن النظر فجأة مباشرة إلى الضوء ليس ممتعاً. لكن النظر إلى إضاءة أقل سطوعًا في غرفة أقل ظلاما أمر جيد. ينطبق المبدأ نفسه على تصميم الويب.
ويعني العثور على التباين المثالي موازنة الظلام في الخلفية مع خفة النص .
يوجد أدناه دليل (تقريبي) تقريبي يوضح مدى التباين بين النص والأعمال الأساسية. يلاحظ المرء أنه كلما أصبحت الخلفية أخف وزنا ، كذلك النص.
العثور على تباين لطيف للنص هو أكثر صعوبة مع خلفية سوداء نقية.
للعثور على التوازن المثالي ، قم بتجربة ظلال مختلفة. أفضل نتيجة هي عادةً خلفية غير سوداء خالصة ونص ليس أبيض نقيًا.
التعامل مع الخطوط
تلعب الخطوط دورًا كبيرًا في التصميم ويجب أن تؤخذ بالتأكيد في الاعتبار المدروس بتخطيطات داكنة. تعرض الصورة أدناه خط 14 نقطة على خلفية داكنة في كل من خطوط serif و sans-serif.
من الواضح أن الخط sans-serif أكثر قابلية للقراءة . ولكن العديد من المصممين لا يزالون يختارون الخطوط المائلة لأناقتهم.
على الرغم من ذلك ، فإن الخدعة هي وضع نص أكبر في الخطوط المائلة ، بحيث تتدفق المساحة البيضاء الإضافية حول كل حرف وتجعل النص مقروءًا للغاية.
لقطة الشاشة أدناه من موقع ويب تمت مناقشته مسبقًا في هذه المقالة. وهو يتميز بكل من خطوط serif و sans-serif ، ولكنه يستخدمها بطريقة ذكية.
نص أكبر ، مثل العناوين الرئيسية ، والملاحة والرؤوس ، هو في خط serif لمزيد من الأناقة. للحصول على تباين أفضل وقراءة محسنة ، يكون نص النص في خط sans-serif نظيف.
استخدم الحد الأدنى من أنظمة الألوان
لإعطاء تصاميمهم الداكنة مظهرًا نظيفًا وغير مرتب ، يجب على المصممين دائمًا اختيار مخططات الألوان البسيطة .
من الأمثلة القليلة أدناه ، يمكننا أن نرى أن أنظمة الألوان المزدحمة تعوق بالفعل الخلفيات المظلمة ، لأن التباين حاد للغاية.
التزم بلون أو اثنين . لإضافة المزيد من الألوان ، جرب خلفية داكنة اللون.
يحتوي العديد من تصميمات الويب المظلمة على مخططات ألوان أكثر إثارة. إذن هذه القاعدة غالباً ما تكون مكسورة ، ولكن فقط مع التقنيات الصحيحة.
بشكل عام ، على الرغم من ذلك ، فإن اللون غالبًا ما يجعل موقع الويب يبدو مشغولًا جدًا . نظرًا لأن مواقع الويب الداكنة تمتلك بالفعل عمقًا ، استخدم اللون بحذر.
تقدم نمط الجلاد
في حين أن لدينا العديد من الممارسات الجيدة المتاحة لدينا لجعل تصاميم الويب المظلمة أكثر جاذبية ، لن يرضي أي قدر من الجهد كل مستخدم.
تأكد من تضمين مبدل نمط ، بحيث يكون لدى المستخدمين في النهاية خيار عرض النص الغامق على خلفية فاتحة.
تلزم صحيفتا نمط لهذا ، أحدهما للتخطيط المظلم الافتراضي ، وواحد لتخطيط الإضاءة البديل.
يحتوي SitePoint على برنامج تعليمي ممتاز حول هذا: بناء نمط بسيط الجلاد في المغلق . بدلاً من استخدام الإصدارات "البرتقالية" و "الزرقاء" و "البيضاء" في البرنامج التعليمي ، فقط استخدم أوراق الأنماط "الخفيفة" و "المظلمة".
عندما يعمل تصميم الويب المظلم أفضل
وكما ذكرنا ، تعتقد نسبة كبيرة من مستخدمي الويب أن تصميم الويب المظلم قد يعمل مع أنواع معينة من مواقع الويب. لكن الدراسة غامضة على ما هي بالضبط هذه الأنواع.
بشكل عام ، يعمل الظلام أفضل لتصميمات مبتكرة أو أنيقة . بالنسبة للمواقع الأنيقة الحديثة ، تضيف الخلفيات الداكنة الأناقة. بالنسبة للأنماط المتجانسة أو المرسومة باليد ، تعزز الخلفيات الداكنة الإبداع في التصميم.
تصميم أنيق داكن
يمكن أن يكون الظلام عميقًا وموثوقًا وقويًا وغالبًا ما يبدو أنيقًا عند استخدامه بشكل مناسب. إليك بعض الأمثلة وبعض التقنيات لإظهار الأناقة في تصميم مظلم.
الموقع لاريسا ميك يحتوي على نمط بسيط على الطراز القديم في الخلفية ، لتعيين نغمة أنيقة. ميزات أخرى quirkier تضيف لمسة شخصية على التصميم.
يمكن استخدام هذه التقنية لأنواع كثيرة من المواقع. يمكن للأنماط والقوام الكلاسيكي أو الكلاسيكي أن يخلق مظهرًا أنيقًا ومناسبًا للعمر .
معظمنا يربط بين أنماط عتيقة ودرجة عالية ، لذلك فإن إنشاء موقع على مستوى عالٍ بهذه الطريقة أمر سهل.
العمق الأساسية لديه تصميم نظيف للغاية ، مع خلفية داكنة تضيف أسلوبًا وطبقًا. الشعور بالسلطة واضح أيضًا في التصميم. قد تجعل هذه الأناقة أيضًا عمل محفظة مصمم تبدو أكثر قيمة نتيجة لذلك.
لاحظ أن هذا التصميم لا يحتوي على أي زخرفة أو صور أخرى غير قطع الشعار. خلاف ذلك ، كان التصميم مشغولاً للغاية. كما هو ، المحتوى متماسك معًا جيدًا.
وتتمثل إحدى الخطوات الجيدة التي يجب اتباعها في إضافة محتوى أساسي أولاً ثم إحضار عناصر التصميم حسب الحاجة . يمكن للمصمم أن يتوقف مؤقتًا وينعكس مع إضافة كل عنصر جديد ، مع التأكد من عدم زيادة تصميم المخطط.
مثلما يمكن أن يظهر العمل الفني أكثر قيمة في تصميم أنيق ، كذلك يمكن للمنتجات. تصميم مظلم وأنيق ، مثل Tapbots وغيرها الكثير ، ويساعد على عرض المنتج الذي يتم بيعه.
يعكس التصميم الجهاز نفسه ، مع تدرجاته وتأثيرات الإضاءة ؛ بعض التصاميم حتى تقليد نسيج منتجاتها ذات التقنية العالية.
التصميم المظلل الإبداعي
وبخلاف مجرد الظهور في تصميمات مواقع انترنت مظلمة وأنيقة ، يمكن أيضًا الحصول على استجابات عاطفية أكثر من تصاميم الإضاءة القياسية ، مما يجعلها مثالية للمشاريع الإبداعية. لنلق نظرة على بعض الأمثلة على أنواع التصميمات الإبداعية الممكنة.
ال موقع أدناه محتوى قليل جدًا ولكن به تصميم فريد وألوان داكنة للعمق. الخلفية المظلمة مثالية لمواقع الويب ذات المحتوى القليل جدًا .
ولأنها تحتاج إلى مساحة بيضاء أكبر ، فإن المصمم لديه مساحة أكبر للعمل معه.
يأتي تصميم موقع Grunge على الويب بأشكال عديدة ، ولأن grunge هي "داكنة وقذرة" ، فإن الخلفيات الداكنة هي واحدة من تلك الأشكال.
تصاميم الجرونج الظلام مثل Trozo يبدو أن كسر جميع القواعد: القوام مشغول ، وتخطيط مزدحم ومجموعة واسعة من الألوان. ومع ذلك لا يزال هذا الموقع يعمل. كيف يعقل ذلك؟
مع العديد من العناصر الفوضى للعمل مع ، يمكن أن يكون تصميم grunge صعبة للمبتدئين. ما يجعل هذا العمل هو تنظيمه .
وقد وضعت الخلفية بوضوح الكتل التي توجه عين المستخدم وتساعد في تقسيم المحتوى إلى أقسام يمكن إدارتها.
وثانيا ، لديها الكثير من الفضاء الأبيض . قد يتم زخرفة الخلفية ، ولكن ينظر إلى النمط المتكرر من قبل المستخدم كمساحة بيضاء ، مما يساعد على تفتيح التصميم.
هذه المساحة البيضاء أكثر وضوحا على يسار الشعار ، تحت الملاحة وعلى طول الجانب الأيمن.
حتى بين "Exhibit 01" و "Exhibit 02" هي مساحة بيضاء أكثر من تلك التي عادة ما تجدها على موقع مثل هذا.
المساحة البيضاء تتفحص الأشياء ، على الرغم من أنها لا تبدو مثل المساحة البيضاء لأنها تحتوي على نسيج . كما يسهم النص البسيط وأقسام قليلة (ثلاثة فقط) في ظهور هذا البساطة.
تصميم درو ويلسون يكسر بالتأكيد حكم استخدام الحد الأدنى من اللون. ومع ذلك ، فإنه لا يزال يعمل ، لأن رأس الألوان الزاهية هي واحدة من الميزات القليلة في هذا التصميم المتناثر ، لذلك لا شيء يفوق طاقتها.
والخلفية المظلمة تجعل رأس الصفحة يبدو أكثر إشراقاً وأكثر استثنائية.
غالبًا ما تستخدم الخلفيات الداكنة لجعل تأثيرات الإضاءة والألوان الزاهية تبرز بشكل أكبر .
هذه التصاميم هي استثناء خلاقة رائعة لقاعدة اللون الأدنى. ولكن يجب أن يتم كسر القاعدة بحذر: تجنب تشتيت انحدار التدرجات والملمس واللون إلى أسفل الصفحة.
تغليف
توفر الخلفيات الداكنة شعورًا أنيقًا وإبداعيًا لتصميمات الويب ، مما يجعلها مثالية لبعض المحافظ ، ولكنها غير مناسبة لكل موقع.
بالنسبة إلى المواقع الأكبر حجمًا ، خاصة تلك الخاصة بالأشخاص الذين يعانون من ضعف الرؤية وغيره من الإعاقات ، فإن التصميمات الغامقة لا تحتوي على أي شيء ، حتى مع مبدل النمط.
نأمل عندما يحين الوقت الذي تحتاجه لتصميم موقع على شبكة الإنترنت بخلفية مظلمة ، فإن هذه النصائح والإستراتيجيات ستساعد.
مكتوبة حصرا ل WDD من قبل كايلا نايت .
هناك العديد من التقنيات والاستراتيجيات لتحسين تصميمات الويب المظلمة ، لذا يرجى مشاركة التصميمات التي التقطتها في قسم التعليقات أدناه.