Gravisware Web Design

Lokasi anda: Home Tips dan Tutorial Tips Header untuk Website

Tips Header untuk Website

HeaderHeader adalah sebuah ruang grafis yang terletak di bagian paling atas website. Sebagai simbol website, tentunya header memiliki peranan penting dalam website.Header adalah apa yang dilihat pengunjung pertama kali saat membuka website. Seperti halnya kop surat, ia selalu kelihatan di semua halaman website. Maka dari itu, header biasanya memuat logo atau ikon tertentu yang melambangkan pemilik website.

Jika website diibaratkan sebuah buku, maka header adalah covernya. Seperti yang kita tahu, sebelum seseorang membeli buku, ia selalu melihat dulu bagaimana covernya. Dalam psikologi komunikasi diutarakan pula bahwa cover yang unik cenderung membuat orang lebih tertarik mempelajari lebih dalam isi buku tersebut.

Penelitian pun telah menyebutkan bahwa orang lebih mudah mengingat 'gambar dalam website' dari pada 'teks-teks dalam web'. Coba anda buka sebuah web, amati selama 10 detik, kemudian tutup kembali web tersebut. Apa yang anda ingat? biasanya cuma dua hal: desain header dan judul webnya. Ada beberapa unsur penting yang harus diperhatikan dalam membuat atau memilih desain untuk header web, diantaranya:

Khas dan berkarakter

Header web yang digunakan dalam website sebaiknya berbeda dengan website-website lain. Header yang 'pasaran' membuat orang berpendapat bahwa web tersebut 'sama saja' dengan web yang lainnya.

Eye Catching dan Unik

Seperti halnya iklan, header tersebut harus mengundang simpati orang yang melihatnya, sekalipun itu cuma sederhana. Selain itu gunakan gambar, tulisan, maupun logo yang sekiranya  belum pernah dilihat orang yang sebelumnya.

Mencerminkan isi website

Seperti halnya cover buku, header harus melambangkan isi seluruh website. Hal ini penting karena sangat menyangkut image pengunjung pada web. Jangan pasang gambar pemandangan jika ingin berbicara tentang komputer, jangan pasang gambar sapi jika berbicara tentang ayam, dan jangan pasang gambar Miyabi jika ingin berbicara tentang agama (maaf, he..he..).

Yup, memang dibutuhkan sebuah ide kreatif untuk membuat atau memilih Header yang khas, unik, dan menarik. Dibawah ini ada beberapa header yang cukup unik dari beberapa blog. Sebagai catatan, semua blog dibawah ini juga menggunakan Wordpress sebagai CMS-nya. Silahkan klik pada gambar untuk menuju ke website asli.

 Branded 07   Ayaka Ito

Cute Little Factory   Daniel Tosh

Digging into WordPress   Favela Chic London 

Garamiz   by Land, Sea, or Air 

Matt Mullenweg   The Pixel 

Tierra Virtual   Tut Candy 

 

 

 

Komentar  

 
0 # 00:10 14-11-2009
thanks infonya ya
Balas | Balas dengan salinan | Salin
 
 
+1 # 02:35 14-11-2009
kunjungan perdana...

salam kenal
Balas | Balas dengan salinan | Salin
 
 
0 # 03:10 14-11-2009
Keren-keren banget sih..

wah punya saya kalah menarik dengan header-header di atas.

Saya belajar lagi deh dengan tips yang diberikan,hehe
Balas | Balas dengan salinan | Salin
 
 
+1 # 08:22 14-11-2009
headeer anda adsensense
Balas | Balas dengan salinan | Salin
 
 
0 # 10:01 14-11-2009
betul bang... agar di klik orang..
tapi saya sedikit menambalnya dengan slideshow dibawahnya.. agar keliatan sedikit 'imbang'
Balas | Balas dengan salinan | Salin
 
 
0 # 08:47 14-11-2009
beeehhh headernya keren keren bang

