9 Contoh Desain UI Website yang Bisa Kamu Jadikan Inspirasi

Nadia L Kamila

21 October 2023

13579

Image Banner

Apakah Sobat MinDi sedang mencari referensi contoh desain UI website? 

Maka selamat, kamu datang ke artikel yang tepat. MinDi akan memberikanmu beberapa contoh website dengan user interface yang bisa kamu jadikan inspirasi di bawah ini.


Contoh Desain UI Website untuk Referensi


Desain UI dari sebuah website cukup penting karena meninggalkan kesan pertama pada penggunanya. 

Terutama jika website tersebut dijalankan untuk bisnis, karena tak hanya memberikan desain yang bagus, namun juga bisa memberi trust kepada calon pelanggan yang berkunjung.

Namun membuat desain website yang bagus tidaklah mudah, apalagi desain UI menggabungkan kreatifitas dan kekuatan referensi agar bisa menghasilkan website yang bagus dan berdampak pada pengunjung.

Oleh karena itu, MinDi telah merangkum beberapa contoh desain UI untuk kamu jadikan sebagai referensi di bawah ini:


1. siteInspire


Situs ini bisa diibaratkan sebagai galeri template contoh desain UI yang cukup lengkap. siteInspire menampung lebih dari ribuan situs sehingga kamu bisa mendapatkan banyak sekali referensi di sini.

Tema dari website yang ada pun cukup beragam, Sobat MinDi bisa menemukan contoh website berita, website yang dikhususkan untuk galeri foto, hingga website yang didesain untuk anak-anak.

siteInspire sendiri menyediakan filter, sehingga kamu bisa mencari contoh desain berdasarkan gaya yang kamu sukai, jenis platform yang sedang kamu kerjakan, ataupun subjek website  tertentu.

MinDi sarankan kamu mendafarkan diri untuk membership, jangan lupa untuk menyebutkan desain mana yang paling kamu suka. Dengan membership ini, kamu bisa mendapatkan informasi jika ada showcase desain UI website terbaru.


2. Awwwards



Kamu bisa menemukan banyak sekali contoh desain web yang menarik di Awwwards. Uniknya, Awwwards memberikan penghargaan pada website yang memiliki desain yang bagus dan dikembangkan dengan baik.

Seluruh proyek desain yang ada dalam Awwwards telah dikurasi dan dinilai oleh ahli desain web terkenal. Sehingga kamu bisa sekaligus mempelajari hal apa yang membuat sebuah website dinilai lebih baik dari website lainnya.

Selain koleksi desain yang sudah terkurasi, Awwwards memiliki pilihan filter yang memungkinkan kamu mencari sesuatu dengan lebih spesifik seperti gambar 3D atau gambar dengan background yang besar.


3. Behance


Situs Behance tentu tidak asing di kalangan UI ataupun UX desainer. Situs ini dimiliki oleh Adobe dan ditujukan untuk memamerkan hasil dari karya kreatif.

Banyak yang menggunakan Behace sebagai tempat untuk mendapatkan inspirasi contoh desain UI website. Selain itu, Behave juga memberi ruang bagi kamu untuk mendapatkan feedback dari desainer atau illustrator lainnya.


4. ETQ


Jika kamu hendak membuat website e-commerce, maka ETQ adalah tempat yang tepat. ETQ memiliki tampilan yang minimalis namun mampu menunjukkan gambar produk di etalase dengan rapi.

Desain website ETQ mampu memberikan ruang bagi brand untuk mengkomunikasikan bisnisnya. Ada banyak template website untuk berbagai bisnis yang bisa kamu gunakan di ETQ ini. 

Terdapat pop up berupa tawaran diskon 10% yang akan kamu dapatkan dengan syarat berlangganan newsletter mereka.


5. Template Monster


Template Monster menjadi salah satu tempat terbaik untuk mencari inspirasi desain UI website karena memiliki lebih dari 30.000 template di dalamnya. Dijamin kamu tidak akan kehabisan contoh desain di situs ini.

Template Monster menyediakan filter pencarian yang cukup detail. Kamu bisa mengurutkannya berdasarkan fitur, jenis platform yang digunakan, hingga desain terpopuler. 

Uniknya, Template Monster juga menyediakan fitur demo live template. Fitur ini bisa memberi ide mengenai bagaimana cara mengatur konten dengan baik pada desain yang kamu pilih. 


6. Rainforest Guardian


Kali ini MinDi beralih pada contoh website sosial, Rainforest Guardian. Website ini memberikan informasi dan edukasi mengenai kerusakan hutan Amazon yang semakin parah oleh oknum yang tidak bertanggung jawab.

Rainforest Guardian juga mengajak pengunjungnya untuk berperan dalam menjaga hutan yang semakin lama semakin mengkhawatirkan.

