Desain Blog

5 Hal yang Saya Pelajari sebagai Seorang Desainer Web

Zaifhul Imam
Ditulis oleh Zaifhul Imam

Sebagai seorang web desainer, saya selalu memperhatikan desain dari situs web. Saya selalu mengutamakan desain yang bersih dan ramah pengunjung. Mulai dari navigasi yang teratur, warna yang sesuai, hingga responsiveness dari web itu sendiri. Sayangnya, banyak sekali situs web di Indonesia (terutama blog), menurut saya, mempunyai desain yang tidak menarik.

Banyak sekali para blogger indonesia yang membuat blog mereka berorientasi pada penghasilan website semata, terutama Google Adsense. Padahal, saya yakin jika mereka lebih mengutamakan pengunjung dengan cara mendesain website mereka dengan baik, maka penghasilan mereka pun akan meningkat.

Singkatnya seperti ini: desain yang baik > pengunjung betah melakukan searching di website > penghasilan meningkat.

Jika anda termasuk salah satu pemilik website/blog, maka anda bisa memanfaatkan 5 hal yang saya pelajari di bawah ini untuk meningkatkan desain dari situs anda:

1. Menggunakan template responsive

Salah satu tolak ukur dari desain web yang baik adalah menggunakan template yang responsive. Hal ini berarti situs tersebut dapat dilihat oleh pengunjung dengan jelas terlepas dari ukuran screen yang digunakan pengguna ketika mengakses situs anda. Oleh karena itu, sangat penting bagi semua pemilik website/blog untuk menggunakan template responsive, meskipun anda harus merogoh kocek lebih  untuk mendapatkan template responsive.

genesis-framework-2.0

Sebagai salah satu developer framework Genesis, saya menyediakan semua koleksi tema premium dari studiopress untuk anda download secara gratis. Saya berharap semua pengguna WordPress di Indonesia yang ingin mendapatkan kualitas template tema yang baik dan tentunya responsive dapat memanfaatkan akses yang saya berikan secara gratis ini di situs web saya.

2. Menggunakan font menarik dengan ukuran yang sesuai

Berapa banyak dari anda yang pernah mengunjungi website/blog dengan jenis font yang buruk ditambah dengan ukuran font yang kecil?

Tentu saja kemungkinan besar tindakan selanjutnya yang akan anda lakukan adalah keluar dari penampakan situs yang buruk tersebut, bukan? Saya pun begitu. Situs seperti ini sangat merusak mata anda, serta merusak otak para web desainer.

Jika anda mempunyai situs seperti ini, sebaiknya anda segera mengganti serta menyesuaikan ukuran font sebelum ada pengunjung yang berkomentar dan menghina situs anda.

Sebelum hal itu terjadi, saya berikan anda daftar font (Google) favorit saya yang bisa anda gunakan sebagai jenis font di situs anda:

Font tunggal:

  • Merriweather: Jenis font ini merupakan font favorit yang saya gunakan sebagai font untuk bagian <body> di situs web saya. Anda dapat menggunakan jenis font ini dengan mengintegrasikan template anda dengan Google Fonts.
  • Open Sans Condensed: Tidak bisa dipungkiri lagi, jenis font yang satu ini merupakan favorit dari para web desainer untuk bagian <heading> dari situs web mereka. Saya sendiri selalu mengombinasikan font Open Sans Condensed dengan Merriweather pada situs web saya.
  • Lato: Jenis font yang satu ini memiliki kemiripan dengan jenis font Merriweather, hanya berbeda pada kerampingannya saja.

Font kombinasi:

Jika anda ingin mengombinasikan jenis font sehingga menjadi lebih menarik lagi, anda bisa menggunakan 5 kombinasi populer dari Google fonts di bawah ini:

  • Lato dan Merriweather
  • Montserrat & Neuton
  • Oswald & Quattrocento
  • Playfair Display & Open Sans
  • Roboto Slab & Roboto

