خمس نصائح لتصميم الويب للاستفادة بشكل أفضل من الضوء والظل

النص الأصلي: 5 حيل بسيطة لجلب الضوء والظل إلى تصميماتك

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

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

تحليل سريع لمبادئ الإضاءة والتظليل

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

لكن قد تتساءل ما علاقة هذا بتصميم الويب؟

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

1. استخدام مصادر الضوء

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

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

أمثلة من الويب،

Campaign Monitor ، مصادر ضوء متباينة لإنشاء تأثير شروق الشمس.

يستخدم Icebrrg الإضاءة لجعل الصفحة تحت الماء.

استخدم Mike Precious أكثر من مصدر إضاءة لإضفاء لمسة بصرية، واستخدم إضاءة مصباح الطاولة في كل الأنحاء.

يحتوي Deaxon على مصدر ضوء خافت خلف الشعار، مما يجعل تركيز الصفحة على الشعار.

2. التدرجات

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

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

أمثلة من الويب:

يستخدم موقع الويب الخاص بـ nclud تدرجات دقيقة ولكنها فعالة لتمييز المحتوى وتنظيمه.

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

3. الإبرازات

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

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

من الأمثلة على الإنترنت،

Icon Dock و Newism، كلاهما يستخدم اللون الأبيض الشفاف على الحافة العلوية من الصفحة لإنشاء تأثير التمييز. على الرغم من أنه غير واضح للغاية، إلا أنه يوفر بريقًا قويًا للتصميم.

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

4. الظلال الأساسية

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

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

أمثلة على الإنترنت

هناك الكثير من الأمثلة على الإسقاط على الإنترنت.

يضيف LinkedIn ظلًا منسدلًا دقيقًا للغاية في الجزء السفلي من الشريط الجانبي لإضفاء إحساس بالعمق.

لا يزال موقع Google - ربما أصعب صفحة من حيث التصميم على الإنترنت - يستخدم ظلًا منسدلًا دقيقًا على صفحة البحث الخاصة به.

5. الظلال المتقدمة

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

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

المثال الموجود على الإنترنت،

Emotions by Mike، يستخدم الظلال (والإضاءة) بذكاء لتحويل الصفحة المسطحة إلى أرضية حرفيًا.