BAB 5 HASIL DAN PEMBAHASAN DESAIN

Ukuran: px

Mulai penontonan dengan halaman:

Download "BAB 5 HASIL DAN PEMBAHASAN DESAIN"

Veronika Jayadi
6 tahun lalu
Tontonan:

Sesuai dengan big idea Sembilan Persona yang diangkat 9 personalisasi tiap karakter berupa peranan atau profesi yang ada dalam masyarakat, sesuai dengan tipe-tipe manusia pada enneagram.

1 BAB 5 HASIL DAN PEMBAHASAN DESAIN 5.1. Konsep Desain Website ini merupakan website bersifat webaap yang di dalamnya terdapat kuis kepribadian, ditampilkan dengan visual ikonik untuk menjelaskan sifat-sifat dari kepribadian manusia. Sesuai dengan big idea Sembilan Persona yang diangkat 9 personalisasi tiap karakter berupa peranan atau profesi yang ada dalam masyarakat, sesuai dengan tipe-tipe manusia pada enneagram. Penggunaan ilustrasi sebagai elemen visual utama. Ilustrasi vektor untuk memudahkan penjelasan berbagai tipe kepribadian enneagram, serta istilah-istilah yang dipakai dalam teori kepribadian tersebut. Ilustrasi bertujuan sebagai graphical assets untuk mempermudah penyampaian informasi pada website Visual Gaya desain yang digunakan adalah gaya flat design, di mana setiap elemen desain yang ada berfungsi untuk menjelaskan berbagai sifat manusia dan tipe-tipe kepribadian enneagram secara praktis dan tetap sebagaimana fungsinya ilustratif. Gaya ini dipakai agar memberi kesan simple dan minimalis. Selain itu, website ini disajikan dengan fitur slide content yang variatif agar lebih menarik. Gambar 5.1 Salah Satu Ilustrasi Sifat Manusia dalam Website 9 Persona 53

2 Tipografi Ada 3 jenis typeface yang digunakan, yaitu sans-serif dekoratif yang digunakan pada logo maupun tombol / button yang ada dalam website untuk memberikan kesan playful, slab-serif yang digunakan pada setiap header untuk menciptakan kesan bold, dapat jelas dibaca, serta penggunaan sans-serif pada setiap bodytext untuk memberikan kesan tegas, modern. Berikut gambaran typeface yang dipakai: Gambar 5.2 Jaapokki Sans-Serif Dekoratif Gambar 5.3 Roboto Slab Bold Slab-Serif

55 Gambar 5.4 Cabin Regular Sans-Serif 5.1.3.

3 55 Gambar 5.4 Cabin Regular Sans-Serif Warna Warna yang digunakan adalah warna-warna cerah agar pesan yang disampaikan sesuai dengan makna yang telah dibahas pada subbab sebelumnya. Berikut palet warnanya: Gambar 5.5 Palet Warna yang Digunakan Kode warna dari kiri ke kanan: # #EF5E4C #FBCE4A #00AC80 #57BAD5 #F1F1F2

56 Untuk warna merah, hijau, dan biru selanjutnya akan dipakai sebagai warna dasar pada setiap tipe enneagram sesuai dengan pengkategorian tiap tipenya yang akan dijelaskan lebih lanjut pada subbab

4 56 Untuk warna merah, hijau, dan biru selanjutnya akan dipakai sebagai warna dasar pada setiap tipe enneagram sesuai dengan pengkategorian tiap tipenya yang akan dijelaskan lebih lanjut pada subbab Hasil Visual Grid Sistem grid yang digunakan untuk website 9persona ini adalah grid 12 kolom. Penggunaan 12 kolom ini fleksibel karena dapat dibagi menjadi 2, 3, 4, 6 ataupun 12 yang membuat variasi layout menjadi lebih mudah Site Map Berikut site map dari website 9persona: Gambar 5.6 Sistem Grid yang Digunakan Gambar 5.7 Site Map Website 9persona

5 Hasil Visual Logo Gambar 5.8 Logo 9 Persona Logo 9 Persona menggunakan typeface Jaapokki dengan elemen visual lainnya seperti pita dan pancaran sinar untuk mencerminkan 9 Persona seperti emblem, di mana setiap persona pada website ini merupakan lambang dari masing-masing tipe. Pada tampilan website, agar terlihat menarik logo dibuat animasi bergerak naikturun Ilustrasi Karakter Dalam penjelasan di bab 2 dapat diketahui ada 3 kelompok besar yang di dalamnya terdapat 3 tipe kepribadian enneagram. Tiga kelompok besar itu yakni pusat naluriah, pusat berpikir, dan pusat perasaan. Ketiga kelompok besar tersebut akan diwakili oleh warna palet yang sesuai dengan sifat dari pusatnya. Pusat naluriah diwakili warna hijau, pusat berpikir diwakili warna biru, dan pusat perasaan diwakili warna merah. Berikut visualisasi karakter tipe kepribadian enneagram yang sudah dikategorikan dengan warnanya:

6 58 1. Tipe 1 The Reformer, tipe realis dan idealis digambarkan sebagai seorang pekerja yang visioner dan seorang yang teliti dan mampu mengerjakan tugasnya dengan baik. Gambar 5.9 Visualisasi Tipe 1 2. Tipe 2 The Helper, tipe interpersonal yang hangat dan suka menolong. Tipe ini digambarkan sebagai orang yang berprofesi suka menolong orang, yaitu petugas tim medis dan dokter. Gambar 5.10 Visualisasi Tipe 2

