Setelah kita melakukan '5 Langkah Penting Membuat Blog Berkualitas Bagian Konsep Desain',
kini kita akan berlanjut untuk membuat tampilan visual yang benar-benar
akan kita terapkan nantinya di Blog yang sedang kita bangun ini. Dalam
artikel '5 Langkah Penting Membuat Blog Berkualitas Bagian Element Dasar'
ini, saya menggunakan Photoshop sebagai alat utama pembuatan desainnya,
mungkin bisa dibilang ini termasuk dengan PSD Template Desain, entahlah
saya juga kurang mengerti. Perlu saya ingatkan kembali, di sini saya
tidak memberikan tutorial ataupun menggurui siapapun, saya hanya Berbagi
pengalaman, yang pernah saya alami sebelumnya, dan tidak ada salahnya
kan jika saya Berbagi pengalaman tersebut bukan?Lanjut kepembahasan, saya tidak akan menerangkan mengenai apa itu Elemen Dasar, tapi saya akan memberikan beberapa contoh elemen dasar itu, seperti warna background, kontak form, menu navigasi, dan semacam itulah, jadi tidak perlu diterangkan ya 'Sohib-M'.
Yang perlu kita tahu adalah, elemen-elemen apa saja yang perlu kita terapkan di Blog kita nantinya, itu yang jadi tujuan pembahasan ini.
Saya telah melakukan sedikit riset keberbagai Site`s yang terkemuka, seperti www.envato.com, www.adobe.com, www.kaskus.co.id, www.detik.com, dan yang lainnya, hanya sekedar untuk mengintip dan melakukan survey terhadap elemen-elemen apa yang mereka gunakan di Blog/Website mereka. Sudah tak perlu ditanyakan lagi, bahwa site-site yang saya sebutkan tadi mempunyai reputasi yang sangat baik di mata penggemar mereka, tidak ada salahnya kita sedikit menerapkan ilmu yang mereka gunakan. Dari pengamatan yang saya lakukan kepada site-site tersebut, ada 6 elemen dasar yang saya kira diperlukan dalam pembuatan sebuah Blog/Website, apa saja elemen-elemen tersebut?
Berikut adalah beberapa diantaranya.
1. Tekstur Latar Belakang (Background).
[caption caption="Background Sumber: hutch.photoshelter.com"]
[/caption]Hal pertama yang perlu ditanyakan adalah, apa gunanya untuk Blog menggunakan background yang bertekstur? Banyak yang beranggapan latar belakang sebuah Blog yang bertekstur akan memperlambat pemuatan (Load) dari Blog tersebut, atau bisa dibilang akan lemot. Pendapat tersebut ada benarnya, karena muatan sebuah Blog akan lebih baik jika sangat kecil, seperti kita tahu, background bertekstur cenderung diartikan menerapkan penggunaan gambar yang tak kecil ukurannya. Tanpa menggunakan gambar kita sebenarnya bisa membuat tekstur sebuah latar belakang Blog, dengan mengaplikasikan warna yang berbeda ditiap section yang ada, itu sudah bisa dibilang sebuah tekstur.
Kegunaan tekstur dalam latar belakang lagi-lagi berkaitan dengan pengalaman Pengunjung/Pengguna saat berada di Blog kita, dengan menerapkan latar belakang yang bertekstur diharapkan akan menaikan mood mereka, membuat mereka merasa tertarik dengan tampilan Blog kita, dan semoga mereka akan mengingatnya di kepala, dan mungkin kita berharap mereka akan kembali berkunjung ke Blog kita lagi. Menerapkan background yang bertekstur juga memberikan Blog kita sebuah karakter yang valid, sehingga mudah untuk dikenali Pengguna/Pengunjung Blog.
Pada kasus kita, saya memang akan menggunakan sebuah gambar untuk backgroundnya, lalu bagaimana kita akan mengakali agar tekstur background nya tidak terlalu memakan space memori? Untuk menanggulanginya, kita akan menggunakan teknik pengulangan pola atau patern yang berukuran super mini, mungkin hanya 10 x 10 pixel paling kecilnya. Sudah bisa dipastikan ukuran gambar yang kecil tidak akan terlalu membebani pemuatan/loading Blog.
Jika masih bingung apa itu teknik pengulangan pola, saya akan memberikan sedikit ilustasi, ambil saja contoh sebuah keramik ataupun ubin berukuran 2m persegi yang memiliki sebuah motif bergaris vertikal, lalu kita letakan keramik/ubin tersebut disebuah bidang/lahan kosong berukuran 20m persegi. Hasilnya adalah, lahan kosong tersebut tidak terisi penuh oleh keramik yang kita letakan tersebut, lalu bagaimana mengatasinya? Tentu saja kita akan mengambil ubin yang lain dengan ukuran dan motif yang sama untuk mengisi kekosongan tersebut, dan perlu diingat, pada keramik tersebut terdapat motif/pola garis vertikal di dalamnya.
Kini keadaan bidang tersebut terisi penuh oleh beberapa keramik yang kita letakan tadi, dan terbentuk sebuah pola baru di lahan tersebut, terdapat 10 garis vertikal berukuran 20m persegi, dengan bentuk yang sama persis. Begitulah kira-kira penjelasan dari teknik pengulangan pola yang saya maksud.
Dan bagi 'Sohib-M' yang belum mengerti bagaimana caranya membuat sebuah pola/patern/motif bisa intip-intip artikel ini: Cara Membuat Patern Dengan Photoshop.
Atau kalian bisa berkunjung ke sini: www.subtlepatterns.com untuk memilih dan mendownload pola/patern yang kalian suka, dan jangan khawatir semua gratis ^^, oh iya pilih saja yang Download all, lalu export ke Photoshop kalian, mungkin kelak akan berguna nantinya. Nah jika sudah membuat dan menentukan sebuah Patern yang akan digunakan di Blog nantinya mari berlanjut ke elemen dasar berikutnya.
2. Navigasi.
[caption caption="Navigasi sumber: cuticutikelantan"]
[/caption]
Seperti yang 'Sohib-M' tahu, menu Navigasi merupakan salah satu elemen terpenting dalam sebuah Blog/Website, dan akan menjadi salah satu acuan terpenting dalam 'Cara Membuat Blog Berkualitas', mengapa demikian? Karena sebuah Blog ataupun Website tanpa sebuah menu navigasi sama seperti Sayur Tanpa Garam (Jadi inget siapa ya ^_^).
Pada umumnya sebuah menu navigasi terletak di bagian Header baik itu sebelah kiri ataupun kanan, namun tak jarang beberapa Blog terkemuka meletakan menu navigasi mereka sebagai sidebar, hal itu bisa dilakukan sepanjang menu navigasi itu masih berfungsi sebagai mestinya. Dan yang terutama, Menu Navigasi harus mudah untuk digunakan dan mudah ditemukan oleh para Pengunjung/Pengguna Blog nantinya, karena sebuah Menu Navigasi tanpa ke-dua hal utama tersebut tidak akan memancing Pengguna/Pengunjung untuk masuk lebih dalam ke Blog kalian.
Sebagai bahan referensi atau bisa juga sebagai inspirasi mungkin 'Sohib-M' bisa berkunjung kebeberapa Website/Blog yang kalian sukai, dan lihat bagaimana cara mereka menanamkan Menu Navigasi ke dalam Blog mereka. Atau kalian bisa coba intip-intip www.kaskus.co.id yang menawarkan menu navigasi yang begitu memukau, atau bisa lihat www.genessausageshop.com yang membuat menu navigasi mereka sedikit unik tapi mudah untuk ditemukan dan digunakan pengunjung.
3. Tipografi.
[caption caption="Tipografi sumber: aungthurhahein.github.io"]
[/caption]
Yang satu ini tidak kalah pentingnya dalam sebuah elemen dasar sebuah Blog, meskipun tanpa menentukan elemen dasar yang satu ini, blog kita masih bisa terus berjalan, namun dari berbagai Blog ataupun Website yang saya kunjungi menggunakan Tifograpi tersendiri pada elemen dasar mereka. Hal ini dilakukan untuk mempertegas jati diri Blog kita nantinya, dan itu akan sangat bagus untuk perkembangan Blog tentunya. Kalian bisa intip beberapa situs berikut ini untuk bahan referensi: www.thrivesolo.com, www.ryanschref.net, www.jrvelasco.com, gal.in atau designinfluence.org.
Namun bagi 'Sohib-M' baiknya memilih sendiri tipe dari Tifografi-nya di www.google.com/webfonts dan ingat untuk memilihnya dengan bijak. Karena design tipografi yang berlebihan akan memeberikan beban muatan Website/Blog nantinya.
4. Fitur.
[caption caption="Fitur sumber: Mozilla.org/firefox"]
Elemen penting lainnya adalah Fitur, yang saya maksud di sini adalah Featurd Section, fitur utama Blog kita. Seperti Slide Show, strapline atau mungkin first time visited (saya lupa namanya), namun perlu kita tekankan di sini, featurd section haruslah yang benar-benar mengena target kita nantinya, jangan sampai fitur utama blog kita hanya sebagai pajangan semata, tanpa pernah digunakan oleh Pengunjung atau pun Pengguna Blog kita nantinya.
Ambil contoh dari first time visited yang disajikan oleh themeforest.com, atau bisa juga seperti strapline yang disuguhkan oleh Mozilla.org/firefox atau juga tampilan fitur slide show yang dipertunjukan oleh: www.printmornyc.com yang simpel.
5. Form.
[caption caption="Form Sumber: weppot.com"]
[/caption]
Elemen ini termasuk yang masih diabaikan bagi sebagian Blogger di tanah air, meskipun sangat kecil namun kegunaan dari elemen Form ini sangatlah membantu dalam meraup trafic pengunjung untuk terus bertahan/stabil mengunjungi Blog kita.
Elemen Form bisa berbentuk menjadi apa saja yang berguna di Blog kita, seperti form Sign in, Kontak, Komentar dan masih banyak lagi. Namun sayangnya, form-form tersebut kebanyakan digunakan oleh para Pengguna/Pengunjung hanya untuk bisa melakukan yang mereka mau, seperti sign-in untuk mendownlad, komentar dll tanpa memperdulikan kelanjutannya. Tugas kita adalah memaksimalkan kegunaan form-form tersebut untuk menjadi alat pembantu untuk menebar umpan-umpan menarik kepada mereka yang telah berkunjung, umpan apa? Tentu saja isi dari konten terbaru Blog kalian yang bekualitas .
Ada sebagian dari Blogger yang beranggapan bahwa mengaktifkan form Kontak hanya akan memberikan kotak sampah/spam bagi para pengunjung. Jadi saran saya adalah gunakan Captcha untuk untuk menyaring pesan-pesan yang tidak kita butuhkan, coba kunjungi www.captcha.net.
6. Footer.
[caption caption="Footer Sumber: www.artisteer.com"]
[/caption]
Dan yang terakhir adalah elemen dasar Footer, elemen dasar ini kebanyakan digunakan tidak sebagai mana semestinya, atau bisa dibilang tidak digunakan semaksimal mungkin. Footer saya umpamakan sebagai rencana cadangan saya jikalau rencana utama (Menu Navigasi) saya tidak memenuhi target, apa targetnya? Target yang saya maksud di sini adalah, ketika Pengguna ataupun Pengunjung berkunjung ke Blog saya dan tidak menemukan apa yang mereka cari di Menu Navigasi, saya berharap mereka akan menemukan apa yang mereka cari di Footer Blog saya, seperti itu simpelnya.
Jadi apa saja yang perlu kita tanamkan di Footer Blog kita nantinya? Pertama yang perlu kita amati adalah kebiasaan para Pendatang Blog kita, seperti apa yang enggan mereka lakukan, seperti mencari kategori dari artikel-artikel di dalam Blog kita, memang di Menu Navigasi rata-rata sudah diletakan alat pencarian Blog yang bisa digunakan, namun tak jarang, Pengunjung enggan menggunakan alat tersebut, dan mencarinya di halaman muka Blog kita, kewajiban kita untuk menyediakan itu semua. Jika di menu sidebar tidak kita tanamkan pilihan kategori kita, maka diharuskan meletakannya di Footer nantinya.
Bisa juga cara menghubungi kita, kita bisa letakan Form Kontak di Footer, ataupun alamat kita, kita bisa letakan alamat ataupun no Hp kita di Footer, bahkan Map juga bisa. Tapi ingat pemilihan apa saja yang akan kita sematkan di Footer mengacu dengan seberapa besar keuntungan yang Blog kita dapatkan nantinya.
Setelah kita menentukan apa saja elemen-elemen dasar yang akan kita terapkan di Blog kita nantinya dengan mengacu pada ke-6 elemen dasar di atas, kini tiba waktunya kita membuat sketsa gambar sesungguhnya. Kalian bisa menggunakan kertas dan pensil maupun pulpen, namun kali ini saya akan menggunakan tool Balsamiq untuk membuatnya. 'Sohib-M' bisa intip cara saya membuatnya di artikel ini: Cara Membuat Sketsa Gambar Menggunakan Balsamiq.(Artikel dalam proses pengerjaan)
Selanjutnya adalah membuat file berbentuk PSD dengan menggunakan Photoshop sebagai alatnya, 'Sohib-M' bisa intip cara saya membuatnya di artikel ini: Cara Membuat File PSD Untuk Blog.(Artikel dalam proses pengerjaan)
Pada artikel berikutnya kita akan membahas bagaimana mempersiapkan langkah terakhir sebelum kita menjalankan langkah implementasi pembuatan Blog, jadi nantikan artikel: Persiapan Desain pada sesi berikutnya.
Semoga 'Sohib-M' dapat sedikit terbantu dengan terbuatnya artikel ini. Kurang lebihnya kualitas artikel yang saya buat ini, saya harap 'Sohib-M' mau memakluminya. Tolong bantu saya, untuk share artikel ini jika bermanfaat, serta bantu like,share dan subscribe social media yang saya punya. Hal tersebut dapat mendongkrak semangat saya untuk terus membuat kelanjutan apa yang tengah saya bahas ini, atas perhatiannya saya ucapkan terima kasih.
0 comments:
Post a Comment