Blogilicious Palembang 2011 - Desain blog (stripped)

Download Blogilicious Palembang 2011  - Desain blog (stripped)

Post on 01-Nov-2014

836 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

<ul><li> 1. Desain Blog Palembang | 5 Juni 2011 </li> <li> 2. http://about.me/andisaleh </li> <li> 3. Peran Desain Blog Antarmuka </li> <li> 4. Antarmuka Back-end Front-end Konten Pengunjung Antarmuka </li> <li> 5. Peran Desain BlogAntarmuka Teknis Tema </li> <li> 6. iniJIE.com | inijie.com </li> <li> 7. Blog Teknologi | teknologi.gravisware.com </li> <li> 8. Kartunmania | kartunmania.wordpress.com </li> <li> 9. Keluarga Nugraha | keluarganugraha.net </li> <li> 10. Jurus Grafis | jurusgrafis.com </li> <li> 11. GoenRocks Vlog | goenrock.com </li> <li> 12. Ruang Freelance | ruangfreelance.com </li> <li> 13. idBlogNetwork | idblognetwork.com </li> <li> 14. Tema Topik utama (Niche/ceruk) Elemen visual yang relevanBlog yang masuk akal &amp; dapat dipercaya </li> <li> 15. Peran Desain BlogAntarmuka Teknis Tema Identitas </li> <li> 16. Per Mei 2011163 juta blogRata-rata 67 ribu blog baru/hari Sumber: blogpulse.com </li> <li> 17. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi </li> <li> 18. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi </li> <li> 19. Konsistensi Ekspektasi </li> <li> 20. Konsistensi Anatomi blog Newbie Fotografer Blog | patrush.wordpress.com </li> <li> 21. Konsistensi Anatomi blog Header Navigasi Konten Sidebar Newbie Fotografer Blog | patrush.wordpress.com </li> <li> 22. Header NavigasiSidebar Konten Coretan Tanganku | m-aulia-r.blogspot.com </li> <li> 23. Header NavigasiSidebar Konten Coretan Tanganku | m-aulia-r.blogspot.com </li> <li> 24. Jurnalnya Nike | nike.rasyid.net </li> <li> 25. My Xperience | fandagri.blogdetik.com </li> <li> 26. Konsistensi Logo Pojok kiri atas Tagline di bawah logo Taut ke halaman depan </li> <li> 27. Konsistensi Home Pada logo Pilihan pertama dalam navigasi Beberapa terminologi </li> <li> 28. bennychandra.com </li> <li> 29. Itik Kecil | itikkecil.wordpress.com </li> <li> 30. HIPMI Sumsel | hipmisumsel.org </li> <li> 31. Tpas Pangacaprukan Mojang Bandung | liezmaya.web.id </li> <li> 32. Konsistensi Navigasi Horizontal di bagian atas Halaman dan kategori penting </li> <li> 33. Konsistensi Kotak pencarian Kanan atas Mencari ke dalam blog </li> <li> 34. Konsistensi Sidebar Kategori dan Arsip Fitur pendukung </li> <li> 35. Konsistensi Footer Di bagian bawah Navigasi sekunder Pernyataan copyright, peta situs, kontak webmaster </li> <li> 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 </li> <li> 37. Konsistensi </li> <li> 38. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi </li> <li> 39. Navigasi </li> <li> 40. Navigasi Menu navigasi utama Bagian khusus promosi konten Halaman peta situs dan arsip Tautan internal di dalam tulisan Fitur pencarian </li> <li> 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 </li> <li> 42. Promosi konten Tulisan terbaru Tulisan terpopuler Komentar terbaru Kategori &amp; arsip bulanan imansulaiman.com </li> <li> 43. Peta situs &amp; arsip Berdasarkan kategori Berdasarkan tanggal terbit Jimmy Sun | jimmysun.net </li> <li> 44. Breadcrumb! Hirarki yang jelas Taut, kecuali item terakhir YopDesign | yopdesign.com </li> <li> 45. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi </li> <li> 46. Tipografi cuddlysheepdesigns.be </li> <li> 47. Tipografi Readable Kontras warna Lebar blok teks </li> <li> 48. Tipografi Readable </li> <li> 49. Tipografi Readable </li> <li> 50. Tipografi ReadableKontras warnahttp://snook.ca/technical/colour_contrast/colour.html </li> <li> 51. Tipografi Readable Blok teks ~ 5080 CPL (karakter per baris) </li> <li> 52. Tipografi Readable Priyadis Place | priyadi.net </li> <li> 53. Tipografi Readable </li> <li> 54. Tipografi Scalable Gunakan ukuran font relatif </li> <li> 55. Tipografi Scalable andi.saleh.web.id </li> <li> 56. Tipografi Available Fontstack Gunakan fail-safe font </li> <li> 57. Tipografi media.24ways.org/2007/17/fontmatrix.html </li> <li> 58. Tipografi Sans-serif Calibri, Tahoma, Geneva, Arial, Helvetica Neue, Helvetica, sans-serif Serif Constantia, Lucida Bright, Liberation Serif, Georgia, serif </li> <li> 59. Tipografi Web font google.com/webfonts </li> <li> 60. kartunama.net/blog </li> <li> 61. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi </li> <li> 62. Kecepatan Teknis Cepat untuk dibuka </li> <li> 63. Kecepatan Optimasi: Gambar Kode </li> <li> 64. Kecepatan CSS sprite generator csssprites.com Analisa kecepatan Firefox Extension: YSlow addons.mozilla.org/en-US/firefox/addon/yslow/ </li> <li> 65. Membandingkan load time: whichloadsfaster.com </li> <li> 66. Kecepatan Struktur Cepat untuk dipindai </li> <li> 67. Aziz Hadi Photoworks | azizhadi.com/category/blog </li> <li> 68. Kecepatan Konten Cepat untuk dipahami </li> <li> 69. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi </li> <li> 70. Tata letak C.R.A.P. Contrast Repetition Alignment Proximity </li> <li> 71. Shimmering Pearl | n45y4.wordpress.com </li> <li> 72. Pensil Warna Design | graphic-3d.pensilwarnadesign.com </li> <li> 73. blog.faniez.net </li> <li> 74. Jafis | jafis.net </li> <li> 75. Tata letak White space </li> <li> 76. myraffaell.com/blog </li> <li> 77. albasit.Sketchbook | albasit.tumblr.com </li> <li> 78. NavinoT | navinot.com </li> <li> 79. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi </li> <li> 80. Interaksi Ajak pengunjung berpartisipasi Feedback dan rating Komentar Kontribusi konten </li> <li> 81. Interaksi Richard Fang | richardfang.com </li> <li> 82. Interaksi gantibaju.com </li> <li> 83. Blog ePalembang | blog.epalembang.com </li> <li> 84. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi </li> <li> 85. Aksesibilitas Bangun akses Usabale Cross-browser dan cross-platform </li> <li> 86. Aksesibilitas Usable Simpel Fokus pada pengunjung Manusia pertama, mesin kedua </li> <li> 87. Aksesibilitas Cross-browser IE, Firefox, Safari, Opera Cross-platform PC, Apple, Linux, mobile </li> <li> 88. Aksesibilitas Tes! browsercam.com multibrowserviewer.com </li> <li> 89. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi </li> <li> 90. Teknologi </li> <li> 91. Teknologi Pikirkan nilai tambah yang diberikan Jangan jadikan faktor penentu </li> <li> 92. http://about.me/andisaleh </li> <li> 93. Cara mendapatkan Theme Unduh yang gratis Beli yang berbayar Buat sendiri </li> <li> 94. WordPresshttp://wordpress.org/extend/themes </li> <li> 95. WordPresswpcharity.com </li> <li> 96. Bloggerbtemplates.com </li> <li> 97. Bloggerbloggerthemes.net </li> <li> 98. Theme gratis Biaya: Rp0,- Fungsi general, tema general Sediki...</li></ul>