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!

Palembang | 5 Juni 2011

Desain Blog

Andi Saleh andi@saleh.web.id