3.2.1 Analisis Metodologi Perancangan
3.2.1.10 Overall look and sound
Setelah menentukan tone of voice pada tahap sebelumnya, penulis kemudian menentukan referensi yang sesuai dengan tone of voice yang dihasilkan. Jenis visual yang akan digunakan secara keseluruhan akan mengambil referensi dari Florence karya Mountains, dimana layar yang ditampilkan akan penuh dengan fitur yang minim sehingga navigasi akan fokus pada slide yang bergeser atau side-scrolling. Selain itu, narasi akan muncul didampingi dengan ilustrasi ukuran layar penuh.
87 Gambar 3.12 Tampilan Florence
Selain itu, ilustrasi yang digunakan dalam narasi akan mengambil referensi dari GENGOYA 言語屋 (Instagram: @gengoya.club) untuk aset ilustrasi. Sementara untuk pewarnaan dan bentuk visual juga mengambil referensi dari ilustrasi dari Fiendishpal (Twitter: @fiendishpal). Ketiga referensi visual ini nantinya akan digabungkan menjadi satu gaya ilustrasi sendiri dalam media interaktif.
88 Tampilan dan ilustrasi ini juga dipilih karena ada kesamaan dalam target audiens yang dituju, yaitu usia remaja akhir hingga dewasa muda. Referensi visual yang dipilih kemudian disusun dan dikemas untuk kembali sebagai acuan arahan perancangan visual. Hasil referensi yang disusun tersebut kemudian mengarah kepada pembuatan moodboard. 1. Moodboard
Setelah menentukan referensi, penulis kemudian mulai menyusun moodboard visual berdasarkan tone of voice dan referensi tersebut. Moodboard yang disusun ini kemudian dijadikan acuan dalam perancangan visual dari media interaktif.
Gambar 3.14 Moodboard yang digunakan sebagai acuan
Penyusunan moodboard didasari oleh ketiga tone of voice “terstruktur”, “dinamis”, dan “sederhana”. Dalam moodboard, dimasukkan ilustrasi yang memenuhi ketiga kata tersebut. Selain itu, didapatkan juga warna-warna utama yang akan digunakan dalam penyusunan karya.
89 2. Typography
Jenis tulisan ditentukan berdasarkan tone of voice dan moodboard yang telah ditentukan. Pada media interaktif, dipilih jenis tulisan sans-serif dengan alternatif yaitu Montserrat, Comfortaa dan Nunito. Jenis type ini dipilih berdasarkan dari teori Carter dari buku Typographic Design: Form and Communication (2015), bahwa jenis sans-serif memiliki legilibilitas untuk dibaca yang tinggi.
90 Dari ketiga type ini, jenis Montserrat dipilih sebagai type utama. Type ini dipilih berdasarkan percobaan menempatkan tulisan pada layar digital. Dari percobaan tersebut, Montserrat dinilai memiliki legibilitas paling tinggi dan paling nyaman untuk dibaca di layar. Selain itu, variasi yang dimiliki font family ini lebih banyak dibanding altermatif type lainnya sehingga memiliki banyak pilihan untuk digunakan. 3. Warna
Warna utama yang dipilih merupakan warna merah, biru, dan kuning serta warna-warna turunannya sebagai warna pelengkap. Ketika warna utama ini dipilih berdasarkan teori pengertian warna oleh Terry Stone, Sean Adams, dan Noreen Morioka dalam buku Color Design Workbook: A Real World Guide to Using Color in Graphic Design (2006) dimana warna merah melambangkan energi, atsusiasme, dan kegembiraan; warna biru melambangkan pengetahuan dan kepandaian; dan warna kuning melambangkan optimisme dan kesenangan. Pengertian warna ini sesuai dengan target perancangan dimana media memberikan informasi dan pengetahuan dengan cara yang menyenangkan.
4. Storyboard
Selanjutnya, sebelum memasuki tahap perancangan visual, penulis menentukan terlebih dahulu asset apa saja yang akan dibutuhkan di dalam media interaktif melalui penyusunan storyboard. Storyboard disusun berdasarkan urutan skema yang sudah dibuat di tahap
91 Narrative/Gaming Elements. Visualisasi sketsa tampilan ilustrasi dan interface yang akan ada di setiap bagian narasi.
Gambar 3.16 Sketsa storyboard
Sketsa kemudian terus diubah sesuai kebutuhan dan kesesuaian dengan narasi hingga mencapai bentuk final yang kemudian akan dijadikan
92 acuan dalam memasuki tahap perancangan visual. Dari sketsa storyboard ini, penulis juga dapat menentukan dan menjabarkan asset visual apa saja yang akan dibutuhkan pada setiap bagian. Berbagai asset visual tersebut kemudian didaftar untuk dibuat ilustrasinya di tahap selanjutnya.
5. Sketsa Asset
Tahap selanjutnya kemudian mulai memasuki perancangan visual yaitu pembuatan asset yang mengacu dari storyboard yang telah dibuat. Ilustrasi sebagai elemen utama dalam media interaktif dibuat dengan software Paint Tool Sai dan dilanjutkan dalam penyusunan tampilan dengan Adobe Illustrator. Ilustrasi terdiri dari ilustrasi layar penuh, ilustrasi step-by-step, dan ilustrasi tambahan terpisah. Ilustrasi layar penuh digunakan untuk menggambarkan bagian situasi dan suasana dalam narasi sesuai dengan apa yang dituliskan dan di diceritakan.
93 Gambar 3.17 Sketsa ilustrasi layar penuh
Dalam ilustrasi layar penuh, beberapa ilustrasi akan memerlukan penggambaran figur atau objek dan background dalam satu layar yang sama sehingga akan mencakup banyak elemen dalam satu ruang gambar. Untuk menyesuaikan dengan tema “sederhana” dimana tidak banyak elemen visual dalam satu wadah gambar, pewarnaan dalam ilustrasi background akan menggunakan satu warna atau warna yang dikurangi saturasinya sehingga memberi kesan muted yang kontras dengan figur atau objek utama yang menggunakan warna cerah.
94 Gambar 3.18 Ilustrasi step-by-step
Selain ilustrasi layar penuh, terdapat juga ilustrasi step-by-step. Dalam ilustrasi step-by-step ilustrasi digambarkan dengan memfokuskan pada langkah-langkah yang diterapkan sehingga tidak ada elemen lain seperti gambar background. Ilustrasi langkah-langkah digambarkan dengan figur
atau objek yang menghadap ke samping agar bentuk dan posisi dapat dilihat dengan jelas.
Gambar 3.19 Ilustrasi tambahan
Terakhir, ilustrasi tambahan yang digunakan sebagai visualisasi dari penjelasan dalam narasi untuk memperjelas materi yang disampaikan. Ilustrasi tambahan terdiri dari gambaran objek adan figur tunggal, karena posisinya diletakkan bersandingan dengan narasi penjelasan.
6. Icon
Setelah merancang ilustrasi, selanjutnya penulis mulai merancang icon yang akan digunakan untuk fitur lainnya. Icon ini tetap menggunakan konsep sesuai dengan tone of voice, dan menyesuaikan dengan ilustrasi. Icon menggunakan stroke dan fill dengan dua warna yang
95 dipilih dari moodboard, dimana stroke berwarna lebih gelap daripada fill agar memberikan legibilitas yang baik.
Gambar 3.20 Proses perancangan icon
Grid dan keyline shape yang digunakan merupakan template dari Material.io, dimana grid dan keyline shape yang sama juga digunakan tim Google dalam merancang icon mereka. Warna yang digunakan juga merupakan two-tones berupa biru dengan turunannya berwarna toska. Warn aini dipilih menyesuaikan dengan warna keseluruhan yang digunakan serta moodboard yang telah disusun.
96 Gambar 3.21 Proses perancangan icon taskbar
Selain icon untuk fitur, penulis juga merancang icon dari media interaktif pada taskbar ketika sedang dibuka. Perancangan icon pada taskbar mengambil referensi logo-logo klub baseball professional yang bermain di Major League, salah satunya Minnesota Twins dan dibuat dengan gaya khas desain logo klub baseball. Dalam melakukan perancangan, penulis merancang beberapa alternatif dan mengganti beberapa warna hingga menentukan satu icon final.
7. Layout
Perancangan selanjutnya memasuki tahap tampilan keseluruhan dimana ilustrasi, icon, dan narasi sudah digabungkan membentuk satu
97 keseluruhan. Tampilan keseluruhan ini sudah merupakan bentuk visual yang akan disajikan kepada pengguna dan menggunakan grid multicolumn. Dalam penyajian tampilan layar utama, ilustrasi akan menggunakan layar penuh dengan fitur menu yang diletakkan di bagian kanan layar mengikuti arah baca mata karena media interaktif menggunakan teknis side-scrolling.
Gambar 3.22 Penggunaan multicolumn grid dalam menyusun tampilan Dalam tampilan di bagian narasi storytelling, ilustrasi yang digunakan juga merupakan ilustrasi layar penuh dengan narasi di bagian kiri dan kanan
98 ilustrasi dan icon fitur next di sebelah kanan layar untuk mempermudah pengguna untuk menuju bagian selanjutnya dan sejalur dengan arah baca mata dari kiri ke kanan.
Gambar 3.23 Tampilan bagian storytelling
Untuk tampilan keseluruhan bagian penjelasan yang lebih mendalam, teks narasi akan diletakkan di bagian samping disertai dengan ilustasi tambahan untuk mendukung dan memperjelas materi. Teks tulisan penjelasan dan gambar diletakkan berdampingan dan icon dari fitur menuju bagian selanjutnya diletakkan di bagian kanan bawah layar.
99 Sementara itu, untuk bagian step-by-step tampilan akan menampilkan ilustrasi layar penuh ilustrasi step-by-step dengan tulisan penjelasan yang muncul pada setiap langkah di bagian kanan setiap langkah mengikuti arah baca mata. Setiap bagian langkah akan muncul satu persatu sesuai urutan jika gambar di klik.
Gambar 3.25 Tampilan bagian step-by-step
Bersamaan dengan setiap gambar tahap yang muncul, tulisan penjelasan untuk setiap tahap juga disertai tulisan penjelasan. Tulisan penjelasan yang muncul akan tampil secara otomatis beberapa detik setelah gambar setiap tahapnya muncul. Bagian penjelasan ini memuat penjelasan singkat mengenai posisi detail setiap gambar tahapan.