Top Menu

Dapatkan buku The Power of Photoshop. Disertai bonus video tutorial. Harga: Rp 78.800 Rp 54.500

Mengintip Konsep Redesain DesainDigital

Seminggu ini saya memiliki projek personal yang sangat menarik, redesain situs. Ada dua pihak yang terlibat dalam proses ini, saya dan seorang rekan (yang secara spesifik minta tidak disebutkan namanya). Tugas saya menyiapkan mockup situs dalam format PSD lalu rekan saya mengubahnya menjadi theme wordpress. Di sini, saya akan memperlihatkan proses yang terjadi di balik layar dalam redesain situs ini. Mudah-mudahan proses yang terjadi di situs ini, berguna juga bagi Anda yang berminat melakukan redesain.

Menganalisa Kelebihan dan Kekurangan Desain Lama

Proses redesain cukup menyulitkan, apalagi jika Anda sudah memiliki cukup banyak artikel didalamnya. Selain itu, belum tentu pengunjung rutin Anda akan menyukai tampilan baru yang tentu saja asing baginya. Langkah pertama dalam melakukan redesain adalah menganalisa kelebihan dan kekurangan desainnya. Jika memang kekurangannya cukup besar, maka redesain mungkin saja mutlak diperlukan. Jika ternyata kekurangan itu masih bisa ditolerir, sebaiknya projek redesain dipikirkan kembali dengan cermat.

Salah satu kekurangan utama desain lama adalah kolom isi terlalu sempit. Sebuah situs tutorial idealnya bisa menampung gambar dengan lebar hingga 600px. Di desain lama, lebar gambar maksimum 460px. Kesulitan ini sangat terasa ketika menulis tutorial menggambar laptop, saya tidak bisa mengambil gambar secara lebih dekat tanpa mengorbankan detail bagian lain. Karena situs ini memang fokus pada tutorial, maka kekurangan ini cukup fatal dan redesain memang pilihan yang cukup masuk akal.

Kelebihan yang dimiliki situs lama adalah proses scan artikel sangat mudah. Setiap artikel diawali dengan sebuah gambar besar yang sangat menarik perhatian pembaca. Gambar besar ini bisa diklik menuju ke artikel terkait. Fitur ini sangat saya sukai dan akan tetap dipertahankan.

Menentukan Fungsi dan Gaya Desain

Bagian ini bersifat lebih personal. Setiap orang akan memiliki standar yang berbeda dalam hal ini. Saya sendiri lebih menyukai desain yang minimalis. Fungsi desain yang saya inginkan adalah membantu pembaca fokus pada content. Saya tidak berminat menggabungkan elemen-elemen desain yang wah dan menarik perhatian. Saya menginginkan agar pembaca dapat memperoleh informasi situs dengan mudah dan cepat.

Membandingkan Desain Lama dan Baru

Setelah selesai dengan desain, berikutnya mengevaluasi hasil yang diperoleh. Di bawah adalah beberapa perubahan yang saya lakukan.

Header diperkecil. Dalam desain lama, fokus pengunjung akan langsung menuju ke header besar. Dalam desain baru, huruf D yang selama ini menjadi khas avatar saya berperan juga sebagai logo situs. Ukurannya yang kecil, membuat pengunjung lebih mudah untuk fokus pada isi.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Gambar yang menyertai setiap artikel tetap muncul di desain baru, hanya saja kali ini lebih kecil. Gambar bisa diklik untuk menuju ke artikel terkait. Desain ini sangat khas Psdtuts+. Saya memang fans desain-desain Collis, pendiri psdtuts+.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Kolom artikel dibuat lebih lebar. Kini lebar gambar bisa mencapai 550px yang tentunya lebih cocok untuk tutorial.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Di desain lama saya menambahkan gambar kertas, tulisan tangan asli, dan avatar untuk latar footer. Di desain baru saya membuatnya lebih sederhana menggunakan kotak-kotak.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Tampilan avatar komentar diperbesar. Ini memberi penghargaan lebih besar pada pengomentar.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Saya menambahkan biodata penulis di bagian dalam artikel. Posisinya tepat setelah excerpt, ini terinspirasi dari layout Design Instruct. Ukuran avatar dibuat sangat besar agar profil penulis lebih menonjol dan sebagai bentuk penghargaan lebih pada penulis. Saya memang berencana menerima penulis tamu, jika ada yang tertarik.

