Cara Menggunakan Aturan Sepertiga dalam Desain Web [Quick Tip]

Untuk memahami “aturan sepertiga” yang berkaitan dengan desain web, mari kita mulai dengan sebuah contoh.

Pertimbangkan gambar banteng di lapangan ini:

Tidak terlalu menarik, bukan? Sebagai pusat gambar, gambar banteng terasa agak hambar dan dapat diprediksi. Saya berani bertaruh jika Anda melihat gambar ini di situs web, Anda tidak akan terlalu lama memikirkannya.

Sekarang, pertimbangkan apa yang berubah ketika kita menggunakan aturan sepertiga untuk menempatkan banteng menjauh dari tengah:

Sedikit lebih menarik, bukan?

Aturan sepertiga dapat membantu membuat desain Anda terasa kurang dapat diprediksi dan lebih menarik. Dan, pada akhirnya, ini memiliki kekuatan untuk menarik perhatian pemirsa lebih lama – yang sangat penting ketika Anda mencoba menangkap pemirsa baru dan mengubah pemirsa tersebut menjadi prospek untuk merek Anda.

Tentu saja, ada pengecualian untuk setiap aturan. Mungkin Anda akan memutuskan desain Anda lebih menarik saat simetris. Namun, Anda hanya dapat membuat keputusan yang disengaja untuk situs web Anda sendiri setelah menjelajahi opsi Anda.

Di sini, kita akan mempelajari cara menggunakan aturan sepertiga dalam desain dan desain UI untuk membawa gambar Anda ke level berikutnya.

Cara Menggunakan Aturan Sepertiga dalam Desain

Sederhananya, aturan sepertiga menyatakan bahwa desain lebih menarik dan menarik secara visual saat Anda menempatkan objek utama desain Anda di salah satu dari empat persimpangan aturan kisi ketiga, atau di salah satu bagian pertiga.

Bukan rahasia lagi bahwa seni lebih dari sekadar dugaan. Kencan kembali ke zaman Romawi Kuno, geometri selalu mendapat tempat dalam karya seni yang signifikan.

Untuk memahami aturan sepertiga, mari kita lihat contohnya.

Aturan pertiga menggambar dua garis tegak lurus ke halaman, dan dua garis horizontal ke halaman, untuk membuat kisi sembilan kotak.

Ini membagi halaman Anda menjadi tiga bagian sepertiga, terlepas dari apakah Anda memotong gambar secara horizontal atau vertikal:

Selanjutnya, untuk menggunakan aturan sepertiga dalam desain, Anda hanya ingin menempatkan objek Anda di luar pusat dengan meletakkannya di salah satu bagian pertiga:

… Atau di salah satu titik perpotongan:

Pada contoh yang ditunjukkan di atas, titik fokus utama – puncak gunung – berada di sisi kiri tengah gambar, di sepertiga pertama foto.

Untungnya, cukup mudah untuk menggunakan aturan sepertiga pada gambar Anda sendiri menggunakan alat desain seperti Photoshop, yang menawarkan fitur kisi sehingga Anda dapat memastikan Anda menggunakan aturan sepertiga secara akurat untuk membuat desain yang lebih harmonis dan menarik.

Mari selami bagaimana Anda dapat membuat aturan grid pertiga di Photoshop dalam empat langkah cepat, selanjutnya.

Cara Membuat Aturan Sepertiga di Photoshop

1. Untuk menggunakan alat aturan sepertiga Photoshop, cukup buka halaman kosong di Photoshop dan klik “View” → “Show” → “Grid”:

grid first.” src=”https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-1.png?width=624&name=how%20to%20use%20the%20rule%20of%20thirds%20in%20design-1.png” style=”margin-left: 0.00px;” title=”” width=”624″ loading=”lazy” />

2. Selanjutnya, buka “Preferences” → “Guides, Grid & Slices”:

panduan, kisi, dan irisan.” src=”https://blog.hubspot.com/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-Apr-16-2021-06-59-02-03-PM.png” style=”margin-left: auto; margin-right: auto; display: block;” title=”” loading=”lazy”/>

