Desain website: prinsip yang bisa Anda nilai sendiri, alur kerja, dan cara memberi revisi

Desain website adalah rangkaian keputusan tentang bagaimana isi situs Anda disusun dan ditampilkan: di mana judul diletakkan, seberapa besar, warna apa, gambar mana, dan tombol mana yang paling menonjol. Untuk website usaha, desain yang baik diukur dengan satu pertanyaan sederhana: apakah pengunjung yang baru datang langsung paham apa yang Anda jual dan tahu harus menekan apa. Cantik itu bonus, bukan tujuan.

Anda mungkin menemukan istilah ini dalam beberapa bentuk. Desain web, web desain, dan desain website dipakai bergantian untuk pekerjaan yang sama. Yang membedakan hasilnya bukan istilahnya, melainkan apakah pemilik usaha bisa menilai desain yang disodorkan kepadanya, atau hanya bisa bilang "kurang sreg" tanpa tahu apa yang kurang.

Panduan ini ditulis untuk posisi kedua itu. Isinya tujuh elemen yang bisa Anda periksa tanpa latar belakang desain, desain responsif, aksesibilitas dasar dengan angka dari W3C, enam tahap alur kerja beserta apa yang Anda setujui di tiap tahap, lalu cara memberi brief dan revisi yang benar-benar bisa dikerjakan. Kalau yang Anda cari justru beda UI dan UX, penjelasannya ada di artikel UI UX adalah, dan kami tidak akan mengulanginya di sini.

Tata letak, hierarki visual, dan ruang kosong

Tiga elemen ini menentukan ke mana mata pengunjung bergerak, dan ketiganya bisa dinilai hanya dengan melihat halaman selama lima detik lalu bertanya: apa yang pertama kali saya lihat?

Tata letak dan grid

Grid adalah garis bantu tak terlihat yang membuat tepi kiri judul, gambar, dan paragraf jatuh di garis yang sama. Anda tidak perlu melihat gridnya untuk merasakan hasilnya. Halaman yang memakai grid terasa rapi walau isinya banyak. Halaman tanpa grid terasa berantakan walau isinya sedikit. Cara mengeceknya mudah: tempelkan penggaris atau tepi kertas di layar, lalu lihat apakah tepi kiri elemen-elemennya sejajar.

Hierarki visual

Hierarki adalah urutan penting yang diterjemahkan jadi ukuran, ketebalan, dan warna. Judul utama paling besar, subjudul lebih kecil, isi paling kecil, dan hanya satu tombol yang paling mencolok. Masalah yang paling sering kami temui di situs usaha kecil adalah semua hal dibuat penting: judul tebal, harga tebal, promo merah, tiga tombol hijau berderet. Kalau semua berteriak, tidak ada yang terdengar.

Ruang kosong

Ruang kosong bukan tempat yang lupa diisi. Ruang itulah yang memisahkan satu kelompok informasi dari kelompok lain, sehingga pengunjung tidak perlu membaca untuk tahu bahwa alamat dan jam buka adalah satu kelompok, sedangkan daftar layanan kelompok lain. Pemilik usaha sering meminta ruang kosong diisi "supaya tidak sepi". Permintaan itu hampir selalu membuat halaman lebih sulit dibaca, bukan lebih ramai pengunjung.

Tipografi, warna, gambar, dan tombol

Empat elemen berikutnya lebih mudah dikenali karena langsung terlihat. Tabel ini merangkum ketujuh elemen, termasuk tiga di bagian sebelumnya, dalam bentuk yang bisa Anda pakai sebagai daftar periksa.

Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.

Tipografi. Dua jenis huruf sudah cukup, sering kali satu jenis dengan dua ketebalan juga cukup. Perhatikan panjang baris. Panduan desain responsif dari web.dev (tab baru) menyebut kolom yang ideal memuat 70 sampai 80 karakter per baris. Paragraf yang membentang selebar monitor melelahkan mata, karena setiap kali pindah baris pembaca harus mencari awal baris berikutnya.

Warna. Satu warna utama untuk tombol dan tautan, satu atau dua warna netral untuk teks dan latar, sudah cukup untuk hampir semua usaha. Warna tombol utama sebaiknya tidak dipakai untuk hal lain, supaya mata belajar bahwa warna itu berarti "tekan di sini".

Gambar. Foto asli tempat usaha, produk, atau tim Anda hampir selalu lebih meyakinkan daripada foto stok yang lebih bagus. Pastikan juga ukurannya ditetapkan di kode. Dokumentasi CLS di web.dev (tab baru) menyebut gambar tanpa ukuran yang diketahui sebagai salah satu penyebab umum tata letak bergeser saat halaman dimuat, dan menetapkan skor baik di 0,1 atau kurang.

