BAB 5 HASIL DAN PEMBAHASAN DESAIN

(1)

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

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

(2)

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

(3)

Gambar 5.4 Cabin Regular – Sans-Serif 5.1.3. 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:

• #404041 • #EF5E4C • #FBCE4A • #00AC80 • #57BAD5 • #F1F1F2

(4)

pada setiap tipe enneagram sesuai dengan pengkategorian tiap tipenya yang akan dijelaskan lebih lanjut pada subbab Hasil Visual.

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

Gambar 5.6 Sistem Grid yang Digunakan 5.1.5. Site Map

Berikut site map dari website 9persona:

(5)

5.2 Hasil Visual 5.2.1. 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 naik-turun.

5.2.2. 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)

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.

(7)

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.

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.

(8)

The Investigator, tipe intens dan pemikir. Kedua karakter ini digambarkan sama-sama berprofesi menyelidik, yang satu menjadi detektif dan satu lagi menjadi saintis.

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.

(9)

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.

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.

(10)

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

(11)

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)

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)

5.2.3.1. Preview Halaman Lainnya

(14)

Gambar 5.23 Tampilan Halaman About

(15)

Gambar 5.26 Tampilan Halaman Download 5.2.3.2. Preview Versi Mobile

(16)

5.2.4.1. Grafis untuk Media Sosial

Gambar 5.28 Grafis pada Facebook

(17)

5.2.4.2. Grafis untuk Wallpaper pada Download Menu

Gambar 5.30 Preview Wallpaper Desktop dan Mobile 5.2.4.3. Poster dan Flyer