Blogging Tips: Faktor Desain

Ribuan situs dan blog telah saya lewati, termasuk produk lokal dan luar negeri. Ternyata ada sedikit hikmah yang bisa dipelajari. Ungkapan Content is King sudah sering kita dengar, tapi menurutku Delivery is Queen. Unsur penyajian, atau delivery, bisa meliputi penampilan, tataan, dan alur penggunaan.

Dalam kesempatan kali ini, kita akan membahas unsur desain dan penerapannya di sebuah situs, tetapi bukan dilihat dari unsur seni. Karena seni itu relatif dan tergantung selera masing2 orang, maka kita lebih menekankan ke arah usability, agar keseluruhan situs lebih enak untuk dinikmati.

Sebelum kita melanjutkan, perlu diingat bahwa saya bukan seorang desainer dan tidak punya pendidikan tentang (web) design. Artikel di bawah merupakan ringkasan2 dari artikel2 yang pernah saya baca, dan ditulis dari sudut pandang seorang pengguna.

Tujuan Desain

Tiap halaman tentunya mempunyai suatu inti yang perlu ditonjolkan. Kita ambil contoh saja sebuah blog artikel yang anda baca ini, tentunya konsentrasi utama adalah artikel yang anda baca. Tapi masih banyak elemen2 lain seperti navigasi dan modul2 di sisi kanan yang perlu ditampilkan. Salah satu tujuan desain adalah menyajikan artikel utama sebagai unsur yang paling dominan, makanya artikel ini lebih lebar daripada sidebar di kanan.

Pemilihan Layout

Layout atau tataan utama, merupakan suatu kerangka dasar yang akan sering diulang di halaman2 selanjutnya. Pemilihan tataan dalam suatu situs mempermudah pengguna menjelajahi tiap halaman. Oleh karena itu diperlukan konsistensi antara tataan halaman pertama, dan halaman lainnya. Macam2 layout bisa dipilih, seperti fluid width atau fixed width (berat kiri atau berat kanan). Sedikit tips bagi desainer yang memulai dari awal, yaitu penggunaan Grid 960.

Warna & Kontras

Pemilihan warna dan aturan konstras adalah unsur yang paling parah dari situs2 amatir yang pernah saya jumpai. Pengunaan warna sangat penting untuk membuat suatu elemen lebih menonjol dari yang lain, termasuk membuat teks lebih gampang dibaca. Saran saya adalah stay natural, atau mengikuti warna2 alam, dan jangan sekali2 menggunakan warna2 neon untuk latar belakang. Gampangnya, mulailah dengan dengan warna hitam putih dengan gradasi, dilanjutkan dengan aplikasi warna. Untuk inspirasi urusan warna, silahkan coba ColourLovers.

Pengaturan Text

Perbandingan besar tulisan antara judul dan teks juga memudahkan pembaca untuk memilah2 isi bacaan. Pilihlah ukuran font normal (10-11 pt) untuk teks dan perhatikan line spacing agar tidak terlalu rapat. Salah satu tip yang biasa saya pakai adalah blok satu paragraf dengan Firefox browser (default setting). Perhatikan jarak antara baris seperti di foto di bawah, bila anda melihat ada ruang, berarti line spacing tidak terlalu rapat.

White Space

Trik lainnya adalah penggunaan white space, yaitu pengaturan ruang kosong di antara elemen2 halaman. Seperti jarak antara blok2 paragraf, dan elemen2 lainnya seperti modul dan navigasi. Untuk jelasnya, saya sarankan simak link berikut.

Masih banyak unsur2 desain yang bisa dipakai sebagai acuan, dan bukan berarti penerapan yang benar. Bila anda memulai suatu situs dari awal, dan tidak mempunyai latar belakan seni, sebaiknya cari yang profesional. :)

Bila anda juga seorang desainer, dan ada tips2 lain, silahkan berbagi. Pendapat pembaca juga sangat dihargai koq :)

Catatan: Artikel ini merupakan bagian dari kampanye One-Post-Per-Day. Silahkan simak artikel2 lainnya.

