blogilicious palembang 2011 - desain blog (stripped)
DESCRIPTION
Peran desain blog dan prinsip-prinsip desain blog yang baik. Dibawakan di Blogilicious Palembang, 5 Juli 2011. Full presentation version: http://db.tt/l5mnefITRANSCRIPT
![Page 1: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/1.jpg)
Desain Blog
Palembang | 5 Juni 2011
![Page 2: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/2.jpg)
http://about.me/andisaleh
![Page 3: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/3.jpg)
Peran Desain Blog
Antarmuka
![Page 4: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/4.jpg)
Back-end Front-end
Konten Pengunjung
Antarmuka
Antarmuka
![Page 5: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/5.jpg)
Antarmuka → Teknis Antarmuka → Teknis
Peran Desain Blog
Tema
![Page 6: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/6.jpg)
![Page 7: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/7.jpg)
![Page 8: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/8.jpg)
![Page 9: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/9.jpg)
iniJIE.com | inijie.com
![Page 10: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/10.jpg)
Blog Teknologi | teknologi.gravisware.com
![Page 11: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/11.jpg)
Kartunmania | kartunmania.wordpress.com
![Page 12: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/12.jpg)
Keluarga Nugraha | keluarganugraha.net
![Page 13: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/13.jpg)
Jurus Grafis | jurusgrafis.com
![Page 14: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/14.jpg)
GoenRock‟s Vlog | goenrock.com
![Page 15: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/15.jpg)
Ruang Freelance | ruangfreelance.com
![Page 16: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/16.jpg)
idBlogNetwork | idblognetwork.com
![Page 17: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/17.jpg)
Tema
Topik utama (Niche/ceruk)
Elemen visual yang relevan
Blog yang masuk akal & dapat dipercaya
![Page 18: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/18.jpg)
![Page 19: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/19.jpg)
Identitas
Tema
Antarmuka → Teknis
Peran Desain Blog
![Page 20: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/20.jpg)
Per Mei 2011
163 juta blog Rata-rata 67 ribu blog baru/hari
Sumber: blogpulse.com
![Page 21: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/21.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 22: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/22.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 23: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/23.jpg)
Konsistensi
Ekspektasi
![Page 24: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/24.jpg)
Newbie Fotografer Blog | patrush.wordpress.com
Konsistensi Anatomi blog
![Page 25: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/25.jpg)
Header
Navigasi
Konten
Sidebar
Newbie Fotografer Blog | patrush.wordpress.com
Konsistensi Anatomi blog
![Page 26: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/26.jpg)
Coretan Tanganku | m-aulia-r.blogspot.com
Header
Navigasi
Sidebar Konten
![Page 27: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/27.jpg)
Coretan Tanganku | m-aulia-r.blogspot.com
Header
Navigasi
Sidebar Konten
![Page 28: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/28.jpg)
Jurnalnya Nike | nike.rasyid.net
![Page 29: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/29.jpg)
My Xperience | fandagri.blogdetik.com
![Page 30: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/30.jpg)
Konsistensi
Logo Pojok kiri atas
Tagline di bawah logo
Taut ke halaman depan
![Page 31: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/31.jpg)
![Page 32: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/32.jpg)
Konsistensi
Home Pada logo
Pilihan pertama dalam navigasi
Beberapa terminologi
![Page 33: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/33.jpg)
bennychandra.com
![Page 34: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/34.jpg)
Itik Kecil | itikkecil.wordpress.com
![Page 35: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/35.jpg)
HIPMI Sumsel | hipmisumsel.org
![Page 36: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/36.jpg)
Tépas Pangacaprukan Mojang Bandung | liezmaya.web.id
![Page 37: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/37.jpg)
Konsistensi
Navigasi Horizontal di bagian atas
Halaman dan kategori penting
![Page 38: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/38.jpg)
Konsistensi
Kotak pencarian Kanan atas
Mencari ke dalam blog
![Page 39: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/39.jpg)
Konsistensi
Sidebar Kategori dan Arsip
Fitur pendukung
![Page 40: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/40.jpg)
Konsistensi
Footer Di bagian bawah
Navigasi sekunder
Pernyataan copyright, peta situs, kontak
webmaster
![Page 41: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/41.jpg)
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
![Page 42: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/42.jpg)
Konsistensi
![Page 43: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/43.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 44: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/44.jpg)
Navigasi
![Page 45: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/45.jpg)
Navigasi
• Menu navigasi utama
• Bagian khusus promosi konten
• Halaman peta situs dan arsip
• Tautan internal di dalam tulisan
• Fitur pencarian
![Page 46: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/46.jpg)
Raditya Dika | radityadika.com
Menu navigasi utama
• Posisi yang mudah dilihat dan dikenali
• Tautan yang jelas ke “Home”
• Tautan ke halaman/kategori utama lain
![Page 47: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/47.jpg)
imansulaiman.com
Promosi konten
• Tulisan terbaru
• Tulisan terpopuler
• Komentar terbaru
• Kategori & arsip bulanan
![Page 48: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/48.jpg)
Jimmy Sun | jimmysun.net
Peta situs & arsip
• Berdasarkan kategori
• Berdasarkan tanggal terbit
![Page 49: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/49.jpg)
YopDesign | yopdesign.com
Breadcrumb!
• Hirarki yang jelas
• Taut, kecuali item terakhir
![Page 50: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/50.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 51: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/51.jpg)
Tipografi
cuddlysheepdesigns.be
![Page 52: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/52.jpg)
Tipografi
Readable Kontras warna
Lebar blok teks
![Page 53: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/53.jpg)
Tipografi Readable
![Page 54: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/54.jpg)
Tipografi Readable
![Page 55: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/55.jpg)
Tipografi Readable
Kontras warna
http://snook.ca/technical/colour_contrast/colour.html
![Page 56: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/56.jpg)
Tipografi
Blok teks ~ 50–80 CPL (karakter per baris)
Readable
![Page 57: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/57.jpg)
Tipografi Readable
Priyadi‟s Place | priyadi.net
![Page 58: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/58.jpg)
Tipografi Readable
![Page 59: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/59.jpg)
Tipografi
Scalable Gunakan ukuran font relatif
![Page 60: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/60.jpg)
![Page 61: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/61.jpg)
Tipografi Scalable
andi.saleh.web.id
![Page 62: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/62.jpg)
Tipografi
Available Fontstack
Gunakan fail-safe font
![Page 63: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/63.jpg)
Tipografi
media.24ways.org/2007/17/fontmatrix.html
![Page 64: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/64.jpg)
Tipografi
Sans-serif
Calibri, Tahoma, Geneva, Arial, „Helvetica Neue‟,
Helvetica, sans-serif
Serif
Constantia, „Lucida Bright‟, „Liberation Serif‟,
Georgia, serif
![Page 65: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/65.jpg)
Tipografi
Web font
google.com/webfonts
![Page 66: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/66.jpg)
kartunama.net/blog
![Page 67: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/67.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 68: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/68.jpg)
Kecepatan
Teknis Cepat untuk dibuka
![Page 69: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/69.jpg)
Kecepatan
Optimasi: • Gambar
• Kode
![Page 70: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/70.jpg)
Kecepatan
CSS sprite generator
csssprites.com
Analisa kecepatan
Firefox Extension: YSlow
addons.mozilla.org/en-US/firefox/addon/yslow/
![Page 71: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/71.jpg)
Membandingkan load time: whichloadsfaster.com
![Page 72: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/72.jpg)
Kecepatan
Struktur Cepat untuk dipindai
![Page 73: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/73.jpg)
Aziz Hadi Photoworks | azizhadi.com/category/blog
![Page 74: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/74.jpg)
Kecepatan
Konten Cepat untuk dipahami
![Page 75: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/75.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 76: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/76.jpg)
Tata letak
C.R.A.P.
Contrast
Repetition
Alignment
Proximity
![Page 77: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/77.jpg)
Shimmering Pearl | n45y4.wordpress.com
![Page 78: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/78.jpg)
Pensil Warna Design | graphic-3d.pensilwarnadesign.com
![Page 79: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/79.jpg)
blog.faniez.net
![Page 80: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/80.jpg)
Jafis | jafis.net
![Page 81: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/81.jpg)
Tata letak
White space
![Page 82: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/82.jpg)
myraffaell.com/blog
![Page 83: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/83.jpg)
albasit.Sketchbook | albasit.tumblr.com
![Page 84: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/84.jpg)
NavinoT | navinot.com
![Page 85: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/85.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 86: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/86.jpg)
Interaksi
Ajak pengunjung berpartisipasi
• Feedback dan rating
• Komentar
• Kontribusi konten
![Page 87: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/87.jpg)
Richard Fang | richardfang.com
Interaksi
![Page 88: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/88.jpg)
gantibaju.com
Interaksi
![Page 89: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/89.jpg)
Blog ePalembang | blog.epalembang.com
![Page 90: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/90.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 91: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/91.jpg)
Aksesibilitas
Bangun akses
• Usabale
• Cross-browser dan cross-platform
![Page 92: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/92.jpg)
Aksesibilitas
Usable
• Simpel
• Fokus pada pengunjung
• Manusia pertama, mesin kedua
![Page 93: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/93.jpg)
Aksesibilitas
Cross-browser
IE, Firefox, Safari, Opera
Cross-platform
PC, Apple, Linux, mobile
![Page 94: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/94.jpg)
Aksesibilitas
Tes!
browsercam.com
multibrowserviewer.com
![Page 95: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/95.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 96: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/96.jpg)
Teknologi
![Page 97: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/97.jpg)
Teknologi
• Pikirkan nilai tambah yang diberikan
• Jangan jadikan faktor penentu
![Page 98: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/98.jpg)
http://about.me/andisaleh
![Page 99: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/99.jpg)
• Unduh yang gratis
• Beli yang berbayar
• Buat sendiri
Cara mendapatkan Theme
![Page 100: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/100.jpg)
WordPress
http://wordpress.org/extend/themes
![Page 101: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/101.jpg)
WordPress
wpcharity.com
![Page 102: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/102.jpg)
Blogger
btemplates.com
![Page 103: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/103.jpg)
Blogger
bloggerthemes.net
![Page 104: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/104.jpg)
• Biaya: Rp0,-
• Fungsi general, tema general
• Sedikit ruang untuk customization
• Dukungan komunitas
Theme gratis
![Page 105: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/105.jpg)
• Besar peluang dipakai juga oleh blog lain
• Mencantumkan nama (dan link) desainer
• Umumnya dilarang digunakan secara
komersil
Theme gratis
![Page 106: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/106.jpg)
• Biaya: $x - $xxx
• Fungsi spesifik, tema spesifik
• Banyak ruang untuk customization
Theme berbayar
![Page 107: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/107.jpg)
• Garansi dan dukungan developer
(dan komunitas)
• Kecil peluang dipakai juga oleh blog lain
• Penggunaan dan credit diatur lisensi
Theme berbayar
![Page 108: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/108.jpg)
WordPress
tokokoo.com
![Page 109: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/109.jpg)
• Biaya: gratis s/d sangat mahal
• Fungsi sangat spesifik,
tema sangat spesifik
• Unik dan personal
• Kendali total!
Buat sendiri
![Page 110: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/110.jpg)
• Kuasai HTML dan CSS
Membuat desain blog sendiri
![Page 111: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/111.jpg)
w3schools.com
![Page 112: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/112.jpg)
• Kuasai HTML dan CSS
• Kuasai platform blog
Membuat desain blog sendiri
![Page 113: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/113.jpg)
codex.wordpress.org
![Page 114: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/114.jpg)
http://google.com/support/blogger
![Page 115: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/115.jpg)
• Kuasai HTML dan CSS
• Kuasai platform blog
• Follow the rules
Membuat desain blog sendiri
![Page 116: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/116.jpg)
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
![Page 117: Blogilicious Palembang 2011 - Desain blog (stripped)](https://reader033.vdocuments.pub/reader033/viewer/2022050720/545bc6b8af79592b448b63ee/html5/thumbnails/117.jpg)
BREAK THE RULES!