PERANCANGAN VISUAL WEBSITE PANDUAN DAN PENGETAHUAN MENGENAI TEH

PERANCANGAN VISUAL WEBSITE PANDUAN DAN PENGETAHUAN MENGENAI TEH Randi Winarbisono Jl. Perkutut I No. 14 Blok S-3 Sektor 2, Bintaro Jaya, Tangerang 15412 081285323429 [email protected]

ABSTRAK

The purpose of designing a website about the guides and general knowledge of tea is to provide basic information about tea along with its history and proper ways of brewing and enjoying tea. The research methods for the design are through literature studies, interviews and surveys over the internet. The result achieved is a website named “Ngeteh Yuk” with an illustrative approach in order to provide basic information about tea which can be understood easily by the audience. The conclusion is the website is intended to provide general knowledge and basic information about tea through an illustrative and dynamic website regarding the lack of visual representations about tea in many forms and media. Therefore, “Ngeteh Yuk” was designed to provide the information with a good user interface and user experience.

Kata kunci: Website, teh, ilustrasi, infografik

PENDAHULUAN Teh merupakan minuman yang sudah dikenal sejak dahulu kala dan masih sangat populer hingga masa kini. Banyak sekali jenis-jenis teh hingga berbagai macam variasi minuman yang bisa dibuat dari teh. Beberapa resep masakan pun juga menggunakan teh sebagai salah satu bahan dasarnya. Selain itu, cara penyajian teh juga bermacam-macam sesuai dengan tradisi tertentu. Menurut Ratna Somantri dan Tanti K. dalam bukunya Kisah dan Khasiat Teh, teh dikenal sebagai minuman yang menenangkan dan diketahui memiliki banyak manfaat kesehatan yang didukung berbagai penelitian ilmiah. Meskipun minuman teh sudah diketahui oleh semua orang di seluruh dunia, tidak semua orang mengetahui secara detil berbagai variasi dan tradisi serta manfaat teh. Sebagian orang belum mengetahui bahwa dari cara penyajian serta tentunya jenis tertentu akan sangat berpengaruh pada rasa teh tersebut. Selain itu, sebagian orang juga belum mengetahui manfaat teh untuk kesehatan. Bila seseorang ingin mempelajari dan mendalami teh, berbagai sumber dapat ditinjau untuk mendapatkan informasi mengenai teh. Contoh sumbersumber untuk mendapatkan informasi seperti buku, jurnal penelitian dan internet. Pada zaman modern ini, internet semakin berkembang dan kontennya yang terus bertambah seiring dengan penggunanya di seluruh dunia. Internet terus menerus diakses oleh semua orang dari seluruh penjuru dunia untuk bersosialisasi, bekerja, mencari informasi dan juga untuk hiburan. Saat ini, digital media merupakan hal yang sangat populer dan sedikit demi sedikit semua jenis informasi akan ada di dunia internet. Pada zaman ini pula semua orang mulai beralih untuk menggunakan ponsel untuk melakukan berbagai hal dimanapun dan kapanpun. Semua orang menginginkan akses informasi dengan cepat dimanapun mereka berada. Untuk itu, sumber informasi mengenai panduan dan pengetahuan seputar teh akan diimplementasikan dalam sebuah website yang bisa diakses oleh semua orang dengan cepat dan mudah.

Berbagai website mengenai teh dari Indonesia masih sedikit dan sebagian besar cenderung belum terlalu menarik. Masyarakat pada zaman modern ini juga menginginkan penyajian informasi yang menarik dan interaktif yang didukung dengan teknologi masa kini yang kian berkembang pesat, seperti HTML5, CSS3 dan pengaplikasian responsive website. Untuk itu, penulis ingin memaparkan panduan dan pengetahuan mengenai teh yang disalurkan melalui website yang didesain sedemikian rupa sesuai dengan new media trend zaman ini dan menarik masyarakat untuk menambah wawasan mengenai teh dengan mudah.

