BAB 4 KONSEP DESAIN 4.1 Landasan Teori 4.1.1 P rinsip Gestalt dalam terapan ke media Web Teori Gestalt membahas mengenai bagaimana kita menerima pengorganisasian visual. Memberikan sebuah pakem untuk mengatur bagian-bagian dalam suatu desain menjadi sebah kesatuan, yang dapat dengan mudah dipahami dan menggiring orang yang melihatnya memiliki suatu persepsi yang dimaksudkan. Dalam perancanga n interface, teori Gestalt meliputi hal-hal diantaranya: a. Continuity Adalah sebuah prinsip yang diaplikasikan dimana saat mata orang (pengunjung web) diarahkan dari satu bagian ke bagian lain dengan sebuah flow yang diterapkan secara tidak disadari pengunjung web. Merupakan hal yang sangat penting dalam proses desain sebuah web. Dalam implementasinya, hal termuda h adalah menggunakan panah (arrow), namun tak terbatas dapat menggunakan hal- hal yang mempunyai arah tunjuk secala tersamar, misalnya ilustrasi tangan yang menunjuk, sebuah lengkungan, dan lainlain. b. Closure Adalah sebuah prinsip yang menunjukan kesadaran manusia, dalam hal ini pengunjung web untuk memahami dan membayangkan sebuah bentuk atau pola secara keseluruhan, bahkan walau tidak ditunjukkan secara jelas atau nampak. Prinsip ini sangat jelas interpretasinya ketika pengunjung web menafsirkan sebuah negative space menjadi sebuah shape yang spesifik, misalnya pembagian column. c. Similiarity Menjelaskan bahwa apabila terdapat beberapa objek yang terlihat sama, maka objekobjek tersebut memiliki kegunaan yang sama. Lebih spesifik, pemikiran manusia akan mencari suatu po la yang muda h dilihat, ka rena itu pr ins ip Similiarity penting diterapkan sebagai navigasi dalam sebuah web. • Similiarity Links: Link navigasi menghubungkan dan diterapkan dalam berbagai unsur interaksi dalam web. Bagian ini harus dibedakan dan dipisahkan agar selalu mudah terlihat dan mencolok dibandingkan unsur interaksi lainnya. • Similiarity Page Contents: Saat mendesain konten sebuah web, salah satu hal terpenting adalah menunjukan hubungan atau keterkaitan sesama konten tersebut. Bagaimana suatu bagian memiliki keterkaitan yang kuat dengan yang satu bagian, dan kebalikannya dengan bagian yang lain. Hal ini dilakukan untuk memperkuat hirarki konten.
d. Proximity Menunjukan kesadaran pengguna dalam melihat beberapa objek sejenis yang diletakkan berdekatan, dibandingkan melihat objek sejenis yang diletakka n terpisahpisah. Membentuk suatu hirarki dalam melihat tampilan. Salah satu aturan dasar dalam mendesain tampilan navigasi web, link- link yang ada tidak hanya mesti diletakkan berdekatan, namun juga dikelompokkan, dikategorikan berdasarkan fungsi, tipe, bentuk, dan segala yang membedakan antara satu kelompok link dengan yang lain. e. Figure and Ground Bagaimana mata dapat membedakan antara figure suatu objek dengan latar yang mengelilinginya. Objek harus benar-benar dapat terlihat bukan bagian dari background dari objek tersebut. 4.1.2 Teori Design Interface Walaupun Function lebih penting, namun Interface sangat memegang peranan penting, terlebih apabila terfokus pada pengembangan visual. Design Interface adalah seni bagaiman nantinya kita akan menampilkan data didalam web. Tujuan utama dalam perencanaan interface web adalah bagaiman pengguna web dapat menjelajah web semudah dan se efisien mungkin di dalamnya. Hal ini dikenal dengan nama user-centered design (Universal Principles of Design, Rockport). Dasar yang perlu diperhatikan dalam penyusunan elemen didalam sebuah interface: o Hirarki Hal mendasar dalam menjadikan tampilan lebih simple dan mudah digunakan. Membangun pemahaman tentang alur dan arah hubungan dalam konten. Ada 3 hal dasar dalam menunjukkan hirarki : • Trees Dengan menempatkan elemen turunan (child) dibawah atau disamping elemen parent nya, atau posisi lain yang dapat menunjukkan sebuah hirarki. Biasanya digunakan didalam melihat suatu garis besar ko nten atau pe ngor ganisasian yang luas. • Nests Penggambaran suatu hirarki dengan visual elemen turunan didalam elemen parent, seperti layaknya diagram Venn. Nests efektif digunakan dalam menjelaskan hubungan hirarki yang simpel dan kecil. • Stairs Menggambarkan hubungan hirarki yang menempatkan elemen child sebagai outline dari elemen parent. Digunakan dalam sistem yang besar dan senantiasa berubah isinya. o Five Hat Racks Menurut Truong, 2004, penyusunan dapat dibagi menjadi 5 kategori:
• • • • •
Kategori, berdasarkan jenis yang sama Waktu, sequence yang menceritaka n kronologis Lokasi, berdasarkan geografis, tempat kejadian Alphabet, berdasarkan abjad Continuum (tertinggi ke paling rendah
o Top Down Lighting Bias Suatu kecenderungan untuk menafsirkan daerah berbayang atau gelap dari obyek sebagai bayangan yang dihasilkan dari sumber cahaya di atas objek. Dalam buku Graphic Design for User Interface, A. Marcus mengemukakan melakukan pengelompokan link yang sejenis, baik secara fungsi maupun fisual akan membantu dalam menciptakan interface yang terorganisir. Ada 3 teknik navigasi yang perlu diingat: Membuat sebuah focus yang akan menjadi perhatian pengguna web Perhatian langsung terhadap hal yang penting, sekunder, dan tambahan lainnya Assist dalam melakukan navigasi 4.1.3 Grid System Media yang digunakan berupa media interaktif, maka sistem grid yang digunakan menggunakan standar grid untuk perancangan interface website, standar 960px. Bagaimanapun dalam media digital (website, interaktif), kenyamanan fungs i lebih penting dibanding visual. Grid yang digunakan adalah aturan 12 kolom, dengan ukuran resolusi screen 1024x768. 4.1.4 Teori Website Menurut Anne-Marie Conception, dalam bukunya “Professional Website Design” ada beberapa hal yang harus diperhatikan dalam menciptakan sebuah website: - memilih nama domain - menentuka n tujuan webs ite - mengembangkan website, baik visual aupun konten untuk menarik pengunjung - memilih fitur2 yang diterapkan dalam website. Menurutnya lagi, ada 4 hal yang sangat penting untuk diperhatikan, saat pertama kali merancang dan membuat website. Ke empat hal tersebut, kaitannya dengan perancangan media interaktif ini: 1. The goal of the site: Tujuan dari perancangan media interaktif ini, yaitu agar generasi muda tidak melupakan sejarah. Mereka dapat mengetahui dan memahami makna peristiwa detik-detik prok lamasi. 2. The Design message: Dengan tampilan ilustratif, diharapkan penyampaian sejarah akan jauh lebih menarik. Gaya ilustrasi perang diharapkan dapat membawa suasana pengguna interaktif serasa ikut merasaka n semangat perjuangan.
3. The Intended Audience: Sasaran pr imer yang dituju ada lah golongan usia prod uktif, dimana generasi muda sekarang kurang mendapat pengajaran Sejarah yang menarik. Untuk sasaran sekunde r ada lah semua golongan masyaraka t. 4. The Content: Berisi peristiwa Detik-Detik Proklamasi, sejarah, fakta-fakta, dan pelajaranpelajaran yang tersirat dari peristiwa bangsa agar dapat dipahami dan ditarik hikmahnya oleh generasi muda saat ini. Hal yang perlu diperhatikan dalam pembuatan website adalah usability. Menurut Jacob Nielsen, usability melibatkan pertanyaan apakah user menemukan cara untuk menggunakan situs web tersebut dengan efektif. Usability adalah suatu pengalaman pengguna dalam berinteraksi dengan aplikasi atau situs web sampai pengguna dapat mengoperasikan situs tersebut dengan mudah dan cepat. Agar dapat memenuhi syarat usability yang ideal, ada beberapa poin yang perlu diperhatikan: a. Mudah untuk dipelajari Letakk an isi yang pa ling penting pada bagian atas halaman web agar user dapat menemukan dengan cepat dan mudah b. Efisien dalam penggunaan Jangan menggunakan link yang terlalu banyak. Sediakan seperlunya saja, antarkan user mencapai informasi yang diperlukan c. Tingkat kesalahan rendah Hindari link yang tidak berfungsi atau sedang dalam masa pengembangan. Lebih baik link tersebut tidak usah ditampilkan. d. Kepuasan Pengguna Pengakses meemukan informasi yang diperlukan. Pengalaman selama mengakses website akan memberikan kesan tertentu pada user berbeda Hal penting lainnya yakni navigasi dalam web. Navigasi dapat ditampilkan dalam berbagai media, diantaranya teks, image, ataupun animasi. Navigasi dari image dapat menawarkan banyak sekali variasi, misalnya dengan ikon, gambar, ataupun penggunaan tipografi dalam bentuk yang lebih luwes. Cara membuat navigasi yang baik diantarnya: a. Rencanaka n dengan be nar sebe lum membuat. Navigasi atau struktur situs web akan sulit diubah nantinya. Tentukan dari awal agar tidak mengalami kesulitan. Kelompokkan link navigasi, atur seperlunya. b. Buatlah navigasi yang susunannya mudah dipa hami serta be rbeda dari tampilan lain. Kata-kata yang menjadi navigasi menerangkan tujua n navigasi. Gunakan kata-kata atau simbol yang singkat dan mudah dimengerti. Jangan membuat simbol yang nampak seperti button, yang pada kenyatannya bukan sebuat tombol atau link. Buatlah navigasi yang memungkinkan user feedback sepert meletakkan home atau back. Terakhir, jangan sampai ada navigasi yang tidak berfungsi (broken link, belum dibuat, dan kendala lainnya). c. Posisi daerah navigasi harus tetap dan memiliki struktur yang konsisten sepanjang halaman. Dalam hal ini bisa berupa posisi yang sama, warna yang sama atau senada, serta tempatkan pada tempat yang mudah terlihat.
Konten yang baik akan menarik, relevan, dan pantas untuk target audience web tersebut. Gaya pe nulisan ba hasa yang dipe rgunaka n harus sesuai de ngan web da n target audience. Hindari kesalahan dalam penulian, termasuk tata bahasa dan tanda baca. Cara membuat content yang ba ik: a. Kenali audience, tulislah sesuah dengan gaya bahasa yang lazim digunakan b. Jaga content agar tetap up to date c. Dahulukan kualitas diatas kuantitas 4.1.5 Teori Ilustras i Dikutip dari buku The Fundamentals of Illustration (AVA Publishing, 2005), “The essence of an Illustration is in the thinking –the ideas and concepts that form the backbone of what an image is trying to communicate.” Esensi sebuah ilustrasi terdapat dalam pesan yang ingin disampaikan, dalam hal ini, untuk menceritakan mengenai cerita perjuangan. Maka agar maksud dari media interaktif ini tercapai, data-data literatur yang ada hendaknya dapat disampaikan dengan ilustrasi bernuansa perjuangan pada masa itu agar nuansa perjuangan dapat tersampaikan dengan baik. Dari buku Basic Illustration : Thinking Visual ada beberapa hal penting dalam pembuatan media interaktif ini:
Riset Ilustrator hendaknya selalu menjadi "kolektor" yang selalu mengumpulkan imej atau gambar yang bersifat referensi. Mengumpulkan referensi adalah hal yang sangat penting dalam proses ilustrasi. Hal ini dikemukakan oleh ilustrator John Burgerman “I'm not sure I actually switch into a research way of thinking, it's more of a continous ongoing process involving keeping your eyes peeled all the time. For specific task I may go out to seek information".
Reportase Pada abad ke 19, terdapat cabang ilustrasi yang sifatnya reportasi, dimana kegiatan tersebut mencakup segala jenis kejadian yang populer pada saat itu, seperti misalnya perang, penemuan, ekspedisi terkenal da n be ncana. 4.1.6 Teori Tipografi Menurut kutipan dari buku “Tipografi dalam Desain Grafis” Dalton Sihombing MFA, tipografi bukan lagi merupakan pelengkap suatu statement visual, tetapi sudah menjadi sajian utama komunikasi grafis. Huruf memainkan peranan sangat penting dalam keberhasilan suatu bentuk komunikasi grafis. Tipografi bisa saja menjadi inti gagasan suatu komunikasi grafika dan huruf menjadi satu-satunya visualisasi yang efektif. Kekeliruan atau ketidak pekaan
a. b. c. d.
da lam tipo grafi bisa merusak hasil komunikasi grafis, walaupun bentuk visualisasi lainnya telah dibuat dengan prima. Untuk pemilihan font atau jenis huruf yang tepat, beberapa kriteria yang harus terpenuhi , antara lain: Clearity adalah bahwa suatu huruf mempunyai fungsi tertentu yaitu harus terlihat dengan jelas. Readibility adalah keterbacaan dan jenis huruf tersebut. Legibility lebih menekankan apakah kita mudah membacanya atau tidak. Visibility lebih menekanka n pada ke indahan jenis huruf tersebut. Dalam aplikasinya dalam media interaktif, tipografi yang digunakan akan mengacu kepada aturan dalam perencanaan desain website.
4.1.7 Teori Warna Kombinasi warna yang terdapat pada poster-poster propaganda perang pada masa itu juga dapat dijadikan referensi, agar nuansa klasik dan perang dapat dirasakan pengguna media interaktif ini, sehingga lebih menghayati cerita. Warna dominan yang digunakan adalah warna-warna yang terdapat dalam poster perang bergaya Rusia, yakni Merah dikombinasikan warna Putih, dan Hitam. Gaya posternya dirasa tepat untuk menyampaikan pesan perjuangan. Dalam buku Graphic Design in Germany 1890-1945 (Thames & Hudson Ltd, 2000) dijabarkan bahwa penggunaan warna dominan dalam poster perang memiliki makna: a. Warna Merah : Untuk menunjukkan suatu impresi, keinginan kuat untuk menang, untuk mempropaganda siapapun yang melihatnya. Merah tidak hanya warna pertanda yang menunjukkan persatuan, namun juga representasi dari semangat rakyat. b. Warna Putih dan Hitam : Kombinasi dengan merah yang menciptakan keunikan yang klasik, bersifat konstruktif, penuh tekanan, statistik, slogan, simbolik, yang mengesankan suatu hal yang menegangka n da n persuasif.
4.2 Strategi Kreatif Menjadikan media interaktif ini sebagai media baru yang efektif untuk pembelajaran dan pengetahuan mengenai peristiwa detik-detik Proklamasi Indonesia. Penyampaian dengan menggunakan media interaktif diharapkan dapat mengubah paradigma pengajaran sejarah pada umumnya, dan memberikan wawasan nasional agar generasi muda mencintai tanah air pada khususnya. 4.2.1 Tujuan Komunikasi Tujuan Komunikasi dalam Media Interaktif Detik-Detik Menuju Proklamasi Indonesia adalah untuk menyampaikan cerita dan pengetahuan mengenai hal- hal yang terjadi seputar proklamasi Indo nesia. Strategi Komunikasi dilakukan dengan cara:
o Memvisualisasikan keadaan menjelang detik-detik proklamasi, dengan berbagai tahaptahap kejadian o Menciptakan interaksi dengan memberikan informasi penting o Interaktif yang menampilkan timeline kejadian, o Menceritakan secara runtun peristiwa menjelang proklamasi secara linear 4.2.2 Pendekatan Komunikasi Dalam perancangan media interaktif Detik-Detik Menuju Proklamasi Indonesia, pendekatan komunikasi untuk menyampaikan pesan yaitu: o Pendeka tan Visual Pendekatan visual dengan menggunakan media ilustrasi sebagai elemen utama dari media interaktif ini. Dengan menggunakan ilustrasi diharapkan khalayak sasaran dapat lebih mengerti situasi da n menghayati peristiwa yang terjadi, dibandingka n de ngan teks da n catatan tanggaltanggal seperti da lam buku-buku pelajaran sejarah. o Pendeka tan Emos ional Tujuan dari pendekatan emosional dari penggunaan media interaktif mengenai peristiwa detikdetik Media interaktif yang menuntut adanya respon dari 2 pihak (pengguna dan web) juga akan membangun pengalaman saat mengaksesnya.
4.3 Strategi Desain 4.3.1 Style Overvie w Untuk memvisualisasikan materi dalam website interaktif ini, gaya desain yang menjadi acuan ialah gaya yang menjadi tren atau ciri khas visual yang berlaku pada masa yang ingin diceritakan, dalam, hal ini gaya visual tahun 1940-1950an. Gaya ilustrasi poster menjadi acuan utama dalam keseluruhan gaya ilustrasi dan layout web. Adapun dalam buku Graphic Design in Germany 1890-1945 (Thames & Hudson Ltd, 2000), dalam mengutip dari Berliner Tageblatt, 1928, terdapat dua gaya berbeda dalam poster perang pada masa itu, yakni gaya poster England da n Russian. Perbedaan yang dibahas ada lah seba gai berikut: “England poster style is Pious, reverant, at peace in its confidence, so it was and so it will be to all eternity. Therefore, Russian poster style, one must admit, grandeur in its exposition of social conditions. With really mechanical equipment, conveyor belts of great cubistic zig-zags; causing a stir by its enormous steps of progress which are depicted in bold and bragging manner. Always in Glaring Red, Forward!” Karena itulah, acuan style yang diambil adalah berda sarka n gaya pos ter Rusia, karena terlihat lebih mencolok juga menciptakan nua nsa semangat perjuangan.
4.3.2Creative Approach Pendekatan kreatif dari materi website interaktif ini adalah membuat materi yang dekat dan dapat diterima dengan karakter khalayak sasarannya dari segi media, maupun pendekatan pesan cerita dan pelajaran yang ingin disampaikan. Khalayak sasaran primer yang dituju adalah kalangan produktif, secara umum dapat dikatakan sebagai generasi muda usia 15-22 tahun. Mayoritas masih menempuh pendidikan. Sudah dapat berpikir kritis, cinta terhadap tanah air, memiliki rasa keingintahuan yang tinggi, senang pada hal-hal yang bersifat unik. Untuk itulah gaya visual yang unik diharapka n mampu menarik minat target market untuk mempelajari sejarah. 4.4 Keywords - Cerita - Kronologis - Perjuangan - Emos ional
4.5 Big Idea Menceritakan peristiwa detik-detik proklamasi dengan menciptakan suasana emosional, yang dikemas dalam bentuk website interaktif. 4.6 Looks, Moods, Tone & Manner -
Simbolik Ilustratif Ekspresif Heroik - Bold - Dramatis - Dinamis
4.7 Strategi Visual Berikut ini adalah poin-poin mengenai pendekatan strategi visual: - Menggunakan warna-warna berkesan vintage, yang kerap digunakan pada poster-poster zaman propaganda perang, seperti merah, hitam, dan keemasan - Menggunakan jenis typeface yang bold - Menggunakan ilustrasi yang simbolik, ekspresif serta mempunya i ciri khas tersendiri - Menggunakan elemen-elemen dekoratif yang berkesan klasik, legendaris, dan simbolis - Menggunakan penekanan dramatis pada bagian-bagian cerita yang cukup pe nting - User Interface yang muda h digunakan
-
Penceritaan secara linear agar pengguna mengikuti cerita dari awal hingga selesai
4.8 Produk 1. Website Interaktif 2. Poster media Cetak 3. Banner Website