Tombol. Tulis apa yang terjadi setelah ditekan: "Tanya harga lewat WhatsApp" lebih jelas daripada "Hubungi kami", apalagi "Klik di sini". Untuk contoh susunan tombol di halaman yang tugasnya satu, lihat pembahasan landing page.

Desain responsif: mulai dari layar ponsel

Desain responsif berarti satu halaman yang sama menyesuaikan susunannya dengan lebar layar. MDN (tab baru) mendefinisikannya sebagai pendekatan agar halaman tampil baik di semua ukuran dan resolusi layar sambil tetap mudah dipakai, dan menegaskan bahwa ini pendekatan, bukan teknologi terpisah.

MDN juga menjelaskan pendekatan mobile first: buat tata letak satu kolom untuk layar sempit lebih dulu, lalu tambahkan kolom ketika layar cukup lebar. Urutan ini bukan soal selera. Google menulis (tab baru) bahwa mereka memakai versi seluler isi situs, yang dirayapi dengan agen smartphone, untuk pengindeksan dan peringkat. Google juga merekomendasikan desain responsif karena paling mudah diterapkan dan dirawat, dan meminta isi versi ponsel setara dengan versi desktop.

Bagi Anda sebagai pemilik usaha, artinya ada tiga hal yang perlu diminta saat meninjau desain:

• Mockup versi ponsel ditunjukkan, bukan hanya versi desktop. Banyak presentasi desain hanya menampilkan layar lebar karena di situlah desain terlihat paling megah.
• Tidak ada isi yang dibuang di ponsel. web.dev mengingatkan agar isi tidak disembunyikan hanya karena tidak muat, karena ukuran layar tidak menentukan apa yang ingin dilihat pengunjung.
• Tidak ada geser ke samping. Menurut web.dev, memaksa pengguna menggeser horizontal atau memperkecil tampilan untuk melihat seluruh halaman adalah pengalaman yang buruk. Buka halaman di ponsel Anda sendiri dan coba geser ke kanan. Kalau halamannya ikut bergeser, ada elemen yang terlalu lebar.

Satu catatan teknis yang bisa Anda tanyakan: pastikan halaman memuat tag viewport. MDN menyebut tag ini memberi tahu peramban ponsel untuk menyamakan lebar tampilan dengan lebar perangkat, dan menyarankan tag itu selalu dipasang. Cara menguji kecepatan versi ponsel ada di panduan cara cek kecepatan website.

Aksesibilitas dasar: kontras, ukuran target sentuh, dan alt text

Aksesibilitas sering dianggap urusan situs pemerintah. Padahal tiga aturan dasarnya menolong semua pengunjung: orang yang membaca di bawah terik matahari, orang tua yang matanya mulai rabun, dan siapa saja yang menekan tombol dengan ibu jari sambil berdiri di angkutan umum. Angka-angkanya datang dari Web Content Accessibility Guidelines (WCAG) 2.2 yang diterbitkan W3C.

Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.

Kontras. Rasio 4,5:1 di kriteria 1.4.3 (tab baru) adalah alasan teks abu muda di latar putih yang terlihat "elegan" di presentasi sering gagal. Logo dan teks yang murni dekorasi dikecualikan, tetapi harga, alamat, dan nomor telepon jelas bukan dekorasi. Untuk tombol dan kolom isian, kriteria 1.4.11 (tab baru) meminta kontras 3:1 terhadap warna di sekitarnya, dan W3C menegaskan 2,999:1 tidak dibulatkan menjadi lulus.

Ukuran target sentuh. Kriteria 2.5.8 (tab baru) menetapkan 24 kali 24 piksel CSS sebagai batas minimal level AA, sedangkan kriteria 2.5.5 (tab baru) di level AAA meminta 44 kali 44. Untuk tombol utama yang menentukan pesan masuk, kami menyarankan memakai angka yang lebih longgar.

Alt text. Teks alternatif dibacakan pembaca layar dan tampil kalau gambar gagal dimuat. Pohon keputusan alt dari W3C (tab baru) membaginya dengan jelas: gambar dekoratif diberi alt kosong, gambar berisi tulisan memuat tulisan itu di alt, logo yang menjadi tautan menjelaskan tujuan tautannya, dan gambar informatif diberi deskripsi singkat yang menyampaikan maknanya. Alt berisi "gambar1.jpg" atau deretan kata kunci tidak termasuk satu pun di antaranya. Aturan 1.4.1 (tab baru) melengkapinya: kolom wajib yang hanya ditandai merah, atau tautan yang hanya dibedakan warnanya, tidak terbaca oleh orang yang sulit membedakan warna.

Alur kerja desain website dalam enam tahap

Desain yang berputar-putar hampir selalu berasal dari tahap yang dilompati. Pemilik usaha diperlihatkan mockup berwarna di pertemuan pertama, lalu mengomentari warna padahal masalahnya ada di urutan seksi. Enam tahap berikut mencegah itu, karena tiap tahap hanya meminta Anda menyetujui satu jenis keputusan.

Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.

