KONSEP DESIGN WEB by Tasya Bellinda 1. LOADING
Sebelum website terbuka sepenuhnya visitor harus menunggu loading yang cukup lama. Untuk menghindari visitor tidak jadi tertarik membuka website atau bosan karena hal tsb, dibuat tampilan loading yang menarik perhatian. Berikut inspirasi dari beberapa website:
CONTOH 1
Warna & design catchy
Ada symbol yg
menunjukkan loading (lingkaran berputar-putar di badan robot)
Ada karakter/icon yang bergerak mengikuti kursor sehingga dapat “dimainkan” (robot menoleh ke kiri-kanan sesuai arah kursor)
CONTOH 2 Design loading simple namun tulisan tetap menarik perhatian! *titik-titik bergerak-gerak menunjukkan website sedang loading CONTOH 3
Kombinasi dari CONTOH 1 & CONTOH 2, dibuat konsep loading seperti ini:
Ada icon/karakter (CONTOH 1) + tulisan menarik (CONTOH 2)
Icon/Karakter dapat berupa wayang, atau orang berpakaian tradisional salah satu adat Indonesia. (kalo orang, orang di laman loading = orang di laman home website, jadi hanya ada 1 icon/character)
Tulisan bersifat mengajak untuk menunggu loading. Tentunya dengan bahasa Indonesia yang tidak kaku, catchy dan harus menarik
Seperti CONTOH 1, icon/karakter apabila memungkinkan dapat bergerak-gerak sesuai arah kursor (agar dapat “dimainkan” visitor) serta dapat menari atau loncat-loncat (misalnya)
Seperti CONTOH 2, tulisan/kalimat harus menarik + apabila memungkinkan titik-titik pada kalimat bergerak menunjukkan website sedang loading
Warna & design catchy, karakter/Icon menarik berupa kartun colorful
2. TAMPILAN UTAMA (HOME)
Pada tampilan utama, yang terpenting adalah bagaimana visitor
bisa menangkap isi utama website, penyampaiannya tidak membosankan. Maka kita buat satu karakter utama yang “menyambut” visitor, konsep:
Berikut penjelasan contoh diatas:
Ada 1 karakter yang “menyambut” visitor seperti contoh di atas
Tulisan atau SLOGAN di bagian paling atas website berbunyi “DAIRY GIVES YOU GO” bisa diaplikasikan, diganti dengan nama/judul website ini atau tulisan “LAYAR GARUDARANA” berikut simbol.
Karakter pada contoh, dapat diubah menjadi karakter yang berpenampilan tradisional khas Indonesia dengan design menarik. Misal berpakaian adat seperti salah 1 karakter di bawah ini:
Ada kalimat penyambut. Misal “YO!” pada contoh di atas dapat diganti sapaan dalam bahasa Indonesia, atau bahasa adat sesuai dengan pakaian adat yg dikenakan karakter. Contoh: karakter cewe menggunakan pakaian adat Bali, sambutan berbunyi “Om Swastiastu”.
Bubble berisi percakapan/kalimat di atas karakter, apabila di-klik:
akan muncul isi bubble baru berisi: perkenalan singkat karakter, lalu apabila bubble di-klik lagi isi bubble berubah menjadi penjelasan singkat isi website. Bahasa dibuat menarik dan tidak kaku, bersifat mengajak.
(intinya isi kalimat dalam bubble dapat berubah-ubah sesuai keperluan)
Karakter tersebut diberi nama agar mudah diingat, jadi icon website. Misal nama karakter orang Jawa yaitu “Bowo”, orang Bali “Luhde”, dsb. Dan nama tsb tertera diperkenalan awal. (contoh perkenalan: Om Swastiastu! Kenalin, nama saya Luhde.)
Contoh konsep di atas bertema olahraga jadi background lapangan bola. Maka background untuk “tempat berdiri” karakter website ini, dapat diubah menjadi rumah adat sesuai dengan adat daerah asal karakter. (contoh karakter dari Padang, backgroundnya Rumah Gadang)
Perlu diperhatikan, untuk menu utama website hanya ada 1 karakter. Jadi dipilih 1 karakter dan 1 daerah asal/adat dengan pakaian adat, beserta rumah adat untuk background. Karakter tsb yang akan menjadi icon. Layaknya “si Unyil” dalam kartun unyil, hanya ada 1 Main Character.
Pada contoh website di gambar diatas, background dapat bergerak-gerak. Apabila mungkin, selain design menarik juga dapat bergerak. Misal ada awan/burung/pintu rumah adat bergerak-gerak (jadi ada sebagian elemen background yang bisa gerak).
3. TAMPILAN RUBRIK/MENU KESELURUHAN
Menu-menu/rubrik-rubrik, dibuat menyamping (ada di sisi sebelah kanan website). Gambaran contoh nya seperti ini:
- Tiap menu ada symbol nya (menu/rubrik “JALAN” symbol nya gambar sepatu, menu/rubrik “ISI PERUT” symbol nya makanan, “MAIN-MAIN” symbolnya stick ps, “JENDELA” symbolnya buku/jendela, dsb) -Kalo kursor diarahkan ke symbol, symbol berubah jadi 1 atau 2 kata
judul menu/rubrik
Apabila salah satu rubrik/menu di-klik, seluruh background website berubah, icon/karakter aksesorisnya berubah juga menyesuaikan rubrik/menu:
Contoh website di atas: apabila dipilih rubrik “BEACH”, background berganti jadi pantai, lalu karakter memegang bola pantai dan berganti pakaian pantai, dsb.
What I’m trying to say, konsep contoh website tersebut dapat ditiru. Konsep design ini bisa disesuaikan dengan konsep rubrik/menu yang sudah dibuat Sarden & Dita. Penjelasannya sebagai berikut:
CONTOH: saya ambil satu rubrik yg dibuat Sarden, yakni rubrik “JALAN”
Misal rubrik/menu “JALAN”, Maka symbol rubrik yang akan berada di sisi kanan website, bergambar sepatu yang mewakilkan rubrik “JALAN”
Apabila kursor diarahkan ke gambar sepatu tsb, maka gambar sepatu akan berubah jadi tulisan “JALAN”, lalu sub-menu/sub-rubrik dibawah tulisan “JALAN” akan muncul. (lihat contoh gambar sebelum2nya)
Background website berubah menjadi suasana jalan raya berikut mobil, lampu merah, penunjuk jalan, dll. apabila dipilih rubrik “JALAN”
Karakter tetap memakai pakaian khas adat namun membawa aksesoris sesuai rubrik yang dipilih. (contoh kalo rubrik “JALAN” di-klik, mungkin karakter tiba-tiba menyelempangkan tas dan kamera).
Penjelasan singkat tentang rubrik terletak juga di dalam bubble percakapan di atas karakter.
4. TAMPILAN SUB-MENU/SUB-RUBRIK KESELURUHAN Apa itu sub-menu/sub-rubrik?
Pilihan-pilihan yang dapat di-klik, berada dibawah tulisan menu/rubrik. Contoh: Dibawah tulisan menu/rubrik “JALAN”, misal ada 3 sub-menu/sub-rubrik; “Nongkrong”, “Wisata Alam”, “Wisata Budaya” yang dapat di-klik.
Kalo menu/rubrik “JALAN” di-klik, muncul penjelasan singkat tentang rubrik “JALAN” di dalam bubble percakapan karakter. Misal penjelasan singkat tentang rubrik “JALAN”: Ayo jalan-jalan bareng aku! Banyak lho tempat-tempat yang pernah kukunjungi. (bahasa bersifat mengajak, menjelaskan rubrik secara singkat jelas, tidak kaku)
Tapi kalo sub-menu/sub-rubrik “JALAN” di-klik, maka akan muncul box/kotak penjelasan baru (penjelasan bukan bubble di atas karakter).
Pada contoh website yang membahas olahraga, saya coba klik menu salah satu menu. Berikut ini tampilan contoh penjelasan sub-menu yang dipilih:
Di atas ini penjelasan sub-menu “Building Strong Bones” pd menu “STRENGTH”
Di atas ini penjelasan sub-menu “Calcium Calculator” pd menu “STRENGTH”, dsb.
_____________________________________________________________________ _______________________
Agar lebih tergambar jelas maksud usulan konsep ini, berikut link contoh website yang saya ambil: http://www.dairygivesyougo.co.za/
Coba perhatikan transisi apabila kita klik dari menu-ke-menu nya! Saya suka ide dimana satu karakter website tersebut seolah berjalan ke tempat/background yang berbeda. Sehingga dapat menghibur visitor. Apabila memungkinkan, coba diaplikasikan di website ini ya bentuk transisi nya.
5. TAMPILAN TIAP MENU/RUBRIK Seperti penjelasan sebelumnya,
Apabila salah satu menu/rubrik di-klik maka karakter akan menunjukkan bubble berisi penjelasan singkat rubrik.
Apabila sub-menu/sub-rubrik di-klik maka terdapat box/kotak penjelasan atau bahkan bentuk penjelasan selain kotak misal bentuk Jurnal, Kalender, Meja Belajar, dsb. yang isinya penjelasan menyesuaikan sub-menu/sub-rubrik yang dipilih. Berikut saya ambil contoh, misal sub-menu/sub-rubrik “ISI PERUT”:
Pada awal sub-menu/sub-rubrik di-klik, muncul kalimat menarik (pembuka). Contoh seperti di atas ini, namun dibuat dalam bahasa Indonesia. “Pembuka” penjelasan isi rubrik bisa bentuk lain, misal dalam bentuk komik.
Apabila kursor di-scroll kebawah, muncul penjelasan tempat & gambar. Konsep design nya clean, namun font tetap menarik dan ada hiasan simple yang menyesuaikan isi rubrik.
-> Contoh isi Sub-Menu “ ISI PERUT”
Apabila kursor di-scroll kebawah lagi, muncul penjelasan peta letak tempat yang dimaksud. Bisa juga di scroll kebawah lagi, berisi daftar harga/menu, review pengunjung, dst.
Design Clean, namun warna dan isi kalimat tetap menarik, contoh seperti di atas.
Di atas merupakan salah satu gambaran isi box/kotak penjelasan salah satu sub-menu/sub-rubrik: “ISI PERUT” Pada sub-menu/sub-rubrik lainnya, konsep sama yang dapat
diaplikasikan:
- Penjelasan dalam box/kotak penjelasan, jurnal/post it/kalender, komik, dll (disesuaikan dengan isi rubrik secara kreatif)
- Design clean namun tetap catchy dan kalimat penjelasan unik/menarik
- 1 sub-menu/sub-rubrik terdiri dari beberapa box/kotak penjelasan, yang dapat dilihat dengan mengarahkan kursor ke bawah (scroll down)
- Di dalam box/kotak penjelasan dilengkapi gambar/ilustrasi dan button2 lain (disesuaikan dengan kebutuhan isi rubrik. Misal di bagian penjelasan peta rubrik “ISI PERUT” ada button sepeda, mobil, jalan kaki yakni dapat dipilih untuk pilihan rute peta sesuai button kendaraan yang dipilih)
- Sebelum masuk ke penjelasan sub-menu/sub-rubrik, seperti contoh gambar-gambar di atas, terdapat kalimat
catchy/menarik mengenai isi sub-rubrik pada awal box/kotak penjelasan.
__________________________________________________________________ _______________________
Gambaran maksud dari konsep saya di atas dapat dilihat melalui link ini:
http://fmkcatering.com/
Coba perhatikan transisi dari penjelasan satu-ke-penjelasan lain, dapat diaplikasikan dengan cara scroll ke bawah!
*Jadi penjelasan sub-menu/sub-rubrik dapat berupa box/kotak2 penjelasan yang bisa di scroll ke bawah seperti contoh rubrik “ISI PERUT” di atas, atau bisa dalam bentuk jurnal, kalender, games langsung, dll (menyesuaikan ide rubriknya).
KONSEP RUBRIK/MENU WEB by Sarah Radian & Dita Ralena RUBRIK: ISI PERUT atau WISATA KULINER (pilih salah satu nama nya)
Buat tempat-tempat makan yang enak, unik, dan terjangkau—bisa
sidewalk dan fine dining, food bazaar, asongan, dan lain-lain. Ditampilkan dalam bentuk BOX/KOTAK PENJELASAN, yang awalnya ditampilkan komik dengan tokoh utama 2 karakter, yang 1 anak gendut, yang 1 lagi anak kurus tapi suka makan di dalam kotak penjelasan tersebut. Lalu penjelasan lanjutan bisa scroll down terus setelah komik pembuka (seperti yang telah dijelaskan sebelumnya)
SUB-RUBRIK: Restoran, Kaki Lima, Asongan, Acara Makan
RUBRIK: SANTAI INDONESIA atau JALAN (pilih salah satu nama nya)
Tempat-tempat yang bisa jadi tujuan wisata atau hangouts (nongkrong), buat wisatawan asing atau sendiri agar bisa lebih mengenal Indonesia. Dilengkapi review, peta, daftar harga kalau mau beli souvenir atau rekreasi di tempat. Ditampilkan dalam bentuk JURNAL.
SUB-RUBRIK: Nongkrong, Wisata Alam, Wisata Budaya
RUBRIK: JENDELA
Informasi tenang event yang sedang berlangsung atau akan datang, diselingi dengan informasi entertainment yang nggak mengacu ke gosip. Ditampilkan dalam bentuk seperti MEJA BELAJAR, kemudian informasinya tertulis di atas post-it untuk informasi terkini yang diupdate tiap edisi bulan nya , dan event dalam bentuk KALENDER. SUB-RUBRIK: Kalender Acara, Desas Desus (info terkini tidak mengacu gossip)
Agar lebih mengenal permainan Indonesia, atau permainan tradisional. Tiap bulan, setiap ganti tema, game-nya berganti. Tapi ada beberapa game tetap seperti ular tangga, congklak, dan TTS (yang ganti hanya pertanyaan TTS tiap bulannya saja, tergantung tema). Ditampilkan langsung dalam bentuk GAMES SUB-RUBRIK: TTS, Ular Tangga, Congklak, Permainan Baru
