Blogilicious Palembang 2011 - Desain blog (stripped)

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 Sedikit ruang untuk customization Dukungan komunitas 99. Theme gratis Besar peluang dipakai juga oleh blog lain Mencantumkan nama (dan link) desainer Umumnya dilarang digunakan secara komersil 100. Theme berbayar Biaya: $x - $xxx Fungsi spesifik, tema spesifik Banyak ruang untuk customization 101. Theme berbayar Garansi dan dukungan developer (dan komunitas) Kecil peluang dipakai juga oleh blog lain Penggunaan dan credit diatur lisensi 102. WordPresstokokoo.com 103. Buat sendiri Biaya: gratis s/d sangat mahal Fungsi sangat spesifik, tema sangat spesifik Unik dan personal Kendali total! 104. Membuat desain blog sendiri Kuasai HTML dan CSS 105. w3schools.com 106. Membuat desain blog sendiri Kuasai HTML dan CSS Kuasai platform blog 107. codex.wordpress.org 108. http://google.com/support/blogger 109. Membuat desain blog sendiri Kuasai HTML dan CSS Kuasai platform blog Follow the rules 110. 8 Prinsip DasarKonsistensi Tata letakNavigasi InteraksiTipografi AksesibilitasKecepatan Teknologi 111. BREAK THE RULES! 112. Desain BlogAndi Salehandi@saleh.web.id Palembang | 5 Juni 2011