Layout Design
Layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam sebuah bidang sehingga membentuk susunan artistik. Hal ini bisa juga disebut manajemen bentuk dan bidang. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan.
Gambar berikut adalah contoh layout yang tidak baik.
Untuk membuat desain layout yang baik perlu memperhatikan hal-hal berikut: grouping and hierarchy, whitespace, dan alignment and grids. Untuk hal Grouping dan hierarcy layout diatas tidak memenuhi prinsip gestalt yaitu:
- Proximity: elemen yang dekat satu sama lain cenderung dikelompokkan bersama. Yvette’s tidak mengelompokkan informasi yang serupa dalam tata letak yang berdekatan sehingga user yang menggunakannya akan bingung untuk mencari apa yang mereka mau.
- Common region: sama dengan prinsip proximity, elemen yang ditempatkan dalam wilayah yang sama dianggap di kelomppokkan. Yvette’s tidak mempuyai fokus dalam layoutnya karena semua informasi disusun secara tidak beraturan.
- Similarity: elemen yang mempunyai karakteristik visual yang sama terkait satu sama lain. Dari segi warna, bentuk, ukuran, dimensi, dan orientasi Yvette’s tidak terkait satu sama lain.
- Closure: layout menyajikan informasi yang tepat (meminimalkan penggunaan elemen dalam desain). Dalam Yvette’s semua informasi disajikan dalam satu layout yang membuat desain menjadi tidak menarik dan kompleksitas yang buruk.
- Symmetry: alat yang berguna untuk mengkomunikasikan informasi dengan cepat dan efisien. Yvette’s tidak memiliki keteraturan dalam desainnya yang menyebabkan user tidak nyaman membacanya dan sulit dan tidak fokus untuk menemukan informasi yang ingin dicari.
- Continuity: membantu user dalam membaca dan persepsi informasi yang dikelompokkan. Yvette’s tidak membuat layout dalam susunan daftar atau submenu sehingga user sulit untuk menemukan informasi.
- Common Fate: elemen yang bergerak ke arah yang sama dianggap lebih terkait daripada elemen yang bergerak ke arah yang berbeda atau tidak bergerak sama sekali. Kita tidak menemukan expandable menus, accordions, tool-tips, product sliders, parallax scrolls and swiping indicators dalam Yvette’s sehingga user beranggapan informasi didalamnya tidak saling terkait.
Whitespace adalah jarak antar elemen dalam sebuah desain (objek yang dibiarkan kosong). Dengan adanya whitespace ini, desain kita akan terlihat elegan, rapi, dan user mudah untuk menemukan informasi yang dibutuhkan. Dalam Yvette’s tidak ditemukan whitespace karena layaout dipenuhi dengan text yang tidak tersusun dengan rapi. Hal ini menyebabkan user sulit dalam mengidentifikasi apa yang sebenarnya disampaikan dalam layout ini. Whitespace juga berhubungan dengan simplicity sehingga web yang kita buka dapat dengan mudah kita pahami penggunaannya.
Alignment and Grids berhubungan tata letak atau susunan elemen dalam sebuah desain layout sehingga kita tahu mana bagian Header, Navigation, Feature, Body/Content, Sidebar, Footer, dan Background dalam website tertentu. Jika bagian ini tersusun dengan baik, maka kita akan tahu mana fokus dari sebuah website, apa informasi pentingnya, dan yang tidak terlalu penting. Yvette’s tidak menunjukkan prinsip alignment dan grid dalam desain webnya. Semua elemen atau informasi disusun dengan asal menempatkannya dimana saja sehingga membuatnya tidak teratur dan user malas untuk melihatnya.
Website Yvette’s dibuaat dengan kurang memperhatikan penempatan elemen atau informasi didalamnya. Untuk saya mencoba untuk memperbaiki desainnya mulai dari penempatan elemennya, menu elemen yang tersedia dan susuna elemennya. Berikut adalah hasil yang saya buat.
