LEMBAR PENGESAHAN
PERANCANGAN MEDIA KOMUNIKASI VISUAL WEBSITE SEBAGAI MEDIA PENUNJANG DALAMMEMBANGUN CITRA PERSEBAYA BARU. TUGAS AKHIR
Diajukan Untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Teknik
Pada
Bidang Studi Desain Komunikasi Visual Program Studi S-1 Jurusan Desain Produk Industri
Fakultas Teknik Sipil dan Perencanaan Institut Teknologi Sepuluh Nopember
Oleh: Zainul Arifin Nrp 3404 100 096
SURABAYA, Agustus 2009 Disetujui oleh Pembimbing Tugas Akhir:
( Ir. Baroto Tavip Indrojarwo, Msi. ) NIP. 131 879 386
LEMBAR INI SENGAJA DIKOSONGKAN OLEH PENULIS
PERANCANGAN MEDIA KOMUNIKASI VISUAL WEBSITE SEBAGAI MEDIA PENUNJANG DALAM
MEMBANGUN CITRA PERSEBAYA BARU.
NAMA MAHASISWA : ZAINUL ARIFIN
NRP : 3404 100 096
JURUSAN : DESAIN PRODUK
INDUSTRI – FTSP – ITS
DOSEN PEMBIMBING : Ir. Baroto Tavip I, Msi.
ABSTRAK
Fans atau Supporter adalah elemen penting dalam kehidupan suatu klub sepak bola. Banyaknya jumlah pendukung akan membuat terbentuknya status sebagai team besar. Ada suatu hubungan timbal balik antara fans dan team sepak bola. Baik dalam bentuk profit oriented ataupun dalam bentuk dukungan secara emosional.
Perancangan Official Website Persebaya surabaya adalah sebagai tujuan untuk memberikan pelayanan seluruh informasi yang up to date mengenai Persebaya. Dengan konsep visual yang memunculkan image baru persebaya yang lebih sporty namun elegance dan memberikan regenerasi visual yang baru.
Fans akan mendapatkan solusi dari kebutuhan akan informasi yang up to date mengenai Persebaya Surabaya. Oleh karena itu Persebaya Surabaya harus memberikan suatu pelayanan mengenai informasi yang up to date yang diberikan untuk para Fans dan pendukung fanatik yang mudah diakses oleh para Fans dan Pendukung fanatik.
Kata Kunci : Media komunikasi visual Official Website, image baru.
DESIGN VISUAL COMMUNICATION MEDIA WEBSITE AS SUPPORTING MEDIA TO BUILD UP
A NEW IMAGE OF PERSEBAYA
STUDENT NAME : ZAINUL ARIFIN
NRP : 3404 100 096
MAJORS : INDUSTRIAL PRODUCT
DESIGN – FTSP – ITS COUNSELLOR LECTURER : Ir. Baroto Tavip I, Msi. Abstract
Fans or supporter are the main element for the club football life. Many number of supporter would crate status as a big team. There is a relationship from both sides between fans and football team on the profit oriented shape or emotionally support.
Design Official website Persebaya Surabaya as the purpose for giving some the whole information services which is up to date information about Persebaya. With visual concept shows up new image of Persebaya more sporty but elegance and giving the new regenerate visual.
Fans would get some solution needed for up to date informations about Persebaya Surabaya. That is why Persebaya Surabaya should give them some service about up to date information which is given for the fans and fanatic supporter that is easy access for them.
Keyword : Visual Communication Media Official Website, new image.
KATA PENGANTAR
Puji syukur kehadirat Allah SWT atas rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan laporan tugas akhir yang berjudul “PERANCANGAN WEB SITE PERSEBAYA SURABAYA SEBAGAI MEDIA PENUNJANG DALAM MEMBANGUN CITRA PERSEBAYA BARU.”Laporan ini menjelaskan hasil analisa, riset serta konsep desain Perancangan Media Komunikas Visual Imagery Persebaya Baru Sebagai Media Penunjang dalam membangun citra PERSEBAYA BARU. Penulisan tugas akhir ini tidak luput dari bantuan berbagai pihak. Untuk itu saya menyampaikan terima kasih kepada:
1. Allah SWT, atas segala limpahan Rahmat, Hidayah, Inayyah, dan Maghfirahnya. Dan rejeki yang tanpa ada habisnya di limpahkan pada saya hingga bisa menyelesaikan laporan ini.
2. Rasulullah Muhammad SAW, atas segala yang dilakukan hingga menyelamatkan manusia di seluruh muka bumi ini dan membawa ajaran yang memberikan “Rahmatan lill alamin.
3. Bapak saya sekaligus inspirasi saya, Almarhum Bpk Djumi’un, atas segala doa dan tuntunannya kepada saya untuk menjadi orang yang berusaha melakukan segala kebaikan. “ Bapak selalu jadi inspirasi saya, saya selalu rindu dengan bapak”.
4. Ibu Saya, atas segala pengorbanan, kesabaran, kasih sayang, perhatian, dorongan, dan yang paling utama adalah doa anda yang mustajabah kepada saya supaya saya tidak hilang arah. “Hanya ibu sandaranku, tidak ada ibu yang terbaik selain ibu”
5. Mbak Yunita Nugraini, atas segala dukungan, dorongan dan pengertiannya. Semoga selalu mendapatkan keselamatan dalam menjalani hidup.
6. Mas koe Taufik Qurohman dan Mbak Tya, atas segala dukungan, dorongan dan pengertiannya. Semoga selalu mendapatkan keselamatan dalam menjalani hidup. 7. Mbak Istiqomah dan Mas Denny, atas segala dukungan,
dorongan dan pengertiannya. Semoga selalu mendapatkan keselamatan dalam menjalani hidup.
8. Mbak Nurul “Bombi” Hidayah, berjuang terus menghadapi hidup. Jangan menyerah, Allah akan mengangkat derajat kita.
9. Mbak Yuli Astuti, duduk sama rata, berdiri sama tinggi. Kita itu sama, jangan pernah merasa berbeda.
10. My special girl Kanya Lilaningtyas, selalu menerangi hariku saat aku redup. “ You’re my everything”
11. Bapak Baroto Tavip Indrojarwo, terima kasih atas bimbingan yang diberikan dalam berbagai macam ilmu. 12. Bapak Sayatman, Bapak Ramok, dan juga Mas Bayu,
sebagai penguji saya. Terima kasih atas segala kritik, masukan dan sarannya kepada saya.
13. Pak Sabar, terima kasih udah mau ngajarin saya meskipun saya tetep ga bisa.
14. Seluruh Dosen dan karyawan DESPRO – ITS.
15. Kelurga Okto Djatmiko, terima kasih atas dukungan dan kepercayaan yang diberikan pada saya.
16. Bapak Supangat, terima kasih atas segala network yang di berikan. Tanpa bapak TA ini ga bakal berhasil. 17. Seluruh Direksi, Staf dan management PERSEBAYA
SURABAYA. “We are the big team”
18. Mas dewa n Pompy “Gombak”, persahabatan yang ga ada akhirnya.”thanks atas segala nya”
19. Adit “medan” n Dhani, thanks buat semuanya.
20. Condro Marco Plolo, kejar mimpimu. Thanks atas segala bantuan yang di berikan.
21. Arek Green House ( Dephit, Bandenk, Gina, Risma, Indah Katineung, Ngenk Marcell, dll ).
22. Joe, Nareen, n temen – temen seperjuangan TA yang lainnya, terima kasih atas supportnya.
23. Ipung yang mau Bantu aku motret objek.
24. 2004 Brotherhood, angkatan yang ga bakal musnah. 25. Teman –teman Produk, Interior, DKV, dari seluruh
angkatan.
26. Seluruh pihak yang telah membantu dalam segala hal dalam perancangan ini.
Penulis menyadari bahwa tugas akhir ini jauh dari sempurna, oleh karena itu, saran dan kritik yang membangun sangat saya harapkan. Semoga tugas akhir ini dapat memberikan manfaat bagi pembaca.
Surabaya, Juli 2009 Penulis
HALAMAN INI SENGAJA DIKOSONGKAN OLEH PENULIS
DAFTAR ISI
Halaman Judul ... i
Lembar Pengesahan ... v
Abstrak... ... vii
Abstract ... ix
Kata Pengantar... ... xiii
Daftar Isi ... xvii
Daftar Gambar ... x
BAB I Pendahuluan ... 1
1.1 Definisi Judul ... 1
1.2 Latar Belakang Masalah (Fenomena) ... 1
1.2.1 Kebutuhan Fans dan Supporter Persebaya Mendapatkan Informasi Mengenai Persebaya ... 1
1.2.1 Kebutuhan Informasi Mengenai Profil Persebaya Secara Singkat... ... 2 1.3 Identifikasi Masalah ... 3 1.4 Rumusan Masalah ... 4 1.5 Batasan Masalah ... 4 1.6 Tujuan Perancangan ... 4 1.7 Manfaat Penelitian ... 5 1.8 Ruang Lingkup ... 5
1.9 Sistematika Penulisan Laporan ... 7
BAB II Tinjauan Pustaka ... 11
II.1 Studi Literatur ... 11
2.1.1 Definisi Website ... 11
2.1.2 Tahapan Perancangan dan Pembangunan Situs Web... 11
2.1.3 Aspek Perancangan dan Pembangunan Situs Web ... 12
2.1.3.1 Aspek Utama Perancangan Web ... 12
2.1.3.2 Piramida Perancangan Web ... 12
2.1.3.3 PROCESS MODEL ... 13
2.1.3.4 Tiga Model Proses RekWeb ... 13
2.1.3.5 Web RAD ... 14
2.1.3.7 Waterfall Model ... …..14
2.1.3.8 Modified Waterfall Model ... ... 14
2.1.3.9 Modified Waterfall Model ...15
2.1.3.10 Definisi Masalah (Problem Definition)...15
2.1.3.11 Requirement Analysis dan Spesification ...16
2.1.3.12 Desain / Prototyping ... …..16
2.1.3.13 Struktur Link ...…..17
2.1.3.14 Implementation & Unit Testing...19
2.1.3.15 Integration & System Testing ..…..19
2.1.3.16 Release Operation & Maintenance .19 2.1.3.17 Prinsip – Prinsip Web Design ..…..19
2.1.3.18 Website Yang Direkayasa Secara Benar ...…..20
2.1.3.19 Design Tips ...…..21
2.1.4 Kajian Komunikasi Visual ... …..22
2.1.4.1 Elemen Layout...…..22
2.1.4.2 Elemen Teks Dalam Layout...…..22
2.1.4.3 Judul / Heading...…..22
2.1.4.5 Elemen Visual dalam Layout...…..23
2.1.4.6 Foto...…..23
2.1.5 Definisi Imagery (Citra) ...28
2.1.6 Definisi Marketing ... ...28
2.1.7 Metode – Metode Segmentasi Pasar ... ...29
2.1.8 Segmentasi Demografi... ...29
2.1.8.1 Segmentasi Geografis...31
2.1.8.2 Segmentasi Behavioris...31
2.1.8.3 Segmentasi Psikografis...31
2.1.9 Layout dan Typografi ... ...32
2.1.10 Psikologi Warna ... ...34
2.1.11 Semiotika Dalam Arsitektur ... ...36
2.1.12 Tujuan Komunikasi ... ...37 2.1.13 Pendekatan Komunikasi... ...38 2.1.14 Pesan ... ...39 2.1.14.1 Memilih Pesan... ...39 2.1.14.2 Pelaksanaan Pesan... ...40 2.1.15 Visual ... ...41 2.1.16 Kajian Komunikasi ... ...41
2.1.16.1 Definisi Komunikasi... ...41
II.2 Studi Eksisiting ... 43
2.2.1 Data Perusahaan ... 43
2.2.2 Sejarah Klub... 43
2.2.3 Data dan Analisis Segmentasi ... 43
2.2.4 Segmentasi dan Positioning ... 45
2.2.5 Unique Selling Preposition ... 46
2.2.6 Promosi ... 47
2.2.7 Pesaing ... 48
2.2.8 Komparator ... 49
BAB III Metodologi Penelitian ... 53
3.1 Definisi Judul ... 53
3.2 Populasi ... 53
3.3 Teknik Sampling ... 53
3.3.1 Populasi ... 53
3.3.1.1 Demografi Target Segment ... 53
3.3.1.2 Segmentasi Psikografis Pengunjung . 54 3.3.2 Sampel ... 54
3.4 Jenis dan Sumber Data ... 56
3.4.1 Jenis Data ... 56
3.4.2 Sumber Data ... 56
3.5 Metode Penelitian ... 57
3.5.1 Perencanaan ... 57
3.5.2 Perancangan... 57
3.5.3 Bagan Metodologi Penelitian ... 58
3.5.4 Bagan Metodologi Proses Pembentukan Visual ... 59
BAB IV Studi Dan Analisa ... 63
4.1 Penelusuran Masalah ... 63
4.1.1 Kebutuhan Fans dan Supporter Persebaya Mendapatkan Informasi Mengenai Persebaya ... 63
4.1.2 Kebutuhan Informasi Mengenai Profil Persebaya Secara Singkat ... 64
4.2 Target Audiens ... 65
4.2.1 Segmentasi Demografis ... 65
4.2.3 Segmentasi Psikografis ... ...65
4.2.4 AIO (Activity, Interest, Opinion) ... ...66
4.3 Unique Selling Preposition ... ...68
4.4 Skema Penemuan Konsep Website ... ...70
4.4.1 Skema Penemuan Konsep Visual ... ...71
4.4.2 Definisi Keyword ... ...72
4.4.2.1 Definisi Denotatif ... ...72
4.4.2.2 Definisi Konotatif... ...72
4.5 Konsep Desain... ...72
4.6 Kriteria Desain... ...72
4.6.1 Perancangan Official Website... ...72
4.6.2 Proses Warna... ….73 4.6.3 Style Desain... ….74 4.6.4 Komunikasi... ….75 4.6.2.1 Konsep Komunikasi... ….75 4.6.2.2 Tujuan Komunikasi... ….76 4.6.2.3 Pendekatan Komunikasi... ….77 4.6.2.4 Strategi Komunikasi... ….77 4.6.2.5 Proses Komunkasi... ….78
4.6.2.6 Layout Link Website... ….79
4.6.2.7 Dampak Yang Diharapkan... ….79
4.7 Studi Eksisting... ...80 4.8 Proses Desain ... ….82 4.8.1 Thumbnail Desain ... ….82 4.8.2 Rough Desain ... ….82 4.8.3 Konfrehensif Desain ... ...82 4.8.4 Aplikasi Desain ...82 4.8.5 Desain Terpilih ...82 4.8.6 Final Desain ...82
BAB V Implementasi Desain ... ...85
5.1 Typography ... ...85
5.2 Super Grafis... ...87
5.3 Main Media... ...88
5.3.1 Media Official Website... ...88
5.3.2 Content isi Media Official Website... ...90
5.3.2.1 Halaman Home... ...90
5.3.2.2 Content News Info Terkini... ...92
5.3.2.4 Content Hasil Pertandingan...94
5.3.2.5 Content Team & Staff...95
5.3.2.6 Content Club Info...96
5.3.2.7 Content Sejarah Persebaya...97
5.3.2.8 Content Sponsor & Partner...98
5.3.2.9 Content Green Shoop...99
5.3.2.10 Content Top Corner ( Persebaya )...100
5.3.2.11 Content Wallpaper Gallery...101
BAB VI Kesimpulan dan Saran ... 105
Daftar Pustaka ... 109
HALAMAN INI SENGAJA DIKOSONGKAN OLEH PENULIS
DAFTAR GAMBAR
Gambar 1.1 : Team Persebaya Surabaya ... 3
Gambar 1.2 : Gambar Skema Fokus Media ... 6
Gambar 1.3 : Gambar Skema Media Dikerjakan ... 6
Gambar 2.1 : Pyramida Website ...13
Gambar 2.2 : Elemen Dalam Layout ... 22
Gambar 2.3 : Jenis Font Untuk Judul ... 23
Gambar 2.4 : Contoh Lay Out ... 24
Gambar 2.5 : Promo Persebaya ... 48
Gambar 2.6 : Kompetitor Persebaya ... 49
Gambar 2.7 : Komparator ... 50
Gambar 3.1 : Bonek Persebaya Surabaya ... 56
Gambar 3.2 : Bagan Metodologi Penelitian ... 58
Gambar 3.3 : Bagan Metodologi Proses Pembentukan Visual ... 59
Gambar 4.2 : Skema Proses Pembentukan Konsep... 70
Gambar 4.3 : Skema Proses Pembentukan Konsep... 71
Gambar 4.4 : Skema Proses Pembentukan Warna... 74
Gambar 4.5 : Style Desain... 75
Gambar 4.6 : Gambar Bagan Layout Link Website... 79
Gambar 4.7 : Tabel Eksisting... 81
Gambar 4.8 : Alternatif Desain... 82
Gambar 5.1 : Gambar Jenis Font Desain Final... 85
Gambar 5.2 : Gambar Jenis Font Desain Final... 86
Gambar 5.3 : Gambar Jenis Font Desain Final... 87
Gambar 5.4 : Implementasi desain Final... 87
Gambar 5.5 : Super Grafis Desain Final... 88
Gambar 5.6 : Opening Website... 89
Gambar 5.7 : Page Home... 90
Gambar 5.8 : News Info Terkini... 92
Gambar 5.9 : News Foto Terkini... 93
Gambar 5.10 : Page Hasil Pertandingan... 94
Gambar 5.11 : Page Team & Staff... 95
Gambar 5.12 : Page Club Info... 96
Gambar 5.13 : Page Sejarah Persebaya... 97
Gambar 5.15 : Page Green Shoop... 99 Gambar 5.16 : Page Persebaya Chat... 100 Gambar 5.17 : Page Wallpaper Gallery... 101
