ULASAN KARYA PERANCANGAN

Transkripsi

1 V ULASAN KARYA PERANCANGAN A. Desain Website 1. Sketsa Portal Website. Sketsa layout halaman depan portal website menjadikan acuan dalam merancang dan menentukan desain yang digunakan pada nantinya, pada tahap ini diperlukan membuat beberapa sketsa layout sebagai alternatif yang akan digunakan. Pembuatan sketsa layout ini mengacu pada tujuan dan konsep dasar pembuatan website komunitas. Dari ke dua desain yang telah dihasilkan akhirnya terpilih desain alternatif yang akan dijadikan layout web portal komunitas karena dirasa desain tersebut yang paling mendekati tujuan dan konsep awal pembuatan website komunitas untuk Fans Club Asian Kung-Fu Generation Indonesia. GB.34. Sketsa Portal Website 51

2 2. Sketsa Forum. Sketsa layout forum menjadikan acuan bagi dalam mendesign layout forum yang sesuai dengan tujuan, konsep dan brief desain yang telah ditentukan sebelumnya. Dalam sketsa ini diperjelas bagian-bagian layout dan element forum yang akan dibuat. GB.35. Sketsa Forum 52

3 3. Sketsa Element Website. Sketsa elemen website yang dibuat disini yaitu header, pembuatan sketsa header dengan character-character yang terdapat dalat Art cover discography Asian Kung-Fu Generation yang dikonsepkan dengan warna-warna tradisional sehinga mempunyai ciri khas Asian Kung-Fu Generation dan memiliki nuansa lokal. GB.36. Sketsa Element Website 53

4 4. Desain Element Website. Desain header website yang sudah berbentuk digital, disini dibuat beberapa header sebagai alternatif header selain desain header dari yang sudah dikonsepkan GB.37. Desain Element Website Keterangan Gambar: 1. Header utama yang dibuat berdasarkan konsep dan sketsa dasar, Warna-warna yang digunakan adalah warna coklat yang identik dengan warna daerah di indonesia serta penggayaan menyerupai pertunjukan wayang agar lebih memberikan kesan nuansa Indonesianya. 2. Header alternative yang dibuat mengikuti penggayaan header utama dengan desain yang lebih simple, hanya menampilkan nama komunitas dan ilustrasi variasi logo komunitas yang berbentuk wayang gunungan. 3. Header info yang dibuat berdasarkan kegiatan/acara dari Asian Kung-Fu Generation yang berlangsung pada rentan waktu tertentu dan akan berganti header yang baru sesuai dengan kegiatan/acara yang sedang berlangsung. 54

5 5. Layout Homepage GB.38. Layout Homepage Keterangan Gambar: 1. Header website yang ditampilkan dengan animasi JQuery. 2. Menu website, pada beberapa menu menggunakan ikon agar lebih terlihat menarik. 3. Animasi Art Cover discography Asian Kung-Fu Generation agar wembuat website lebih menarik dan memberikan kesan sebagai website musik. 4. Banner Kiri yang menginformasikan lirisan single/album terbaru Asian Kung-Fu Generation dan berisikan beberapa link penting. 5. Bagian News yang menampilkan berita-berita terbaru mengenai Asian Kung-Fu Generation dan komunitas dibuat dengan layout 3 kolom dan 2 baris. 55

6 6. Banner Bottom menginformasikan kegiatan/acara terbaru Asian Kung-Fu Generation, menggunakan layout 3 kolom. 7. Background website yang memberikan kesan simple dan minimalis. 8. Bagian Bottom menggunakan layout 3 kolom dan menggunakan background dengan warna yang lebih gelap agar memberikan kesan tidak monoton dengan warna-warna terang, selain itu bagian ini menjadi aksen agar website lebih terlihat menarik. Bagian ini menapilkan informasi akun social media komunitas, panduan komunitas dan bagian disclaimer. 9. Bagian Footer yang berisi informasi pembuat website dan tahun aktif website. 6. Layout Halaman Ajikan News. Halaman Ajikan News menggunakan layout 2 kolom, pada bagian konten menggunakan layout 1 artikel utama dan 4 sub-artikel. Format layout halaman ini juga digunakan pada halaman interview, fcai news, dan software a 3 1.b GB.39. Layout Halaman Ajikan 56

7 Keterangan Gambar: 1. Konten : Menampilkan berita terbaru asian Kung-Fu Generation, bagian ini menggunakan layout 1 artikel utama dan 4 sub-artikel. 1.a. Artikel Utama : Menampilkan 1 artikel terbaru dengan layout 1 kolom, layout ini dibuat sebagai aksen agar layout artikel tidak terkesan monoton dan mempunyai variasi. 1.b. Sub-artikel : Menampilkan 4 artikel yang dibuat setelah artikel utama dengan layout 2 kolom dan 2 baris. 2. Terbaru : Modul yang menampilkan artikel terbaru dari kategori ajikan news, fcai news, review dan interview. 3. Populer : Modul yang menampilkan artikel terpopuler berdasarkan artikel yang sering dilihat pengunjung. 7. Layout Halaman Artikel. GB.40. Layout Halaman Artikel 57

