Desain Blog
Palembang | 5 Juni 2011
http://about.me/andisaleh
Peran Desain Blog
Antarmuka
Back-end Front-end
Konten Pengunjung
Antarmuka
Antarmuka
Antarmuka → Teknis Antarmuka → Teknis
Peran Desain Blog
Tema
iniJIE.com | inijie.com
Blog Teknologi | teknologi.gravisware.com
Kartunmania | kartunmania.wordpress.com
Keluarga Nugraha | keluarganugraha.net
Jurus Grafis | jurusgrafis.com
GoenRock‟s Vlog | goenrock.com
Ruang Freelance | ruangfreelance.com
idBlogNetwork | idblognetwork.com
Tema
Topik utama (Niche/ceruk)
Elemen visual yang relevan
Blog yang masuk akal & dapat dipercaya
Identitas
Tema
Antarmuka → Teknis
Peran Desain Blog
Per Mei 2011
163 juta blog Rata-rata 67 ribu blog baru/hari
Sumber: blogpulse.com
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
Konsistensi
Ekspektasi
Newbie Fotografer Blog | patrush.wordpress.com
Konsistensi Anatomi blog
Header
Navigasi
Konten
Sidebar
Newbie Fotografer Blog | patrush.wordpress.com
Konsistensi Anatomi blog
Coretan Tanganku | m-aulia-r.blogspot.com
Header
Navigasi
Sidebar Konten
Coretan Tanganku | m-aulia-r.blogspot.com
Header
Navigasi
Sidebar Konten
Jurnalnya Nike | nike.rasyid.net
My Xperience | fandagri.blogdetik.com
Konsistensi
Logo Pojok kiri atas
Tagline di bawah logo
Taut ke halaman depan
Konsistensi
Home Pada logo
Pilihan pertama dalam navigasi
Beberapa terminologi
bennychandra.com
Itik Kecil | itikkecil.wordpress.com
HIPMI Sumsel | hipmisumsel.org
Tépas Pangacaprukan Mojang Bandung | liezmaya.web.id
Konsistensi
Navigasi Horizontal di bagian atas
Halaman dan kategori penting
Konsistensi
Kotak pencarian Kanan atas
Mencari ke dalam blog
Konsistensi
Sidebar Kategori dan Arsip
Fitur pendukung
Konsistensi
Footer Di bagian bawah
Navigasi sekunder
Pernyataan copyright, peta situs, kontak
webmaster
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
Konsistensi
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
Navigasi
Navigasi
• Menu navigasi utama
• Bagian khusus promosi konten
• Halaman peta situs dan arsip
• Tautan internal di dalam tulisan
• Fitur pencarian
Raditya Dika | radityadika.com
Menu navigasi utama
• Posisi yang mudah dilihat dan dikenali
• Tautan yang jelas ke “Home”
• Tautan ke halaman/kategori utama lain
imansulaiman.com
Promosi konten
• Tulisan terbaru
• Tulisan terpopuler
• Komentar terbaru
• Kategori & arsip bulanan
Jimmy Sun | jimmysun.net
Peta situs & arsip
• Berdasarkan kategori
• Berdasarkan tanggal terbit
YopDesign | yopdesign.com
Breadcrumb!
• Hirarki yang jelas
• Taut, kecuali item terakhir
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
Tipografi
cuddlysheepdesigns.be
Tipografi
Readable Kontras warna
Lebar blok teks
Tipografi Readable
Tipografi Readable
Tipografi Readable
Kontras warna
http://snook.ca/technical/colour_contrast/colour.html
Tipografi
Blok teks ~ 50–80 CPL (karakter per baris)
Readable
Tipografi Readable
Priyadi‟s Place | priyadi.net
Tipografi Readable
Tipografi
Scalable Gunakan ukuran font relatif
Tipografi Scalable
andi.saleh.web.id
Tipografi
Available Fontstack
Gunakan fail-safe font
Tipografi
media.24ways.org/2007/17/fontmatrix.html
Tipografi
Sans-serif
Calibri, Tahoma, Geneva, Arial, „Helvetica Neue‟,
Helvetica, sans-serif
Serif
Constantia, „Lucida Bright‟, „Liberation Serif‟,
Georgia, serif
Tipografi
Web font
google.com/webfonts
kartunama.net/blog
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
Kecepatan
Teknis Cepat untuk dibuka
Kecepatan
Optimasi: • Gambar
• Kode
Kecepatan
CSS sprite generator
csssprites.com
Analisa kecepatan
Firefox Extension: YSlow
addons.mozilla.org/en-US/firefox/addon/yslow/
Membandingkan load time: whichloadsfaster.com
Kecepatan
Struktur Cepat untuk dipindai
Aziz Hadi Photoworks | azizhadi.com/category/blog
Kecepatan
Konten Cepat untuk dipahami
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
Tata letak
C.R.A.P.
Contrast
Repetition
Alignment
Proximity
Shimmering Pearl | n45y4.wordpress.com
Pensil Warna Design | graphic-3d.pensilwarnadesign.com
blog.faniez.net
Jafis | jafis.net
Tata letak
White space
myraffaell.com/blog
albasit.Sketchbook | albasit.tumblr.com
NavinoT | navinot.com
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
Interaksi
Ajak pengunjung berpartisipasi
• Feedback dan rating
• Komentar
• Kontribusi konten
Richard Fang | richardfang.com
Interaksi
gantibaju.com
Interaksi
Blog ePalembang | blog.epalembang.com
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
Aksesibilitas
Bangun akses
• Usabale
• Cross-browser dan cross-platform
Aksesibilitas
Usable
• Simpel
• Fokus pada pengunjung
• Manusia pertama, mesin kedua
Aksesibilitas
Cross-browser
IE, Firefox, Safari, Opera
Cross-platform
PC, Apple, Linux, mobile
Aksesibilitas
Tes!
browsercam.com
multibrowserviewer.com
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
Teknologi
Teknologi
• Pikirkan nilai tambah yang diberikan
• Jangan jadikan faktor penentu
http://about.me/andisaleh
• Unduh yang gratis
• Beli yang berbayar
• Buat sendiri
Cara mendapatkan Theme
WordPress
http://wordpress.org/extend/themes
WordPress
wpcharity.com
Blogger
btemplates.com
Blogger
bloggerthemes.net
• Biaya: Rp0,-
• Fungsi general, tema general
• Sedikit ruang untuk customization
• Dukungan komunitas
Theme gratis
• Besar peluang dipakai juga oleh blog lain
• Mencantumkan nama (dan link) desainer
• Umumnya dilarang digunakan secara
komersil
Theme gratis
• Biaya: $x - $xxx
• Fungsi spesifik, tema spesifik
• Banyak ruang untuk customization
Theme berbayar
• Garansi dan dukungan developer
(dan komunitas)
• Kecil peluang dipakai juga oleh blog lain
• Penggunaan dan credit diatur lisensi
Theme berbayar
WordPress
tokokoo.com
• Biaya: gratis s/d sangat mahal
• Fungsi sangat spesifik,
tema sangat spesifik
• Unik dan personal
• Kendali total!
Buat sendiri
• Kuasai HTML dan CSS
Membuat desain blog sendiri
w3schools.com
• Kuasai HTML dan CSS
• Kuasai platform blog
Membuat desain blog sendiri
codex.wordpress.org
http://google.com/support/blogger
• Kuasai HTML dan CSS
• Kuasai platform blog
• Follow the rules
Membuat desain blog sendiri
Konsistensi
Navigasi
Tipografi
Kecepatan
Tata letak
Interaksi
Aksesibilitas
Teknologi
8 Prinsip Dasar
BREAK THE RULES!