Dengan semakin gencarnya perusahaan dan bisnis bertransformasi ke arah digital, menjadikan website sebagai aspek penting tempat para calon pelanggan bertransaksi dan berinteraksi dengan pemilik perusahaan. Oleh karena itu, perusahaan harus benar-benar memperhatikan segala fungsionalitas website, mulai dari kecepatan loading, UI/UX, kelengkapan fitur, dan lainnya.
Berbicara mengenai UI/UX, tentu saja kedua hal tersebut adalah berbeda. Simak pada salah artikel terbitan Exabytes berikut untuk mengetahui secara detail tentang UI/UX: Perbedaan UI Design dan UX Design
Salah satu aspek penting dari website adalah tampilannya. Karena tampilan website yang menarik akan membuat pengunjung nyaman dan betah. Nah, pada artikel kali ini akan membahas bermacam-macam contoh desain website sebagai sumber inspirasi Exabytes Friends agar menghasilkan tampilan User Interface website yang baik. Yuk simak!
Daftar Isi
Contoh Desain Website Terbaik dan Menarik Sebagai Sumber Inspirasimu
Berdasarkan data yang dihimpun, saat ini telah ada sekitar 1,89 miliar website. Dengan jumlah yang sangat fantastis tersebut, tidak semua website memiliki desain tampilan yang baik. Maka, simak pada pembahasan di bawah ini yuk untuk mengetahui contoh desain website yang menarik.
Feed
Feed merupakan gambaran contoh desain website sederhana namun unik, anti-mainstream, dan menarik. Melalui paduan animasi dan video berupa galaxy pada laman homepage, membuat pengunjung menjadi penasaran terhadap isi website sebenarnya dan akhirnya mencoba untuk mengeksplor laman website lebih lanjut.
Hal yang dapat dijadikan inspirasi dari contoh desain website Feed:
- Memiliki elemen desain yang menarik, unik, dan anti-mainstream.
- Menyajikan video singkat yang menjelaskan brand Feed.
- Memiliki menu bar yang lengkap.
- Mencantumkan nama serta logo brand pada homepage.
FreshBooks
FreshBooks menghadirkan tampilan desain website yang sederhana, light, namun sangat berkesan berkat perpaduan warna yang sejuk dan nyaman di mata (kombinasi warna biru dan putih). Selain itu, informasi yang disajikan pada homepage juga sangat lengkap dan mudah dimengerti.
Hal yang dapat dijadikan inspirasi dari contoh desain website FreshBooks:
- Memiliki scroll-behaviour yang user friendly yaitu atas dan bawah (scroll up and down).
- Menghadirkan CTA dengan warna kontras (warna hijau pada CTA “Buy Now & Save”) sehingga mudah ditemukan oleh pengunjung.
- Menunjukkan copywriting yang baik yaitu “Accounting Software Built for Owners, Their Clients, and Accountants”.
- Menunjukkan pilihan konsep desain yang sangat unik yakni flat-lay photography.
ETQ
ETQ adalah salah satu contoh desain website toko online. Siapapun yang mengunjungi website ETQ pasti langsung paham bahwa website tersebut merupakan e-commerce yang menjual brand sepatu. Hadir dengan tampilan desain yang sangat sederhana dan minimalis namun mampu memberikan kesan pertama yang cukup kuat. Gambar sepatu berjejer pada homepage ETQ mampu membuat fokus pengunjung langsung terarah pada satu obyek yaitu: sepatu.
Hal yang dapat dijadikan inspirasi dari contoh desain website ETQ:
- Mampu mengkomunikasikan brand secara kuat melalui background layout sepatu pada homepage.
- Menggunakan typography dalam logo brand ETQ yang unik dan eye-catching.
- Menampilkan pop-up tawaran diskon 10% apabila subscribe email sehingga menarik minat pengunjung untuk berlangganan newsletter.
Rainforest Guardians
Rainforest Guardians merupakan situs website yang bergerak di bidang sosial dan paling imersif pada tahun 2016. Situs ini mengajak para pengunjungnya untuk berkontribusi dalam kegiatan melindungi hutan agar tidak dirusak oleh pihak tak bertanggung jawab.
Hal yang dapat dijadikan inspirasi dari contoh desain website Rainforest Guardians:
- Memiliki tampilan desain homepage yang sangat responsif dan komunikatif. Pengunjung dapat berinteraksi pada homepage dengan melakukan zoom out, zoom in, serta menggerakkan kursor untuk melihat berbagai desa dan saluran air yang membentuk Hutan Hujan Amazon.
- Menyajikan informasi yang sangat padat dan bermanfaat mengenai Hutan Hujan Amazon melalui tampilan desain di website.
- Memiliki CTA dengan tampilan yang kontras “Become a Protector”.
- Menerapkan teknologi AR pada homepage.
Simply Chocolate
Inspirasi desain website yang unik dan menarik berikutnya hadir pada situs Simply Chocolate. Exabytes Friends pasti langsung menginginkan untuk memakan coklat apabila mengunjungi website Simply Chocolate. Pemilik brand menyajikan gambar coklat dalam berbagai warna untuk menggambarkan produk mereka secara unik dan menggiurkan.
Hal yang dapat dijadikan inspirasi dari contoh desain website Simply Chocolate:
- Memiliki tampilan desain 3D dengan kombinasi warna yang netral dan sejuk sehingga membuat pengunjung seolah-olah sedang memandang coklat asli.
- Memiliki CTA “Shop” yang mengarahkan pengunjung ke laman pembelian produk.
- Menggunakan konsep desain yang sangat unik dan menarik.
- Mengadopsi scroll-behaviour yang nyaman yaitu up and down.
- Menyajikan informasi produk yang lengkap mulai dari nama, harga, gambar, hingga kelebihan produk.
Overflow
Melalui tampilan desain dengan warna netral (putih) beserta ilustrasi serta ikon yang menarik, Overflow berusaha menyajikan representasi brand yang mudah dikenali oleh pengunjung mereka. Overflow sendiri merupakan perusahaan digital yang menyediakan jasa desain untuk klien.
Hal yang dapat dijadikan inspirasi dari contoh desain website Overflow:
- Memiliki tombol CTA dengan warna kontras “Start For Free” untuk mengajak pengunjung menggunakan Overflow.
- Dilengkapi dengan video pada homepage yang menjelaskan flow diagram dari cara kerja Overflow dalam menangani klien.
- Mengkombinasikan berbagai warna yang netral, menarik, cantik, dan eye-catching sehingga tampilan desain menjadi lebih hidup dan ceria (colorful).
The Economist
The Economist adalah sebuah situs website yang menyajikan berita-berita up to date dan populer secara global. Situs website dari The Economist memiliki pilihan menu yang sangat lengkap dan mudah dipahami.
Hal yang dapat dijadikan inspirasi dari contoh desain website The Economist:
- Dilengkapi dengan pilihan menu dengan tata letak yang rapi pada bagian atas homepage.
- Memiliki proporsi letak yang ramah di mata (headline berita diletakkan pada homepage dengan ukuran paling besar lalu diikuti dengan judul berita lain dengan ukuran yang lebih kecil).
- Merepresentasikan brand dengan baik dimana The Economist identik dengan logo warna merah sehingga pada website mereka menggunakan kombinasi warna merah dengan warna netral lainnya (putih, kuning, biru, dan ungu).
Evernote
Evernote memiliki tampilan desain website yang simpel namun memiliki informasi yang padat di dalamnya. Hadir dengan dominasi warna netral (putih) dan warna sekunder (hijau) sehingga sangat sejuk dan nyaman di mata.
Hal yang dapat dijadikan inspirasi dari contoh desain website Evernote:
- Menghadirkan tagline yang lugas dan menarik pada homepage yaitu “Remember Everything”, “Work Anywhere”, “Turn To-Do Into Done”, dan “Find Things Fast”.
- Memiliki CTA “Download” dengan warna kontras.
- Memiliki kecepatan website yang stabil karena loading website merupakan komponen penting yang diperhatikan oleh pengunjung.
Jika Exabytes Friends ingin mengetahui cara mengecek kestabilan kecepatan website, maka dapat membaca artikel berikut sebagai sumber referensi: Cara Cek Kecepatan Website
Boxbee
Contoh desain website selanjutnya sebagai rekomendasi untuk Exabytes Friends adalah Boxbee. Pada homepage dari situs Boxbee, disajikan background berupa foto produk Boxbee sehingga mampu menggambarkan brand secara nyata dan lugas.
Hal yang dapat dijadikan inspirasi dari contoh desain website Boxbee:
- Menggunakan copywriting yang sederhana namun berkesan yaitu “Moving Boxes: Rent, Store, and We Deliver”.
- Desain tampilan yang rapi dengan tatanan menu utama pada bagian atas homepage.
- Mengkombinasikan warna tersier kuning dengan hitam sehingga menjadi paduan warna yang eksotis namun tetap kalem.
- Menyajikan CTA “Get Started” dengan warna yang kontras.
Charity Water
Sama seperti Rainforest Guardians, Charity Water adalah sebuah situs website untuk menghimpun kegiatan sosial berupa donasi agar kebutuhan air bersih di daerah tertinggal terpenuhi.
Hal yang dapat dijadikan inspirasi dari contoh desain website Charity Water:
- Menempatkan video pada bagian atas homepage untuk menarik dan menyentuh emosi pengunjung agar mau ikut berkontribusi dalam charity.
- Menggunakan CTA dengan tulisan dan warna yang jelas dan lugas yaitu “Donate”.
- Apabila pengunjung scroll ke bawah laman Charity Water, maka akan menemukan ikon dengan ilustrasi yang unik dan otentik sehingga mampu membuat desain website menjadi lebih outstanding.
1917: Into The Trenches
Website 1917 diciptakan untuk mempromosikan film 1917. Website ini telah menggunakan konsep teknologi canggih berupa WebXR atau web immersive yang menggabungkan Virtual Reality, Augmented Reality, dan seluruh teknologi immersive lainnya. Tidak heran bahwa website 1917 berhasil memenangkan penghargaan “Site of the Day by Awwwards” pada tahun 2019 silam.
Hal yang dapat dijadikan inspirasi dari contoh desain website 1917:
- Menerapkan konsep teknologi canggih yaitu WebCR sehingga membuat pengunjung seolah-olah berada pada lokasi film sungguhan.
- Menggunakan efek suara yang jernih dan mampu memancing emosional pengunjung seolah sedang berada di medan perang seperti alur pada film 1917.
- Mengkombinasikan warna yang sangat megah dan elegan pada desain website dengan dominasi warna hitam.
- Memiliki CTA “START” dengan warna kontras.
The Octopus
IDEO adalah perusahaan desain global yang menciptakan website The Octopus. The Octopus memiliki tampilan desain yang sangat unik, modern, rapi, namun tetap simpel dan nyaman dilihat. Pada homepage, mereka menggunakan gambar gurita hitam-putih sebagai background utama dipadukan dengan warna kuning sehingga menghasilkan tema website kohesi (antar elemen website memiliki proporsi yang ideal).
Hal yang dapat dijadikan inspirasi dari contoh desain website The Octopus:
- Memadukan warna-warna netral sebagai tema utama website (hitam, putih, dan kuning).
- Elemen-elemen website yang sangat responsif, seperti saat kalian mengarahkan kursor ke salah satu blog post mereka, maka judulnya akan berubah warna menjadi highlight kuning.
- Menghasilkan tema kohesi pada website.
- Memiliki thumbnail pada setiap blog post mereka berupa ilustrasi gambar yang sangat lucu dan menarik.
The Octopus adalah gambaran desain website yang memiliki user experience sangat bagus. Karena elemen website selalu memberikan interaksi dan reaksi timbal balik ketika pengunjung mengeksplor website. Namun jangan khawatir karena Exabytes menyajikan tips meningkatkan User Experience Website.
Sennep
Sennep adalah sebuah perusahaan agensi kreatif yang menciptakan sebuah website dengan desain berupa karakter-karakter 3D unik dan menggemaskan.
Hal yang dapat dijadikan inspirasi dari contoh desain website Sennep:
- Menampilkan elemen 3D sebagai desain website sehingga tampilan website lebih terkesan hidup dan memiliki interaksi dua arah dengan pengunjung.
- Menempatkan gambar berupa GIF sebagai thumbnail unggahan konten mereka sehingga terkesan menarik perhatian mata pengunjung.
McBride Design
McBride Design adalah sebuah perusahaan yang bergerak di bidang fotografi dan menampilkan foto-foto hebat hasil karya mereka pada laman website.
Hal yang dapat dijadikan inspirasi dari contoh desain website McBride:
- Menampilkan nama dan logo perusahaan secara jelas pada homepage.
- Memiliki CTA yang mengarahkan pengunjung untuk lebih mengeksplor hasil-hasil karya foto McBride.
- Mengimplementasikan horizontal scroll-behaviour sehingga foto hasil karya dapat terlihat lebih besar dan jelas.
4 Rivers Smokehouse
4 Rivers Smokehouse merupakan contoh website untuk bisnis penjualan berupa restoran. Menggunakan foto produk andalan mereka yaitu steak sebagai latar homepage, mampu membuat calon pelanggan mereka tergiur untuk mencoba menu-menu yang ditawarkan 4 Rivers Smokehouse.
4 Rivers Smokehouse sangat menunjukkan contoh desain website yang mampu meningkatkan brand awareness. Jika Exabytes Friends penasaran terhadap tips untuk meningkatkan brand awareness melalui website, maka simak sebentar penjelasannya melalui artikel berikut ya: Cara Membangun Brand Awareness Website
Hal yang dapat dijadikan inspirasi dari contoh desain website 4 Rivers Smokehouse:
- Menampilkan video dan sub-headline yang impresif sehingga mampu digunakan sebagai strategi persuasi agar pengunjung membeli menu makanan.
- Memiliki CTA dengan warna yang kontras yaitu putih dilengkapi copywriting berupa “Order Online”.
SMAN 2 Kebumen
Kali ini akan disajikan contoh desain website sekolah dari SMAN 2 Kebumen. Memiliki kombinasi warna yang ceria dan colorful cocok untuk target audiens mereka yaitu para siswa dan siswi.
Hal yang dapat dijadikan inspirasi dari contoh desain website SMAN 2 Kebomas:
- Menyajikan CTA “Login” dengan warna yang kontras sehingga sangat mudah dikenali.
- Menggunakan konsep warna desain yang colorful sehingga cocok untuk para pengunjungnya yang berupa siswa dan siswi.
- Memiliki background utama homepage berupa gambar ilustrasi sekolah yang mencolok dan outstanding.
Swab The World
Swab the World adalah contoh website untuk kegiatan sosial. Kesan pertama yang tersaji melalui desain website ini adalah pilihan warna yang berani namun tetap terkombinasi dengan padu dan nyaman dilihat. Saat ini pun telah hadir begitu banyak aplikasi untuk membuat mockup website sehingga sangat mempermudah dalam proses desain website.
Hal yang dapat dijadikan inspirasi dari contoh desain website Swab The World:
- Menyajikan 3D animasi pada homepage sehingga membuat pengunjung tertarik untuk berlama-lama pada website.
- Memiliki fitur untuk mendeteksi secara otomatis lokasi pengunjung.
- Perpaduan antara foto yang estetik dan warna yang colorful menjadikan desain visual website menjadi sangat mencolok dan outstanding.
Diana Danieli
Situs website pemenang “2019 Webby Winning” ini menyajikan semacam pameran karya-karya seni dan arsitektur. Hadir secara unik dengan dominasi warna all white dan kursor mouse berupa lingkaran merah.
Hal yang dapat dijadikan inspirasi dari contoh desain website Diana Danieli:
- Memiliki konsep yang unik yaitu saat pengunjung menggerakkan kursor mouse, maka akan tampak seperti kaca pembesar yang menyoroti karya Diana secara lebih detail.
- Menghadirkan audio musik seperti piano yang berbunyi ketika pengunjung mengklik area tertentu pada website.
Spotify Design
Terasa kurang sepertinya jika tidak membahas desain website dari Spotify sebagai sumber inspirasi. Karena website Spotify hadir dengan konsep warna yang colorful tetapi warm. Juga dengan tambahan desain animasi yang sangat unik.
Hal yang dapat dijadikan inspirasi dari contoh desain website Spotify Design:
- Warna-warna yang digunakan sebagai desain website Spotify sangat menarik karena colorful namun tetap kalem.
- Menciptakan pengalaman unik seperti mendengarkan musik ketika mengunjungi website karena CTA yang digunakan didesain dengan tombol play, next, previous, dan shuffle seperti pada lagu.
- Menggunakan dominasi desain berupa geometris datar dengan tampilan abstrak.
Nomadic Tribe
Nomadic Tribe adalah salah satu website yang menjadi nominasi dalam ajang penghargaan Awwards 2019. Situs ini memiliki konsep yang sangat rapi, unik, dan bagus. Mengkombinasikan video, audio, serta pilihan warna yang bagus sehingga mampu memanjakan indera visual para pengunjungnya.
Hal yang dapat dijadikan inspirasi dari contoh desain website Nomadic Tribe:
- Menempatkan video dengan kualitas HD pada homepage. Pengunjung akan langsung tertarik karena disambut dengan video yang langsung terputar secara otomatis dan memperlihatkan pemandangan lanskap dan alam yang sangat indah.
- Menyajikan audio yang sangat easy-listening sehingga dapat meningkatkan keseruan pengalaman menjelajah website.
- Kombinasi antara warna pink, kuning, dan oranye sangat pas digunakan sehingga terkesan tidak monoton.
Dribbble
Dribbble adalah situs wajib bagi para designers. Situs ini menyajikan berbagai portofolio desain dari beberapa designers yang ada di dunia serta membagikan pengalaman menarik ketika mengunjungi situsnya karena pilihan warna yang digunakan sangat simpel dan soft.
Hal yang dapat dijadikan inspirasi dari contoh desain website Dribbble:
- Pilihan warna yang digunakan pada desain website sangat eye-catching. Mengkombinasikan warna putih yang netral sebagai warna utama dengan pink fanta yang mencolok untuk menunjukkan CTA.
- Menyajikan CTA “Sign Up” dengan warna kontras.
- Memiliki susunan menu dan elemen website yang sangat rapi dan detail.
Baca juga: Pakai Sitejet Untuk Buat Website Lebih Mudah
Manakah Desain Website Pilihan Exabytes Friends?
Tentu kalian telah banyak mendengar sebuah petuah “jangan menilai buku dari cover-nya saja”. Namun tidak dapat dipungkiri jika manusia sebagai makhluk visual cenderung akan menilai tampilan obyek terlebih dahulu sebagai first impression.
Begitu pula dengan website. Tampilan website yang baik dan menarik akan membuat betah pengunjungnya. Lalu apa sih sebenarnya ciri-ciri desain website yang baik? Desain website yang baik setidaknya harus mampu merepresentasikan brand (mencantumkan logo, nama, headline, serta kontak brand), menampilkan value proportion dari brand pada homepage, responsif (cocok digunakan pada semua gadget terutama website harus mobile friendly), dan menyediakan CTA (Calls to Action).
Apabila Exabytes Friends mencari contoh desain website untuk toko online, maka bisa mengunjungi situs FreshBooks, Simply Chocolate, ETQ, atau 4 Rivers Smokehouse. Namun apabila membutuhkan contoh inspirasi desain untuk kegiatan sosial, maka dapat mengintip sebentar pada situs Rainforest Guardians, Charity Water, Nomadic Tribe, atau Swab The World.
Tetapi jika tujuan kalian memuat website adalah untuk memamerkan hasil karya dan portofolio yang dimiliki, maka kalian dapat menjadikan situs Diana Danieli, McBride Design, atau Dribbble sebagai sumber inspirasi.
Terakhir, apabila kalian hanya ingin membuat website untuk mengunggah konten-konten pribadi namun tetap terkesan menarik, maka dapat melihat sejenak pada desain tampilan situs Sennep dan The Octopus.
Nah, cukup sekian pembahasan kali ini mengenai rekomendasi desain website. Semoga bermanfaat, ya! Bagi kalian yang ingin membaca artikel-artikel menarik lainnya mengenai website atau digital marketing maka dapat mengunjungi blog Exabytes. Selain itu, Exabytes sebagai perusahaan hosting Indonesia juga menyediakan jasa pembuatan website, loh! Untuk selengkapnya Exabytes Friends dapat mengunjungi laman Exabytes, ya.