8 Halaman artikel ini menggunakan layout 2 kolom pada bagian mainbody-nya, terdapat tombol sosial media untuk membagikan artikel tersebut ke media sosial seperti facebook twitter dan sebagainya di bagian atas banner artikel. 8. Layout Halaman Review. GB.41. Layout Halaman Review Halaman ini menggunakan layout 2 kolom, pada bagian konten terdapat gambar-gambar dari Art cover discography Asian Kung-Fu Generation yang diberikan efek zoom-in dan link menuju artikel review yang dimaksud, sehingga pada saat mouse diarahkan ke area gambar maka gambar akan menampilkan efek zoom-in dan ketika di klik akan membuka halaman review dari gambar yang di klik. 58

9 9. Layout Item Artikel Review. GB.42. Layout Halaman Item Artikel Review Halaman ini menggunakan layout 2 kolom, pada bagian konten terdapat gambar dari art cover discography yang di review selain itu keterangan mengenai discography dan hasil review ditampilkan dalam bentuk tabel yang dibuat secara menarik. 10. Layout Halaman Biography. Halaman ini menggunakan layout 1 kolom, pada bagian konten menampilkan informasi mengenai Asian Kung-Fu Generation dan profile yang ditampilkan dalam tabel. Bagian anggota ditampilkan dalam tab yang dibuat agar halaman menjadi lebih informatif dan interaktif, sedangkan pada bagian Perjalanan Karir ditampilkan menggunakan effect slider sehingga pengunjung hanya perlu mengklik rentan waktu yang ada untuk melihat informasi dalam waktu tersebut. 59

10 GB.43. Layout Halaman Biography 60

11 11. Layout Halaman Discography. Halaman ini menggunakan layout 2 kolom, pada bagian konten menampilkan gambar-gambar dari Art Cover discography Asian Kung- Fu Generation yang diberikan efek Polaroid dengan background seperti gerabah kayu untuk membuat halaman semakin menarik. GB.44. Layout Halaman Discography 12. Layout Item Artikel Discography. Halaman ini menggunakan layout 2 kolom, pada bagian konten menampilkan informasi mengenai discography yang sedang dilihat seperti tahun rilis, tempat untuk membeli, deskripsi dan informasi singkat lainnya. Selain itu terdapat pula informasi mengenai daftar lagu, lirik dan sample song yang terdapat pada discography tersebut di buat menggunakan tabel yang ditampilkan secara menarik dan informatif. 61

12 Sehingga pengunjung lebih efisien dan efektif dalam menelusuri isi website GB.45. Layout Item Artikel Discography Keterangan Gambar: 1. Tabel daftar lagu yang terdapat dalam discography yang sedang dilihat. 2. Ikon lirik yang jika di klik akan menuju halaman lirik yang dimaksud. 3. Sample lagu yang terdapat dalam discography yang sedang dilihat sehingga pengunjung dapat mendengarkan sample lagu 62

13 dari discography tersebut yang sekiranya dapat membuat pengunjung tertarik/suka, sehingga memiliki niat untuk membeli discography tersebut atau membuat ketertarika terhadap Asian Kung-Fu Generation. 13. Layout Halaman Album & Single Lyrics. Halaman ini menggunakan layout 2 kolom, kontennya dibuat dengan link yang menuju pada anchor link dari daftar lirik dengan background chalkboard GB.46. Layout Halaman Album & Single Lyrics Keterangan Gambar: 1. Link yang jika di klik akan menuju ke anchor link yang ditargetkan, metode ini sangat efektif untuk halaman yang 63

14 memanjang kebawah karena memudahkan pengunjung dalam menelusuri halama tersebut. 2. Anchor link yang dikategorikan berdasarkan abjad dari daftar lirik untuk memudahkan pencarian lirik. 3. Daftar lirik yang disusun berdasarkan abjad, jika di klik akan menuju halaman lirik yang dimaksud. 4. Backgorund dengan gaya chaklboard (papapn tulis) sebagai aksen dari halaman tersebut. 14. Layout Item Artikel Lirik. Halaman ini menggunakan layout 2 kolom, pada konten terapat lirik dalam Romaji, Kanji, English, dan Indonesia yang ditampilkan dalam bentuk tab untuk memudahkan pengunjung dan membuat halaman lebih interaktif. Dalam lirik tersebut juga terdapat link yang menuju ke halaman discography lirik yang dimaksud, ini agar memberikan navigasi yang lebih mudah dan efisien bagi pengunjung sehingga pengunjung tak perlu mengklik menu discography lalu memilih discography yang ingin dia lihat. GB.47. Layout Item Artikel Lirik 64

