Advertisement
  1. Web Design
  2. Design Theory

Kesatuan dalam Desain Web

Scroll to top
Read Time: 9 min
This post is part of a series called Web Design Theory.
The Web Designer’s Theory of Relativity
6 Beginner “Safety First” Color Guidelines for the Web

Indonesian (Bahasa Indonesia) translation by Adam Saputra (you can also view the original English article)

Hari ini kita akan melihat prinsip desain yang memainkan peran utama dalam kesuksesan desain web: Unity. Seperti halnya banyak elemen yang dirancang di dunia, persatuan dapat membuat atau menghancurkan desain situs. Situs yang "menyatu" dengan baik terasa alami, organik, dan mulus; Di mana sebuah situs yang kekurangan persatuan dapat merasa terputus-putus, terputus-putus, dan tidak terkendali (dengan kata lain, itu hanya berantakan secara visual). Baca terus untuk mengetahui lebih lanjut!

Pengantar Persatuan

Persatuan adalah konsep yang menarik. Jika kita melihat definisi teknisnya, ada beberapa yang dapat diterapkan dalam konteks desain web.. seperti "keadaan dipersatukan atau bergabung secara keseluruhan" dan "harmoni atau kesepakatan antara orang atau kelompok". Khususnya, kita dapat melihat satu definisi yang berlaku untuk skenario ini sebagai aturan emas dari desain web yang baik: "keadaan membentuk keseluruhan yang lengkap dan menyenangkan".

Unity sangat penting karena membantu menciptakan merek dan identitas yang konsisten untuk situs Anda. Ini membentuk koneksi antara elemen-elemen Anda sehingga pengguna memiliki waktu yang mudah berkembang di antara elemen-elemen itu, dan juga antara halaman-halaman berbeda dari situs web Anda. Pada dasarnya, konsep persatuan menciptakan hubungan yang kuat antara unsur-unsur sehingga pengguna akan menganggapnya sebagai satu, bukan sebagai kelompok.

Mengapa Unity Penting?

Pikirkan seperti ini. Jika Anda tinggal di rumah yang terbuat dari batu bata, Anda tidak boleh mengatakan, "Saya tinggal di antara banyak batu bata". Sebaliknya, Anda berkata, "Saya tinggal di rumah". Itu karena Anda memiliki sekelompok elemen yang berbeda (yaitu, batu bata) yang disatukan sebagai rumah dan orang-orang menganggapnya sebagai bangunan tunggal berkat koneksi dan hubungan yang kuat antara batu bata bangunan (literal).

Hal yang sama berlaku untuk banyak hal di dunia alami juga. Lihatlah daun di sebelah kanan. Itu mengandung jutaan sel dan struktur blok bangunan lainnya, tetapi kebanyakan orang hanya menganggapnya sebagai daun.

Unity menyatukan desain Anda sebagai struktur, baik secara visual maupun secara konseptual. Itu menambah organisasi dan akan memudahkan perjalanan pengguna melalui halaman web Anda karena mereka tidak harus memproses setiap elemen secara individual. Ini, secara tidak langsung, membantu mendorong konten keluar dan memungkinkan pengguna untuk fokus pada pesan utama halaman web.

Faktor-Faktor Kesatuan

Ada banyak faktor yang berkontribusi terhadap rasa persatuan dalam halaman web. Namun, sebelum Anda mencoba menerapkannya, Anda harus memastikan bahwa Anda memahami apa tujuan inti dari desain tersebut. Tujuan desain harus didukung oleh desain terpadu yang membuat segala sesuatu tampak terkait dan lebih mudah dirasakan.

  • Warna - Warna adalah salah satu faktor terbesar dalam kesatuan desain. Itu sebabnya bisnis biasanya tetap menggunakan skema warna yang terkontrol; Ini membantu menyatukan produk mereka ke dalam keluarga; Itu juga dapat mengambil banyak informasi yang sangat penting dan membuat semuanya terasa terus menerus. Ambil Apple sebagai contoh; mereka menempel pada produk perak, putih dan abu-abu karena itu membantu menyatakan bahwa Mac mereka adalah bagian dari keluarga produk.
  • Pengulangan - Melanjutkan dengan analogi Apple, mari kita lihat garis iOS. Setiap produk di sana mengulangi elemen-elemen tertentu, seperti tombol beranda di bagian bawah, atau kamera di bagian atas. "Template" ini untuk perangkat mereka membantu orang mengenali bahwa mereka adalah bagian dari keluarga yang sama, karena ini berulang di seluruh produk. Apple menyatukan produk mereka sebagai merek - atau keluarga - karena pengulangan elemen spesifik mereka di seluruh.
  • Alignment - Alignment sebenarnya dapat memainkan peran dalam kesatuan, karena elemen yang dirancang di sekitar sumbu yang sama dapat merasa lebih terhubung. Ini berpihak pada kesatuan visual, bukan kesatuan konseptual.
  • Kedekatan - Hal-hal terlihat bersama, ketika mereka lebih dekat. Itu wajar. Ini cukup sederhana karena ketika Anda mengumpulkan barang-barang, mereka terlihat... bersama. Namun, jika mereka tidak bersama, faktor-faktor lain (seperti warna) dapat dimanfaatkan untuk melanjutkan rasa persatuan.
  • Kontinuitas dan Arah Visual - Bergerak di antara elemen-elemen dengan mudah membantu rasa bersatu dan mendorongnya melalui arah visual taktis adalah salah satu metode untuk melakukannya. Saya akan menjelaskannya sebentar lagi.
  • Konsistensi - Konsistensi dalam faktor-faktor lain seperti tipografi juga membuat unsur-unsurnya tidak terlalu berbeda. Menjaga hal-hal yang konsisten berarti bahwa mereka terlihat seperti satu sama lain, dan koneksi dihasilkan dari sana.