Sedangkan untuk ukuran font sendiri bisa anda sesuaikan dengan mengedit template CSS situs anda.

3. Situs mempunyai kolom komentar

Mungkin beberapa Anda berpendapat bahwa kolom komentar tidak termasuk dalam tolak ukur desain dari suatu web. Menurut saya, pendapat ini tidak sepenuhnya benar.

Steve Job dalam kutipannya mengatakan:

“Design is not just what it looks like and feels like. Design is how it works.”

Saya sangat setuju dengan pendapat dari salah satu masterpiece teknologi ini. Sebuah situs, entah itu web ataupun blog, diciptakan sebagai sebuah wadah untuk berkomunikasi antar sesama.

Dan itulah kenapa saya bersikeras menaruh kolom komentar sebagai salah tolak ukur desain dari web. Karena mengajak orang lain untuk terlibat dalam diskusi merupakan tujuan sekaligus cara kerja dari situs web itu sendiri.

4. Terdapat menu navigasi pada header dan footer

Salah satu kesalahan yang sering dilakukan oleh para pemilik situs web di Indonesia adalah menaruh semua menu navigasi situs mereka di bagian header semata. Sekilas ini bukan merupakan sebuah masalah yang perlu diperhatikan.

Namun pendapat seperti itu tidaklah benar, dan hal ini sangat pantas untuk diberi perhatian. Tidak ada jawaban pasti terkait hal ini. Tetapi, menurut saya standar dari desain web yang profesional dan menarik adalah memisahkan menu navigasi ke dua tempat, yaitu pada bagian header dan footer.

Untuk bagian header diisi dengan menu navigasi penting pada sebuah situs, seperti halaman “About”, “Home”, “Kategori”, “Produk”, “Jasa” dan lain-lain. Sedangkan untuk menu navigasi pada bagian footer, sebaiknya diisi dengan peraturan-peraturan dari web, seperti halaman “Kebijakan Privasi”, “Syarat dan Ketentuan”, dan sebagainya.

5. Warna yang konsisten dan menarik

Sebelumnya Mas Gee Jhon telah menulis artikel terkait dengan pemilihan warna utama pada blog serta pemilihan warna teks yang bisa anda baca nanti.

Dari sudut pandang saya sendiri, pemilihan serta penggunaan warna pada setiap elemen blog merupakan satu hal yang esensial untuk meningkatkan performa dari situs blog anda.

Namun, ada satu hal yang lebih penting daripada pemilihan warna, dan hal itu tidak lain adalah konsistensi. Dalam sudut pandang seorang desainer, sebuah situs web itu sebaiknya tidak menggunakan lebih dari 3 jenis warna pada situs blog. Bahkan saya menyarankan anda untuk menggunakan 2 warna saja.

Di antara berbagai macam warna yang tersedia, saya sangat menyarankan anda untuk menggunakan satu dari 3 warna di bawah ini sebagai warna utama pada situs anda:

  • Biru
  • Merah
  • Orange

Setelah itu, anda harus konsisten dengan warna yang anda pilih. Konsistensi terhadap pilihan warna anda, secara psikologis, akan membuat pengunjung anda betah karena penglihatan mereka tidak diganggu dengan perubahan warna setiap kali mereka mengakses halaman tertentu di situs anda.

Itulah 5 hal yang saya pelajari selama ini dan bisa anda gunakan untuk keperluan situs web/blog anda. Jika anda mempunyai pertanyaan, jangan segan untuk menanyakannya kepada saya dengan berkomentar di bawah.

Tentang penulis

Zaifhul Imam

Zaifhul Imam

Zaifhul Imam adalah seorang web desainer dan developer framework premium Genesis. Ia membantu para entrepreneur dalam membuat, mendesain, dan mengoptimasi situs web mereka.

Tulis komentar

