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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. التدرج

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

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

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

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

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

3. النقاط البارزة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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