1. Open Minded.

Untuk membuat sebuah free style design, cobalah untuk menerima semua hal baru. Jangan kaku, jangan kolot, dan jangan menutup diri. Lihat perkembangan design disekitar kita, jangan melulu hanya berkunjung ke blog/web langganan yang berisi tentang blogging tips saja, yang orang sunda bilang kurung batok. Tapi mulailah menjenguk blog sahabat kita yang membahas tentang design. Dan yang tidak kalah penting adalah berkunjung ke web portfolio para designer. Karena web/blog mereka pasti unik dan mempunyai nilai seni tersendiri. Kita bisa menjadikan design mereka sebagai referensi untuk menemukan ciri khas gaya design kita. Tapi ingat, hanya sebatas referensi dan bukan untuk dicopy atau bahkan mengklaim bahwa karya yang mereka buat punya kita, (kaya tetangga kita itu tuh). Kamu bisa mendapat banyak inspirasi dengan menjelajah ke gallery para designer grafis, pembuat cartoon, Photografer, bahkan blog para Bomber (pembuat grafitti). Perhatikan gaya design yang mereka buat, coba kamu lakukan sendiri dan rasakan pakai hati. Kalau kamu merasa nyaman, ya kamu terusin, tapi kalo ngga ya udah tinggalin dan kamu coba cari gaya baru. Anw, para bomber inilah yang memberikan banyak inspirasi design buat ku, karna memang sebelum terjun bebas ke blogosphere, aku wara-wiri sama para bomber. Otreh, lanjut ke tips berikutnya…

2. Membuat Sketch dan Menyusun Layout.

Gunakan pen dan kertas untuk membuat sketch. Karena cara konvensioanl inilah yang paling efektif. Kita bisa saja langsung membuat sketch di komputer, tapi membuat sketch di kertas mempunyai kenyamanan dan kebebasan yang tidak bisa didapat di komputer. Kita bisa bebas mengeksplore gaya design yang kita mau. Hal pertama yang harus difikirkan adalah menyusun layout (menata tata letak). Kita imajinasikan bahwa kertas adalah tampilan full screen dari web browser. Disitu kita mulai menggambar header, menentukan letak menu navigasi, main bar (untuk tulisan) dan side bar (untuk widget) dan footer. Tipsnya, gunakan lahan yang ada dengan bijak. Jangan terlalu banyak menggunakan widget yang tidak perlu dan jangan pula membiarkan lahan kosong, mubazir. Kita buat tampilan blog yang padat namun tidak berat saat diakses. Kita juga bisa mengeksplore bagian footer agar lebih maksimal. Misalnya dengan membagi footer menjadi tiga bagian, dan tiap bagian kita letakan satu widget yang berguna untuk pengunjung.

3. Pemilihan Warna.

Berani Gunakan Warna

Kombinasi warna yang digunakan ikut berperan agar tampilan blog kita terkesan unik. Tipsnya, jangan gunakan warna-warna standart. Tapi coba gunakan warna yang jarang digunakan, tapi ingat harus dengan kombinasi dan komposisi yang pas. Hindari penggunaan warna putih untuk background, karena terkesan kaku dan biasa. Selain itu, penggunaan warna putih untuk bacground dengan kombinasi warna hitam untuk text, dapat membuat mata mudah lelah saat membaca. Untuk itu gunakan warna-warna gelap agar lebih terlihat custom walaupun memang terkesan suram. Tapi, dengan kombinasi yang pas, penggunaan warna gelap pun dapat berkesan menarik. Tapi jika kamu ingin membuat design dengan warna yang terang, gunakan warna-warna cerah karena terkesan happy dan selalu ceria. Pemilihan warna ini dipengaruhi oleh tema blog yang ingin kamu buat. Misalnya, jika kamu ngin membuat design themes untuk blog ‘anak band’, kamu bisa gunakan warna-warna gelap tapi jika kamu akan membuat design themes untuk blog edukasi, gunakan warna-warna cerah agar terlihat seru dan tidak membosankan.

4. Penggunaan Gambar.

