6 Kesalahan Umum Desain Website yang Sering Terjadi

Apakah sudah menyusun sebuah desain website? Kami percaya Anda telah memiliki karena web sebagai media terkenal untuk marketing usaha/usaha Anda. Selainnya berperan sebagai media marketing, web sebagai cerminan untuk perusahaan Anda.

Integritas sebuah usaha bisa dipandang dari bagaimana web Anda diperlihatkan. Sayang, banyak pebisnis kurang memerhatikan penampilan web mereka. Walau sebenarnya, kekeliruan remeh dalam pembikinan design web bisa berpengaruh fatal. Berikut 6 kekeliruan umum yang kerap dilaksanakan saat membuat desain sebuah web.

1. Memakai Template Tanpa Penyesuaian

Kemungkinan Anda cukup akrab dengan penampilan web yang semacam ini. Tidak kalah dari Avada theme, bila Anda sudah terlatih memakai WordPress, Anda tentu sudah akrab dengan template ini.

Betul kan? Anda tentu kerap menyaksikan model desain web seperti pada atas. Dari ke-3 gambar contoh yang diperlihatkan, bisa diambil kesimpulan jika penempatan semua komponen bentuknya hampir serupa. Bila dibikin sketsa, ke-3 penampilan di atas akan terlihat semacam ini.

Anda bisa menyaksikan sendiri kecondongan skema bentuknya. Simbol selalu ditaruh di bagian atas kiri header, navigasi menu di sisi kanan, gambar slider pada bagian bawah header, selanjutnya gambar point khusus yang memberikan keunggulan dari tiap sektor bisnis dalam web itu.

OK, tidak ada apa-apa bila Anda memakai template semacam itu. Tetapi, ada banyak hal yang penting Anda lihat untuk penyesuaian template yang Anda pakai.

a. Simbol

Kemungkinan kedengar cukup aneh kenapa simbol perlu ditulis di sini karena tentu Anda telah pahami jika simbol terhitung identitas dari perusahaan Anda. Eit.. tidak boleh salah kira lebih dulu. Ini perlu dikatakan ingat simbol kerap diremehkan. Bahkan juga, ada banyak pebisnis yang memakai simbol asal jadi atau alakadarnya. Untuk Anda yang mempunyai usaha, khususnya UKM, perkaya pengetahuan Anda berkenaan keutamaan sebuah simbol di artikel kami seterusnya: Kenapa UKM Perlu Simbol Professional.

Berikut contoh simbol professional dari beberapa perusahaan besar di dunia.

Anda berasa tidak mempunyai kekuatan membuat desain simbol secara professional? sebagai alternative Anda bisa coba beberapa situs jasa pembikin simbol gratis ini.

Logomakr

Banyak tersedia template/clipart bagus yang mempermudah Anda untuk lakukan penyesuaian simbol yang Anda harapkan. Anda perlu pilih clipart yang ada di Logomakr dan memberi text, kemudian tinggal save dan simbol yang Anda bikin akan secara automatis didownload dengan pola.png yang cukup diperlihatkan pada web Anda. Tetapi sayang untuk memperoleh High Resolution (pola vektor) Anda harus bayar $19 agar dapat diciptakan di beberapa media

Logogarden

Hampir serupa dengan Logomakr, Logogarden sediakan clipart bagus yang bisa Anda penyesuaian seperti keinginan. Namun, dalam versus gratis Logogarden Anda cuma memperoleh file low resolution.jpg dan untuk memperoleh file High Resolution Anda cukup bayar $12.

b. Slider

Pertama kalinya disaksikan, sepintas spanduk slider memang kelihatan bagus sekali karena penampilannya yang aktif. Namun tahukah Anda jika slider bisa menghancurkan performa web?

Slider yang terlampau cepat dapat menghancurkan pesan yang ingin Anda hadirkan di halaman khusus.
Tidak seluruhnya slider dapat bekerja yang baik pada penampilan mobile (responsif web).
Slider dapat menyebabkan pengunjung jadi kurang konsentrasi karena terlampau jumlahnya pesan yang diperlihatkan.
Perihal ini pula yang pada akhirannya akan membuat beberapa pengunjung tinggalkan web Anda . Maka silahkan pikirkan kembali keutamaan feature slider ini, ya!

Slider bukan salah satu feature yang bisa membuat web kelihatan lebih aktif. Tatanan letak (baca: lay-out) yang baik berikut pemakaian animasi yang sama sesuai dapat memberi imbas baik untuk web Anda. Salah satunya contoh lay-out yang baik ialah sama seperti yang diaplikasikan oleh Cleverbird.com