METODE PENELITIAN Dalam proses pembuatan makalah ini, diperlukan beberapa beberapa metode, yaitu : 1. Kajian Pustaka Pencarian data yang dilakukan melalui buku-buku dan website yang berhubungan dengan materi yang diangkat. 1. Referensi buku The Tea Enthusiast’s Handbook 2. Referensi buku Kisah dan Khasiat Teh 3. Referensi buku Tea – A Global History 4. Referensi buku Tea-licious: Ide Keren Olahan Teh 5. Referensi buku UX Design for Startups 6. Referensi buku The Smashing Book 7. Referensi buku HTML – A Beginner’s Guide 8. Referensi buku Infographics: The Power of Visual Storytelling 9. Referensi buku Pictos 10. Referensi buku Vectorism: Vector Graphics Today 11. Referensi internet www.smashingmagazine.com 12. Referensi internet jQuery 13. Referensi internet Google Trends 14. Referensi internet Internet World Stats 2. Wawancara Wawancara dengan Dr. Sultoni Arifin Wawancara dengan narasumber Dr. Sultoni Arifin dari Dewan Teh Indonesia dilaksanakan pada hari Kamis, 3 April 2014. Dr. Sultoni Arifin menjelaskan mengenai ekspor teh Indonesia yang mulai menurun dan Dewan Teh Indonesia sedang melaksanakan program yang akan meningkatkan penjualan dan ekspor teh Indonesia. Wawancara dengan Ratna Somantri Wawancara dengan narasumber Ibu Ratna Somantri dari Komunitas Pecinta Teh Indonesia dilaksanakan pada hari Sabtu, 19 April 2014. Ibu Ratna Somantri membantu memberikan masukan untuk apa saja yang akan dijadikan konten untuk website yang akan dibuat. 3. Kuesioner kepada Masyarakat Umum Kuesioner dilaksanakan dengan Goolge Drive dan disebarkan secara online melalui media sosial seperti Facebook dan Line Messenger. Total responden yang mengikuti kuesioner sebanyak 60 orang. Dari kuesioner yang dilaksanakan, sebagian besar responden adalah perempuan dengan usia 22- 25 tahun yang merupakan mahasiswa. Sebagian besar responden lebih suka menggunakan komputer dibandingan tablet atau ponsel untuk browsing internet. Dari 60 responden yang mengikuti survei, 32 orang atau 53% responden adalah perempuan dan 28 orang atau 47% responden adalah laki-laki. Responden yang berusia 17-21 tahun sebanyak 33 orang dan responden yang berusia 22-25 tahun sebanyak 37 orang. Dari seluruh responden, 3 orang merupakan karyawan swasta dan 57 orang merupakan mahasiswa. Sebanyak 10 responden lebih suka menggunakan ponsel atau tablet untuk browsing di internet dan 50 orang lebih suka menggunakan komputer untuk browsing di internet. Untuk pemilihan bahasa pada sebuah website, sebanyak 21 orang lebih suka dengan Bahasa Inggris, 3 orang lebih suka dengan Bahasa Indonesia dan 36 orang seimbang antara Bahasa Indonesia dan Inggris. Untuk intensitas jumlah dominan teks dan gambar pada sebuah website, sebanyak 29 orang

memilih dominan gambar, 20 orang memilih gambar dan teks yang seimbang dan 1 orang tidak peduli. Tidak ada yang menjawab dominan teks. Sejumlah 50 orang menjawab suka meminum teh, 10 orang menjawab biasa saja dan tidak ada yang menjawab tidak suka. Untuk tingkat kemanisan teh, sebanyak 7 orang memilih tidak manis, 24 orang memilih agak manis, 27 orang memilih manis dan 2 orang memilih sangat manis. Data kualitatif dari kuesioner ini adalah hal apa yang ingin responden ketahui lebih lanjut mengenai teh. Hal yang paling banyak ingin diketahui dari responden merupakan cara pembuatan teh. Selain itu, responden juga ingin mengetahui mengenai manfaat positif serta dampak negatif teh untuk kesehatan. Pada peringkat ke-3, topik yang ingin diketahui lebih lanjut dari responden adalah berbagai jenis teh, budaya dan ritual teh. Hal-hal lain yang beberapa responden ingin ketahui dari teh seperti sejarah, kegunaan lain teh selain diminum dan kualitasnya serta rekomendasi teh yang enak dan murah.