Buatlah gambar-gambar yang tidak biasa. Artinya, kamu jangan hanya menggunakan gambar yang sudah biasa dipakai orang lain. Gambar disini tidak hanya untuk mempercantik themes saja, tapi memcakup gambar illustrasi pada tulisan, atau icon yang kamu pakai di blog. Kamu bisa menggunakan gambar-gambar 3D, gambar dengan efek grunge, cartoon, monster, vector atau bahkan fotomu sendiri. Gambar apapun bisa kamu gunakan, tapi ingat jangan gambar orang lain yang punya copyright, bisa bahaya boss… Salah satu contoh design blog yang unik penggunaan gambarnya adalah blog seleb Sandra Dewi. Disitu terlihat penggabungan foto dengan efek grunge dan vector, keren kan..??

5. Penggunaan Animasi.

Animasi digunakan agar blog terlihat lebih atraktif dan dinamis, baik itu untuk header, menu navigasi, images slide. Animasi untuk blog bisa menggunakan flash, javascript atau gif. Tidak hanya terbatas dari sisi gambar saja, animasipun bisa dibuat untuk bagian lain, misalnya animasi text dengan efek type writter, carousel recent post, atau bahkan penggunaan flash untuk tag cloud seperti wp-cumulus. Kamu bisa menggunakan salah satu efek-efek animasi diatas, atau bahkan kamu pakai semua. Tapi jangan berlebihan, karena dapat mengganggu fokus pengunjung untuk membaca. Alih-alih pengunjung membaca blog, eh malah asik ngeliatin animasi. Selain itu, penggunaan animasi berlebihan dapat membuat blog menjadi lebih berat diakses.

Gimana, cukupkah 5 tips diatas…? Intinya, untuk mendesign blog yang unik kita harus berani mencoba sesuatu yang beda, sesuatu yang baru, bahkan sesuatu yang aneh. Oh ya, kalo kamu punya tips lain, tolong tambahin ya…

Dalam contoh kali ini, menu header adalah tag H3, dengan masing-masing sub menu dengan tag UL tag yang akan memperluas/tampil jiak header di klik. Header adalah tombol yang ditekan dengan “klik” melalui mouse. Tampilan menu ini diatur melalui CSS dan efek accordion menggunakan Javascript, salah satunya menggunakan jquery dari google.

Berikut adalah cara pemasangan accordion menu ini pada blog atau web :

1. Download file accordion menu (link download ada di bagian bawah post)
2. Upload semua file yang telah di download ke hostingan kamu. Contoh, letakan semua file dalam satu folder yang diberi nama “menu” ke folder public_html di hostingan-mu.
3. Tambahkan script berikut kedalam tag header diantara <header> … </header>
   

   <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>

   <script type=”text/javascript” src=”acc/ddaccordion.js”></script>

   <script type=”text/javascript” src=”acc/ddaccordion2.js”></script>

   <link title=”default” media=”screen” type=”text/css” href=”acc/ddaccordion.css” rel=”stylesheet”>

4. Letakan script berikut di dalam tag <body>. Script berikut adalah script menu dan sub menu. Kamu bisa merubah menu sesuka hati, baik menambah atau mengurangi menu/submenu.
   

   <div>
   <h3>MENU 1</h3>
   <ul>
   <li><a href=”#”>Submenu 1</a></li>
   <li><a href=”#”>Submenu 2</a></li>
   <li><a href=”#”>Submenu 3</a></li>
   <li><a href=”#”>Submenu 4</a></li>
   <li><a href=”#”>Submenu 5</a></li>
   <li><a href=”#”>Submenu 6</a></li>
   <li><a href=”#”>Submenu 7</a></li>
   <li><a href=”#”>Submenu 8</a></li>
   </ul>

   <h3>MENU 2</h3>
   <ul>
   <li><a href=”#”>Submenu 1</a></li>
   <li><a href=”#”>Submenu 2</a></li>
   <li><a href=”#”>Submenu 3</a></li>
   <li><a href=”#”>Submenu 4</a></li>
   <li><a href=”#”>Submenu 5</a></li>
   <li><a href=”#”>Submenu 6</a></li>
   <li><a href=”#”>Submenu 7</a></li>
   <li><a href=”#”>Submenu 8</a></li>
   </ul>

   <h3>MENU 3</h3>
   <ul>
   <li><a href=”#”>Submenu 1</a></li>
   <li><a href=”#”>Submenu 2</a></li>
   <li><a href=”#”>Submenu 3</a></li>
   <li><a href=”#”>Submenu 4</a></li>
   <li><a href=”#”>Submenu 5</a></li>
   <li><a href=”#”>Submenu 6</a></li>
   <li><a href=”#”>Submenu 7</a></li>
   <li><a href=”#”>Submenu 8</a></li>
   </ul>

   <h3 style=”cursor: default”>MENU 4</h3>
   <div>
   </div>

