Cara membuat tampilan website menarik sebenarnya nggak sulit kok. Cukup mudah dilakukan dengan kecanggihan teknologi yang ada sekarang ini.
Buat yang nggak bisa coding sekalipun, bikin tampilan web yang keren juga bisa. Banyak aplikasi atau alat untuk melakukannya.
Tapi, tentu kita harus tahu dulu dong gimana sih cara membuat tampilan website jadi lebih menarik. Soalnya, web yang tampilannya bagus itu akan membuat orang yang berkunjung jadi lebih betah.
Isi Artikel
Cara Membuat Tampilan Website Menarik
Maka dari itu, kita perlu tahu dulu langkah-langkah dalam mendesain website agar lebih menarik.
1. Tujuan Bikin Website
Kamu harus menentukan dulu nih tujuan buat bikin website itu apa. Soalnya, desain dari website yang kamu buat akan mengikuti tujuan dari web-nya itu.
Misalnya, kamu mau buat toko online, tentu desainnya akan berbeda dengan blog informasi. Atau mau buat landing page untuk sebuah produk. Pasti desain yang dipilih juga beda dong.
Karena itulah kamu perlu banget yang namanya menentukan tujuan. Soalnya, target orang yang akan mengunjungi website kamu juga akan berbeda.
Setelah tujuan jelas, baru deh lanjut ke langkah selanjutnya.
2. Mau Pakai Platform Apa?
Ini pertanyaan penting juga.
Kamu bakal menggunakan platform untuk membuat website apa. Soalnya, pemilihan platform ini akan mempengaruhi website kamu dalam waktu yang lama. Entah itu dari ketersediaan pendukung, desain, atau fungsi lainnya.
Umumnya, ada tiga metode yang bisa kamu gunakan dalam membuat website. Pakai coding HTML dan CSS, website builder, atau menggunakan CMS (Content Management System).
Buat pemula seperti saya ini, menggunakan CMS adalah pilihan yang tepat. Apalagi kita wajib bisa coding terlebih dahulu. Cukup pengetahuan tentang install website dan mengurusnya.
Salah satu CMS yang banyak banget digunakan di dunia adalah WordPress. Dengan WordPress yang pakai hosting dan domain sendiri.
Kamu bisa melakukan banyak hal. Dukungan theme dan plugin yang ada di CMS ini tuh akan memudahkan. Kalau ingin menambahkan suatu fitur, tinggal cari plugin yang bisa membuatnya. Keren kan?
3. Lihat Tren Desain Web Terbaru
Mengamati dan melihat-lihat tren desain website saat ini itu juga penting. Tentu saja tujuannya biar kita nggak ketinggalan zaman.
Kalau dulu, mungkin desain web yang ada running text dengan blink-blink di sana-sini itu bagus, tentu sekarang nggak lagi.
Desain yang saat ini sedang tren adalah simple. Menggunakan desain minimalis seperti flat design akan membuat tampilan web lebih elegan dan menarik.
Kamu bisa kok mencari tahu tentang desain yang saat ini banyak digunakan. Googling aja “web design trends“. Banyak tuh website yang memberikan informasi terkait hal tersebut.
Tapi, kamu nggak selamanya harus ikut tren terus kok. Cukup bikin website yang menarik dan tidak norak aja udah cukup sepertinya.
4. Merancang Layout Web
Layout website ini juga penting diperhatikan agar web terlihat lebih menarik. Hal yang perlu diperhatikan antara lain header, konten, side bar, footer.
Untuk membuatnya, kamu bisa melakukan coret-coret dulu di kertas. Bikin tampilan website dengan coretan ini akan mempermudah alur ke depannya.
Kamu bisa membuat coretan mulai dari letak, ukuran, dan komponen lainnya. Sesuaikan dengan kebutuhan website yang akan dibuat.
Kalau layout sudah bagus, perhatikan juga navigasi dalam website kamu. Navigasi ini tentu berguna agar pengunjung lebih mudah mencari apa yang mereka cari.
Bikin navigasi sesederhana mungkin sehingga lebih mudah dipahami. Kalau pengunjung paham alur navigasi web, tentu mereka tidak akan langsung meninggalkan website kamu.
Misalnya kamu membuat toko online. Lalu ada pengunjung datang ke halaman depan website dan ingin tahu harga produk. Tapi, ada juga pengunjung yang ingin tahu deskripsi produk yang ditawarkan.
Kamu harus membuat navigasi yang baik sehingga pengunjung tidak kebingungan. Klik sana sini tapi nggak nemu yang dicari. Dijamin deh, mereka bakal meninggalkan website kamu.
6. Beri Ruang Kosong
Melihat tampilan yang penuh banget itu nggak nyaman. Mata jadi berasa capet gitu. Harus ada ruang kosong pada desain web agar terlihat lebih lega.
Ruang kosong atau bahasa kerennya itu white space bertujuan memberikan kesan elegan. Dengan adanya ruang kosong, elemen penting seperti tombol Call to Action atau yang lainnya akan lebih terlihat.
7. Pilih Warna
Warna website juga akan mempengaruhi menarik atau tidaknya desain website. Menggunakan warna yang tepat bisa bikin orang betah di web kita.
Kamu bisa memilih warna sesuai dengan tujuan dari pembuatan web. Atau, bisa juga dari target pembaca atau konsumen.
Jangan lupa juga, tentukan warna background, huruf, tombol, dan lainnya dengan benar. Buat perpaduan warna yang nyaman di mata pengunjung. Perhatikan juga, jangan pakai warna mirip banget antara background dan huruf.
Bisa dipastikan pengunjung akan kesulitan membaca isi website kamu. Ujung-ujungnya, mereka bakal langsung keluar karena tampilan website tidak menarik.
8. Gunakan Font Terbaik
Pemilihan font atau huruf ini juga wajib banget diperhatikan. Agar, terjadi harmonisasi antara layout dan keseluruhan website.
Dengan typography yang pas, informasi pada website kamu jadi lebih murah tersampaikan.
Apa yang perlu diperhatikan?
Masalah typography ini, ada beberapa hal yang perlu diperhatikan.
- Jenis font yang mudah dibaca.
- Ukuran yang proporsional.
- Jarak antar huruf cukup.
- Jangan menggunakan lebih dari 3 jenis font.
- Pakai font berbeda untuk heading, konten, dan elemen lain.
Kalau kamu bingung milih font, ada beberapa pilihan yang bagus untuk kamu nih.
- Lato by Google Font
- Hallo Sans by Fredrik Staurland
- Open Sans by Google Fonts
9. Harus Responsif
Apa itu responsif?
Responsif itu adalah website bisa diakses dari semua jenis device dengan tampilan yang mengikuti ukuran layar.
Jadi, kalau kamu akses website di laptop, tablet, atau handphone, tampilannya akan mengikuti. Contohnya kheefa.com, kalau kamu bisa dari laptop, tablet, atau HP, tampilannya pasti berbeda.
Hal ini penting diperhatikan. Sebab, jika tampilan website kamu sama antara laptop, tablet, dan handphone, maka pengunjung bakal nggak betah.
Soalnya, sekarang ini kebanyakan orang mengakses website menggunakan HP. Jadi, buatlah tampilan yang ketika diakses di handphone jadi lebih nyaman dan menarik.
Gimana langkah-langkah cara membuat tampilan website menarik.
Ada cara gampang lho. Tapi ini khusus buat pengguna CMS WordPress ya. Kamu bisa menggunakan theme, pilihannya ada banyak banget, mulai dari yang gratisan sampai berbayar.
Kali ini, saya berikan beberapa theme yang gratis. Kamu bisa menggunakannya untuk mengubah tampilan website jadi lebih menarik.
Tentu cara membuat tampilan website menarik ini gampang banget dan nggak perlu keluar biaya.
Desain Website Gratis di WordPress
Theme yang akan digunakan ini selain gratis juga sudah responsif ya. Diakses menggunakan berbagai ukuran device juga tampilannya masih oke.
Berikut ini beberapa theme yang bisa kamu coba gunakan.
1. Hello Elementor
Theme atau template Hello Elementor ini cocok buat bikin halaman seperti profil perusahaan atau landing page. Kamu bisa drag and drop saja untuk menambahkan sesuatu pada tampilan halaman.
2. OnePress
OnePress adalah theme single page yang cocok buat agensi digital, web bisnis, portfolio, landing page, showcase produk, freelancer, company profile, dan tampilan satu halaman lainnya.
Theme ini sudah digunakan lebih dari 90 ribu user dengan rating 4,5. Tentu membuat template ini jadi lebih rekomended lagi.
3. GeneratePress
GeneratePrees merupakan theme gratis yang ringan dan memiliki banyak fitur. Ketika kamu menggunakan theme ini, kamu bisa pakai page builder lain seperti Elementor atau Beaver Builder.
Untuk tampilan landing page, company profile, sampai blog juga bisa. Cukup ringan sehingga kecepatan website jadi lebih baik.
Itu tadi beberapa theme yang akan memudahkan kamu membuat tampilan web. Selain pakai theme, kamu bisa juga mengombinasikan dengan page builder seperti Elementor untuk bikin tampilan jadi lebih bagus lagi.
Tapi, kalau pengen yang lebih menantang, coba pelajari cara membuat tampilan website menarik dengan CSS. Salah satu bahasa pemrograman yang digunakan untuk mengubah tampilan sebuah web.
Membuat Tampilan Web Menarik dengan CSS
Cara membuat tampilan website menarik, kamu juga bisa mempelajari coding. Selain HTML yang digunakan untuk bikin web, ada yang namanya CSS.
CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk mengatur estetika sebuah website. Web akan memiliki tampilan yang lebih baik dan menarik menggunakan CSS.
Buat yang mau belajar tentang CSS, bisa klik di sini.
Tapi, kalaupun tidak mempelajari CSS juga masih bisa kok membuat tampilan web lebih menarik.
Aplikasi Desain Web
Buat yang nggak pengen bikin website dengan template seperti di pasaran, bisa juga bikin sendiri. Ada banyak software yang bisa digunakan untuk membuat desain web.
Tapi, cara membuat tampilan website menarik yang satu ini cukup menguras tenaga ya.
1. Figma
Figma adalah aplikasi khusus untuk membuat mockup website. Software ini sangat bisa diandalkan dalam membuat mockup dan wireframing. Berita gembiranya lagi, aplikasi ini gratis.
Kamu bisa berkolaborasi dengan tim sehingga dapat menghasilkan web design yang menarik. Dengan Figma, kamu bisa terhubung dengan tim desain dan bekerja bersama pada template web yang sama juga.
Kalau kamu bekerja bersama tim, tools ini cocok banget untuk mengerjakan project bersama. Selain dengan tim, klien juga langsung bisa melihat perubahan pada template mereka secara langsung.
2. Adobe Photoshop dan Illustrator
Produk dari Adobe, Photoshop dan Illustratior ini juga bisa digunakan untuk mendesain website. Kamu bisa membuat mockup desain web dan melakukan wireframing pakai software ini.
Tapi, aplikasi ini nggak gratis ya. Kamu bisa coba trial-nya atau subscribe tiap bulan.
3. Affinity Designer
Kalau mau versi murah untuk desain grafis, Affinity Designer bisa jadi pilihan. Harganya yang cukup terjangkau dan nggak perlu langganan membuat software design ini bisa kamu coba.
Membuat desain website yang cantik dan menarik juga bisa pakai aplikasi ini. Banyak fitur yang akan memudahkan dalam membuat desain juga kok.
4. Adobe DreamWeaver
Cara membuat tampilan website menarik bisa juga menggunakan software DreamWeafer.
Produk lain dari Adobe yang memang dikhususkan membuat web design. Coding dan desain dalam satu aplikasi ya pakai DreamWeaver ini.
Kamu bisa membuat desain dengan menuliskan kode. Atau, bisa juga drag and drop dari elemen yang sudah ada. Tampilan website juga bisa langsung terlihat di bagian pratinjau.
Aplikasi ini rekomended banget buat yang nggak bisa coding tapi mau coba desain. Kalau kamu mendesain sebuah template, maka kode dari template yang kamu buat akan dibuat secara otomatis.
Tinggal pilih aja tuh, kamu mau menggunakan aplikasi desain untuk website yang mana. Pastikan kamu mempelajari dulu satu per satu sebelum memutuskan untuk menggunakannya ya.
Sama seperti melihat contoh tampilan website yang menarik sebelum bikin sendiri.
Contoh Tampilan Web yang Menarik
Contoh web design yang sudah jadi dan menarik ini bisa kamu jadikan inspirasi. Tentu nggak harus sama banget ya, cukup amati, tiru, dan modifikasi. Sehingga dihasilakan tampilan yang keren dan menarik.
Siapa tahu, ilmu cara membuat tampilan website menarik bisa dipraktekkan.
1. MyThemeShop
Kamu bisa mengunjungi website penyedia template gratis dan premium ini. Bukan hanya tampilan websitenya yang bagus, theme yang ada juga menarik untuk digunakan.
Tampilan dari MyThemeShop ini tuh clean banget. Desainnya simple, dengan warna yang nyaman di mata, dan pemilihan font yang bagus.
Ruang kosong pada website ini juga menjadikannya lebih menarik. Kita jadi tahu elemen lain seperti kolom pencarian atau tombol untuk navigasi ke koleksi theme.
2. CSS Design Awards
Kalau mau cari inspirasi tampilan website yang sudah jadi, di sini tempatnya. CSS Design Award adalah tempat pemberian penghargaan untuk desain web.
Tentu saja website yang tampil di sini sudah dinilai oleh juri profesional di bidang web design ya. Ada banyak desain menarik yang bisa kamu jadikan contoh.
3. AirBNB
Tampilan visual dari website AirBNB ini keren banget deh. Bener-bener nggak kayak website layanan penyedia penginapan.
Tampilan awal dari website ini saja sudah menarik. Dengan desain ilustrasi yang digunakan, membuat web ini terlihat bagus. Apa mungkin cuma pendapat saya saja ya. Tapi, emang web AirBNB ini kelihatan menarik sih.
4. Simply Chocolate
Kalau mau lihat tampilan website yang nggak biasa, coba kunjungi web Simply Chocolate. Desain dari situs ini tuh sunguh-sunguh terlalu keren.
Bahkan, tampilan menu di web ini miring-miring gitu. Beginilah jadinya kalau orang super kreatif mendesain situs sebuah produk dengan serius. Pasti tim yang bikin kerjanya kompak nih.
Baca juga: Cara men-translate sebuah halaman website
Penutup
Gimana? Cara membuat tampilan website menarik di atas cukup mudah kan diaplikasikan?
Untuk membuat website lebih menarik, tentu membutuhkan usaha yang lebih juga. Kamu bisa mulai dengan coret-coret desain yang diinginkan. Setelah itu, belajar mengaplikasikan desain yang sudah dibuat tersebut.