Tahap ketiga paling sering dilewati, padahal paling murah. Wikipedia (tab baru) menjelaskan wireframe sebagai kerangka halaman yang biasanya tidak memuat gaya huruf, warna, atau grafik, karena fokusnya pada fungsi dan prioritas isi. Justru karena polos, wireframe memaksa semua orang membahas urutan, bukan selera. Memindahkan seksi harga dari bawah ke atas di tahap ini butuh beberapa menit. Di tahap mockup, pekerjaan yang sama bisa berarti menggambar ulang separuh halaman.

Tahap keenam menutup lingkaran. Daftar cek serah terima minimal memuat: semua tombol WhatsApp membuka nomor yang benar, formulir terkirim, halaman terbaca di ponsel Anda sendiri, dan akun domain serta hosting atas nama Anda. Daftar lengkap untuk sisi teknisnya ada di checklist website siap SEO.

Contoh web design dan inspirasi: cara memberi brief yang bisa dikerjakan

Mencari contoh web design dan web design inspiration itu langkah yang sehat, selama hasilnya diubah menjadi brief, bukan dikirim mentah sebagai tumpukan tautan. Desainer yang menerima sepuluh tautan tanpa keterangan harus menebak apa yang Anda suka dari tiap situs, dan tebakan itulah yang nanti Anda revisi.

Brief desain yang bisa dikerjakan cukup satu halaman, dan isinya enam hal:

1. Satu kalimat usaha Anda. Apa yang dijual, untuk siapa, di mana. Contoh: "Servis AC rumah tangga di Sleman dan sekitarnya, panggilan hari yang sama" (contoh).
2. Satu tindakan utama. Biasanya menghubungi lewat WhatsApp. Tulis satu, bukan tiga.
3. Tiga pertanyaan yang paling sering ditanyakan pembeli. Ambil dari riwayat chat Anda. Jawabannya harus terlihat tanpa menggulir jauh.
4. Dua sampai lima referensi, masing-masing dengan satu alasan. "Situs A: suka cara harga ditampilkan dalam tabel. Situs B: suka jarak antarseksinya yang lega" (contoh). Satu alasan per referensi mencegah desainer menyalin hal yang tidak Anda maksud.
5. Satu hal yang tidak Anda mau. Misalnya "tidak mau latar gelap" atau "tidak mau animasi berat". Larangan sering lebih informatif daripada keinginan.
6. Materi yang sudah ada. Logo dalam format asli, foto usaha, daftar layanan dan harga.

Referensi terbaik biasanya bukan situs perusahaan besar, melainkan situs usaha sejenis yang ukurannya mirip dengan usaha Anda. Enam kerangka per jenis usaha di artikel contoh website company profile bisa dipakai sebagai titik awal, dan contoh susunan halaman yang kami kerjakan ada di portofolio. Satu batas yang perlu dijaga: referensi dipakai untuk arah, bukan untuk disalin. Teks, foto, dan logo situs orang lain tetap milik mereka.

Cara memberi umpan balik revisi: satu ronde, satu daftar tertulis

Komentar "kurang wow" atau "kurang elegan" tidak bisa dikerjakan, karena tidak menyebut di mana, apa, dan ingin jadi seperti apa. Desainer akan mencoba sesuatu, Anda akan bilang "bukan itu", dan ronde revisi habis tanpa kemajuan. Umpan balik yang bisa dikerjakan punya tiga bagian: lokasi, masalah yang Anda rasakan, dan hasil yang Anda inginkan.

Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.

Kumpulkan semua komentar dalam satu daftar, kirim sekaligus, lalu tunggu hasilnya sebelum mengirim daftar berikutnya. Komentar yang dikirim sepotong-sepotong lewat pesan terpisah sepanjang hari membuat desainer mengerjakan sebagian, lalu membongkarnya lagi saat komentar berikutnya masuk.

Itu sebabnya di halaman harga kami, satu ronde revisi didefinisikan sebagai satu daftar tertulis yang dikirim sekaligus, lewat satu pesan WhatsApp atau satu dokumen, bukan satu permintaan perubahan tunggal. Profil Usaha 5 seharga Rp4.450.000 termasuk 3 ronde, Profil Usaha 10 seharga Rp6.950.000 termasuk 4 ronde, dan ronde tambahan di luar paket Rp350.000 per ronde. Anda tidak harus memakai kami, tetapi pertanyaan yang sama layak diajukan ke vendor mana pun: berapa ronde, dan apa yang dihitung satu ronde. Angka tanpa definisi bisa berarti apa saja.

Kesalahan desain yang menurunkan kepercayaan

