Tinjauan Desain: Website Whiteboard Journal

tinjauan_desain_Whiteboardjournal

Sekarang ini mulai banyak website baru buatan lokal muncul, dan ini merupakan indikasi yang bagus untuk industri desain website lokal. Maka dari itu Jurus Grafis membuat ‘rubrik’ baru yaitu Tinjauan Desain (Design Review), yang pada saat ini membahas desain website sebuah majalah online bernama Whiteboard Journal.

Pengenalan Singkat

whiteboard_journal_logo

Whiteboard Journal adalah media publikasi online yang membahas bidang fashion, desain, hiburan dan seni. Kalau melihat materi yang di sampaikan tentu ini di tujukan untuk pembaca Internasional dan Lokal (menggunakan bahasa inggris).

Mempunyai fitur yang menarik seperti “Round Table” yang berisi wawancara dan diskusi (podcast) dengan narasumber dan topik yang sedang hangat. Fitur “Column” dan “Focus” dengan artikel dan insight yang mendalam, tidak lupa juga “W-Music” dan “City Guide” sebagai pelengkap yang menyenangkan.

Minimalis, Aksen dan Detail

whiteboard_journal_home_web

Desain homepage Whiteboard Journal sangat rapih, bersih dan tidak banyak basa basi. Sesuai dengan tagline mereka, A Concise Publication, publikasi yang ringkas. Di tunjukan dengan menggunakan slideshow di bagian atas (above the fold) untuk meng-emphasis artikel dan konten inti terbaru yang ada di website ini.

whiteboard_journal_news

Lalu di lanjutkan dengan lembut  ke berita terbaru di bawah slideshow. Yang menarik dari news feed ini adalah icon yang di gunakan pada masing-masing kategori berita, seperti penggunaan icon pensil untuk kategori Art & Design, icon gantungan baju untuk Fashion, dan lainnya. Cara ini memberikan detil yang membantu para pembaca untuk menemukan kategori yang sesuai dengan minat mereka.

whiteboard_journal_sidebar

Di bagian sidebar kanan sebenarnya biasa saja, karena kebanyakan hanya iklan yang di taruh disana. Tapi ada satu yang menarik perhatian saya yaitu sebuah widget “Latest Feature” yang menggunakan metode tabbed browsing untuk mengakomodasi konten yang lumayan beragam. Dan menurut saya cara ini sangat efektif sekali untuk website tipe majalah.

whiteboard_journal_footer

Dan ditutup dengan rapih oleh footer yang informatif, berisi semua kategori berita dan fitur website, termasuk tautan ke online store Whiteboard Journal. Tak lupa juga bagian footer di jadikan area monetisasi untuk menaruh banner iklan.

Sedikit permasalahan usability di header adalah logo Whiteboard tidak bisa di klik untuk kembali ke homepage. Saya rasa ini sudah menjadi standard pada semua website kalau logo itu jika di klik harus kembali ke homepage.

Halaman Berita

whiteboard_journal_news_single

Penggunaan foto dengan lebar yang sesuai dengan area konten membuat bagian ini tetap rapih, walaupun menurut saya besar font nya masih terlalu kecil, coba bayangkan orang yang membaca dengan resolusi 1440  ke atas, mereka pasti sedikit kesulitan.

whiteboard_journal_news_single2

Saya tidak mengerti mengapa tidak ada kolom komentar di akhir posting, rasanya ini bisa menjadi masukan. Atau memang sengaja tidak menggunakan kolom komentar?. Ini membuat kesan percakapan satu arah yang sudah tidak jaman lagi sekarang ini.

Halaman Fitur yang Unik

Kalau kita masuk ke salah satu fitur seperti “Round Table” maka layout yang di tampilkan menjadi agak berbeda. Sidebar di hilangkan sehingga area besar di tengah menjadi fokus. Kolom di bagi 2 sehingga kita merasa seperti membaca majalah cetak.

whiteboard_journal_roundtable

Yang menjadi masalah disini adalah flow membaca artikel, pertama karena tidak ada Drop Cap pada paragraf pertama, kedua karena tidak menggunakan H2 untuk huruf text yang lebih besar sebagai penanda dan ketiga tidak ada petunjuk kemana kita harus membaca selanjutnya, ke bawah atau ke kanan. Tipografi harus di perhatikan lagi di bagian ini yang menurut saya sangat krusial.

whiteboard_journal_roundtable2

Terakhir adalah pagination yang sangat terlalu kecil, kalau pembaca kurang jeli mungkin mereka melewatkan dan selesai membaca dengan bingung karena artikel belum selesai tetapi tidak ada lanjutannya lagi. Solusi nya adalah memperbesar angka pagination di bawah, dan berikan petunjuk yang jelas kita sekarang berada di halaman berapa.

Salah Satu Contoh Layout Toko Online yang Baik

whiteboard_journal_store1

Saya merasa bagian ini sangat baik, semua produk Whiteboard bisa langsung di lihat dengan mudah. Di tunjang dengan informasi ketersediaan barang pada setiap foto.

whiteboard_journal_store2