Rating 3.00 out of 5

Jangan lewatkan artikel berikutnya, silahkan berlangganan lewat RSS feed!


Posted in Blogging Tips, User Experience at August 12th, 2008.
Trackback URI: trackback
Tags: , , ,

21 Responses to “Blogging Tips: Faktor Desain”

  1. August 12th, 2008 at 10:26 pm # BARRYNo Gravatar

    Saya mau redesign blog tapi masih belum ada yang sreg nih.

  2. August 12th, 2008 at 10:40 pm # raminatorNo Gravatar

    Presentation/Design/Usability is queen. Setuju dengan assessment nya. Simple, well laid out, clear and no clutter is the best. A List Apart is a great example. Termasuk juga manggoaddict ;)

  3. August 12th, 2008 at 10:45 pm # Nigel SielegarNo Gravatar

    Sebagai designer … ini versi tips saya tentang topik2 diatas.

    Tujuan Desain: guru saya Milton Glaser selalu bilang :” design is all about intention”. Sudah ada luar biasa banyak contoh design dan product gagal dikarenakan “intention” tidak terkonsentrasi. Contoh paling gampang website lama dari barnes and noble. mungkin masih bisa didapat articlenya di web.

    Pemilihan Layout: didalam masalah blogging. kebanyakan blog isinya text heavy. Jadinya kunci utama untuk layout dan warna hanya satu, Information Hierarchy. Information hierarchy yang tidak terjaga membuat alur informasi yang dibaca menjadi tidak teratur juga.

    Warna rada tricky. tapi, ada cara curang yang bisa dipakai. Color combination adalah bagian design yang bisa ditiru tanpa perlu memakai ijin. website diatas boleh dipakai, cuman benarnya itu bukan yang terbaik. dikarenakan semua elemen design itu context dependent.

    Pengaturan Text: sama seperti layout , text ikut dalam aturan hierarchy. Untungnya website hanya memperbolehkan certain font. sehingga kemungkinan kombinasi font yang tidak sesuai sudah kecil (diluar masih banyak yang jelek sih). dan sama dengan white space, ajaran dari Bauhaus movement di jerman dulu adalah: “kita membaca white space diseputaran komposisi dan huruf, kita bukan membaca objectnya sendiri” oleh karena itu semakin inventive white spacenya semakin menarik bentuknya.

    and that’s it …. sekian sedikit tips dari saya. Cheers!

  4. August 12th, 2008 at 10:46 pm # Akhmad FathonihNo Gravatar

    Tips-tips yang menarik. Saya harus mulai mengikuti tips di atas supaya blog saya rada rapian dikit :d.

    Saya mo menyumbang satu link yang baru saja saya baca kemarin: http://feeds.feedburner.com/~r/Blogsessive/~3/359356284/

    Di sana ada beberapa tips tentang desain yang beberapa telah sempat disinggung dalam post di atas.

    Oh ya, untuk typography, I fell in love to this site: http://anima.dudut.com/

  5. August 12th, 2008 at 11:05 pm # kohaciNo Gravatar

    UseIT , itu situs yang bagus untuk membahas masalah desain dan konten sebuah situs, ada si Jakob Nielsen pakar web usebility

  6. August 13th, 2008 at 2:35 am # MahendraNo Gravatar

    kalau soal warna, saya lebih suka cari ide dari http://www.colorschemer.com :D

  7. August 13th, 2008 at 5:05 am # Akhmad FathonihNo Gravatar

    Jacob Nielsen? Banyak orang yang tak setuju dengan Jacob Nielsen recently. Soalnya banyak yang menganggap patokan yang dipakai Jacob Nielsen does not applies to web. Salah satu kritik yang kuingat dari Jacob Nielsen adalah: why blogger write a successive URL using “this”, “here”, and “this one” link.

    I am no designer, so I don’t know what’s the “correct” one. However “this”, “here” and “this one” is still make sense for me :p

    @Nigel
    great tips!

  8. August 13th, 2008 at 9:31 am # Ivan SielegarNo Gravatar

    @Barry - Pake Wordpress aja, banyak theme yang bagus2 koq.

    @Raminator - Terima kasih :)

    @Nigel - Guest Post ?

    @Akhmad - Thanks for sharing!

    @Kohaci - UseIT is one of the reason why I am writing this article. It’s like 1980’s sites. So, I go away as soon as I can :)

    @Mahendra - Nice site!

  9. August 13th, 2008 at 10:46 am # Paman GoberNo Gravatar

    Pemilihan theme menjadi sangat krusial bagi saya, blog saya ajah udah ganti puluhan theme, ga tau berapa lama theme yang baru ini akan bertahan

  10. August 13th, 2008 at 1:30 pm # garingNo Gravatar

    Biasanya pemilihian theme disesuaikan dengan suasan hati juga.

  11. August 13th, 2008 at 4:30 pm # tetetzetNo Gravatar

    ganti2 terus sambil bereksperimen tentunya..

  12. August 13th, 2008 at 9:56 pm # zeeNo Gravatar

    Memilih desain dan warna memang pekerjaan yg ga mudah, even mereka yg kerja di bagian layout aja bs pusing soal padu padan. Makanya saran ni buat yg hobi buat free theme, dibuatlah yg macam2 biar ada pilihan …

  13. August 13th, 2008 at 10:25 pm # bowbeeNo Gravatar

    Wah, masalah warna itu yang saya kurang bisa. Saya menyerahkannya kepada theme wordpress yang ada (saya rasa warna2 disana sudah bagus)

  14. August 15th, 2008 at 8:24 pm # jimmyNo Gravatar

    nyerah deh kalo soal design, kalo saya mending jadi programmer daripada designer :D

  15. August 20th, 2008 at 5:33 pm # hakimteaNo Gravatar

    kang Jimmy ini, padahal kan ga jauh2 amat dari programer ke designer…. tinggal loncat dikit kang :mrgreen:

    Btw, bener mas… sama ni pembahasannya… siiip :)

  16. August 20th, 2008 at 6:02 pm # Ivan SielegarNo Gravatar

    @Paman Gober - Jangan ganti melulu, yang berkunjung yang bingung.

    @Garing - Ini dia .. satu lagi :)

    @Tetetzet - Tambah satu lagi :)

    @Zee - Betul tuh, mungkin juga isa buat penghasilan tambahan.

    @Bowbee - Warna emang gampang2 susah koq. Banyak belajar di colourlover tuh

    @Jimmy - Hehehe typical dilema otak kanan dan otak kiri :)

    @Hakimtea - Makasih dah mampir. Sering2 yah :)

  17. August 24th, 2008 at 8:00 pm # Is Content Really The King - Geek Building The Bridge Part 2

    [...] the court’s jester would be an endless promotion. Either via (social) networking, or SEO. MangoAddict said content is the king, and delivery is the queen. Delivery is how you crown the content so it [...]

  18. August 24th, 2008 at 10:17 pm # Bayu AdityaNo Gravatar

    saya malah ga kepikiran white space pas ngetik :(

  19. August 29th, 2008 at 4:33 am # Blog Strategi + ManajemenNo Gravatar

    Desain techcrunch sebelum edisi terkini, saya suka sekali. Mereka baru ganti desain semiggu lalu, dan agaknya yang sebelumnya lebih bagus.

    Desain Gigaom juga oke.

    Kalau media manstream, saya suka dengan desain New York Times.

  20. September 4th, 2008 at 10:36 pm # ShugoshinNo Gravatar

    Wah ada triknya jg toh, kalo saya ga ngerti ngdesign, tp tipsnya bs dicoba, thanks.

  21. September 7th, 2008 at 6:31 pm # IwanNo Gravatar

    saya mau sih redesign blog. kepengennya sih di wrodpress. tapi kalo mau redesign sesuai dengan selera kita, harus bayar ya? makanya saya pake blogspot aja.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>