15 15. Layout Halaman Gallery. Halaman ini menggunakan layout 1 kolom, pada kontennya dibuat 2 kolom ditampilkan dalam bentuk kategori image yang menggunakan Mosaic Effect sehingga setiap kategori menampilkan beberapa gambar yang terdapat dalam kategori tersebut yang ditampilkan dan disusun secara random. GB.48. Layout Halaman Gallery 65

16 16. Layout Item Gallery. Halaman ini menggunakan layout 2 kolom, pada bagian konten terdapat gambar yang diberikan Masonry Effect menampilkan tiga puluh gambar. Layout bagian konten ini terinspirasi dari layout media social Pinterest.com. GB.49. Layout Item Gallery 66

17 17. Layout Halaman PV Halaman ini menggunakan layout 2 kolom, pada bagian konten menampilkan promotional video (PV) yang telah dirilis oleh Asian Kung- Fu Generation. Video bersumber dari pihak ke-3 seperti youtube, vimeo, dan sebagainya yang ditampilkan dan bisa dilihat langsung disitus ini agar memudahkan pengunjung dalam mencari atau melihat promotional video dari Asian Kung-Fu Generation. Penggunaan layanan dari pihak ke-3 seperti youtube dan vimeo kemudian ditampilkan dalam situs ini dimaksudkan untuk menghemat bandwith dan space dari hosting yang digunakan sehingga tidak memberatkan kinerja server yang membuat website berat untuk diakses. GB.50. Layout Halaman PV 67

18 18. Layout Halaman Team. Halaman ini menggunakan layout 2 kolom, pada bagian konten daftar team ditampilkan dalam animasi slider yang berisi profil singkat mengenai anggota yang mengurus komunitas Fans Clb Asian Kung-Fu Generation Indonesia. Garis warna-warni pada bagian atas slider digunakan sebagai aksen untuk membuat slider lebih tampak menarik. GB.51. Layout Halaman Team 19. Layout Contact Halaman ini menggunakan layout 2 kolom, pada konten menampilkan form contact dengan background gradasi putih ke abu-abu tua pemilihan warna itu didasari dari warna dominan website agar masih memberikan kesan satu tema yakni simple dan minimalis. 68

19 GB.52. Layout Halaman Contact 20. Layout Forum GB.53. Layout Forum 69

20 Keterangan Gambar: 1. Header forum didesain dengan pemandangan siluet kota dan beberapa character dari art cover discography Asian Kung-Fu Generation serta background menggunakan gradasi warna merah tua yang terinspirasi dari Art Cover album World World World dan Magic Disk agar lebih familar dan nuansa Asian Kung-Fu Generation lebih terasa. Tak lupa juga penempatan logo baru dalam bentuk gunungan yang lebih merepresentasikan komunitas Fans Club Asian Kung-Fu Generation Indonesia. 2. Mainbody : bagian ini menggunakan background hitam dan variasi logo komunitas berbentuk gunungan yang pada sisinya muncul instrument gitar yang terinpirasi dari art cover discography Asian Kung-Fu Generation. 3. Footer forum menggunakan art dari cover album Magic Disk yang diedit warnanya menjadi abu-abu menggunakan software Photoshop. 4. User panel : bagian yang menampilkan menu dan informasi user ketika login. 5. Kategori forum : bagian ini mengkategorikan topik-topik yang dibuat dalam forum agar lebih terorganisasi dan memudahkan anggota dalam menentukan kategori yang tepat pada topik yang akan dibuat sebagai tempat berdiskusi. 6. Legend forum : ikon yang menginformasikan sebuah kategori apakah ada post terbaru atau tidak dalam kategori tersebut dan menginformasikan kategori atau topik dalam forum yang sudah tidak aktif. 70

21 B. Desain Logo 1. Sketsa Logo Bagi sebuah komunitas logo merupakan representasi dari maksud/tujuan komunitas tersebut dibangun, logo komunitas Fans Club Asian Kung-Fu Generation Indonesia yang lama kurang merepresentasikan wajah dari komunitas tersebut sehingga dibutuhkan pembuatan desain logo baru yang lebih merepresentasikan komunitas Fans Club Asian Kung-Fu Generation Indonesia. Pada akhirnya dibuat sketsa dasar untuk logo baru komunitas berdasarkan data-data dan konsep awal pembuatan website komunitas Fans Club Asian Kung-Fu Generation Indonesia ini dengan menggunakan karakter-karakter dan penggayaan yang sesuai dengan ciri khas dari Asian Kung-Fu Generation. GB.54. Sketsa Logo 71

22 2. Logo & Variasinya Dari hasil sketsa lalu dibuat secara digital, dilakukan juga pengembangan logo sehingga menghasilkan beberapa variasi logo yang dapat digunakan. GB.55. Logo & Variasinya 72