ULASAN KARYA PERANCANGAN

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 http://digilib.mercubuana.ac.id/

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


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


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.

1

2

3

3 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.


5. Layout Homepage.

1 2 3

4 5

7 6

8 9 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.


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.

1

2

1.a 3

1.b

GB.39. Layout Halaman Ajikan


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


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.


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.


GB.43. Layout Halaman Biography


11. Layout Halaman Discography. Halaman ini menggunakan layout 2 kolom, pada bagian konten menampilkan gambar-gambar dari Art Cover discography Asian KungFu 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.


Sehingga pengunjung lebih efisien dan efektif dalam menelusuri isi website.

1 2 3

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


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.

1 2

3

4

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


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


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


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


17. Layout Halaman PV Halaman ini menggunakan layout 2 kolom, pada bagian konten menampilkan promotional video (PV) yang telah dirilis oleh Asian KungFu 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


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.


GB.52. Layout Halaman Contact

20. Layout Forum

1 4

2 5

6 3 GB.53. Layout Forum


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.


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


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


ULASAN KARYA PERANCANGAN

Recommend Documents