Panduan Desain Web

dalam 15 Langkah
UI/UX Design
  Mengutip pernyataan Steve Jobs, mantan bos Apple, bahwa “Design is
not about what it looks like and feels like. Design is about how it works”.
 Singkatnya, sebuah desain yang tidak berjalan sesuai dengan tujuan
pembuatannya, bukanlah desain yang baik.
 Hal tersebut berlaku juga untuk desain web. Berbagai jenis
website yang ada membutuhkan pendekatan desain berbeda. Maka,
tentukan dahulu tujuan pengerjaan desain website yang akan Anda
Menentukan lakukan.
Tujuan  Katakanlah Anda ingin membangun sebuah toko online. Fokus pada
toko online adalah bagaimana menampilkan produk dengan baik.
Selain itu, desain yang dibuat harus mampu menjelaskan alur
pembelian yang mudah dipahami. Tak kalah pentingnya, menciptakan
sebuah landing page toko online yang menarik bagi pengunjung.
 Desain sebuah website juga akan dipengaruhi oleh target pasar dari
bisnis yang Anda miliki. Sebab, kriteria target pasar seperti usia dan
jenis kelamin akan menentukan elemen desain yang digunakan.
  Anda harus cermat dalam menentukan platform untuk website
Anda. Hal ini akan berdampak pada pengembangan website Anda
untuk jangka panjang, baik dari sisi desain atau fungsinya.
 Secara umum, terdapat tiga metode dalam pembuatan website:
Menentukan dengan coding HTML dan CSS, menggunakan website builder, dan
memanfaatkan CMS (Content Management System).
Platform
 Bagi pemula, memilih website builder atau CMS merupakan
pilihan yang tepat. Terutama, jika Anda menggunakan WordPress
hosting. Platform tersebut sangat andal dan telah digunakan oleh
lebih dari 34% website di seluruh dunia.
  Untuk desain web sendiri, terdapat berbagai prediksi tentang tren
yang akan muncul. Mulai dari gradasi dinamis, animasi, hingga
Mengamati transisi antar halaman yang kreatif.
 Anda tentu tidak harus mengikuti semua tren ini.
Tren Desain
 Setidaknya, Anda memahami tren desain web manakah yang
Web Terbaru mulai digandrungi pengguna internet. Lalu, menggunakan
informasi tersebut untuk menciptakan pola desain yang sesuai
dengan bisnis dan jenis pelanggan yang Anda miliki.
  Penting untuk diingat bahwa 48% dari pengunjung menganggap
desain website sebagai faktor yang menunjukkan kredibilitas
suatu perusahaan.
 Sebagai contoh, jika Anda memiliki bisnis akomodasi,
kenyamanan adalah selling point bisnis Anda. Anda bisa
Mempelajari mempelajari pola warna yang digunakan oleh kompetitor Anda
untuk menawarkan nuansa tersebut. Sebab, tiap warna
Desain mengandung aspek psikologi yang berbeda.
Website  Faktanya, beberapa website akomodasi besar di Indonesia
seperti Traveloka, Booking, ataupun Agoda juga menggunakan
Kompetitor warna dominan yang sama di website mereka: biru.
 Setelah semua tahapan persiapan di atas, saatnya masuk ke
bagian pengerjaan desain web. Dengan mengikuti langkah berikut
ini dengan baik, Anda akan dapat membuat website yang user-
friendly.
  Layout adalah teknik penyusunan elemen website agar tampak
menarik. Beberapa elemen website antara lain header, konten,
footer.
Merancang  Pengerjaan layout harus diutamakan sebelum melangkah ke
Layout langkah desain yang lain. Dalam tahapan ini, seorang desainer
akan membuat draft desain. Terdapat tiga jenis draft desain yang
bisa dibuat yaitu wireframe, mockup, dan prototype. Yang paling
sederhana adalah wireframe.
  Desain berfungsi untuk mengkomunikasikan pesan. Hirarki
visual bisa membantu Anda melakukan hal itu.
 Hirarki visual adalah suatu metode yang mengarahkan
Memperhatika pengunjung website untuk menemukan informasi penting terlebih
dahulu. Caranya, dengan melakukan manipulasi elemen desain
n HirarkiVisual sehingga menonjolkan elemen tertentu.
 Dengan hirarki visual, Anda bisa membuat tiap pengunjung
menemukan informasi penting dalam waktu singkat.
  Salah satu kesalahan dalam perencanaan desain web adalah
memasukkan semua elemen karena dianggap penting. Hal ini
justru akan membuat website Anda terlihat “sesak”.
Berikan Ruang
 Langkah terbaik adalah selalu memberikan ruang kosong/white