Tinjauan Khusus berupa: 1. Pengertian Website HTML Menurut Wendy Willard dari bukunya HTML - A Beginner's Guide, HTML adalah akronim dari Hypertext Markup Language yang berfungsi untuk menunjukkan suatu halaman pada web browser. Dalam sebuah website berbasis HTML, terdapat berbagai hal yang merupakan anatomi dari sebuah website. 2. Pengertian User Experience Menurut Marcin Treder dalam e-book UX Design for Startups, user experience atau disingkat UX merupakan sebuah disiplin yang terfokus untuk mendesain “pengalaman” dari suatu produk. Mendesain sebuah “pengalaman” berarti merencanakan dan melakukan tindakan yang mengacu kepada sekumpulan aksi yang akan menghasilkan perubahan yang terencana dalam tingkah laku sasaran produk tersebut. 3. Pengertian User Interface Menurut Dmitry Fadeyev dalam buku The Smashing Magazine yang ditulis oleh Vitaly Friedman, user interface bukan hanya mengenai tombol dan menu. Untuk itu, user interface merupakan interaksi antara pengguna dan aplikasi. Dalam berbagai kasus, user interface merupakan interaksi antara banyak pengguna melalui sebuah media. Untuk itu, desain user interface bukan mengenai tampilan sebuah produk, tetapi bagaimana produk tersebut bekerja. Untuk membuat sebuah user interface yang baik, adapun beberapa karakteristik dan kualitas user interface seperti clarity, concision, familiarity, responsiveness, consistency, aesthetics, efficiency dan forgiveness. 4. Pengertian jQuery jQuery adalah library JavaScript yang ringan dan cepat serta kaya akan fitur. jQuery bermanfaat untuk memanipulasi dokumen HTML, event handling, animasi dan membuat Ajax lebih singkat dengan API yang mudah digunakan di berbagai browser. (sumber: www.jquery.com). Untuk proyek ini, sebagian besar tampilan dari website akan menggunakan implementasi jQuery pada HTML untuk navigasi dan animasi yang akan menunjang konten dan ilustrasi. 5. Pengertian Infografik Menurut Jason Lankow, Josh Ritchie dan Ross Crooks dalam buku Infographics: The Power of Visual Storytelling, infographic merupakan kependekan dari information graphic atau informasi grafis. Istilah ini telah menjadi populer karena tingginya penggunaan grafis dalam online marketing beberapa tahun silam. Ada pula yang menggunakan istilah ini untuk format yang diperkuat dengan ilustrasi dan tipografi yang besar. 6. Sejarah Teh Teh adalah minuman yang mengandung kafein, sebuah infusi yang dibuat dengan cara menyeduh daun, pucuk daun, atau tangkai daun yang dikeringkan dari tanaman Camellia sinensis dengan air panas. Teh yang berasal dari tanaman teh dibagi menjadi 6 kelompok, yaitu teh hitam, teh oolong, teh hijau, dan teh putih, teh kuning dan teh puerh. Istilah "teh" juga digunakan untuk minuman yang dibuat dari buah, rempah-rempah atau tanaman obat lain yang diseduh, misalnya, teh rosehip, chamomile, krisan dan Jiaogulan. Teh yang tidak

mengandung daun teh disebut teh herbal. Helen Saberi menuliskan pada bukunya Tea – A Global History, teh berawal dari legenda Cina dengan Kaisar Shen Nong pada tahun 2737-2697 SM. Kaisar Shen Nong menyarankan orang-orang untuk merebus air sebelum diminum untuk kesehatan. Pada suatu saat, Kaisar Shen Nong sedang merebus air dan secara tidak sengaja ada sejenis daun yang jatuh ke dalam air tersebut. Kaisar sangat suka dengan rasa air tersebut dan juga merasa lebih segar. Daun tersebut merupakan daun teh yang sekarang diketahui yaitu Camellia sinensis. Kaisar Shen kemudian menanam tanaman tersebut dan merekomendasikan minuman teh kepada orang-orang. Dari Cina, tepatnya dari Provinsi Yunnan, kemudian teh mulai menyebar luas di seluruh dunia seperti Jepang, India, Inggris dan negara lainnya.

HASIL DAN BAHASAN Format Website menggunakan grid dengan lebar 1200 px ke samping dan panjang ke bawah menyesuaikan. Dengan grid 1200 px, sebagian besar konten dari website akan menggunakan grid 1020 px, menyisakan margin 90 px pada masing- masing sisi.