bagussss
Balas | Balas dengan salinan | Salin
 
 
0 # 09:04 14-11-2009
wew... keren keren tuh design headernya....
Balas | Balas dengan salinan | Salin
 
 
0 # 09:05 14-11-2009
maunya sih punya header unik sendiri ..
tapi ndak bisa ndesainnya :)
Balas | Balas dengan salinan | Salin
 
 
0 # 11:49 14-11-2009
Benar2 dahsyat
Balas | Balas dengan salinan | Salin
 
 
0 # 15:44 14-11-2009
blog gue kasih headernya gimana ya..
Balas | Balas dengan salinan | Salin
 
 
0 # 15:59 14-11-2009
wahhhhh ..... bisa pesen 1 neh untuk headerku
Balas | Balas dengan salinan | Salin
 
 
0 # 19:07 14-11-2009
sampai sekarang saiia gag pernah bisa nentuin header yg cocoj tuk blog saiia kang... any suggest?!?!?
Balas | Balas dengan salinan | Salin
 
 
0 # 19:48 14-11-2009
punyakmu udah keren kok.. ya emang gitu, harus simple.. soale kan postingmu udah 'pernuh warna' semua... ntar kalo headernya ikutan rame.. jadi kalah dong postingannya.. sukses buatmu yah..
Balas | Balas dengan salinan | Salin
 
 
0 # 19:55 14-11-2009
iia juga sii :) huehehe.. pa kanbar nii kang jod?!?!?! mab iia baru semped menjelajah kembali :( tau nii lg serba gag sreg terus2an :(
Balas | Balas dengan salinan | Salin
 
 
+1 # 21:01 14-11-2009
baik sekali kabarku.. he.he. ndak papalah.. pokok'e maju teyus pantang mundur deh buatmu..
Balas | Balas dengan salinan | Salin
 
 
-1 # 21:00 14-11-2009
buat semua yg udah komen dan berkunjung.. thanks yaach..
Balas | Balas dengan salinan | Salin
 
 
+1 # 21:08 14-11-2009
sebenernya yg punya tu si sofi ato kang jod sii?!?!?!? :(
Balas | Balas dengan salinan | Salin
 
 
0 # 21:28 14-11-2009
he..he.. yg punya blog ini emang keroyokan. yg nulis keroyokan, yg BW keroyokan juga.. (coba liat di menu Tentang Kami - Tim Kerja)
Balas | Balas dengan salinan | Salin
 
 
0 # 22:43 14-11-2009
hmm.. kalo header blog aku tulisannya 'my diary' kalo ga salah yah?! itu ajah kagak diutak-atik

enakan emang kalo didesign secara khusus yaahh,, lebih siipphh... bikinin dong mas
Balas | Balas dengan salinan | Salin
 
 
0 # 23:00 14-11-2009
saya masih bingung headernya mesti kaya gmn.... makanya ga pake header.....
Balas | Balas dengan salinan | Salin
 
 
0 # 23:47 14-11-2009
bener banget sobat...
header menentukan juga ya...
salam
Balas | Balas dengan salinan | Salin
 
 
0 # 05:14 15-11-2009
info menarik ,,.....semenarik info yang satu ini
pengin tahu
buka aja linknya...!
Balas | Balas dengan salinan | Salin
 
 
0 # 10:50 15-11-2009
tipsnya keren bosss..
selamat ngeblog lagi yah
hehehehe
Balas | Balas dengan salinan | Salin
 
 
0 # 14:39 15-11-2009
kalo saya susah bikin header yang eye-catching
Balas | Balas dengan salinan | Salin
 
 
+1 # 14:41 15-11-2009
kalo bikin header biasanya make jasa web gratisan
Balas | Balas dengan salinan | Salin
 
 
0 # 11:36 17-11-2009
Hmm...kalo bikin yang eye catching agak susah juga, apalagi kalo ga bisa desain pake sofware gambar
Balas | Balas dengan salinan | Salin
 
 
0 # 11:36 17-11-2009
kalo punya saya kira-kira dah eye-catching belum yah
Balas | Balas dengan salinan | Salin
 
 
0 # 19:24 17-11-2009
mantap-mantap....!! salam kenal.
Balas | Balas dengan salinan | Salin
 
 
0 # 09:04 18-11-2009
cakep2 headernya...
sangat kreatif abizz
Balas | Balas dengan salinan | Salin
 
 
0 # 21:25 18-11-2009
wah..
makasih banyak atas infonya..
sayang masalah pengedditan HTML blum bisa..
jadi kalau mau gnti susah
Balas | Balas dengan salinan | Salin
 
 
0 # 12:44 19-11-2009
Setuju banget. Mayoritas pengunjung blog akan melihat header baik sadar atau tidak. Saya barusan nyampe sini juga liat logo di header terutama.3u
Balas | Balas dengan salinan | Salin
 
 
+1 # 18:45 04-12-2009
jika pesan design untuk blog bagaimaa caranya ?
thanks
Balas | Balas dengan salinan | Salin
 
 
0 # 11:37 05-12-2009
bisa banget Pak De.. isi saja formulir "Kontak" di web ini..
Balas | Balas dengan salinan | Salin
 
 
0 # 11:35 08-12-2009
Kalau header animasi gif bisa gerak nggak Mbak?
Balas | Balas dengan salinan | Salin
 
 
0 # 15:57 09-12-2009
bisa kok.. tapi mending pake flash atau java sekalian.. animasi gif terbatas banget..
Balas | Balas dengan salinan | Salin
 
 
0 # 16:14 19-12-2009
wew .... menarik-menarik euy headernya ...
jd terinspirasi
Balas | Balas dengan salinan | Salin
 
 
0 # 20:32 01-01-2010
saya minim soal itu kang, hehe, yah, kalopun headernya bagus tapi bodynya gak kan sayang. hehe,,,
Balas | Balas dengan salinan | Salin
 
 
0 # 20:12 24-01-2010
Pengin punya blog dengan header yang mempunyai ciri khas khusus, masalahnya bingung mo milih yang kayak apa lagian buat nggambarnya juga ga bisa
Balas | Balas dengan salinan | Salin
 
 
0 # 20:58 06-02-2010
perlu ganti header niii......
Balas | Balas dengan salinan | Salin
 
 
0 # 00:50 17-10-2010
mantap boss kalo boleh minta tutor bikinnya hehehe..mampir keblog newbie ya..
www.sholeh.co.tv
www.bisnisurang.blogspot.com
www.butuhartos.blogspot.com
Balas | Balas dengan salinan | Salin
 
 
0 # 13:40 13-11-2010

hahag
Balas | Balas dengan salinan | Salin
 
 
0 # 12:08 15-11-2010
wah bos saya lagi mencari nya info seperti in dan saya boleh bertanya ulang jika saya membutuhkan bantuan.....http://google-trik.blogspot.com
Balas | Balas dengan salinan | Salin
 
 
0 # 07:18 22-06-2011
Trims, kebetulan q lg memulai buat web n lg pada posis merancang Header, tulisannya sangat membantu saya utk mengerti ttg Header, sdh ngerti skg tinggal cara membuatnya
Balas | Balas dengan salinan | Salin
 
 
0 # 16:40 23-06-2011
desain header tetap menjadi peluang yang baik ...
Balas | Balas dengan salinan | Salin
 
 
0 # 14:14 24-06-2011
kereeeeennnnn.....
Balas | Balas dengan salinan | Salin
 
 
0 # 14:16 24-06-2011
Kalau header animasi gif gimana caranya ya??
Balas | Balas dengan salinan | Salin
 
 
0 # 20:31 03-08-2011
makasih buat infonya, bisa untuk melengkapi artikel yang aku buat tentang cara membuat header template minima menjadi 2 ya. lagi belajar mengedit template dan sekalian membuat artikel tentang caranya nih
Balas | Balas dengan salinan | Salin
 
 
0 # 13:18 21-09-2011
maaf, mau nanya ..
Apa header seperti di atas tidak akan berpengaruh terhadap loading blog nantinya..
trims..
Balas | Balas dengan salinan | Salin
 
 
0 # 21:04 01-12-2011
emmmmm......keren-keren tuh headernya...............
Balas | Balas dengan salinan | Salin
 
 
0 # 22:41 21-01-2012
infonya keren gan
Balas | Balas dengan salinan | Salin
 
 
0 # 13:35 02-12-2012
Terimakasih informasinya perlu dicxoba nih
Balas | Balas dengan salinan | Salin
 
 
-1 # 18:17 02-01-2013
post tentang tips header website,, ko header website nya sendiri kaya gini , cuma bisa ngakak
Balas | Balas dengan salinan | Salin
 
 
0 # 21:21 02-01-2013
Lebih lengkapnya bisa dilihat di portfolio kami mas.. www.gravis-design.com/.../ kalo di sini cuma blog saja, sengaja cuma dibuat hitam, agar ketika membuka, fokus orang tertuju pada logo.. (atau adsensenya.. hehe.. )
Balas | Balas dengan salinan | Salin
 

Beri komentar


Kode keamanan
Refresh

Translate This Page

Web Design


Artikel Terpopuler

Bagi Info

Anda bisa membagi informasi yang tercantum di situs ini lewat:

Bagikan info di situs ini lewat Blinklist Bagikan info di situs ini lewat Del.icoi.us Bagikan info di situs ini lewat Digg Bagikan info di situs ini lewat Facebook Bagikan info di situs ini lewat Furl Bagikan info di situs ini lewat Google Bagikan info di situs ini lewat Ma.Gnolia Bagikan info di situs ini lewat Newsvine Bagikan info di situs ini lewat Reddit Bagikan info di situs ini lewat StumbleUpon Bagikan info di situs ini lewat Technorati Bagikan info di situs ini lewat Yahoo

Berlangganan

Anda bisa mengikuti update artikel terbaru di situs ini lewat :
Ikuti update artikel lewat email
  Ikuti update artikel lewat RSS 2.0 (feedburner)  Ikuti update artikel lewat Twitter (http://twitter.com/gravisware)