Sekarang mari kita jelaskan sedikit lagi bagaimana masing-masing faktor ini dapat dimanfaatkan untuk menciptakan hubungan yang kuat antar elemen.

Warna

Seperti yang telah kita tentukan, warna bisa menjadi cara yang bagus untuk membentuk koneksi antar objek. Hampir semuanya menempel pada skema warna - website atau bukan - karena ini membantu untuk menciptakan hubungan, terutama ketika digunakan sehubungan dengan produk atau entitas non-web. Misalnya, website Coca-cola (lihat di bawah) menggunakan warna merah dan putih primer, sama dengan produk andalannya. Oleh karena itu, penggunaan produk kita dapat langsung dikaitkan dengan situs karena konsistensi warna.

Kesatuan melalui warna juga dapat dihasilkan hanya dengan memastikan Anda mengikuti skema warna yang ditentukan dalam desain Anda. Tidak konsisten dalam hal ini akan menghasilkan desain yang terasa terpisah karena salah satu pengaruh terbesar terhadap tautan visual akan hilang. Kita bahkan dapat mengatakan bahwa Anda dapat merusak persatuan Anda jika pilihan Anda tidak terkait dengan jenis produk Anda, seperti bagaimana hijau dapat dikaitkan dengan keuangan.

Pengulangan dan Konsistensi

Elemen berulang yang terlihat identik membentuk koneksi karena otak Anda akan berpikir, "hei, saya pernah melihat itu sebelumnya!". Ini menciptakan keakraban dalam desain sehingga pengguna Anda tidak berkewajiban untuk memproses kembali bagian tertentu dari situs web Anda. Ini menghubungkan halaman melalui kesamaan mereka, jadi fokus utama Anda adalah pada konten dan pesan yang ingin Anda dorong.

Tentu saja, pengulangan elemen bukan satu-satunya metode untuk menciptakan kesatuan dalam desain Anda. Cukup dengan menggunakan faktor-faktor serupa (seperti warna, atau tipografi) dapat menghubungkan elemen-elemen desain Anda karena mereka terlihat serupa. Menggunakan skema warna yang sama, gaya perbatasan yang sama atau hanya font yang sama dapat melampirkan halaman, atau objek, dalam desain Anda.

Untuk pemahaman yang lebih baik, mari kita lihat analoginya. Kita dapat melihat pengulangan dari perspektif lain: Banyak situs jahat meniru desain situs populer sehingga tampak bagi pengguna seperti halaman layanan lain yang mereka gunakan setiap hari. Layar login Facebook palsu akan mereplikasi skema warna dan tata letak Facebook.com sehingga itu muncul, ke pengguna yang lugu, seperti halaman resmi dari jejaring sosial. Pengguna yang tidak berpendidikan tidak akan berpikir dua kali karena otak mereka tidak dipaksa untuk memproses ulang elemen-elemen khusus ini di halaman.

Alignment

Menjaga keselarasan yang konsisten berkontribusi pada kesatuan visual dalam suatu elemen. Mendesain sekitar sumbu umum membuat elemen tampak terkait. Sekelompok paragraf dengan perataan yang sama terlihat seperti mereka merupakan bagian dari sebuah artikel, bukan hanya potongan-potongan teks yang berbeda yang disatukan, dan akhirnya tampak terorganisir dan diposisikan dengan rapi.

Berbagai perataan hanya membutuhkan lebih banyak upaya untuk membentuk koneksi, dan itu jauh lebih baik untuk menghindari menghabiskan waktu melakukan itu.

Perhatikan juga bagaimana grid dapat memainkan peran dalam penyelarasan. Seperti batas yang dirasakan oleh sebuah kisi pada perancang baru, ia menawarkan fondasi yang kuat bagi Anda untuk menyelaraskan berbagai elemen ke dalam grid tunggal. Perhatikan situs web Squarespace di bawah ini:

Perhatikan bagaimana kisi tiga kolom sederhana mengubah halaman yang penuh dengan informasi menjadi halaman yang dirancang dengan rapi dan selaras sehingga terasa menyatu. Tidak buruk kan?

Kedekatan