Kosong space. Tujuannya, selain menciptakan kesan elegan dan jeda
visual, ruang kosong ini dapat membantu elemen penting
seperti CTA (Call to Action) terlihat menonjol.
  Jangan pernah melupakan penataan navigasi dalam website Anda.
Jika pengunjung tidak dapat menemukan apa yang mereka cari,
mereka akan mudah meninggalkan website Anda.
 Oleh karena itu, buatlah navigasi antar halaman menggunakan
Merancang menu yang sederhana dan mudah dipahami. Hal ini karena tiap
pengunjung akan menikmati pengalaman yang berbeda saat
Navigasi mengakses website Anda.
 Contoh, ada pengunjung yang masuk melalui halaman depan dan
langsung ingin mengetahui harga produk Anda. Ada pengunjung
yang hanya ingin mengetahui beragam fitur yang Anda tawarkan.
Bahkan mungkin ada yang ingin mengetahui profil bisnis Anda.
  Grid adalah penataan struktur halaman menjadi beberapa kolom.
Tujuannya tentu saja untuk mengatur konten website tersebut
nantinya.
 Walaupun kasat mata, penggunaan grid akan banyak membantu
proses desain web Anda. Salah satunya untuk menciptakan
Mengatur Grid keseimbangan antar elemen website Anda. Dan yang terpenting,
grid membantu website Anda untuk mampu beradaptasi dengan
berbagai ukuran layar perangkat.
 Dengan kata lain, mengatur grid penting untuk membuat website
Anda mobile-friendly.
  Setelah mengatur elemen website Anda, langkah berikutnya
adalah memilih warna yang tepat.
 Seperti telah kita singgung di atas, warna memiliki peran penting
dalam sebuah website. Warna yang Anda gunakan akan
Pemilihan mencerminkan nuansa yang Anda bangun. Sebagai contoh, warna
biru bersifat menenangkan sehingga tak heran bisnis akomodasi
Warna menggunakan warna ini.
 Tak hanya itu, warna juga turut menentukan target pasar yang
ingin Anda sasar. Jika website Anda didominasi warna pink, tentu
pasar yang Anda tuju adalah konsumen wanita.
  Tipografi adalah seni tata letak dan pemilihan huruf.
 Dalam desain web, tipografi berperan untuk menciptakan
harmonisasi tata letak yang sudah Anda rancang. Hasilnya,
tampilan website Anda secara keseluruhan akan tampak menarik.
 Selain itu, tipografi yang pas akan membuat informasi yang ingin
Anda sampaikan akan didapatkan dengan mudah. Kuncinya,
memilih huruf yang mudah dibaca dengan ukuran yang
proporsional dan jarak antar huruf yang cukup.
Pemilihan Font  Tiap elemen dari website membutuhkan jenis huruf yang berbeda
terkait pesan yang ingin disampaikan. Idealnya, Anda bisa
menggunakan dua hingga tiga jenis font.
 Gunakanlah jenis yang berbeda masing-masing untuk heading,
konten dan elemen website yang lain.
 Tidak hanya itu, tipografi juga terkait dengan keperluan branding,
sebagai upaya membangun identitas bisnis Anda. Tak salah
jika, CEO Uber, menandai perubahan mendasar pada
perusahaannya dengan penggunaan font baru untuk bisnisnya.
  Seperti Anda ketahui, sebuah gambar mengandung sejuta makna.
 Jika Anda menambahkan berbagai gambar baik foto maupun
background untuk website Anda, pastikan memilih gambar terbaik
yang representatif dengan tujuan bisnis Anda.
 Selain warna yang sesuai, penempatan gambar juga harus Anda
perhatikan. Harmonisasikan dengan berbagai elemen lain. Misalnya
Gunakan jangan sampai foto dengan wajah seseorang tertutup oleh judul.

Gambar  Penting untuk diingat, jangan menggunakan foto orang lain tanpa
izin.
Terbaik  Selain itu, jangan menggunakan resolusi yang terlalu kecil. Apabila
menginginkan kualitas gambar yang baik, namun dengan ukuran
yang relatif kecil, Anda bisa menggunakan file SVG. Sebelumnya,
pastikan dukungan SVG di WordPress sudah aktif.
 Jika Anda menginginkan kualitas gambar tetap baik walaupun ukuran
file kecil, Anda bisa menggunakan tools seperti TinyPNG atau Tiny
JPG.
  Prototype adalah contoh nyata desain website Anda.
 Berbeda dengan wireframing yang hanya menghasilkan draft
sederhana, prototyping bersifat interaktif. Artinya, semua aset
website berupa gambar atau video, penerapan animasi dan
struktur website ditampilkan secara detail.
 Jika Anda telah memiliki sebuah prototype, Anda bisa
