Untuk membuat website yang harus di jadikan prioritas
utama adalah fungsionalitas situs dan user experience. Tren pada desain web selalu berubah, jadi
sedikit sulit untuk menerapkan prinsip desain namun tetap bertahan pada aturan
dasarnya. Yaitu :
1.
Tombol navigasi yang mudah dimengerti
2.
Animasi yang sesuai
3.
Pemilihan warna yang tepat
4.
Layout yang tidak berlebihan dan
teratur
5.
Pilih desain yang sesuai dengan topik
dan tema
6.
Elemen desain dan organisasi konten
terjaga
Contoh Website
Yang Baik dan Buruk
1. Desain Kacau Melenceng Dari Aturan
Contoh : ARNGREN.net
![Arngrent-bad-grid](https://file.mockplus.com/image/2018/07/e06494ed-116d-40dd-98e9-0ce0041fbf54.png)
Ketika
melihat situs ini akan terasa sakit dilihat mata. Penataan graphic, content dan
link dimanapun secara sembarangan dan di campur. Selain melenceng dari aturan
masalahnya juga terletak pada struktur navigasi yang tak terpercaya,
ketidakterbacaan tulisan dan warna yang random memperburuk situs ini.
Aturan dasar
membuat desain terorganisir antara penataan element teratur, ukuran, jarak,
teks. Berikut contoh desain website yang baik :
![Amazon-good-grid](https://file.mockplus.com/image/2018/07/658eb812-6e14-4704-8b56-35360b88c7d5.png)
2. Desain
Dengan Kontras Yang Kurang
Contoh :
Typesetdesign.com
![lack-of-contract](https://file.mockplus.com/image/2018/07/2b3ed97b-16f2-4457-916f-ea3303cb6d27.png)
Kontras antar
element membantu pengguna mendapat informasi dan memahami informasi dengan baik
dari halaman. Pada situs ini warna background dan teks hampir mirip membuat
terkesan blur dimata. Juga ukuran font yang kecil membut tingkat keterbacaan
jelek.
Website yang
baik harus membuat teks dan gambar memiliki tingkat keterbacaan yang tinggi.
Sebenarnya tidak sulit memperbaiki keterbacaan, hanya buat warna, spesi, dan
ukuran dengan kontras baik. Contohnya, pilih tipografi yang membuat informasi
penting dengan ukuran font yang berbeda dan antara kontras antara warna.
Contoh
kontras yang baik :
![contrast-good](https://file.mockplus.com/image/2018/07/b284dcef-07d6-41b0-b21a-edb9ef9a23fb.png)
3. Tampilan
Website Tidak Menyesuaikan Apabila Dibuka Di Media Yang Berbeda (Not-responsive
design)
Contoh :
Theweddinglens
![Reponsive-bad](https://file.mockplus.com/image/2018/07/beb2cf4c-88f4-4e00-9bd9-1317fd4cd05c.png)
Gunakan
kerangka kerja (framework) desain yang responsif. Halaman website perlu untuk
bekerja di ponsel dengan lancar seperti di website. Situs ini ketika dimuat di
ponsel menampilkan halaman buruk interface dari plaintexts. Dikarenkan tidak
memiliki tampilan versi ponselnya, jadi tidak dapat digunakan di ponsel.
Contoh
responsive design :
![responsive-website-good](https://file.mockplus.com/image/2018/07/42cdc6aa-98e6-4cd2-b978-a3ea5a8d5908.png)
4. Skema
Warna Yang Tidak Menyenangkan
Contoh :
Pacific Northwest X-Ray Inc
![color-bad](https://file.mockplus.com/image/2018/07/fa842643-aef4-445c-bc72-1b4d97136174.png)
Website ini
desainnya seperti palet warna yang tercampur aduk, dimana mengandung banyak
konflik dengan warna teks dan juga warna background. Semua itu membuat sulit
dibaca bagi pengguna. Juga tombol navigasinya cukup rumit.
Desain yang
baik harusnya memakai warna yang mempercantik halam website. Itu akan membuat
mata pengguna mudah menggunakan tanpa banyak kendala, contohnya :
![color-good](https://file.mockplus.com/image/2018/07/74a70782-7610-4ea0-9a9f-9ce17c462ee5.png)
5. Navigasi
Yang Buruk
Contoh :
Gatesnfences
![navigation-bad](https://file.mockplus.com/image/2018/07/1e6f5c1e-036d-4c97-8ac6-a657a20f414e.png)
Fitur
navigasi terbasar dari sebuah website adalah self-evident. Ketika pengguna
memasuki web, ia akan paham apa yang aka dilakukan selanjutnya dan mengambil
tindakan sesuai tujuannya. Navigasi harus menarik dan sering diletakkan pada
bagian atas halaman. Jangan mencoba membut navigasi seperti diatas yang memuat
pengguna kebingungan.
Konten navigasi
dan interaksinya harus jelas jadi jangan gunakan horizontal scroll bar atau animasi
desain yang berlebih. Jika digunakan setidaknya beri suaru petunjuk bagi pengguna
bagaimana website anda bekerja.
Contoh
website yang baik :
![navigation-good](https://file.mockplus.com/image/2018/07/bea79779-b27a-4af1-978d-4f36e22c3138.png)
6. Bad
Link dan Kesalahan CTA (Call To Action) Yang Salah
Contoh : Uat
![bad-call-to-action](https://file.mockplus.com/image/2018/07/1b42d6ec-2885-4cf6-9029-51694f7984d9.png)
Link yang
berantakan dan dead link keduanya adalah kesalahan fatal pada website. Cek dahulu
link secara manual atau gunakan tools seperti Website Link Checker. Juga diperlukan
kefungsional link tersebut terutama tautan dalam teks, harus dibuat cukup jelas
dan mudah di klik.
Pada situs
diatas gambar kecil yang bergerak-gerak ternyata adalah link, dan terus bergak
sepanjang waktu. Teksnya sangat samar, jadi pengguna tidak akan tahu informasi
apa di display.
CTA seting
harus jels juga. Jangan beri pengguna banyak pilihan CTA di waktu yang sama. Terlalu
banyak CTA tidak bagus dan membingungkan.
Contoh desain
yang baik :
![Cta-example](https://file.mockplus.com/image/2018/07/069ba95f-3e56-4183-9d44-c39af5a4e0df.gif)
7. Ketidakjelasan
Background
Contoh :
Nmg-group
![pic-bad](https://file.mockplus.com/image/2018/07/3dadf3b7-eb37-4e1f-b452-ae7ce2322d7b.png)
Gambar yang
digunakan untuk website dapat menjadi font door untuk website. Gambar yang
bagus membuat situs jadi cantik dan nyaman. Beberapa desainer bahkan
menggunakan seluruh gambar sebagai background image.
Pada situs
diatas sebenarnya desainnya bagus, tapi jika dilihat lagi anda akan menemukan
teks dan beckground image overwhelmed. Background image pada website tertutupi
elemen lain, jadi interface-nya rusak.
Contoh website
yang baik :
![pic-good](https://file.mockplus.com/image/2018/07/ff14ceb5-bded-48ce-b4d7-6a6caf727d7c.png)
8. Style
Tidak Konsisten
Contoh desain
yang buruk : Wateronwheels
![style-bad](https://file.mockplus.com/image/2018/07/5fcfc512-73c7-4faf-ad3f-9e761a97da3c.png)
Jika ingin halaman
yang smooth dan ringkas jangan gunakan terlalu banyak elemen dari style yang
berbeda. Pada situs ini teks area menggunakan constrasting colors dan ukuran
font yang berbeda sebagai highlight info. Tetapi pada teks kedua juga
menggunakan highlight warna biru, yang faktanya merusak kesatuan dan
keseimbangan interface. Interface sangat penting untuk keindahan web, contohnya:
![style](https://file.mockplus.com/image/2018/07/347cdd9d-b37a-4390-a1ec-1c985bc1d360.gif)
9. Tidak
adanya white space
Contoh website
buruk : Greatdreams
![space-bad](https://file.mockplus.com/image/2018/07/bedadbf1-c060-4aac-be94-68af692fe903.png)
Seluruh situs
terlihat colorful, kontras dan menonjol, juga topik yang sesuai dari Children’s
juice drink. Tapi terlalu banyak warna cerah yang tercampur dan tidak ada space
sama sekali. Terlihat lebih seperti colorful painting daripada online business
website. Selain itu kombinasi warna yang berlebih memnuat keterbcaan teks
rendah. Situs ini tidak ada nativigasi apapun, menyuruh pengguna untuk scroll
kebawah untuk menemukan informasi.
Contoh website
yang baik dengan white spice yang simpel :
![space-good](https://file.mockplus.com/image/2018/07/93e2195f-8e03-43f5-b63e-982f5b280647.png)
Komentar
Posting Komentar