Pemakaian gambar yang sesuai jasa yang dijajakan, kualitas gambar yang baik selanjutnya peletakan text status ditengah-tengah yang membuat mata pengunjung lebih konsentrasi ke apa yang diperlihatkan di web Cleverbird.com, dan animasi yang simpel dan tidak mengusik mata tersebut yang jadikan Lay-out web ini patut Anda menjadikan ide.

c. Contact

Betul sekali. Contact ialah poin penting untuk diperlihatkan dalam web. Silahkan saksikan kembali tiga template yang diperlihatkan di atas. Mayoritas bahkan juga tidak tampilkan contact.

Karena ada contact atau nomor telephone, web Anda kelihatan lebih paling dipercaya.

Nach, berikut point intinya: membuat keyakinan pengunjung. Pikirkan bila Anda telah membuat web sebegitu bagus tetapi Anda justru tidak tampilkan contact. Apa yang terjadi?

Baik, silahkan kita teruskan. Lalu bagaimanakah peletakan contact yang bagus? Secara umum, contact ditempatkan di bagian Header. Perannya untuk mengambil kesan-kesan pertama pengunjung saat pertama kalinya menyaksikan web Anda. Berikut beberapa ide web dengan peletakan contact yang baik sekali.

Bluehost

Silahkan saksikan kotak warna merah, Bluehost menempatkan contact pada bagian atas samping simbol di mana umumnya mata manusia menyaksikan content web dari kiri ke kanan hingga ini akan mempermudah pengunjung untuk mendapati contact yang diperlihatkan.

Zappos

Sama dengan bluehost, Zappos menempatkan contact pada bagian header di atas simbol bermanfaat untuk memudahkan pengunjung mendapati contact yang diperlihatkan di web.

Roosterschicken

Berlainan dengan ke-2 contoh di atas roosterschicken.com menimpatakan contact disamping kanan, dengan memakai backgroud warna kuning dan text contact semakin besar dan memakai warna hitam hingga penampilan contact kontrast dan memudahkan pengunjung mendapatinya.

Baca Juga : Manfaat Dan Pentingnya Kepuasan Pelanggan Bagi Bisnis

2. Pilih Photo/Gambar dengan Kualitas Kurang Baik

Salah satunya sisi yang perlu saat membuat design web ialah photo. Penyeleksian gambar atau foto yang pas bisa sampaikan juta-an arti, karena photo yang bagus bisa sampaikan emosi, memberi perintah untuk melakukan tindakan, menerangkan feature atau produk dengan detail, bahkan juga memvisualisasikan ide tak perlu membaca sebuah kata dalam promo

A good web starts with a good pict. Begitupun kebalikannya. Photo yang buruk bisa memberi kesan-kesan jelek untuk web Anda. Perlu Anda kenali jika photo/gambar yang bagus dipakai dalam web tidak terus-terusan harus High Resolution (memiliki resolusi tinggi).

Kenapa? Resolusi yang terlampau tinggi bisa ikut memengaruhi performa web Anda, dan mempunyai potensi perlambat kecepatan akses . Maka, silahkan pikirkan baik pemakaian photo untuk web Anda.

Adapun untuk memaksimalkan kualitas photo/gambar yang Anda pakai supaya masih tetap dalam ukuran kecil, Anda bisa memakai tool optimizer online di bawah ini.

TinyJPG dan TinyPNG

Tools online ini dapat optimasi file gambar Anda sampai 70%, optimal proses dalam sekali optimisasi 20 gambar dan tiap gambar optimal memiliki ukuran 5MB, Cuma untuk optimisasi file berekstensi.jpg dan.png.

Kompresor.io

Beda hal dengan tinypng. Tools ini bisa optimasi file gambar sampai 90%, tidak cuma dapat mengotimasi file berekstensi.jpg dan.png tools ini bisa juga optimasi file.gif dan.svg. Optimal file untuk dioptimalkan 10MB tetapi sayang cuma bisa mengolah 1 gambar sekali optimisasi.

3. Navigasi yang Terlampau Sulit

Disini Anda harus berpikiran lebih keras kembali. Di bagian Navigasi Anda harus dapat pahami apa yang sebetulnya Anda dan beberapa pengunjung web harapkan. Tentukan navigasi bisa dilukiskan seperti menempatkan fondasi awalnya rumah.