Pengunjung jarang bisa menjelaskan kenapa mereka ragu pada sebuah situs. Mereka hanya menutup tab. Beberapa kesalahan desain berikut paling sering memicu keraguan itu, dan semuanya bisa Anda cek sendiri hari ini.

• Foto stok yang jelas bukan usaha Anda. Pengunjung sudah melihat foto orang berjas tersenyum di depan laptop di ratusan situs lain.
• Informasi kontak yang tidak konsisten. Nomor di kepala halaman berbeda dengan nomor di kaki halaman, atau alamat di situs berbeda dengan alamat di peta.
• Tahun hak cipta yang basi, dan seksi berita yang terakhir diisi bertahun-tahun lalu. Keduanya memberi kesan usahanya sudah tutup. Kalau tidak sanggup mengisi seksi berita secara rutin, lebih baik seksinya dihapus. Pekerjaan rutin semacam ini bisa diserahkan lewat layanan perawatan website.
• Tombol yang tidak berfungsi. Tombol WhatsApp yang membuka nomor salah, atau formulir yang tidak pernah terkirim. Kesalahan ini tidak terlihat di mockup, hanya terlihat di tahap uji.
• Halaman yang bergeser saat dimuat. Pengunjung hendak menekan tombol, lalu gambar muncul dan tombolnya melompat ke bawah.
• Harga yang disembunyikan tanpa alasan. Ini keputusan bisnis, bukan desain, tetapi dampaknya terasa di desain. Pertimbangannya dibahas di artikel biaya bikin website.

Kalau situs lama Anda punya tiga atau lebih kesalahan di atas, perbaikan desain belum tentu harus berarti membangun ulang dari nol. Pilihan antara merapikan platform yang ada atau pindah ke yang lain dibahas di WordPress atau website custom.

Kesimpulan

Desain website yang baik untuk usaha bisa dinilai tanpa latar belakang desain. Periksa tujuh elemennya dengan daftar di atas, buka halamannya di ponsel Anda sendiri, cek kontras dan ukuran tombol dengan angka dari W3C, dan pastikan setiap tahap alur kerja diakhiri persetujuan tertulis atas satu jenis keputusan. Revisi yang terarah bukan soal berapa banyak ronde, melainkan soal daftar tertulis yang menyebut lokasi, masalah, dan hasil yang diinginkan.

Mulailah dari yang paling murah: tulis brief satu halaman dengan enam poin di atas, bahkan sebelum Anda menghubungi desainer mana pun. Brief itu akan menghemat lebih banyak ronde revisi daripada referensi mana pun.

Kalau Anda ingin desain dan pembangunannya dikerjakan sekalian, ceritakan usaha Anda lewat WhatsApp kami (membuka WhatsApp di tab baru). Kami balas dengan paket, jumlah ronde revisi beserta definisinya, dan tanggal serah terima.

Sumber

• W3C WAI, Understanding SC 1.4.3 Contrast (Minimum) (tab baru), untuk rasio 4,5:1 dan 3:1, definisi teks besar, dan pengecualian logo serta dekorasi.
• W3C WAI, Understanding SC 1.4.11 Non-text Contrast (tab baru), untuk kontras 3:1 komponen antarmuka dan grafik penting tanpa pembulatan.
• W3C WAI, Understanding SC 2.5.8 Target Size (Minimum) (tab baru), untuk ukuran target 24 kali 24 piksel CSS level AA.
• W3C WAI, Understanding SC 2.5.5 Target Size (Enhanced) (tab baru), untuk ukuran target 44 kali 44 piksel CSS level AAA.
• W3C WAI, Understanding SC 1.4.4 Resize Text (tab baru), untuk perbesaran teks sampai 200 persen.
• W3C WAI, Understanding SC 1.4.1 Use of Color (tab baru), untuk larangan warna sebagai satu-satunya penanda.
• W3C WAI, An alt Decision Tree (tab baru), untuk pembagian alt gambar dekoratif, gambar berisi tulisan, gambar fungsional, dan gambar informatif.
• MDN, Responsive design (tab baru), untuk definisi desain responsif, pendekatan mobile first, dan tag viewport.
• web.dev, Responsive web design basics (tab baru), untuk panjang baris 70 sampai 80 karakter, larangan geser horizontal, dan saran tidak menyembunyikan isi di layar kecil.
• web.dev, Cumulative Layout Shift (tab baru), untuk ambang CLS 0,1 dan gambar tanpa ukuran sebagai penyebab umum pergeseran tata letak.
• Google Search Central, Mobile-first indexing best practices (tab baru), untuk pemakaian versi seluler dalam pengindeksan dan peringkat serta rekomendasi desain responsif.
• Wikipedia, Website wireframe (tab baru), untuk definisi wireframe dan fokusnya pada fungsi serta prioritas isi.