Tampilan dari website ini cukup memanjakan mata dan memiliki desain homepage yang responsif dan komunikatif. Hal ini tampak dari homepage yang telah menggunakan teknologi AR yang bisa di zoom ini atau zoom out oleh penggunanya.

Website ini juga memiliki tampilan CTA yang kontras “Become A Protector” untuk mengajak pengunjungnya berperan aktif dan berdonasi menjaga hutan.


7. Feed


Feed juga menjadi contoh desain website yang cukup keren. Halaman homepagenya membuat video galaksi yang membuat pengunjungnya penasaran dan tertarik untuk mengekplor lebih jauh ke dalam websitenya.

Elemen desain dari Feed tampak menarik dan mainstream berkat video galaksinya. Selanjutnya website terbuka secara slide down dan menampilkan video perkenalan brand dengan cara yang menarik.

Jika kamu hendak membuat website kreatif, Feed bisa menjadi referensi yang cocok untukmu.


8. Evernote


Jika kamu menyukai desain website yang simpel dan minimalis, maka website Evernote bisa menjadi inspirasi terbaik. Desainnya menggunakan wana hijau dan warna netral yang menimbulkan kesan bersih dan nyaman.

Meskipun Evernote memiliki isi konten yang cukup padat dan informatif, kesan minimalis tetap tampak tanpa membuat website terlihat ‘berantakan’. 

Kelebihan lainnya, kecepatan website Evernote stabil dan tidak terlalu berat karena desainnya yang tak dipenuhi dengan gambar atau video. Kecepatan ini menjadi poin plus bagi pengunjung yang mengaksesnya.


9. Space X


contoh desain website UIUX


Perusahaan transportasi luar angkasa yang dibangun Elon Musk ini memiliki konsep futuristik yang keren. Terdapat banyak foto dan video yang menakjubkan dan membuat pengunjung terfokus pada proyek mereka.

Kamu akan diajak menyelami misi Elon Musk dan terhanyut dalam suasana merinding yang diciptakan dari desain websitenya yang futuristik dan dipenuhi gambar langit serta roketnya.

Desain website yang fokus pada visual dan minim tulisan di halaman homepage mampu membuat pengunjung tertarik untuk menjelajah dan mencari tahu lebih dalam tentang website tersebut.

Itulah sembilan contoh desain website yang MinDi rangkum spesial untukmu. Lima website pertama adalah situs yang menyediakan banyak template desain UI untuk referensi ataupun kamu beli.

Sedangkan empat website setelahnya adalah contoh website yang kreatif dan bisa kamu amati konsep mereka dan disesuaikan dengan konsep dari website yang sedang kamu lakukan.


3 Hal Penting untuk Membuat Desain UI Website Lebih Baik



Ada tiga hal penting yang wajib kamu pahami saat membuat desain UI website menjadi lebih baik.


1. Kesederhanaan (Simplicity)



Hindari tampilan website yang berantakan. Gunakan elemen desain yang esensial dan jelas sehingga pengunjung mudah memahami isi dan cara menggunakan website.


2. Navigasi yang Jelas



Pastikan menu dan tombol di website mudah ditemukan dan dipahami. Navigasi yang jelas membantu pengunjung menemukan informasi yang mereka butuhkan dengan cepat.


3. Responsivitas



Buatlah desain website yang mampu tampil dengan baik di semua perangkat, baik desktop, tablet, maupun ponsel. 

Responsivitas desain ini memberikan kenyaman pada pengunjung saat mereka membuka website dari berbagai perangkat yang berbeda. 

Dengan tiga poin di atas, desain UI website Anda akan menjadi lebih user-friendly dan meningkatkan kepuasan pengunjung.

Nah, MinDi telah memberikan beberapa contoh desain UI website yang bisa kamu jadikan inspirasi dalam mendesain website sekaligus tips untuk membuat desain wesite menjadi lebih menarik.

Mendesain website sendiri adalah pekerjaan yang membutuhkan pemahaman mendalam serta kreatifitas dan keterampilan yang spesifik. 

Jika Sobat MinDi ingin memperdalam ilmu desain UI dan UX dan meningkatkan kemampuan serta pengalaman, kamu bisa mengikuti Bootcamp UIUX/Product Design dari Dibimbing. 

Dapatkan pelatihan intensif, bimbingan dari para ahli, dan kesempatan untuk bekerja pada real case project. Daftar sekarang sebelum kehabisan kuota ya!



Share

Author Image

Nadia L Kamila

Nadia adalah seorang penulis yang berfokus pada pengembangan dan peningkatan keterampilan di tempat kerja. Ia punya passion yang tinggi dalam memberikan konten-konten edukatif terutama di topik-topik seperti carreer preparation dan digital marketing.