Ketidakberhasilan dalam tentukan fondasi awalnya bisa berefek menyebabkan rumah Anda ambruk.

Ada langkah cepat yang dapat Anda menempuh untuk tentukan navigasi seperti apakah yang hendak Anda pakai: menanyakan dalam diri Anda sendiri. Apa yang penting Anda tanya?

Berikut banyak hal yang bisa Anda tanya ke dalam diri Anda untuk menolong menyiapkan pola navigasi.

Halaman apa yang diperlukan web ini?

1. Anda bisa menyaksikan rekomendasi web yang sesuai usaha/usaha Anda lakukan?
2. Apa tiap halaman mempunyai pola lain yang bertambah luas?
3. Apa content akan diperpecah ke bagian-bagian?
4. Apa arah khusus pengunjung Anda?

(Apakah mereka cari info? Atau mungkin mereka ingin jadi konsumen setia Anda? Jawaban pertanyaan ini akan tentukan apa web Anda membutuhkan mekanisme login atau tidak)
Dengan menjawab segala hal di atas dan pahami bagaimana content web Anda sama-sama terkait, Anda akan mendapati dasar dalam tentukan navigasi yang bagus. Berikut contoh-contoh web dengan navigasi baik yang dapat Anda menjadikan ide.

Designmuseum

Berikut yang diaplikasikan oleh designmuseum, yang hanya ada 1 menu di atas dan manfaatkan scroll sebagai navigasi khusus, berdasar rutinitas beberapa pemakai internet saat berkunjung sebuah web.

Jackjones

Menegaskan navigasi memakai ikon supaya mempermudah pemakai untuk pahami content di dalam navigasi yang dihidangkan

Manifold

Karena sebuah agen yang diperlukan infonya oleh pengunjung berbentuk portfolio/work, Deskripsi service dan Contact karena itu cuma ada 3 navigasi menu di web yang diaplikasikan oleh manifold.

4. Pemakaian Tipografi dan Warna yang Kurang Sama sesuai

Berbicara mengenai design tidak terlepas dari masalah tipografi dan warna. Karena topik ini tidak ada selesainya bila diulas dan penuturannya mempunyai potensi benar-benar panjang, kami tidak mengulasnya dengan detail di sini.

Pemakaian tipografi dan warna yang tepat bisa membuat design web Anda lebih stabil dengan merek (identitas) perusahaan Anda.

Yakin atau mungkin tidak (tetapi seharusnya Anda yakin, kepercayaan me I’m a designer), umumnya pengunjung tiba ke web cuma untuk membaca apa yang Anda pasarkan. Memiliki bentuk dapat berbagai macam, baik itu artikel, ulasan produk, atau info tentang usaha Anda. Mereka berkunjung web Anda untuk membaca text dan jarang-jarang sekali memerhatikan warna atau komponen design yang lain Anda pakai.

Oleh karena itu, lihat dengan cermat penyeleksian tipografi dan warna saat membuat sebuah web. Bahkan juga saat Anda berasa telah mempunyai warna dan tipografi favorite, alangkah baiknya kalau Anda lebih waspada.

Berikut beberapa web dengan kombinasi baik sekali di antara tipografi dan warna yang bisa Anda menjadikan ide.

Pangkalanystems

Contoh design yang clean, minimalist dan berkesan menawant.Dengan sentuhan hangat warna cokelat muda sebagai warna background dan dipadankan dengan pemakaian typografi Tipe Serif makin menegaskan kesan-kesan eksklusif dari produk yang dijajakan.

L’avenir

Ingin tampilkan kesan-kesan yang sah, professional dan clean L’avenir ialah misalnya. Memadankan warna hijau dan orange dan abu-abu muda sebagai warna background dan typografi sans serif untuk menegaskan citra professional.

5. Call to Action Kurang Menarik

Untuk Anda yang belum mengetahui apakah itu Call to Action contoh-contoh berikut dapat menolong Anda lebih pahaminya kembali. Sudah pernahkah Anda berkunjung halaman awalnya Facebook semacam ini?

Atau berkunjung halaman awalnya WordPress semacam ini.

Atau Anda suka belanja online di Lazada yang mempunyai halaman semacam ini?

Dari 3 gambar di atas, coba Anda lihat sisi yang diikuti kotak warna merah. Bisa saja sekarang ini Anda berpikiran jika ini ialah sebuah tombol. Ya, betul sekali. Call to Action (biasa dipersingkat sebagai CTA) memang umumnya berwujud tombol yang ditempatkan dalam sebuah web. Maksudnya supaya pengunjung lakukan satu perlakuan (misalkan tombol “Daftar Saat ini! “), arahkan pengunjung ke halaman web dengan info yang lebih komplet (misalkan tombol “Secara lengkap …”) dan sebagainya.