Kedekatan adalah konsep lain yang berkontribusi pada kesatuan desain Anda secara keseluruhan. Saat Anda mendorong elemen lebih dekat, mereka lebih mudah diterima sebagai satu. Dalam upaya untuk membuat analogi, saya hanya bisa memikirkan yang berikut, jika Anda memiliki banyak domba di ladang, mereka mungkin disebut kawanan. Namun, jika mereka ditempatkan di bidang yang berbeda, Anda mungkin tidak langsung mengenali mereka sebagai bagian dari gerombolan yang sama (dan ya, itu adalah istilah kolektif yang benar untuk domba). Mungkin analogi yang lebih cocok adalah melihat dua orang terbangun di jalan, tertawa dan berbicara bersama. Karena kedekatan mereka satu sama lain, kita bisa menebak mereka memiliki hubungan semacam sebelumnya.


Perhatikan bagaimana bahkan bentuk-bentuk berbeda (bujur sangkar) terasa menyatu di tengah, sedangkan lingkaran-lingkaran di luar tampak kurang bersatu meskipun mereka memiliki bentuk yang sama.

Saat kita menerapkan ini pada desain web, itu tidak terlalu berbeda. Semakin dekat elemen-elemennya bersama, semakin kuat hubungan yang dikenali pengguna dan semakin baik kesatuan yang diciptakannya. Jika kita mundur sejenak dan menghargai bahwa semua yang benar-benar berarti persatuan adalah interaksi antar unsur, kita dapat mengenali bahwa hubungan yang lebih kuat berkorelasi dengan lancar dengan tingkat interaksi, dan pada tingkat itu, persatuan.


Kita langsung menyadari bahwa orang-orang ini memiliki semacam hubungan yang sudah ada sebelumnya, murni karena mereka bersama. Mudah-mudahan Anda setuju bahwa mereka terlihat seperti keluarga dan, jika demikian, apa indikasi lain selain kedekatan?

Arah Visual

Kami memiliki artikel yang bagus di sini di Tuts+ tentang arah visual dan bagaimana hal itu dapat memengaruhi suatu desain. Singkatnya, itu adalah teori bahwa kita dapat memengaruhi arah tertentu pengguna di atas halaman web dengan menyesuaikan konten kita dengan tujuan itu. Hingga taraf tertentu, kita dapat memanfaatkan arahan visual dalam skenario ini untuk membantu memengaruhi pengguna untuk beralih ke elemen lain secara alami.

Saya mungkin mendorongnya sedikit di sini, tetapi dengan memperkenalkan jenis manipulasi ini, kita dapat menyatukan elemen-elemen halaman untuk membuat ikatan yang lebih kuat, sehingga Anda meluncur dengan mulus di antara masing-masing halaman tetapi mengenai semua area yang diinginkan oleh desainer. Lihat. Hubungan ini dapat digunakan dalam konteks untuk menarik perhatian pengguna ke cerita lain di halaman web Anda, atau mungkin untuk melanjutkan membaca halaman. Anda dapat menggunakan konsep ini untuk mendorong, secara tidak sadar tentu saja, seseorang untuk melihat dan berinteraksi dengan tombol tweet, atau yang "Add to Cart".


Ini adalah contoh yang digunakan dalam artikel arahan visual. Perhatikan bagaimana subjek gambar memengaruhi pengguna untuk melihat di bagian tengah atas. Kita dapat menggunakan ini dalam desain web untuk mencoba dan membuat elemen-elemen dari halaman mengalir bersama dengan mulus.

Konsistensi

Konsistensi dalam desain web Anda adalah prinsip dasar yang berkontribusi pada persatuan. Tim sepak bola tidak akan keluar dan bermain di kemeja dengan warna berbeda per pemain. Sebaliknya, mereka dipersatukan sebagai tim dengan desain tunggal yang mewakili merek mereka (atau dalam hal ini, tim).

Konsistensi dicapai dengan berusaha menjaga gaya elemen-elemen serupa tetap sama, dan berkaitan dengan tema-tema seperti warna karena mereka adalah faktor-faktor utama yang menciptakan konsistensi yang sukses. Untuk mencapainya, tidak ada banyak yang harus dilakukan selain tetap berpegang pada skema di seluruh elemen Anda.

Kesimpulan

Persatuan hanya membuat hal-hal terasa terhubung dan bersama-sama dengan membuat mereka tampak seperti seharusnya. Situs web adalah situs web, bukan bilah navigasi, dan bilah sisi, dan logo, serta sepotong konten. Bukan, sebaliknya, itu satu hal yang dikunjungi: situs web.

Namun, jika kita memiliki terlalu banyak warna dan font, atau item didorong menjauh, atau perataan berbeda di dalam teks Anda, ikatan rusak dan tidak merasa terhubung lagi. Anda mungkin bertanya, mengapa desain saya harus disatukan? Sederhananya, itu berarti bahwa pengguna tidak perlu memproses setiap elemen, atau setiap halaman, setiap kali mereka menemukan yang baru karena dapat dikenali. Itu juga meningkatkan perjalanan melintasi halaman karena menu tidak terlihat seperti berada di wilayah berbeda dengan konten.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.