blogilicious palembang 2011 - desain blog (stripped)

Download Blogilicious Palembang 2011  - Desain blog (stripped)

Post on 01-Nov-2014

839 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

Peran desain blog dan prinsip-prinsip desain blog yang baik. Dibawakan di Blogilicious Palembang, 5 Juli 2011. Full presentation version: http://db.tt/l5mnefI

TRANSCRIPT

  • 1. Desain Blog Palembang | 5 Juni 2011
  • 2. http://about.me/andisaleh
  • 3. Peran Desain Blog Antarmuka
  • 4. Antarmuka Back-end Front-end Konten Pengunjung Antarmuka
  • 5. Peran Desain BlogAntarmuka Teknis Tema
  • 6. iniJIE.com | inijie.com
  • 7. Blog Teknologi | teknologi.gravisware.com
  • 8. Kartunmania | kartunmania.wordpress.com
  • 9. Keluarga Nugraha | keluarganugraha.net
  • 10. Jurus Grafis | jurusgrafis.com
  • 11. GoenRocks Vlog | goenrock.com
  • 12. Ruang Freelance | ruangfreelance.com
  • 13. idBlogNetwork | idblognetwork.com
  • 14. Tema Topik utama (Niche/ceruk) Elemen visual yang relevanBlog yang masuk akal & dapat dipercaya
  • 15. Peran Desain BlogAntarmuka Teknis Tema Identitas
  • 16. Per Mei 2011163 juta blogRata-rata 67 ribu blog baru/hari Sumber: blogpulse.com
  • 17. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi
  • 18. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi
  • 19. Konsistensi Ekspektasi
  • 20. Konsistensi Anatomi blog Newbie Fotografer Blog | patrush.wordpress.com
  • 21. Konsistensi Anatomi blog Header Navigasi Konten Sidebar Newbie Fotografer Blog | patrush.wordpress.com
  • 22. Header NavigasiSidebar Konten Coretan Tanganku | m-aulia-r.blogspot.com
  • 23. Header NavigasiSidebar Konten Coretan Tanganku | m-aulia-r.blogspot.com
  • 24. Jurnalnya Nike | nike.rasyid.net
  • 25. My Xperience | fandagri.blogdetik.com
  • 26. Konsistensi Logo Pojok kiri atas Tagline di bawah logo Taut ke halaman depan
  • 27. Konsistensi Home Pada logo Pilihan pertama dalam navigasi Beberapa terminologi
  • 28. bennychandra.com
  • 29. Itik Kecil | itikkecil.wordpress.com
  • 30. HIPMI Sumsel | hipmisumsel.org
  • 31. Tpas Pangacaprukan Mojang Bandung | liezmaya.web.id
  • 32. Konsistensi Navigasi Horizontal di bagian atas Halaman dan kategori penting
  • 33. Konsistensi Kotak pencarian Kanan atas Mencari ke dalam blog
  • 34. Konsistensi Sidebar Kategori dan Arsip Fitur pendukung
  • 35. Konsistensi Footer Di bagian bawah Navigasi sekunder Pernyataan copyright, peta situs, kontak webmaster
  • 36. Konsistensi Konsistensi memberi pengunjung gambaran yang jelas mengenai: di mana mereka berada apa yang bisa mereka lakukan Melalui bahasa visual yang telah mereka kenali dari blog/situs lain
  • 37. Konsistensi
  • 38. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi
  • 39. Navigasi
  • 40. Navigasi Menu navigasi utama Bagian khusus promosi konten Halaman peta situs dan arsip Tautan internal di dalam tulisan Fitur pencarian
  • 41. Menu navigasi utama Posisi yang mudah dilihat dan dikenali Tautan yang jelas ke Home Tautan ke halaman/kategori utama lain Raditya Dika | radityadika.com
  • 42. Promosi konten Tulisan terbaru Tulisan terpopuler Komentar terbaru Kategori & arsip bulanan imansulaiman.com
  • 43. Peta situs & arsip Berdasarkan kategori Berdasarkan tanggal terbit Jimmy Sun | jimmysun.net
  • 44. Breadcrumb! Hirarki yang jelas Taut, kecuali item terakhir YopDesign | yopdesign.com
  • 45. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi
  • 46. Tipografi cuddlysheepdesigns.be
  • 47. Tipografi Readable Kontras warna Lebar blok teks
  • 48. Tipografi Readable
  • 49. Tipografi Readable
  • 50. Tipografi ReadableKontras warnahttp://snook.ca/technical/colour_contrast/colour.html
  • 51. Tipografi Readable Blok teks ~ 5080 CPL (karakter per baris)
  • 52. Tipografi Readable Priyadis Place | priyadi.net
  • 53. Tipografi Readable
  • 54. Tipografi Scalable Gunakan ukuran font relatif
  • 55. Tipografi Scalable andi.saleh.web.id
  • 56. Tipografi Available Fontstack Gunakan fail-safe font
  • 57. Tipografi media.24ways.org/2007/17/fontmatrix.html
  • 58. Tipografi Sans-serif Calibri, Tahoma, Geneva, Arial, Helvetica Neue, Helvetica, sans-serif Serif Constantia, Lucida Bright, Liberation Serif, Georgia, serif
  • 59. Tipografi Web font google.com/webfonts
  • 60. kartunama.net/blog
  • 6