Blogilicious Palembang 2011 - Desain blog (stripped)

Download Blogilicious Palembang 2011  - Desain blog (stripped)

Post on 01-Nov-2014

836 views

Category:

Design

1 download

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
  • 61. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi
  • 62. Kecepatan Teknis Cepat untuk dibuka
  • 63. Kecepatan Optimasi: Gambar Kode
  • 64. Kecepatan CSS sprite generator csssprites.com Analisa kecepatan Firefox Extension: YSlow addons.mozilla.org/en-US/firefox/addon/yslow/
  • 65. Membandingkan load time: whichloadsfaster.com
  • 66. Kecepatan Struktur Cepat untuk dipindai
  • 67. Aziz Hadi Photoworks | azizhadi.com/category/blog
  • 68. Kecepatan Konten Cepat untuk dipahami
  • 69. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi
  • 70. Tata letak C.R.A.P. Contrast Repetition Alignment Proximity
  • 71. Shimmering Pearl | n45y4.wordpress.com
  • 72. Pensil Warna Design | graphic-3d.pensilwarnadesign.com
  • 73. blog.faniez.net
  • 74. Jafis | jafis.net
  • 75. Tata letak White space
  • 76. myraffaell.com/blog
  • 77. albasit.Sketchbook | albasit.tumblr.com
  • 78. NavinoT | navinot.com
  • 79. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi
  • 80. Interaksi Ajak pengunjung berpartisipasi Feedback dan rating Komentar Kontribusi konten
  • 81. Interaksi Richard Fang | richardfang.com
  • 82. Interaksi gantibaju.com
  • 83. Blog ePalembang | blog.epalembang.com
  • 84. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi
  • 85. Aksesibilitas Bangun akses Usabale Cross-browser dan cross-platform
  • 86. Aksesibilitas Usable Simpel Fokus pada pengunjung Manusia pertama, mesin kedua
  • 87. Aksesibilitas Cross-browser IE, Firefox, Safari, Opera Cross-platform PC, Apple, Linux, mobile
  • 88. Aksesibilitas Tes! browsercam.com multibrowserviewer.com
  • 89. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi
  • 90. Teknologi
  • 91. Teknologi Pikirkan nilai tambah yang diberikan Jangan jadikan faktor penentu
  • 92. http://about.me/andisaleh
  • 93. Cara mendapatkan Theme Unduh yang gratis Beli yang berbayar Buat sendiri
  • 94. WordPresshttp://wordpress.org/extend/themes
  • 95. WordPresswpcharity.com
  • 96. Bloggerbtemplates.com
  • 97. Bloggerbloggerthemes.net
  • 98. Theme gratis Biaya: Rp0,- Fungsi general, tema general Sediki...

Recommended

View more >