5. Selesai…!!!

Note :
– Sebelum mengupload semua file, perhatikan lokasi images yang ada di file ddaccordion.css. Images ini digunakan untuk background header menu pada saat submenu tampil/tidak.
– Buat kamu yang menggunakan free hosting dan tidak bisa upload file (misal : blogger.com), semua file bisa diupload ke hosting yang terpisah dari hosting blog, dengan catatan lokasi file yang ada di ddaccordion.css dan script yang ada di header harus tepat.

Gimana, kamu tertarik untuk menggunakan accordion menu…? Sok atuh, tunggu apa lagi buruan coba. Kalo ada pertanyaan, silahkan isi form comment dibawah, jangan ragu-ragu.

Agar dapat meraih hal itu, satu pertanyaan kunci disini, “Apakah kamu tahu apa yang visitor inginkan (atau yang tidak diinginkan) saat mereka melihat halaman pertama dari blog kamu?” Pegang pertanyaan tersebut dan mulai kita jawab step-by-step.

1. Pemilihan themes yang tepat.

Themes yang baik akan membuat visitor merasa nyaman untuk berlama-lama berada di blog mu. Untuk menumbuhkan perasaan nyaman itu, kamu bisa ciptakan dengan menggunakan themes yang sesuai dengan tema blog mu. Saat ini, banyak themes gratis yang dapat kamu download dan kamu pakai di blog mu. Atau bahkan bisa kamu bisa buat sendiri sesuai selera. Selain itu, pemilihan themes yang tepat dapat menumbuhkan rasa kepercayaan dari visitor. Karena visitor tidak dapat melihat kamu, mereka mungkin tidak akan pernah bertemu kamu langsung secara pribadi, atau bahkan berbicara dengan kamu melalui telepon. Jadi themes yang sesuai dapat mewakili identitas mu.

2. Tagline yang singkat dan jelas.

Beberapa blog menggunakan banyak ruang yang di halaman pertama blog mereka dengan “ucapan selamat datang” dengan text betjalan atau yang dibuat dengan pop-up, bahkan ada pula yang menggunakan popup berkali-kali. Atau “pernyataan tentang visi & misi” yang demikian panjang, sehingga membuat para pengunjung mengantuk bahkan sebelum halaman selesai loading. Namun pernyataan tentang visi & misi bertujuan untuk menjelaskan maksud tujuan blog kamu, serta rangkuman content blog mu secara keseluruhan. Dan hal ini dapat disiasati dengan mengubah visi & misi menjadi sebuah pernyataan singkat (tagline) yang mengandung beberapa keyword penting. Yaitu buatlah satu baris kalimat singkat dan letakkan di tempat yang mudah terlihat pada halaman pertama blog kamu. Misalnya pada “Header”. Contoh, di blog dhenk[dot]com ini, aku memilih menggunakan kalimat “web master = web design + web programing”. Aku bertujuan merangkum isi blog secara keseluruhan dengan menggunakan kalimat tersebut, yaitu menjelaskan bahwa blog dhenk[dot]com berisi tentang tulisan cara mendisain blog dan cara menggunakan script pada blog. So, apa yang muncul dibenak mu saat pertama kali kamu baca kalimat itu…? Apa sama dengan yang aku maksudkan…?

3. Meletakan menu navigasi page / category.