Gambar 1: Grid 1200 px

Tampilan Website

Tampilan atau UI (User Interface) website Ngeteh Yuk mengaplikasikan model website infografik, dimana secara dominan masing-masing segmen pada website tersebut berbentuk single-page website yang menggunakan ilustrasi sebagai salah satu elemen utama.

Gambar 2: Home

Masing-masing halaman memiliki elemen-elemen yang berbeda sesuai dengan kontennya. Home tidak memiliki header navigation karena menu utama website akan ditunjukkan sebagai konten dalam home tersebut. Untuk masing-masing konten utama dalam website itu sendiri, masingmasing memiliki landing page yang berupa menu yang menunjukkan sub-konten masing-masing konten utama. Header navigation muncul dan terletak di sisi paling atas website sebagai menu yang terus muncul agar pengunjung dapat langsung memilih menu yang ingin dituju tanpa harus scroll ke bagian atas website.

Gambar 3: Halaman Menu Masing-masing sub-menu pada landing page memiliki ilustrasi icon yang merepresentasikan subkonten tersebut diikuti dengan penjelasan pendek.

Gambar 4: Halaman Menikmati Teh Landing page home dengan yang friendly terang sebagai dipaparkan.

mengaplikasikan background berwarna kuning, mirip seperti landing page pada gambar berpola yang berwarna sangat tipis untuk memperkuat mood dan feel dan hangat. Background dari sub-konten menggunakan warna krem yang lebih perbedaan dengan landing page dan memfokuskan pengunjung pada konten yang Gambar berpola dengan warna yang tipis juga diaplikasikan.

Untuk sub-konten dari halaman Jenis dan Variasi Teh, halaman sub-konten terpisah dari landing page karena jumlah yang banyak dan untuk memberikan feel yang berbeda kepada masingmasing jenis teh. Sub-konten jenis teh memiliki background sesuai dengan warna teh tersebut.

Gambar 5: Halaman Jenis teh

SIMPULAN DAN SARAN Website "Ngeteh Yuk" yang bertujuan memberikan informasi dan pengetahuan mengenai teh didesain dengan gaya grafis yang telah disesuaikan targetnya. Dengan implementasi ilustrasi flatstyle dan user experience flow yang menarik pada setiap segmen, pengunjung website "Ngeteh Yuk" dapat mendapatkan ilmu pengetahuan dasar teh dengan cara yang menyenangkan dan mudah dicerna. "Ngeteh Yuk" untuk jangka panjang diharapkan dapat menyebar di seluruh Indonesia dengan berbagai cara, seperti melalui social media, word of mouth dan berbagai media lainnya. Pengembangan website dan penambahan fitur serta konten dapat dilakukan secara perlahan dari waktu ke waktu dengan dukungan yang ada dan terus bertambah. Konten dapat bertambah seiring banyaknya dukungan dan berkembangnya dunia teh.

REFERENSI Friedman, V. (2010). The Smashing Book. Freiburg: Smashing Media GmbH. Habsari, R. (2013). TEA-licious: Ide Keren Olahan Teh. Jakarta: PT Gramedia Pustaka Utama. Heiss, M. L. & Heiss, R. J. (2010). The Tea Enthusiast’s Handbook. New York: Ten Speed Press. Index Book. (2013). Pictos. Singapore: Page One Publishing Pte Ltd. Lankow, J., Ritchie, J. & Crooks, R. (2012). Infographics: The Power of Visual Storytelling. New Jersey: John Wiley & Sons.

Saberi, Helen. (2010). Tea. London: Reaktion Books Ltd. Somantri, R. (2011). Kisah dan Khasiat Teh. Jakarta: PT Gramedia Pustaka Utama. Somantri, R. (2014). The Story In A Cup of Tea. Jakarta: TransMedia Pustaka. Treder, M. (2013). UX Design for Startups. Gdańsk: UXPin. viction:workshop ltd. (2011). Vectorism: Vector Graphics Today. Hong Kong: viction:workshop ltd.

RIWAYAT PENULIS Randi Winarbisono lahir di Jakarta pada 11 Juni 1992. Penulis menamatkan pendidikan S1 di Universitas Bina Nusantara dalam bidang Desain Komunikasi Visual peminatan New Media pada tahun 2014.