blogilicious palembang 2011 - desain blog (stripped)
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/l5mnefITRANSCRIPT

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!