Menu navigasi yang mudah dilihat sangat penting karena visitors benci jika harus tersesat di situs. Visitors yang frustrasi akan pergi dan tidak akan pernah kembali lagi. Lakukan langkah-langkah berikut ini untuk memastikan bahwa hal ini tidak terjadi pada blog kamu :

Navigasi yang Mudah Diakses
Menu navigasi dengan hanya menggunakan text standard lebih baik bila dibanding dengan navigasi menggunakan flash atau images, bahkan text yang menggunakan javascript sekalipun dapat menjadi kendala ketika visitor mengakses blog kita dari gadget seperti PDA, Handphone atau browser-browser non-grafik. Untuk itu, jika memang tidak diperlukan hindari penggunaan flash atau images untuk menu navigasi karena tidak semua visitor mengakses blog kita melaui PC.

Fungsi Pencarian
Visitor akan merasa senang jika mereka dapat menemukan apa yang mereka cari di blog kita dengan cepat. Untuk itu, gunakan fasilitas pencarian pada blog guna memudahkan visitor mencari apa yang mereka inginkan.

Sitemap
Sitemap berguna untuk memudahkan visitor melihat struktur blog kita secara keseluruhan dengan jelas. Dan dapat membantu visitor untuk menjelajah blog kamu lebih dalam lagi. Selain itu, spider-spider mesin pencari seperti google bot menyukai sitemap karena membantu mereka untuk mengindeks seluruh blog.

4. Singkat dan Sederhana

Visitor menginginkan blog yang dikunjunginya dapat segera memberikan informasi yang mereka harapkan. Untuk itu, halaman awal blog tidak perlu dijejali dengan banyaknya artikel, namun cukup penggalan artikel atau bahkan judul-judul artikel saja. Karena selain menghemat tempat, hal ini juga mempercepat proses loading blog kamu.

5. Customization and review

perhatikan penggunaan images

Buat tampilan blog mu berbeda dan mempunyai ciri khas dari blog-blog lain yang pernah ada. Tapi pastikan halaman pertama blog kamu harus tampil sewaktu para visitor me-loadingnya. Kamu boleh menggunakan Animasi Flash yang paling keren, namun jangan berharap para visitor akan mendownload plug-in-nya hanya karena untuk melihat animasinya. Sebagian besar dari visitor hanya ingin melihat halaman situs web cepat sewaktu loading, tampak menarik, dan berisi informasi yang berguna. Hal tersebut tidaklah berat jika kamu memenuhi tiga syarat berikut ini:

Pilih warna yang tepat:
Kombinasi warna yang tepat membuat kontras dan menegaskan poin-poin penting. Hindari penggunaan warna yang mencolok. Warna-warna link standar membuat navigasi menjadi lebih mudah.

Gunakan gambar-gambar dengan bijaksana:
Pastikan apakah gambar yang ada benar-benar meningkatkan tujuan dari situs kamu. Kebanyakan para visitor ingin membaca informasi , bukan melihat gambar-gambar indah yang hanya menambah waktu download yang tidak diperlukan saja. Jika kamu terpaksa menggunakan gambar, perhatkan size dari gambar tersebut. Karena gambar yang besar hanya akan menghabiskan space host dan menambah lama waktu loading.

Perbaiki kesalahan-kesalahan:
Hati-hati dalam penggunaan kode. Kesalahan pemberian kode HTML yang sederhana pun dapat merusak halaman kamu. Validasi kode HTML kamu melalui http://validator.w3.org Ini akan memberitahu kamu jika terdapat masalah-masalah yang terjadi pada kode. Selain itu, Validasi kode CSS kamu melalui http://jigsaw.w3.org.

Yup, kamu pasti ingin mengundang para pengunjung datang ke blog kamu, tapi yang lebih penting, kamu ingin mereka tetap berada di situ dan menjadi pelanggan kamu kan…?

So, halaman depan blog kamu adalah image awal. Buatlah seinformatif mungkin dan menimbulkan rasa ingin tahu. Buatlah blog mu menarik dimata visitor dan buat visitor merasa kangen dan ingin kembali mengunjungi blog mu. Ada masukan lain boss…? share ya, coz aku juga butuh masukan nih…