15 Komentar

  • Saya mau tanya gan,

    saya mau jadi web desainer, lalu saat kuliah saya harus pilih jurusan apa ya? (bingung)
    Lalu apakah menjadi web desainer saya akan bisa membuat template sendiri?

    • wah entahlah bos, sy kurang paham dg jurusan teknik komputer sekarang. 🙂 tp ya jelas, seorang web desainer, bukan hanya bisa buat template, tapi luas lagi.

  • Maksih artikelnya mas zaifhul, saya junga sangat tertarik menggunakan genesis, tapi sayangnya koleksi theme magazine ala indonesia, atau paling tidak seperti theme “voice” yang dipake portal uang ini masih kurang ya di studipress, klo ada minta rekomendasinya ya.

    • Sekarang ini untuk platform tema bertipe magazine (berita) dari genesis sendiri baru terdapat dua, yaitu magazine pro dan news pro. Dan anda bisa merujuk ke website saya untuk mendownload keduanya.

      Kelebihan dari tema genesis itu bisa dikustom dengan mudah (asal paham dengan cara kerja frameworknya). Jika anda berminat, anda bisa menggunakan jasa saya untuk mendesain template kustom genesis. Anda hanya perlu memberikan saya draft desain tema yang anda inginkan. Setelah itu, saya akan lakukan pekerjaan desain webnya.

      Terima kasih 🙂

  • Hmmm… jadi nambah pengetahuan seputar web desain. Ngomong2, bagaimana pendapat tentang desain Portal-Uang bos Imam? Apa saja nih yang perlu diperbaiki, biar pengunjung PU tambah betah…

    Makasih atas tulisannya yg keren. sukses selalu. Dan ditunggu jawabannya… sy yakin pembaca PU lainnya pun ingin mendengarnya.

    • Untuk situs PU sendiri, desainnya menurut saya sudah bagus mas. Template temanya sudah responsive, warnanya juga sudah konsisten. Hanya ada dua hal saja yang menurut saya harus diperbaiki:

      1. Saya melihat huruf headingnya mas John dikasih font-weight: 400, padahal seharusnya untuk heading itu dikasih angka 700. Tapi pas saya coba ganti 700, malah tampilan headingnya jadi terlalu tebal. Menurut saya ini terjadi karena mas belum menginstall “font weight: 700” di bagian functions.php templatenya mas.

      2. Saran saya gambar featured imagenya juga disesuaikan sama warna situs webnya mas. Dan itulah sebabnya kenapa saya mengedit gambar “steve jobs” diatas dengan warna background biru: agar terkesan masuk dengan warna situsnya mas, meskipun tidak total.

      Kurang lebih dua hal itu saja saran saya mas. Terima kasih 🙂

      • oke thanks bos. masalah font weight memang sy set ke 400 aja agar tdk terlalu tebal. tp sy tertarik dg kalimat:

        “padahal seharusnya untuk heading itu dikasih angka 700.”

        ‘harus’ dalam artian apa itu bos? Murni masalah tampilan atau ada maksud dan tujuan lain, seperti misalnya terkait seo atau apa? Karena kalau murni masalah desain / tampilan, sy anggap angka 400 sudah pas, krn kalau terlalu tebal malah jadi jelek.

        tentang featured image, ini saran yg amat bagus. dan memang untuk gambar2 yg sy buat sendiri, kebanyakan memang bernuansa biru, krn emang sy suka warna biru. 🙂

        anyhow, thanks berat atas masukan, juga tulisannya.

      • Murni untuk tampilan mas. untuk font heading itu standarnya pada angka 700, termasuk entry-title.

        Ketebalan yang saya dapatkan dari situs ini tidak normal, saya yakin itu karena tidak dilakukan pemanggilan font-weight: 700 di bagian functions.php templatenya mas.

        Kalau seandainya dilakukan, mungkin ketika saya ubah CSS-nya, ketebalan dari fontnya akan terlihat lebih baik dari yg saya lihat sekarang.
        Meskipun begitu, semua terserah dari pilihannya mas Gee.

        Warna biru memang warna yang profesional mas. Itu sebabnya website besar menggunakan warna biru, seperti facebook, mashable, dll.

        Sama-sama mas Gee.