CTA yang bagus baiknya bisa tingkatkan pemasaran dalam sebuah web.

Salah satunya factor yang memengaruhi ini ialah design visual CTA. Di tempat ini ada dua komponen khusus yang penting Anda lihat: tombol dan text.

Design tombol CTA bisa disebutkan menarik jika kualitas dari design tombol itu sukses mengambil alih perhatian pengunjung. Tandanya, pengunjung tidak menanyakan, “Di mana saya harus mengeklik?” saat berkunjung web Anda.

Text dalam design CTA disebutkan maksimal jika text yang dibikin dapat memberikan keyakinan pengunjung jika mereka harus selekasnya lakukan apa yang Anda harapkan. Text ini mempunyai tujuan memengaruhi pemikiran mereka jika hal itu penting untuk dilaksanakan, supaya mereka tak perlu menanyakan ke diri kita dengan sangsi, “Kenapa saya harus click ini?”
Berikut contoh web dengan CTA bagus yang dapat Anda menjadikan ide.

Adobe Businesscatalyst

Tombol CTA dengan warna kuning dan text “Get Started For Free” yang paling terang dan gampang bisa dibaca akan mengambil alih perhatian pengunjung untuk selekasnya tekan ( mengeklik) tombol itu.

Zendesk

Peletakan tombol CTA yang prima, antara 2 gambar dan pas status ditengah-tengah dan text copy “Try Zendesk For Free” membuat desain CTA makin terang kelihatan dan nyaman untuk selekasnya memencet tombol CTA itu.

6. Slow Loading Page

Dari 5 point yang telah disebut sebelumnya, kecepatan loading ruang yang kerap dilalaikan oleh beberapa pendesain. Walau sebenarnya, ini terhitung salah satunya point utama dalam membuat sebuah web. Anda tentu cukup kerap merasakannya. Apa yang umum Anda kerjakan saat bertandang ke sebuah web tetapi halamannya tidak juga terbuka? Apa refresh halaman? Atau mungkinkah Anda akan selekasnya tinggalkan halaman itu?

Jika Anda tidak mau ini terjadi pada web Anda, seharusnya Anda periksa lagi beberapa hal yang bisa membuat loading proses web Anda lamban, misalnya :

Ukuran photo/gambar yang dipakai
Kepentingan content video
Script css dan javascript yang kebanyakan dan menyebabkan penyimpanan membesar
Service hosting yang Anda pakai
berikut tools untuk mengecek kecepatan loading page web

Googlepagespeed

Google Page Speed dapat menganalisis web dengan penampilan mobile dan dekstop jadi pada tiap komponen yang ada di web Anda ada analysa tertentu dari yang versus mobile dan versus dekstopnya, hingga ini akan memudahkan Anda untuk membenahi beberapa bagian tertentu seperti yang direferensikan oleh tools ini.

GTMetrix

Beda hal dengan Googlepagespeed, GTMetrix tidak menganalisis page speed pada penampilan web mobile tetapi memberi keunggulan pada nilai Yslow di mana nilai ini diambil dari rerata Googlepagespeed dan Yahoo, dan memperbandingkan dengan web yang sempat lakukan tes dengan GTMetrix.

Tampilan Mobile Kurang Oke

Yang ada dalam kotak merah itu ialah nilai hasil tes loading page dan yang di dalam kotak warna hijau itu komponen-komponen yang penting diperbarui.

Tes loading page dengan GTMetrix

Yang ada dalam kotak merah itu ialah nilai hasil tes loading page dan yang di dalam kotak warna hijau itu referensi komponen yang mana perlu diperbarui.

Kesimpulan

Citra yang bagus pasti bisa membuat beberapa konsumen setia lebih suka lakukan usaha dengan Anda. Lewat design web yang bagus, usaha Anda bisa kelihatan lebih memberikan keyakinan, dan ini maknanya Anda mempunyai peluang semakin besar untuk raih keberhasilan di internet.

Enam kekeliruan umum dalam pembikinan web yang sudah kami jabarkan di atas bisa Anda menjadikan bahan pelajaran. Kami harap, melihat dari kekeliruan yang sudah dilakukan seseorang, Anda bisa membuat website punya Anda sendiri dengan jauh lebih bagus.