3. Selanjutnya, pilih warna garis kisi, bersama dengan garis solid. Kemudian, ubah “Garis Kisi Setiap” menjadi “100 Persen”, dengan Subdivisi “3”. Setelah selesai, klik “OK”.

4. Dan begitulah! Anda sekarang memiliki aturan petak ketiga. Untuk menambahkan gambar Anda, cukup seret dan lepas gambar ke kisi berlapis yang ada, perluas untuk mengisi kisi, lalu pindahkan objek fokus Anda hingga berada di salah satu dari tiga bagian, atau di salah satu dari empat titik berpotongan .

Contoh Aturan Segitiga dalam Desain UI

Untuk mempertimbangkan kekuatan aturan sepertiga dalam desain antarmuka pengguna, mari kita lihat beberapa contoh situs web, dengan fokus khusus pada situs web mana yang menggunakan aturan sepertiga.

1. Soulful Vibes Co.

Di sini, perancang menempatkan fokus utama – pada bebatuan kristal, dan gelang manik-manik dengan gajah – di bagian sepertiga kiri dan kanan, memastikan fokus pengunjung ada pada teks tengah itu sendiri: “Ini bukan hanya gerakan, ini adalah gaya hidup.”

Perancang menggunakan aturan sepertiga untuk menciptakan estetika yang damai, harmonis, dan kasual yang terlihat lebih terbuka dan ramah daripada jika kedua objek berada di bagian depan dan tengah halaman, yang kemungkinan akan terasa lebih ramai dan sibuk.

2. HubSpot

HubSpot menggunakan aturan sepertiga untuk menarik perhatian langsung ke slogannya dan CTA “Dapatkan HubSpot gratis” di beranda, karena sebagian besar perhatian pengunjung akan dimulai dari sisi kiri situs web Anda. Kemudian, gambar kartun ditempatkan di bagian sepertiga kanan, untuk mengimbangi halaman. Ini membantu menciptakan aliran pengguna – dari kiri ke kanan – yang akan lebih sulit dicapai dengan desain simetris.

3. Museum Frans Hals

Situs web museum Belanda ini menggunakan aturan sepertiga untuk menarik perhatian ke foto wanita yang terletak di bagian kiri pertiga. Halaman itu unik, menarik, dan kohesif, dan menggunakan gambar-tandingan untuk menyeimbangkan struktur halaman yang asimetris – misalnya, sementara gambar wanita yang lebih besar ada di sebelah kiri layar, ada teks dan gambar tambahan di sebelah kanan. untuk menyeimbangkannya.

Kapan Harus Melanggar Aturan (dari Ketiga)

Penting untuk diperhatikan – dalam desain dan seni, tidak ada aturan ketat yang perlu Anda ikuti, dan ada pengecualian untuk setiap aturan atau tren desain.

Setelah Anda memahami aturan sepertiga dan bagaimana hal itu dapat memengaruhi pengalaman pengguna, Anda dapat melanggar aturan itu jika Anda mau.

Misalnya, Anda mungkin merasa lebih menarik untuk menyimpan gambar Anda di tengah layar, seperti yang ditampilkan di Beranda Tone Dermatology:

Di sini, fokus tengah pada wanita itu menarik dan berani, terutama karena dia melihat ke kiri layar, jadi gambarnya masih asimetris (Anda hanya melihat mata dan hidungnya di sebelah kiri, dan Anda hanya melihat rambutnya di Baik).

Tata letak desain ini berfungsi dengan baik untuk menarik perhatian pengunjung – dan kemungkinan besar tidak akan sekuat jika desainer menggunakan aturan sepertiga untuk menempatkan wanita di sisi kiri atau kanan layar.

Terakhir, Anda pasti ingin memilih elemen desain yang paling sesuai untuk kebutuhan merek Anda sendiri. Jika ragu, bereksperimenlah dengan kedua desain yang lebih simetris dan aturan desain ketiga, dan pertimbangkan pengujian A / B untuk mencari tahu mana yang berkinerja terbaik dengan audiens Anda.