7 59 3. Tipe 3 The Achiever, tipe pengejar prestasi ini digambarkan sebagai karakter yang suka mengikuti perlombaan dan juara, seorang lagi digambarkan sebagai mahasiswi yang lulus sarjana. Gambar 5.11 Visualisasi Tipe 3 4. Tipe 4 The Individualist, tipe yang sensitif dan instrospektif. Umumnya berjiwa seni tinggi dan ingin tampil berbeda. Hal itu digambarkan melalui karakter dengan rambut pirang dan gaya yang nyentrik, salah satunya suka bercermin. Gambar 5.12 Visualisasi Tipe 4

8 60 5. Tipe 5 The Investigator, tipe intens dan pemikir. Kedua karakter ini digambarkan sama-sama berprofesi menyelidik, yang satu menjadi detektif dan satu lagi menjadi saintis. Gambar 5.13 Visualisasi Tipe 5 6. Tipe 6 The Loyalist, tipe berkomitmen dan setia. Tipe ini divisualisasikan dengan dua karakter yang memiliki jiwa loyal yang tinggi. Karakter laki-lakinya digambarkan sebagai seorang ksatria dan yang perempuan seorang pelayan. Gambar 5.14 Visualisasi Tipe 6

9 61 7. Tipe 7 The Enthusiast, tipe yang suka mencari variasi kegiatan dan sibuk. Karakter ini divisualisasikan sebagai orang yang suka mencari pengalaman baru seperti petualang, dan salah satunya lagi pemandu wisata. Gambar 5.15 Visualisasi Tipe 7 8. Tipe 8 The Challenger, tipe kuat dan dominan. Tipe ini merupakan tipe yang jujur dalam bicara dan juga protektif. Oleh karena ini, tipe 8 ini digambarkan sebagai 2 orang pahlawan pembela kebenaran super. Gambar 5.16 Visualisasi Tipe 8

10 62 9. Tipe 9 The Peacemaker, tipe damai dan tenang. Tipe ini divisualisasikan sebagai karakter hippies yang menggambarkan pribadi mereka yang cinta damai, dan konflik. Gambar 5.17 Visualisasi Tipe Tampilan Website Pada halaman depan website memperlihatkan ilustrasi beberapa karakter yang mengelilingi logo 9 persona. User dapat mengikuti kuis dengan cara men-klik tombol mulai kuis. Tombol akan berubah warna menjadi hijau jika di hover. Gambar 5.18 Landing Page

11 63 Setelah klik tombol mulai kuis akan muncul tampilan seperti di bawah ini. User difokuskan terlebih dahulu membaca instruksi kuinya. Pada tampilan selanjutnya, user dapat memilih gender yang menentukan pada bagian result kuis. Gambar 5.19 Tampilan Halaman Kuis Instruksi Gambar 5.20 Tampilan Halaman Kuis Pilih Gender Setelah user memilih gender, akan masuk ke dalam halaman soal kuis yang terdiri dari 36 soal. Pada halaman soal kuis terdapat progress bar untuk memperlihatkan sudah sejauh mana user menjawab soal.

12 64 Gambar 5.21 Tampilan Halaman Kuis Soal Tampilan di atas merupakan salah satu soal kuis. Setelah selesai, akan muncul tampilan result seperti ini: Gambar 5.22 Tampilan Halaman Result Pada halaman result ini akan muncul hasil tipe dari kuis berupa badge ilustrasi karakternya dan penjelasan mengenai tipe enneagram yang didapat. User bisa memilih untuk membaca keterangan lebih lanjut tipenya dengan memilih tombol baca selengkapnya. User juga dapat membagikan hasil kuis di media sosial mereka dengan men-klik tombol share ke facebook atau share ke twitter.

13 Preview Halaman Lainnya Gambar 5.25 Tampilan Halaman Tipe 1

14 66

15 Preview Versi Mobile Gambar 5.26 Tampilan Halaman Download Gambar 5.27 Tampilan Mobile

16 Implementasi pada Media Lainnya Grafis untuk Media Sosial Gambar 5.28 Grafis pada Facebook Gambar 5.29 Grafis pada Twitter

17 Grafis untuk Wallpaper pada Download Menu Gambar 5.30 Preview Wallpaper Desktop dan Mobile Poster dan Flyer Gambar 5.31 Poster Seri 1

18 70 Gambar 5.32 Poster Seri 2 Gambar 5.33 Poster Seri 3

19 71 Gambar 5.34 Flyer Mouse Pad Gambar 5.35 Mouse Pad

20 Kaos Gambar 5.36 Kaos Tote Bag dan Pouch Gambar 5.37 Tote Bag dan Pouch

21 Sticker Pin dan Gantungan Kunci Gambar 5.38 Contoh Aneka Sticker Gambar 5.39 Pin

22 Notes dan Pen Gambar 5.40 Gantungan Kunci Akrilik Gambar 5.41 Notes dan Pen

23 X-Banner Gambar 5.42 X-Banner

dokumen-dokumen yang mirip

PERANCANGAN VISUAL WEBSITE KUIS KEPRIBADIAN BERDASARKAN ENNEAGRAM

PERANCANGAN VISUAL WEBSITE KUIS KEPRIBADIAN BERDASARKAN ENNEAGRAM Fidelia Universitas Bina Nusantara Jl. K.H. Syahdan No. 9, Kemanggisan. Jakarta 11480 +62 21 534 5830 / +62 21 530 0244 fidel.zheng@yahoo.com