Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Sudahkah Anda memiliki website? Kami yakin Anda sudah memilikinya karena website merupakan media populer untuk pemasaran bisnis/usaha Anda. Selain berfungsi sebagai media pemasaran, website juga merupakan cerminan bagi perusahaan Anda, maka desain website yang profesional itu penting untuk dimiliki.
Kredibilitas sebuah bisnis dapat dinilai dari bagaimana website Anda ditampilkan.
Sayangnya, banyak pelaku bisnis kurang memperhatikan tampilan website mereka. Padahal, kesalahan sepele dalam pembuatan desain website dapat berakibat fatal. Berikut adalah 6 kesalahan umum yang sering dilakukan ketika mendesain sebuah website.
Sumber dari website Envato themeforest.
Tak kalah dengan Avada theme, jika Anda telah terbiasa menggunakan WordPress, Anda pasti sudah familiar dengan template ini.
Sumber dari website wordpress.org
Atau, bahkan template seperti di bawah ini.
Sumber Betheme. themeforest.net
Benar kan? Anda pasti sering melihat style design website seperti di atas. Dari ketiga contoh gambar yang ditampilkan, dapat disimpulkan bahwa peletakan semua elemen desainnya hampir sama. Jika dibuat sketsa, ketiga tampilan di atas akan tampak seperti ini.
Anda dapat melihat sendiri kecenderungan pola desainnya. Logo selalu ditempatkan pada bagian kiri atas header, menu navigasi di samping kanan, image slider di bagian bawah header, kemudian image poin utama yang menunjukan keunggulan dari setiap bidang usaha dalam website tersebut.
It’s ok, no problem if you use a website template like that.
OK, tidak apa-apa jika Anda menggunakan template seperti itu. Namun, ada beberapa hal yang perlu Anda perhatikan untuk kustomisasi template yang Anda gunakan.
Mungkin terdengar agak aneh mengapa logo perlu dituliskan di sini karena pasti Anda sudah mengerti bahwa logo termasuk identitas dari perusahaan Anda. Eits.. jangan salah sangka terlebih dahulu. Hal ini perlu disampaikan mengingat logo sering disepelekan. Bahkan, masih banyak pelaku bisnis yang menggunakan logo asal jadi atau alakadarnya. Bagi Anda yang memiliki usaha, terutama UKM, perkaya pemahaman Anda mengenai pentingnya sebuah logo di artikel kami selanjutnya: Mengapa UKM Perlu Logo Profesional.
Berikut adalah contoh logo profesional dari beberapa perusahaan besar di dunia.
Anda merasa tidak memiliki kemampuan mendesain logo secara profesional? sebagai alternatif Anda dapat mencoba beberapa situs jasa pembuat logo gratis berikut.
Tersedia banyak template/clipart menarik yang memudahkan Anda untuk melakukan kustomisasi logo yang Anda inginkan. Anda hanya perlu memilih clipart yang tersedia di Logomakr dan memberikan teks, setelah itu tinggal save dan logo yang Anda buat akan secara otomatis diunduh dengan format .png yang cukup ditampilkan pada website Anda. Namun sayangnya untuk mendapatkan High Resolution (format vector) Anda harus membayar $19 supaya bisa dicetak di berbagai media
Hampir sama dengan Logomakr, Logogarden menyediakan clipart menarik yang dapat Anda kustomisasi sesuai keinginan. Akan tetapi, dalam versi gratisan Logogarden Anda hanya mendapatkan file low resolution .jpg sedangkan untuk mendapatkan file High Resolution Anda cukup membayar $12.
Saat pertama kali dilihat, sekilas banner slider memang terlihat sangat menarik karena tampilannya yang dinamis. Akan tetapi tahukah Anda bahwa slider dapat merusak kinerja website?
Hal inilah yang pada akhirnya akan membuat para pengunjung meninggalkan website Anda. Jadi silakan pertimbangkan kembali pentingnya fitur slider ini, ya!
Slider bukanlah satu-satunya fitur yang dapat membuat website terlihat lebih dinamis. Tata letak (baca: layout) yang bagus berikut penggunaan animasi yang sesuai juga dapat memberikan dampak baik bagi website Anda. Salah satu contoh layout yang bagus adalah seperti yang diterapkan oleh Cleverbird.com
Penggunaan image yang sesuai dengan jasa yang ditawarkan, kualitas gambar yang bagus kemudian penempatan teks posisi ditengah yang membuat mata pengunjung lebih fokus kepada apa saja yang ditampilkan di website Cleverbird.com, beserta animasi yang sederhana dan tidak mengganggu mata itulah yang menjadikan Layout website ini pantas Anda jadikan inspirasi.
Baca Juga: Mengapa UKM Memerlukan Desain Logo Profesional?
Benar sekali. Kontak adalah hal yang penting untuk ditampilkan dalam website. Silakan lihat kembali tiga template yang ditampilkan di atas. Sebagian besar bahkan tidak menampilkan kontak.
Dengan adanya kontak atau nomor telepon, website Anda terlihat lebih terpercaya.
Nah, inilah poin utamanya: membangun kepercayaan pengunjung. Bayangkan jika Anda sudah membuat website sedemikian bagus namun Anda malah tidak menampilkan kontak. Apa jadinya?
Baik, mari kita lanjutkan. Lantas bagaimana penempatan kontak yang baik? Pada umumnya, kontak diletakkan pada bagian Header. Fungsinya adalah untuk mencuri kesan pertama pengunjung ketika pertama kali melihat website Anda. Berikut ini beberapa inspirasi website dengan penempatan kontak yang sangat baik.
Silakan lihat kotak berwarna merah, Bluehost meletakkan kontak di bagian atas sebelah logo dimana kebanyakan mata manusia melihat konten website dari kiri ke kanan sehingga hal ini akan memudahkan pengunjung untuk menemukan kontak yang ditampilkan.
Sama dengan bluehost, Zappos meletakkan kontak di bagian header diatas logo berguna untuk mempermudah pengunjung menemukan kontak yang ditampilkan di website.
Berbeda dengan kedua contoh diatas roosterschicken.com menempatakan kontak disisi kanan, dengan menggunakan backgroud warna kuning dan teks kontak lebih besar serta menggunakan warna hitam sehingga tampilan kontak kontrast dan mempermudah pengunjung menemukannya.
Salah satu bagian yang penting ketika membangun desain website adalah foto. Pemilihan foto atau gambar yang tepat dapat menyampaikan jutaan makna, karena foto yang baik dapat menyampaikan emosi, memberikan perintah untuk melaksanakan aksi, menjelaskan fitur atau produk secara rinci, bahkan menggambarkan konsep tanpa harus membaca sebuah kata dalam promosi
A good website starts with a good image.
Begitu juga sebaliknya. Foto yang kurang baik dapat memberikan kesan buruk bagi website Anda. Perlu Anda ketahui juga bahwa foto/gambar yang baik digunakan dalam website tidak melulu harus High Resolution (beresolusi tinggi). Mengapa? Resolusi yang terlalu tinggi dapat turut mempengaruhi kinerja website Anda, dan berpotensi memperlambat kecepatan akses. Jadi, silakan pertimbangkan baik-baik penggunaan foto untuk website Anda.
Adapun untuk mengoptimalkan kualitas foto/gambar yang Anda gunakan agar tetap dalam ukuran kecil, Anda dapat menggunakan tool optimizer online berikut ini.
Tools online ini bisa mengoptimasi file image Anda sampai 70%, maksimal proses dalam sekali optimasi 20 image dan setiap image maksimal berukuran 5MB, Hanya untuk optimasi file berekstensi .jpg dan .png.
Lain halnya dengan tinypng. Tools ini dapat mengoptimasi file image hingga 90%, tak hanya bisa mengotimasi file berekstensi .jpg dan .png tools ini juga bisa mengoptimasi file .gif dan .svg. Maksimal file untuk dioptimasi 10MB namun sayangnya hanya dapat memproses 1 image sekali optimasi.
Di sinilah Anda harus berpikir lebih keras lagi. Pada bagian Navigasi Anda harus bisa memahami apa yang sebenarnya Anda dan para pengunjung website inginkan.
Menentukan navigasi dapat digambarkan seperti meletakkan pondasi awal rumah.
Kegagalan dalam menentukan pondasi awal dapat beresiko mengakibatkan rumah Anda roboh.
Ada cara cepat yang bisa Anda tempuh untuk menentukan navigasi seperti apa yang akan Anda gunakan: bertanya pada diri Anda sendiri. Apa yang perlu Anda tanyakan?
Berikut adalah beberapa hal yang dapat Anda tanyakan kepada pada diri Anda untuk membantu mempersiapkan skema navigasi.
Dengan menjawab semua hal di atas dan memahami bagaimana konten website Anda saling berkaitan, Anda akan menemukan dasar dalam menentukan navigasi yang baik. Berikut adalah beberapa contoh website dengan navigasi baik yang bisa Anda jadikan inspirasi.
Simple is better
Inilah yang diterapkan oleh designmuseum, dimana hanya ada 1 menu di atas dan memanfaatkan scroll sebagai navigasi utama, berdasarkan kebiasaan para pengguna internet ketika mengunjungi sebuah website.
indicate content to users
Mempertegas navigasi menggunakan icon agar memudahkan pengguna untuk memahami konten didalam navigasi yang disajikan
show the most important
Karena sebuah agency yang dibutuhkan informasinya oleh pengunjung berupa portfolio/work, Deskripsi layanan dan Kontak maka hanya ada 3 menu navigasi di website yang diterapkan oleh manifold.
Bicara tentang desain tidak akan lepas dari urusan tipografi dan warna. Karena topik ini tidak akan ada habisnya jika dibahas dan penjelasannya berpotensi sangat panjang, kami tidak akan membahasnya secara rinci di sini.
Penggunaan tipografi dan warna yang sesuai dapat membuat desain website Anda lebih konsisten dengan brand (identitas) perusahaan Anda.
Percaya atau tidak (tapi sebaiknya Anda percaya, trust me I’m a designer), kebanyakan pengunjung datang ke website hanya untuk membaca apa yang Anda tawarkan. Bentuknya bisa bermacam-macam, baik itu artikel, review produk, maupun informasi mengenai usaha Anda. Mereka mengunjungi website Anda untuk membaca teks dan jarang sekali memperhatikan warna atau elemen desain lain yang Anda gunakan.
Maka dari itu, perhatikan dengan seksama pemilihan tipografi dan warna ketika membangun sebuah website. Bahkan ketika Anda merasa sudah memiliki warna serta tipografi favorit, alangkah baiknya jika Anda lebih berhati-hati.
Berikut adalah beberapa website dengan perpaduan sangat baik antara tipografi dan warna yang dapat Anda jadikan inspirasi.
Contoh desain yang clean, minimalist dan terkesan elegant.Dengan sentuhan hangat warna cokelat muda sebagai warna latar belakang dan dipadukan dengan penggunaan typografi Type Serif semakin memperjelas kesan mewah dari produk yang ditawarkan.
Ingin menampilkan kesan yang resmi, profesional dan clean L’avenir adalah contohnya. Memadukan warna hijau dan orange serta abu-abu muda sebagai warna latar belakang dan typografi sans serif untuk mempertegas citra profesional.
Bagi Anda yang belum tahu apa itu Call to Action beberapa contoh berikut ini bisa membantu Anda lebih memahaminya lagi. Pernahkah Anda mengunjungi halaman awal Facebook seperti ini?
Atau mengunjungi halaman awal WordPress seperti ini.
Atau Anda gemar berbelanja online di Lazada yang memiliki halaman seperti ini?
Dari tiga gambar di atas, coba Anda perhatikan bagian yang ditandai kotak berwarna merah. Bisa jadi saat ini Anda berpikir bahwa ini adalah sebuah tombol. Ya, benar sekali. Call to Action (biasa disingkat sebagai CTA) memang biasanya berbentuk tombol yang diletakkan dalam sebuah website. Tujuannya agar pengunjung melakukan suatu tindakan (misalnya tombol “Daftar Sekarang!“), mengarahkan pengunjung ke halaman website dengan informasi yang lebih lengkap (misalnya tombol “Selengkapnya …“) dan lain-lain.
CTA yang baik idealnya dapat meningkatkan penjualan dalam sebuah website.
Salah satu faktor yang mempengaruhi hal ini adalah desain visual CTA. Di sini ada dua elemen utama yang perlu Anda perhatikan: tombol dan teks.
Berikut adalah contoh website dengan CTA menarik yang bisa Anda jadikan inspirasi.
Tombol CTA dengan warna kuning dan teks “Get Started For Free” yang sangat jelas dan mudah terbaca akan menyita perhatian pengunjung untuk segera menekan ( meng-klik) tombol tersebut.
Penempatan tombol CTA yang sempurna, diantara 2 image dan tepat posisi ditengah beserta teks copy “Try Zendesk For Free” membuat design CTA semakin jelas terlihat dan nyaman untuk segera menekan tombol CTA tersebut.
Dari lima poin yang sudah disebutkan di atas, kecepatan loading space yang sering dilupakan oleh banyak desainer. Padahal, hal ini termasuk salah satu poin penting dalam membangun sebuah website. Anda pasti cukup sering mengalaminya. Apa yang biasa Anda lakukan ketika berkunjung ke sebuah website namun halamannya tak kunjung terbuka? Apakah refresh halaman? Atau mungkinkah Anda akan segera meninggalkan halaman tersebut?
Apabila Anda tidak ingin hal ini terjadi pada website Anda, sebaiknya Anda cek kembali hal-hal yang dapat membuat proses loading website Anda lambat, seperti :
berikut adalah tools untuk memeriksa kecepatan loading page website
Google Page Speed bisa menganalisa website dengan tampilan mobile dan dekstop jadi pada setiap elemen yang terdapat di website Anda terdapat analysa tersendiri dari yang versi mobile dan versi dekstopnya, sehingga ini akan mempermudah Anda untuk memperbaiki bagian-bagian tertentu sesuai yang direkomendasikan oleh tools ini.
Lain halnya dengan Googlepagespeed, GTMetrix tidak menganalisa page speed pada tampilan website mobile namun memberikan keunggulan pada nilai Yslow dimana nilai ini diambil dari rata-rata Googlepagespeed dan Yahoo, serta membandingkan dengan website yang pernah melakukan test dengan GTMetrix.
contoh kasus slow loading page yang terjadi pada website www.oakleysunglasses2.us.com
Tampilan Desktop
Tampilan Mobile
Yang terdapat dalam kotak merah itu adalah nilai hasil test loading page sedangkan yang didalam kotak warna hijau itu elemen-elemen yang perlu diperbaiki.
Yang terdapat dalam kotak merah itu adalah nilai hasil test loading page sedangkan yang didalam kotak warna hijau itu rekomendasi elemen mana yang perlu diperbaiki.
Citra yang baik tentu dapat membuat para pelanggan lebih senang melakukan bisnis dengan Anda. Melalui desain website yang baik, bisnis Anda dapat terlihat lebih meyakinkan, dan ini artinya Anda memiliki kesempatan lebih besar untuk meraih kesuksesan di internet.
Enam kesalahan umum dalam pembuatan website yang telah kami uraikan di atas dapat Anda jadikan bahan pelajaran. Harapan kami, berkaca dari kesalahan yang dilakukan orang lain, Anda dapat membangun website milik Anda sendiri dengan jauh lebih baik.
Sampai jumpa di artikel kami selanjutnya. Selamat berkreasi.
Source:niagahoster.com
No comments:
Post a Comment