Membuat menunjukkannya kepada tim atau klien Anda dalam sebuah demo.
Prototype Hal ini penting jika ada yang ingin ditambahkan sebelum beranjak
ke proses produksi. Untuk langkah ini, Anda bisa memanfaatkan
aplikasi seperti Figma dan lainnya.
 Pada dasarnya, ketika Anda sudah berhasil membuat prototype,
pekerjaan desain web Anda bisa dikatakan hampir sempurna.
Namun, sebelum benar-benar melakukan launching website,
penyempurnaan desain website perlu dilakukan.
  Tahapan pengujian penting untuk memastikan semua tampilan
dan fungsi berjalan dengan baik. Kuncinya, jangan melewatkan
satu halaman atau elemen pun dalam proses ini.
 Jika menemukan bug atau kesalahan coding, Anda bisa segera
memperbaikinya. Untuk hasil terbaik, Anda juga bisa melakukan
beberapa kali pengujian dengan melibatkan orang yang berbeda.
 Selain itu, Anda juga perlu mencatat bagaimana performa yang
diberikan website tersebut selama tahapan pengujian.
Melakukan  Walaupun tampilan website menarik, jika proses loading terlalu
Pengujian lama, akan berdampak buruk bagi Anda. Faktanya, 47%
pengunjung menginginkan proses loading tidak lebih dari 2 detik
saja. Bahkan, Google sudah menentukan bahwa kecepatan
loading adalah faktor yang mempengaruhi ranking di mesin
pencari mereka.
 Website yang lambat bisa terkait dengan penggunaan gambar
yang tidak teroptimasi, banyaknya animasi yang digunakan, dan
lainnya. Untungnya, banyak cara untuk meningkatkan kecepatan
website Anda dengan mudah.
  Setelah semua tahapan di atas berjalan sesuai rencana, Anda telah
siap mempublikasikan website tersebut.
Launch  Tentu saja Anda tidak bisa berharap bahwa desain website yang
Website Anda lakukan sudah 100% sempurna. Namun, dengan langkah
yang tepat, jika terjadi kendala penanganan dapat segera
dilakukan.

Melanie Duncan
Website Layout: Kombinasi Hero
Image Header dengan Grid of Cards
Layout
 Desain layout website pertama yang kita bahas yaitu milik Melanie Duncan. Jika Anda memiliki website
bisnis, penjelasan ini akan cukup bermanfaat. Pasalnya, website bisnis Melanie Duncan mampu memikat
pengunjung dalam sekejap dan bahkan sudah terbukti berhasil.
 Bukan tanpa sebab, website layout ini rupanya menggunakan trik 8-Second Rule. Mungkin, banyak yang
belum mengetahui strategi ini. 8-Second Rule merupakan trik untuk menjerat perhatian pengunjung hanya
dalam waktu 8 detik.
 Trik 8-Second Rule berkaitan dengan website layout yang Melanie gunakan, yaitu hero image header dan grid
of cards layout. Kita akan membahasnya satu per satu.
 Hero image header menonjolkan gambar besar pada header. Gambar harus menciptakan kesan kuat,
misalnya ekspresi wajah manusia. Trend web design ini mampu memikat kepercayaan pengunjung dengan
cepat. Bahkan, sanggup meroketkan konversi hingga 95%.
 Setelah kepercayaan pengunjung berhasil didapat, website layout beralih ke grid of cards layout. Desain ini
menampilkan info dalam bentuk kartu interaktif. Melanie menggunakannya untuk menampilkan konten
unggulan dan menyertakan sampul menarik. Alhasil, pengunjung akan semakin berminat untuk
membukanya.
 Keistimewaan lainnya, website ini juga membingkai halaman dengan social media sidebar dan tombol
berlangganan. Didesain sebagai fixed sidebar, bingkai ini tidak tenggelam meski Anda menggulir.
Pengunjung pun lebih praktis membagikan konten sekaligus menjadi pelanggan.
  Secara garis besar, Dropbox menggunakan alternating layout. Apakah itu?
Alternating layout adalah desain di mana layout dibagi menjadi dua blok.
Satu sisi berisi gambar, sedangkan sisi lainnya memuat teks pendukung. Yap,
layaknya membuka sebuah buku cerita.
 Istimewanya, Dropbox mengeksekusi alternating layout dengan cukup epic.
Website menyambut pengunjung dengan dua sisi layar berisi headline dan
formulir berlangganan.
 Konversi pun bisa mudah dan cepat dilakukan berkat layout ini. Sebab,
Dropbox pengunjung tak perlu repot-repot mengklik berbagai tombol.

Website Layout: Alternating Layout