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!