Catra WardhanaPilihan cara untuk mendesain sebuah website itu tidak terbatas. Dengan menyadari hal itu, otomatis, kemungkinan gagalnya pun tak kalah banyaknya. Secara umum, ada dua metode yang bisa dipakai agar tidak terjatuh dalam lubang kegagalan: mempelajari dasar-dasar desain yang fundamental dan menerapkannya secara tepat. Selain itu, pengalaman dan jam terbang juga akan mengasah intuisi untuk mengetahui desain mana yang tepat untuk kasus tertentu dan mana yang tidak.
Semua desainer tengah menempuh jalur pembelajarannya masing-masing, dengan level yang berbeda-beda pula. Sayangnya, tidak mungkin untuk merangkum semua ilmu yang diperlukan untuk bisa membuat web design yang baik hanya dalam satu artikel saja. Artikel ini akan fokus pada tips yang bisa dipakai untuk membuat Anda, sebagai web designer, memikirkan ulang tentang elemen UX/UI dalam pendekatan desain Anda. Idealnya, cara berpikir seperti ini juga bisa diaplikasikan di area desain yang lain.
Mulai dengan pemahaman yang baik dan menyeluruh terhadap produk/situs yang digarap
Akan sangat sulit membuat web design jika Anda tidak sepenuhnya memahami konten dari website yang Anda tangani. Jika Anda menggarap website tentang bertema obat-obatan, bukan berarti Anda harus fasih juga tentang serba-serbi dunia kesehatan. Pemahaman yang dimaksud bukan yang seperti itu. Namun, Anda wajib tahu bagaimana user atau pengunjung website mengakses informasi yang mereka butuhkan.
Yang harus dilakukan, adalah melakukan riset dari berbagai website sejenis, membuat diri Anda familiar dengan website-website tersebut, dan memahami bagaimana elemen-elemen di dalamnya berfungsi. Idealnya, Anda harus bekerja sama secara erat dengan klien, untuk memasok Anda dengan insight-insight yang berguna.
Sesuai dengan judulnya, dalam usaha menyuguhkan UX/UI yang baik untuk pengunjung, artikel ini akan fokus pada cara-cara membuat web design yang simple tapi tetap keren. Bagi desainer pemula, tidak usah minder mencoba membuat web design yang sederhana. Karena saat ini, banyak juga brand-brand besar yang mendesain website atau aplikasi mereka dengan sederhana agar terlihat clean dan tidak terkesan membingungkan.
Perhatikan empat elemen desain berikut ini ketika hendak membuat web design yang simple tapi tetap keren.
1. Contrast
Kontras warna yang kacau masih banyak ditemui di banyak website. Cara cepat untuk mengidentifikasi apakah sebuah website didesain oleh desainer yang andal atau tidak adalah dengan melihat overall contrast-nya. Perhatikan contoh di bawah ini:
Perhatikan bagaimana sebagian besar teksnya terlalu cerah atau light. Coba bandingkan dengan UI yang tingkat kontrasnya lebih baik ini:
Sebagian besar porsi tulisannya berwarna hitam, dengan informasi yang dianggap tambahan diberi warna lebih keabu-abuan. Pilihan warna hijaunya membuat teks berwarna putih di atasnya bisa terbaca dengan jelas.
Maka tipsnya adalah, jika Anda menggarap konten berbentuk teks, mulailah dengan warna hitam di atas putih atau putih di atas hitam. Seiring dengan semakin banyaknya elemen yang ditambahkan dan perlu adanya hirarki visual, coba dulu untuk mem-bold tulisan atau mengubah ukuran font-nya. Jika metode tersebut dirasa tidak sesuai, baru putuskan untuk mengubah warnanya. Idealnya, dalam satu halaman, perbedaan warna hanya boleh tak lebih dari 30-40%
2. White space yang konsisten
Kesalahan umum lainnya yang kerap terjadi ialah adanya spacing atau penjedaan antar elemen yang tidak konsisten. Nyatanya, saking lumrahnya masalah ini ditemui, kebanyakan desainer masih kesulitan dalam hal ini meskipun sudah punya pengalaman bertahun-tahun.
Namun, hal ini sebenarnya sangat bisa dimaklumi, lantaran dalam mengoperasikan mouse bisa saja mereka tidak sengaja menggeser satu atau dua pixel sehingga hasil keseluruhannya tidak benar-benar konsisten. Atau bisa saja kondisi mata desainer yang sulit melihat adanya ketidaksimetrisan objek di layar.
Lihat contoh di bawah ini, dan perhatikan bagaimana tiap komponen dikelilingi oleh white space dengan ukuran yang berbeda-beda, sehingga tidak menciptakan tampilan visual yang koheren.
Sebaliknya, berikut adalah contoh website yang memiliki konten serupa, tapi penampilannya lebih konsisten dan nyaman dilihat.
Untuk mencapai hal ini, melakukan pengukuran saja tidak cukup. Perlu “feel” untuk melihatnya. Selalu tanyakan pada diri sendiri, apakah sudah terlihat seimbang? Apabila elemennya berbentuk kotak, Anda selalu bisa mengukurnya, misalnya 30px dari samping, 30px di bawah judul, 15px dibawah subtitle, dan sebagainya. Namun, untuk elemen visual yang lebih besar seperti judul atau gambar, Anda tetap perlu mengasah “feel” untuk bisa mengukur keseimbangannya.
3. Warna
Merupakan komponen fundamental selanjutnya dari sebuah desain yang baik. Warna-warna yang dipilih harus tampak saling padu. Pendekatan memilih warna untuk mendesain web yang simple tapi tetap keren, adalah dengan memilih satu warna primer, dan selebihnya memakai warna-warna monokromatik.
Contoh berikut adalah yang mengimplementasikan tiga komponen yang sudah dibahas sejauh ini: kontras, keseimbangan white space, dan pemakaian warna yang baik.
Salah satu langkah mudah untuk mulai menentukan warna adalah dengan mengikuti skema warna dari website populer seperti colorhunt.co, atau mencari inspirasi dari Dribbble untuk kombinasinya. Color wheel juga bisa sangat berguna untuk pegangan dalam menentukan kombinasi. Namun, tetap ada sentuhan personal dari masing-masing desainer (selera, preferensi, dll) jika memutuskan untuk memakai color wheel untuk mencari perpaduan warna yang sempurna.
Berikut ini adalah contoh color wheel dari Adobe:
4. Pakai style yang sama untuk keseluruhan website
Membangun nuansa dan feel dari sebuah website adalah salah satu tugas utama seorang web designer. Karena definisi “bagus” itu relatif, maka, dalam membuat desain web, fokuslah pada konsistensi style atau gaya yang dipakai. Bagaimana pengaplikasiannya secara konkret?
Katakanlah, Anda mendesain sebuah button atau tombol, kemudian menentukan font, ukuran, warna, background, spacing, dll. Lalu jadilah seperti ini:
Sekarang, tambahkan image dan judul. Lalu jadilah seperti ini:
Perhatikan sudut-sudutnya. Semuanya 90 derajat sempurna, tanpa adanya rounding atau sudut tumpul. Maka artinya, untuk menjaga konsistensi, desain-desain atau gambar yang dipakai selanjutnya seharusnya juga mengikuti sudut yang runcing seperti ini. Sama halnya jika Anda hendak menambahkan ornamen atau inputs, sudutnya wajib runcing. Berikut adalah contoh ketika ditambahkan elemen baru lagi:
Desain di atas telah ditambahkan grid of boxes di sudut kanan atas dan sudut kiri bawah. Untuk menjaga konsistensi, elemen-elemen ini pun dibuat menyudut, tidak tumpul. Pemikiran seperti ini harus tetap dijaga sepanjang Anda mendesain website. Jika Anda mengubah elemennya, maka feel yang dicoba dibangun sejak awal akan memudar. Desain yang inkonsisten akan memperlemah brand.
Berikut adalah contoh desain yang sama, namun dengan tampilan yang tumpul:
Isinya sama, tapi feel-nya beda.
Kesimpulan
Untuk mencapai hasil desain yang baik, Anda perlu memiliki pemahaman yang baik akan unsur-unsur fundamental dari sebuah desain, seperti warna, kontras, white space, balance, hirarki visual, dan sebagainya. Jika menguasai hal-hal ini, ketika Anda mencoba mendesain sesuatu yang terbilang sederhana pun bukan tidak mungkin hasilnya tak hanya keren, tapi juga berfungsi baik dan meningkatkan pengalaman pengunjung.