Yang kurang hanya tidak ada informasi harga sampai kita masuk ke dalam halaman detail produk. Tombol ‘Buy’ yang terlalu kecil dan kurang kontras (ini berpengaruh kepada psikologi kita untuk mengklik atau tidak), dan terlalu di ulang-ulang sampai 3 kali. Saya rasa cukup dengan 1 tombol yang lumayan besar, warna kontras (kuning atau hitam pekat?) dan di tempatkan di samping harga atau di akhir informasi.

Kesimpulan

Whiteboard Journal bisa di jadikan standard yang sangat baik untuk desain website bertipe majalah yang berisi kategori beragam. Walaupun ada beberapa masalah usability di sana sini, namun saya rasa itu masih dapat di maklumi dan hanya masalah minor saja.

Menurut kamu bagaimana desain interface website Whiteboard Journal? Yuk berdiskusi di kolom komentar :)

Dan kalau kamu tertarik website kamu di bahas di sini silakan kirimkan email ke,
hello [at] jurusgrafis.com atau jurusgrafis [at] gmail.com

Ayo berlangganan Jurus Grafis melalui Email dan RSS, supaya kamu tidak ketinggalan artikel menarik berikutnya!. Temui juga Jurus Grafis di Facebook dan ikuti Twitter Jurus Grafis untuk berita tambahan seputar desain.

Menikmati proses rancang website, khusus nya dari sisi tampilan antar muka dan penggunaan. Tidak bisa hidup tanpa Gmail, Google Reader dan Twitter. Sering menghabiskan waktu mengarungi samudra informasi.

Ada 19 Komentar Seru Tentang Posting Ini

  1. 30 January 2010

    wow, sangat inspiratif untuk sebuah website lokal om! dan sangat internasional menurut saya, hehehe
    tapi mungkin ga ya ditambahin bumbu kultur yang kental dengan indonesia? apakah akan jadi tambah menarik atau dibiarkan bergaya minimalis seperti itu aja yah?

    (at last! first to comment)

    • 31 January 2010

      sepertinya lebih efektif tetap minimalis, karena target nya internasional.. nafas lokal bisa di dapat dari artikel2 feature nya :) tidak harus berupa elemen grafis

      • 1 February 2010

        bener juga, hahaa..

  2. 30 January 2010

    Gua kira web bule, tau nya lokal, hehehe….kereeeenn!

  3. 30 January 2010

    Yang ngdesain siapa tuh Cad?

  4. 30 January 2010

    Masalah minor lainnya:

    1. HTML-nya jadi nggak valid gara-gara satu baris script DynamicDrive.
    2. Desainnya masih pake tabel.

    Other than that, it’s perfect.

  5. 30 January 2010

    Mantab!minimalis dan efektif,,,
    Untuk masalah logo Whiteboard yang tidak bisa di klik untuk kembali ke homepage. Saya rasa ini tidak terlalu masalah karena sudah tersedia tombol “home” yang jelas.

  6. 31 January 2010

    keren..keren.. :D

  7. 31 January 2010

    Social comments and analytics for this post…

    This post was mentioned on Twitter by jurusgrafis: Artikel Terbaru! – Tinjauan Desain: Website Whiteboard Journal @wjournal http://ow.ly/123WR…

  8. 31 January 2010

    thumbs up buat WBJ :thumbup:

  9. 1 February 2010

    Tau aja neh mas Richard website ky beginian =.=” saya mesti ketinggalan 2 langkah kebelakang

  10. 1 February 2010

    [...] This post was mentioned on Twitter by Richard Fang, rangga, singingbelly, Whiteboard Journal, Jurus Grafis and others. Jurus Grafis said: Artikel Terbaru! – Tinjauan Desain: Website Whiteboard Journal @wjournal http://ow.ly/123WR [...]

  11. 4 February 2010

    setuju dengan mk2, sayang masih menggunakan tabel… loading-nya jadi terasa lama…

  12. 4 February 2010

    Gw terinspirasi ama desainnya, terutama soal icon tsb.
    Cuma ga sreg ama typography-nya aja, terlalu kecil.

  13. 5 February 2010

    minimalis gag pernah mati dah…

    “Dan kalau kamu tertarik website kamu di bahas di sini silakan kirimkan email ke,
    hello [at] jurusgrafis.com atau jurusgrafis [at] gmail.com”

    heeeemmm takut dicaci maki dah klo ulas web buatan saya @_@

  14. 6 February 2010

    pakek WP ya Fang :D
    simple desainya menambah ciamix
    sayang berat load pertama saat buka flash di top baner dan feature_snip

    pluginnya banyak banget :D

    • 9 February 2010

      @kakday, wah bener abis kak, luama buanget, ampe pusing nungguinnya, apa band saya yang lemot ya???? he he

  15. 9 February 2010

    Seperti Richard bilang, ada persoalan usability di sana. Saya juga melihatnya begitu terutama di bagian detail artikel.

    Tapi layout keseluruhan rapi.

  16. 25 February 2010

    gila bener2 lama banget bukanya….
    belom sempet kebuka udah gw tutup…duluan

Mari Berkomentar!

*informasi yang di perlukan

Mau Berlangganan Jurus Grafis Melalui Email? Ya! tentu saja!