Lima tip desain web untuk memanfaatkan cahaya dan bayangan dengan lebih baik

Teks asli: 5 Trik Sederhana Untuk Menghadirkan Cahaya dan Bayangan ke dalam Desain Anda

Cahaya dan bayangan ada di mana-mana dalam kehidupan nyata. Segala sesuatu yang Anda lihat dipantulkan oleh cahaya dan bayangan. Secara visual, cahaya dan bayangan membantu kita mengidentifikasi benda dan mengenali materi , skala , dan perspektifnya .

Oleh karena itu, jika kita ingin membuat desain web kita lebih natural, dinamis, nyata, dan intuitif, sangat penting untuk memahami efek cahaya dan bayangan dengan benar. Berikut lima tips untuk membantu Anda memanfaatkan cahaya dan bayangan dengan lebih baik. Menggunakannya dengan baik dapat membuat desain Anda lebih halus dan menonjol dari halaman lain.

Analisis singkat tentang prinsip pencahayaan dan bayangan.

Pada gambar di bawah, sumber cahaya berasal dari kiri. Sorotan adalah bagian yang paling terang, dan bayangan terletak paling jauh dari sumber cahaya. Keberadaan cahaya dan bayangan membantu kita memahami sejumlah besar informasi tentang material permukaan suatu benda .

Tapi Anda mungkin bertanya, apa hubungannya dengan desain web?

Jika Anda berencana membuat antarmuka dan situs web yang kaya dan bertekstur, cahaya dan bayangan dapat membantu Anda. Sama seperti banyak seniman tradisional yang menggunakan cahaya dalam lukisan, Anda juga dapat menggunakan cahaya untuk memberikan kedalaman dan daya tarik visual pada desain Anda.

1. Menggunakan sumber cahaya

Perlu dikatakan bahwa ketika menggunakan pencahayaan, mengetahui di mana sumber cahaya berada adalah masalah mendasar yang paling penting. Posisi sumber cahaya menentukan penempatan sorotan dan bayangan (walaupun dalam desain web Anda dapat melanggar aturan ini). Di Photoshop, Anda dapat menggunakan "Penerangan Global" dalam gaya lapisan untuk memastikan bahwa sumber cahaya dari semua efek cahaya dan bayangan yang Anda buat berada pada posisi yang sama.

Mengontrol posisi sumber cahaya dapat menciptakan suasana unik untuk desain halaman Anda (bahkan gradien linier atau radial sederhana pun dapat mencapai efeknya). Efek cahaya dan bayangan juga dapat memandu pergeseran pusat visual.

Contoh dari web,

Campaign Monitor , menggunakan sumber cahaya berbeda untuk menciptakan efek matahari terbit.

Icebrrg menggunakan pencahayaan untuk membuat halaman berada di bawah air.

Mike Precious menggunakan lebih dari satu sumber cahaya untuk menambah daya tarik visual, dan menggunakan pencahayaan lampu meja secara keseluruhan.

Deaxon memiliki sumber cahaya redup di belakang logo, yang membawa fokus halaman ke logo.

2. Gradien

Di dunia nyata, tidak ada yang selalu bernada datar. Cahaya dan bayangan melekat pada segalanya. Menggunakan gradien adalah cara terbaik untuk menciptakan kedalaman dan keaslian.

Kunci dalam menggunakan gradien adalah jangan berlebihan . Saat menggambar gradien di Photoshop, lakukan overlay gradien dalam gaya lapisan. Ini akan memastikan gradien Anda dapat diedit, dan saat lapisan diskalakan, gradien juga dapat diskalakan tanpa kehilangan.

Contoh dari web:

situs web nclud menggunakan gradien yang halus namun efektif untuk membedakan dan mengatur konten.

Sekilas CSS Ninjas terlihat menggunakan warna datar. Namun, setiap area warna sebenarnya memiliki gradasi samar, sehingga menciptakan efek material yang menarik.

3.

Sorotan Sorotan dapat menyeimbangkan bayangan dan sebaiknya ditempatkan pada tepi objek yang dekat dengan sumber cahaya . Sorotan sebagian besar diabaikan karena jika digunakan dengan baik, Anda hampir tidak menyadarinya. Namun, tidak semua situasi cocok karena keberadaan highlight yang halus dapat menyebabkan perbedaan besar pada polesan permukaan suatu objek. Semakin "tajam" sorotannya, semakin kuat kilap permukaan objeknya.

Untuk mengapresiasi hal-hal penting, kita perlu memperbesar detailnya. Saat membuat desain high-gloss, sebaiknya gandakan ukuran desain Anda lebih dari dua kali lipat, karena Anda mungkin tidak dapat mengetahui apa yang Anda lakukan saat ditampilkan pada skala aslinya.

Contoh di Internet,

Icon Dock dan Newism, keduanya menggunakan warna putih transparan di tepi atas halaman untuk menciptakan efek highlight. Meski sangat tidak mencolok, namun memberikan kilau yang kuat pada desainnya.

Setiap orang pasti sudah familiar dengan situs web Apple . Namun Anda mungkin tidak melihat sorotan halus di bagian bawah menu navigasi. Sorotan inilah yang memberi kesan menonjol pada menu.

4. Bayangan Dasar

Seperti halnya gradien, drop shadow juga banyak digunakan oleh desainer web. Jika digunakan dengan benar, drop shadow benar-benar dapat menambah kedalaman visual dan tekstur pada desain. Kuncinya adalah jangan berlebihan atau menyalahgunakannya.

Kedalaman bayangan bergantung pada arah dan intensitas cahaya, serta jarak benda dari permukaan proyeksi. Semakin kuat cahayanya, semakin tajam dan gelap bayangannya; semakin lemah cahayanya, semakin lemah pula bayangannya.

Contoh di Internet

Terlalu banyak contoh proyeksi di Internet.

LinkedIn menambahkan drop shadow yang sangat halus di bagian bawah sidebar untuk menciptakan kesan mendalam.

Google —mungkin halaman yang paling sulit untuk didesain di Internet—masih menggunakan drop shadow halus di halaman pencariannya.

5. Bayangan tingkat lanjut

Untuk memberikan kesan tiga dimensi pada objek, Anda memiliki banyak pilihan selain bayangan sederhana. Bayangan panjang dapat secara dramatis mengubah hubungan spasial objek pada halaman.

Pada contoh di bawah, setelah kaleng Coke yang sama diberi bayangan dan bagian gelap yang berbeda, seluruh posisi spasial tampak sangat berbeda .

Contoh di Internet,

Emotions oleh Mike, dengan cerdik menggunakan bayangan (dan pencahayaan) untuk mengubah halaman datar menjadi lantai.