mengintip konsep redesain desaindigital

Beberapa hari saya mulai enjoy nge-tweet. Jadi, di bagian atas situs ditambahkan tweet terakhir saya.

mengintip konsep redesain desaindigital

Saya juga mengedit halaman error 404 agar terlihat unik.

mengintip konsep redesain desaindigital

Saya ingin memberikan sentuhan pribadi pada situs ini, jadi saya tambahkan satu-satunya foto profil saya yang tersedia. Kesan personal ditunjukkan juga dengan penggunaan font bergaya handwriting. Teks itu dibuat tidak lurus dan sedikit menikung agar memberi kesan alami. Sedikit bayangan custom saya tambahkan agar foto terlihat 3D dan tidak membosankan.

mengintip konsep redesain desaindigital

Akhirnya, saya harap Anda menyukai desain baru ini. Ingat, bahwa desain ini belum final, masih ada kemungkinan untuk berubah. Saya tunggu saran dan kritik Anda.

Di artikel berikutnya, saya akan membahas tutorial pembuatan mockup situs di Photoshop. Tunggu saja!

,

31 Responses to Mengintip Konsep Redesain DesainDigital

  1. Richard Fang @ Jurus Grafis 24 August 2010 at 9:41 pm #

    lebih fungsional, tapi untuk link mungkin bisa di pakai warna yg agak “keluar”. Soalnya sekarang jadi “sama” semua kesan nya :)

    jawaban interview masih di tulis, besok gue kirim yah hehehe

    • jeprie 24 August 2010 at 10:15 pm #

      Terima kasih. Saya masih mencari kontras yang tepat. Sedang mencoba menghindari pure black di atas putih.

  2. Setia Nugraha 24 August 2010 at 11:09 pm #

    Keren … Simple … clean … minimalis … memang mirip2 tutplus … Like it!!

    • jeprie 24 August 2010 at 11:29 pm #

      Terima kasih.

      Desain ini menonjolkan fungsi dari pada efek Wow!-nya. Jadi, sengaja dibuat sangat simple.

  3. ajir 24 August 2010 at 11:54 pm #

    nice bg, keseluruhannya bagus..lebih rapi dan elegan.
    Saya suka efek shadow yang disudut halaman artikel, cool!
    dan yang nambah kerennya, sekarang udah nampilin foto profil, jadi lebih terkesan wellcome dan tidak misterius lg. :D

    cuma bagian authornya apa gak lebih baik bahasa Indonesia bg?

    • jeprie 25 August 2010 at 12:02 am #

      Terima kasih. Kalau dibiarkan begini saja, penuh blok-blok teks, tampilan situs akan terlalu biasa dan sama sekali membosankan. Perlu ada wow factor, sesuatu yang membuatnya unik. Karena memang prinsip awal desain ini minimalis, maka saya tambahkan saja sedikit bayangan yang memberi kesan kedalaman. Semoga menyukainya.

      Saya ingin agar profil saya bisa dibaca oleh orang luar yang membuka situs ini. Berhubung WPML, plugin dua bahasa yang saya gunakan, tidak bisa memisahkan profil info, terpaksa ini menggunakan bahasa Inggris.

      Bagian yang tidak bisa diterjemahkan lainnya, seperti tombol komentar, data jumlah komentar, metadata artikel terpaksa masih menggunakan bahasa Inggris. Harap maklum. :)

  4. rismaka 25 August 2010 at 3:12 am #

    Secara umum desain yang sekarang lumayan bagus mas. Namun kalau boleh, saya ingin mengkritisi beberapa poin (menurut saya) yang kurang cocok.

    1. Layout antara judul tulisan dengan gambar kurang pas. Lebih baik gambar disejajarkan dengan paragraf pertama, sehingga lebar judul tulisan proporsional dengan lebar isi (konten). Lihat gambar 1.

    2. Untuk kolom biografi, terdapat dua buah link dengan anchor text yang sama (author=Mohammad Jeprie). Bagi saya hal ini adalah kesia-siaan. Lebih baik tidak diberi judul nama author, toh kata/frase “Mohammad Jeprie” juga sudah disebut di bagian deskripsinya. Lihat gambar 2.
    Ukuran avatar di kolom biografi kurang besar, tidak proporsional dengan lebar kalimat deskripsi.

    3. Apa tujuan ditampilkannya twitter di BAGIAN ATAS HALAMAN BLOG? Untuk informasi kah? Agar difollow kah? Bila memang bertujuan begitu, maka lebih baik kolom twitter ditempatkan di bagian yang lebih sering dilihat/dipindai oleh pembaca dengan ukuran huruf yang lebih besar. Mata saya mengabaikan bagian twitter tersebut, karena memang letaknya yang tidak strategis dan ukuran hurufnya yang terlampau kecil. Lihat gambar 3.
    Owh ya, sudah umum diketahui kalau warna dari gambar burung twitter adalah biru, bukan hitam. CMIIW.

    4. Ada dua buah link “follow twitter”. Lihat gambar 4. Lebih baik hilangkan salah satunya. Disamping menghemat tempat dan http request, hal itu juga tidak akan membingungkan pembaca.

    5. Yang terakhir, yang bagi saya cukup “parah”. Adalah terdapat pengulangan paragraf. Lihat gambar 5. Yang pertama adalah paragraf yang digunakan sebagai excerpt, dan yang kedua di awal tulisan tepat di bawah kolom biografi. Hal tersebut berpeluang besar dapat membingungkan pembaca.
    Solusinya mungkin adalah menempatkan kolom biografi persis di bawah judul tulisan, atau di akhir tulisan.

    • jeprie 25 August 2010 at 5:14 am #

      Terima kasih atas kritiknya yang cukup mendalam.

      1. Saya memang sejak awal menginginkan tampilan thumbnail dan judul dua kolom. Jadi, sepertinya untuk yang ini harga mati… ;)

      2. Menghapus nama di bagian meta data akan membuat desainnya beda dengan di halaman depan. Ini akan menimbulkan masalah baru. Saya akan mencoba memperbaikinya.
      Ukuran avatar tidak perlu diubah tapi panjang info penulis yang perlu diatur kembali.

      3. Twitter itu memang tidak akan ditonjolkan, hanya sekadar mengisi ruang kosong saja. Ikon burung sengaja berwarna hitam agar tidak terlalu mencolok. Walaupun begitu, akan saya coba mengubahnya ke biru.

      4. Sebetulnya memang sudah saya rencanakan menghapus itu tapi lupa.

      5. Saya kurang perhatian dengan penulisan excerpt di artikel ini. Untuk artikel lama, terpaksa akan tetap terjadi pengulangan karena saya tidak punya waktu untuk memperbaikinya satu per satu.

  5. cOcO dEviL 25 August 2010 at 3:57 am #

    WoW,, keren… keren… keren BGT mas jep…

    Tampilan brux yg mnimalis terlihat soft looking, prubahan tampilan avatar, header dan link artikelx jg sesuai. membuat pengunjung lebih fokus pada artikel dan terlihat nyaman, very nice job mas jeprie… :D

    • jeprie 25 August 2010 at 5:16 am #

      Terima kasih. Memang ada banyak elemen yang dibuang agar desainnya tetap berkesan minimalis.

  6. Padly 25 August 2010 at 4:07 am #

    Keren Mas, cuma logo headernya mungkin perlu disesuaikan dengan Gambar yang menyertai setiap artikel, terlalu kecil kali ya?

    Oh iya, satu lagi… fixed Follow me sepertinya dihilangkan saja Mas, terlalu mengganggu sepertinya (warna birunya gimana gitu!), lagian kan sudah ada follow us disidebar.

    • jeprie 25 August 2010 at 5:19 am #

      Gambar yang di header sebetulnya dimaksudkan sebagai logo situs, lebih bersifat professional.

      Yang di dalam adalah gravatar, gambar identitas penulis. Gambar ini akan berubah tergantung penulisnya.

      Badge Follow Me sudah dihilangkan. Sekarang jauh lebih simple lagi.

  7. ardianzzz 25 August 2010 at 11:39 am #

    Secara umum sudah bagus Mas Jeprie, mungkin sedikit menyoroti detil saja.

    1. Yang di atas itu Navigasi? yeah, itu penting. Dapat dibuat lebih menonjol lagi. :)
    2. Akan lebih sip jika margin vertikal dan horizontal pada blok sidebar dibuat sama.
    3. Tweet ballon, terlihat 3D dengan efek “pressed”. Saya melihat layout ini didominasi 2D.
    4. Kotak pencarian dapat lebih dimaksimalkan.

    Efek shadhow mengingatkan pada WebdesignLedger. Nice :)

    • jeprie 25 August 2010 at 12:03 pm #

      Detail, itu yang sangat penting.

      1. Saya benar-benar belum punya ide untuk ini. Saya tunggu kalau ada masukan lagi tentang ini.
      2. Trims. Saya tidak sempat memperhatikan itu.
      3. Betul sekali. Tidak serasi dengan desain overall. Saya coba perbaiki lagi.
      4. Di FF tidak keluar teks search-nya. Akan dicoba diperbaiki.

      Terima kasih kritik dan sarannya.

    • ardianzzz 25 August 2010 at 8:30 pm #

      Ada redudansi pada navigasi. Saya lihat konten navbar atas diulangi pada konten sidebar “kategori”. Pendapat saya lebih baik diletakkan saja di sidebar beserta kotak pencariannya. Untuk navbar atas hanya disisakan Logo (logo berfungsi sebagai ‘link to home’), About & Kontak.

    • jeprie 25 August 2010 at 11:52 pm #

      Idenya bagus sekali. Menjaga konsep minimalis dengan membuang bagian-bagian yang tidak diperlukan.

      Saya khawatir ini akan mempersulit pengunjung karena sidebar kategori mungkin akan terlalu jauh ke bawah. Saya ingin menonjolkan buku saya juga di sidebar.

      Menghilangkan link HOME ide yang bagus. Memang itu tidak diperlukan. Nanti saya coba.

  8. Jaka Zulham 25 August 2010 at 1:30 pm #

    Sangat professional dan elegant mas jeprie…..

    Tapi, saya masih rindu dengan gaya tulisan tebal itu mas… (seperti thumbnail gambar pertama), dan juga saya sendiri kurang suka dengan font calibri itu…

    juga untuk bagian kategori, post populer dan post terbaru, sepertinya kurang bagus, kalo bahasa saya “ceplos gitu”…

    • jeprie 25 August 2010 at 1:41 pm #

      Di desain sebelumnya, teks header tidak bisa diseleksi. Di sisi visual bagus karena mudah dibaca, tapi dari sisi fungsi tidak begitu bagus.

  9. Hengki 25 August 2010 at 11:26 pm #

    Saya suka biodatanya yang sekarang. Terkesan humoris di sela-sela artikel yang dapat dibilang serius.

    Menurut saya, seandainya mas pun menggunakan desain yang wah, tidak akan mengurangi pengunjung blog mas. Malah mungkin menjadi inspirasi. Asalkan tidak memerlukan waktu load yang tinggi, mengingat ini adalah blog desain grafis, tentunya dari segi konten, nantinya akan memerlukan banyak sekali load gambar.
    Tetapi semua itu dikembalikan lagi pada si pemilik blog. Dengan menggunakan desain yang minimalis pun, dapat memikat bahkan membuat pembaca fokus pada artikel.

    • jeprie 25 August 2010 at 11:43 pm #

      Terima kasih. Perlu diketahui bahwa identitas saya tetap dirahasiakan hingga saat ini.

      Desain situs ini sengaja dipilih minimalis agar proses loadingnya lebih mudah. Setiap tutorial pasti berisi banyak gambar, jadi ini akan cukup membantu.

      Memang itulah tujuan desain ini, mempermudah pembaca fokus pada konten.

  10. Ani 26 August 2010 at 1:05 pm #

    biarlah istri, keluarga dan orang2 dekatnya yang tahu identitasnya :)

  11. iskandaria 27 August 2010 at 7:20 am #

    Saya merasa kontras warna font utama pada konten sudah lebih tajam dari sebelumnya. Apa karena mas Jeprie ubah kode warna font-nya?

    Untuk sidebar, sepertinya antar list link-nya perlu diberi pembatas berupa garis solid atau dot. Bisa juga berupa dashed. Biar antara satu list dengan lainnya bisa lebih dibedakan.

    Atau kalau tidak mau diberi pembatas/border, bisa juga diberi penanda berupa (misalnya) bullet pada setiap awal list link-nya. Bisa menggunakan image/gambar yang dipanggil dengan url sumbernya pada ul li. Sementara ini dulu penilaian saya.

    • jeprie 27 August 2010 at 8:44 am #

      Antar link di sidebar saya rasa tidak perlu pembatas, karena ketika hover keluar garis di bawahnya.

      Image penanda list saya rasa tidak dibutuhkan. Untuk style minimalis seperti ini, lebih baik menahan diri tidak menambahkan elemen yang tidak begitu penting.

      Saya sudah menambahkan padding pada list agar jaraknya sedikit berjauhan. Mudah-mudahan ini cukup menambahkan.

      • iskandaria 27 August 2010 at 9:05 am #

        Memang sih, dengan padding yang cukup dan keluar garis saat dihover sudah mendukung keterpindaian. Apalagi teks navigasi pada sidebar situs ini rata-rata tidak begitu panjang. Namun untuk situs/blog yang teks linknya mayoritas panjang, pemberian batas berupa garis atau penanda list cukup membantu.

  12. iskandaria 27 August 2010 at 7:34 am #

    Oya, warna link pada navigasi atas saat dihover (disorot pointer/kursor) terkesan tenggelam. Efek yang bagus dan mendukung keterbacaan menurut saya yaitu dengan menyetel agar warna latarnya berubah saat dihover. Warna font dipilih hitam saja saat dihover. Kalau abu-abu terkesan tenggelam dengan warna latarnya.

    Mungkin konsep navigasi di blog saya bisa jadi sedikit acuan. Walau navigasi atas blog saya tidak menggunakan block sebagai latar link-nya (pada halaman single), tetap cukup terbaca, baik saat sebelum dihover maupun saat dihover.

    Solusi lain untuk navigasi atas blog ini, mungkin bisa dibuat sebagai block (dengan latar putih). Ketika dihover, warna latarnya disetel agar berubah. Misalnya jadi coklat tua atau warna gelap lainnya. Dan warna font bisa diubah jadi putih saat dihover. Jadi ada kontras yang jelas pada saat dihover dan saat sebelum dihover.

    • jeprie 27 August 2010 at 8:49 am #

      Kalau navigasi atas diubah, saya rasa saya harus mengubah juga semua navigasi di situs. Saya rasa, ini sudah terlihat baik di bagian lain dan cukup bagus juga untuk di navigasi atas.

      Terlalu banyak kontras juga menurut saya kurang bagus. Saya lebih menyukai perubahan-perubahan yang subtle, lembut dan tidak begitu mencolok.

  13. grandchief 27 August 2010 at 4:07 pm #

    Wah kebetulan saya juga sedang redesain blog saya juga mas,bisa buat inspirasi juga untuk memikirkan hal-hal tersebut.

    Simple but powerfull kesan pertama ketika melihat blognya mas Jeprie

    • jeprie 27 August 2010 at 4:17 pm #

      Sebaiknya redesain dipikirkan matang-matang. Jika tidak perlu sebaiknya realign saja, membuang bagian yang tidak perlu, memperbaiki kontras, dst.

      Saya mempertimbangkan redesain situs ini cukup lama.

  14. satrya 27 August 2010 at 6:21 pm #

    Mas gmn kalo menu navigasi (home,about) dipindah saja ke atas. bagian paling atas layout mksudnya.

    Oia, satrya rekomendasikan plugin jqeruy lazy load dan WP CSS mas, bila banyak gambar dalam blog. Bila bingung cara memasang/menggunakan kedua plugin ini bisa tanya satrya mas lewat twitter atau email juga boleh mas.

  15. akhyar 30 August 2010 at 7:41 pm #

    Baru sempat mampir sekarang. Eh, ternyata beneran bikin mockup theme wordpress buat diri sendiri :D

    Btw, ditunggu tutorialnya :D

  16. Simon | PT Indonesia 3 September 2010 at 3:08 pm #

    Ternyata me-redesain sebuah sebuah situs benar-benar sulit. (mungkin karena saya tidak memiliki dasar pengetahuan sama sekali ttg photoshop ;;; :) ).

    Tapi thanks, hal ini menambah wawasan pengetahuan bagi saya.

    keep blogging

    -salam

Tinggalkan komentar Anda.