4.1. TATARAN LINGKUNGAN / KOMUNITAS
Website BicaraSantun di harapkan mampu menjadi salah satu sumber informasi tentang hate speech dan hoax yang sedang terus ramai dibicarakan, dengan informasi tersebut diharapkan masayarakat lebih hati
ada ancaman tindakan hukum didalamnya, tentu saja ini bukan hal yang main apalagi isu ini sudah manjadi global dan sangat meresahkan.
4.1.1. TATARAN SISTEM Website
smartphone, computer, dan tablet mampu menyediakan
di akses melalui berbagai macam
Google Chrome, Mozilla Firefox, Safari. Internet Exsplorer, Baidu, browser yang disediakan oleh masing
Hal pertama kali yang dilakukan untuk mengakses saja memasukan nama domain
Tampilan pertama dari
animasi berisi teks yang bertujuan menjadi daya tarik dari menu di atas jelas terlihat demi memudahkan
BAB IV
KONSEP PERANCANGAN
INGKUNGAN / KOMUNITAS
BicaraSantun di harapkan mampu menjadi salah satu sumber informasi tentang hate speech dan hoax yang sedang terus ramai dibicarakan, dengan informasi tersebut diharapkan masayarakat lebih hati-hati berperilaku karena memang
da ancaman tindakan hukum didalamnya, tentu saja ini bukan hal yang main apalagi isu ini sudah manjadi global dan sangat meresahkan.
TATARAN SISTEM
merupakan media digital yang dapat diakses melalui smartphone, computer, dan tablet ataupun beberapa perangkat lain yang mampu menyediakan browser yang terhubung ke internet. website
di akses melalui berbagai macam browser yang ada diantaranya adalah Google Chrome, Mozilla Firefox, Safari. Internet Exsplorer, Baidu,
yang disediakan oleh masing-masing perangkat Handphone.
Hal pertama kali yang dilakukan untuk mengakses website saja memasukan nama domain website di browser www.bicarasantun.com
Gambar 10 Tampilan Home Website
mpilan pertama dari website ini saat di akses adalah sebuah animasi berisi teks yang bertujuan menjadi daya tarik dari website menu di atas jelas terlihat demi memudahkan website saat diakses.
22 BicaraSantun di harapkan mampu menjadi salah satu sumber informasi tentang hate speech dan hoax yang sedang terus ramai dibicarakan, dengan hati berperilaku karena memang da ancaman tindakan hukum didalamnya, tentu saja ini bukan hal yang main-main
merupakan media digital yang dapat diakses melalui ataupun beberapa perangkat lain yang website ini dapat yang ada diantaranya adalah Google Chrome, Mozilla Firefox, Safari. Internet Exsplorer, Baidu, atau
Handphone.
website ini tentu di browser www.bicarasantun.com
ini saat di akses adalah sebuah slide website. selain itu saat diakses.
Selanjutnya di bawah
dua kampanye dari bicara santun, yakni
saat di klik ini akan mengantarkan pengunjung kampanye tersebut.
Tampilan selanjutnya adalah sebuah video yang berisi informasi tentang kampanye ini yang di
kampanye ini dapat dengan mudah diakses masyarakat pengguna internet.
selanjutnya dibawahnya ada sebuah banner yang berisi ajakan unt
seberapa bijak dan santun di internet, saat di klik ini menuju kuis yang bisa di akses oleh pengunjung dan di mainkan ini bertujuan untuk adanya interaksi dan kedekatan kampanye ini dengan pengunjung.
Lalu di bawahnya ada sebuah opini yang di
yang ditampilkan secara bergantian dengan bergeser, didalamnya semua berpendapat tentang kampanye ini. dibawahnya ada tombol klik bagi siapapun yang mau berpendapat bisa klik lalu diarahkan ke halaman yang di dalamnya berupa form yang bisa diisi lalu klik kirim.
Website ini berisi beberapa menu yang mengarah kehalaman yang terkait, menu tersebut adalah sebagai berikut ;
a. Home
Selanjutnya di bawah slide ada dua buat tombol klik dengan tulisan dua kampanye dari bicara santun, yakni stop hate speech dan stop shared hoax saat di klik ini akan mengantarkan pengunjung website menuju halaman kampanye tersebut.
Gambar 11 Tampilan Slide Video
n selanjutnya adalah sebuah video yang berisi informasi tentang kampanye ini yang di embed dari Youtube dengan tujuan agar kampanye ini dapat dengan mudah diakses masyarakat pengguna internet.
selanjutnya dibawahnya ada sebuah banner yang berisi ajakan unt
seberapa bijak dan santun di internet, saat di klik ini menuju kuis yang bisa di akses oleh pengunjung dan di mainkan ini bertujuan untuk adanya interaksi dan kedekatan kampanye ini dengan pengunjung.
Lalu di bawahnya ada sebuah opini yang di tulis oleh orang
yang ditampilkan secara bergantian dengan bergeser, didalamnya semua berpendapat tentang kampanye ini. dibawahnya ada tombol klik bagi siapapun yang mau berpendapat bisa klik lalu diarahkan ke halaman yang di dalamnya
g bisa diisi lalu klik kirim.
ini berisi beberapa menu yang mengarah kehalaman yang terkait, menu tersebut adalah sebagai berikut ;
bol klik dengan tulisan stop shared hoax menuju halaman
n selanjutnya adalah sebuah video yang berisi informasi dengan tujuan agar kampanye ini dapat dengan mudah diakses masyarakat pengguna internet.
selanjutnya dibawahnya ada sebuah banner yang berisi ajakan untuk menilai seberapa bijak dan santun di internet, saat di klik ini menuju kuis yang bisa di akses oleh pengunjung dan di mainkan ini bertujuan untuk adanya interaksi dan
tulis oleh orang-orang yang ditampilkan secara bergantian dengan bergeser, didalamnya semua berpendapat tentang kampanye ini. dibawahnya ada tombol klik bagi siapapun yang mau berpendapat bisa klik lalu diarahkan ke halaman yang di dalamnya
ini berisi beberapa menu yang mengarah kehalaman - halaman
Menu ini sebagai sebuah tanda dari semua elemen yang ada di menu b. Stop Hate Speech
Menu ini saat di klik menuju ke halaman penjelas tentang
ditampilkan dalam info grafis, dengan desain yang sederhana d dengan konsep
Dalam halaman ini dijelaskan tentang pengertian serta landasan hukumnya karena pelaku
selain itu didalam halaman ini juga di jelaskan bagaimana trik d dalam bersikap di media sosial jika menemui pelaku
trik tersebut bisa di aplikasikan untuk pengguna twitter, facebook atau instagram.
c. Stop Shared Hoax
Halaman ini berisi sama halnya dengan berisi informasi tentang apa itu
menemuinya di media sosial.
Menu ini sebagai sebuah tanda dari landing page website
semua elemen yang ada di menu - menu berikutnya berada di halaman ini.
Stop Hate Speech
Menu ini saat di klik menuju ke halaman Stop Hate Speech
penjelas tentang hate speech dan landasan hukumnya, halaman tersebut ditampilkan dalam info grafis, dengan desain yang sederhana d
dengan konsep website secara keseluruhan.
Dalam halaman ini dijelaskan tentang pengertian
serta landasan hukumnya karena pelaku hate speech bisa dikenakan pidana.
selain itu didalam halaman ini juga di jelaskan bagaimana trik d dalam bersikap di media sosial jika menemui pelaku Hate speech,
trik tersebut bisa di aplikasikan untuk pengguna twitter, facebook atau
Stop Shared Hoax
Halaman ini berisi sama halnya dengan Hate speech
isi informasi tentang apa itu Hoax dan bagaimana menyikapinya jika menemuinya di media sosial.
Gambar 12 Menu Stop Hate Speech
24 website yang berisi menu berikutnya berada di halaman ini.
Stop Hate Speech yang berisi dan landasan hukumnya, halaman tersebut ditampilkan dalam info grafis, dengan desain yang sederhana di sesuaikan
Dalam halaman ini dijelaskan tentang pengertian Hate speech bisa dikenakan pidana.
selain itu didalam halaman ini juga di jelaskan bagaimana trik dan tips Hate speech, tips dan trik tersebut bisa di aplikasikan untuk pengguna twitter, facebook atau
Hate speech di dalamnya dan bagaimana menyikapinya jika
Halaman ini juga menggunakan info grafis untuk menyampaikan isi dari penjelasan kampanye sosialnya, dengan pertimbangan agar lebih menarik untuk pengunjung yang mengaksesnya.
d. Video
Halaman ini berisi Video tentang kampanye dari website bicarasantun, video ini embed dari youtube dengan tujuan kemudahan share video tersebut.
Gambar 13 Tampilan Menu Video
c. Kuis
26 Gambar 14 Tampilan Menu Kuis
Halaman kuis berisi 5 pertanyaan yang menjadi indikasi pengunjung bijak dan tidaknya dalam berinternet, pengunjung bisa menjawab dan di jawaban terakhir akan muncul jawaban berupa 3 indikator, pertama adalah bijak sekali.
Gambar 15 Contoh Tampilan Score Bijak
Gambar 16 Contoh Tampilan Score Cukup Bijak
Gambar 17 Contoh Tampilan Score Negatif
Yang ketiga adalah ucapan Maaf dan mengingatkan jika bijak itu baik, karena website ini berisi kampanye positif maka meskipun dalam hasil kuisnya menunjukan kurang bijak dalam berinternet tidak ada kalimat yang negatif dan menyalahkan dalam jawaban kuis ini.
Setiap jawaban bisa langsung dibagikan ke media sosial facebook dan twitter. Di bawah kuis tersebut pengunjung juga dapat berinteraksi dengan memberikan penilaian terhadap kuis tersebut.
Gambar 18 Tampilan Reaction
penilaianya bisa menggunakan emoticon reaction dengan pemilihan enam reaksi atau pengunjung juga bisa reaksi dengan memilih gif image.
dibawahnya terdapat pilihan membagikan ke media sosial dengan pilihan yang lebih beragam dan lengkap.
d. Opini
Gambar 19 Tampilan Menu Opini
Halaman opini berisi form yang bisa dikirim oleh pengunjung tentang komentarnya terkait kampanye tersebut. Disebelahnya terdapat beberapa pendapat orang-orang yang telah di publish.
28 4.2. TATARAN PRODUK
Produk ini adalah sebuah website kampanye sosial yang bertujuan menyebarkan informasi tentang pentingnya berperilaku bijak dan santun dalam berinternet.
Website ini menggunakan sistem responsif yang artinya dapat menyesuaikan ukuran dimanapan saat diakses, saat menggunakan komputer maka akan lebar sesuai ukuran begitu juga saat menggunakan smartphone atau Tablet. tujuan dari responsive ini adalah agar mengoptimalkan kemudahan dalam memahami informasi yang di berikan kepada pengunjung website, alasan lain mengapa begitu memikirkan tampilan mobile adalah karena pengguna mobile yang begitu tinggi saat ini, yang artinya bisa mengakses website ini dimanapun dan kapanpun.
4.3 TATARAN ELEMEN
Gambar 20 Buttom Menu
Pada menu diatas website menggunakan jenis font Tahoma dengan ukuran 11 untuk tampilan standar website dalam tampilan komputer, untuk mobile dan tablet menyesuaikan. warna yang digunakan adalah warna gelap dengan kode warna
#3b3f4a saat hover atau ketika arah mouse mengarah ke menu maka akan muncul garis gradasi di bawahnya, dengan kode warna #0280f5 dan #64aef4. setelah menu ada icon media sosial dengan warna biru sesuai dengan warna logo.
Gambar 21 Slide Animation - slide 1
Slide 1, slide animasi ini berisi teks dengan font Kozuka Gothic Pro menggunakan background biru yang sepadan dengan logo, lalu didalam background terdapat doodle berbagai macam ikon yang semuanya terkait dengan kampanye sosial website saat ini. selain teks disana juga terdapat icon bicara yang ada di dalam slide dengan animasi yang menghiasinya membuat slide terlihat lebih bagus dan nyaman dilihatnya.
Gambar 22 Slide Animation - Slide 2
Slide 2, slide ini menggunakan warna oranye sebagai dasarnya, dengan ditambah doodle sebagai background dengan opacity yang kecil. font yang di pakai adalah Kozuka Gothic Pro untuk semuanya hanya di kombinasikan ketebalan hurufnya. disebelah kanan animasi slide ini ada ikon berbicara berisi bermacam ikon media sosial.
Gambar 23 tombol Pintas menu
Ini adalah sebuah tombol yang saat diklik akan menuju halaman penjelasan dua kampanye tersebut, font yang dipakai masih sama yakni Kozuka Gothic Pro hanya saja ini menggunakan yang lite dan superlite, selanjutnya ada ikon hati yang di garis miring yang berarti stop hate speech dan yang satu adalah ikon shared yang di garis miring yang berarti stop shared hoax untuk warna di gunakan warna sejenis dengan warna logo yang menjadi dasar website ini.
Gambar 24 Video
30 Dibawahnya akan menemukan sebuah penempatan untuk video, penempatan di posisi yang mudah di akses oleh pengunjung, karena didalam video berisi informasi yang menjelaskan tentang kampanye daro website bicarasantun, warna background dipilih dengan tujuan untuk mendapatkan point of view dari pengunjung, untuk font menggunakan font yang sama dengan yang lain.
Gambar 25 Pemintas Kuis
Berikutnya adalah sebuah banner yang mengarahkan pengunjung menuju kuis, saat diklik maka pengunjung akan masuk ke halaman kuis, background menggunakanakan warna abu-abu dengan kode warna #e0e0e0 ditambahkan dengan doodle sebagai bagian dari background lalu ada tanda tanya dan tanda menuju klik, untuk font tetap konsisten menggunakan Kozuka Gothic Pro.
Gambar 26 Fiture Opini
Selanjutnya adalah fitur untuk opini umum dari pengunjung, semua pendapat di buat dengan tampilan yang sama, yakni didalam sebuah kotak yang berisi ucapan mereka dengan foto disampingnya, kotak pendapat ini bisa bergeser dengan sendirinya dalam hitungan 3 detik. font yang dipakai masih sama dengan kombinasi ketebalan yang berbeda. begitu juga warna yang dipakai.
Gambar 27 Halaman Stop Speech
Saat masuk ke halaman stop hate speech judul halaman di buat dengan paralax, dengan efek background yang tetap berhenti ketika di scroll kebawah.
background konsisten menggunakan gambar doodle yang sama.
Gambar 28 Menu Hate Speech
Isi halaman berisi infografis dengan kombinasi warna yang senada dengan logo, lebih dominan biru, font yang di pakai hanya satu yaitu Kozuka Gothic pro dengan kombinasi ketebalan, jarak huruf, ukuran dan warna. untuk gambar lain adalah ikon -ikon yang menunjang isi dari kampanye tersebut.
Gambar 29 Tampilan Tips Twitter
Selanjutnya adalah berisi tips dan trik ketika menggunakan media sosial dengan warna yang disesuaikan dengan masing-masing media sosial tersebut, font yang dipakai tetap sama.
Gambar 30 Tampilan Video
Halaman video menggunakan paralax pada keseluruhan dengan efek gambar background bergerak dari arah kiri kekanan. penempatan video besar ditengah tanpa menambahkan keterangan-keterangan lain dengan tujuan agar pengunjung fokus dengan video tersebut.
32 Gambar 31 Tampilan Pertama Kuis
Ini adalah tampilan pertama ketika masuk ke halaman kuis, ada ikon tanda tanya dengan ikon media sosial kecil yang begitu banyak, warna yang di gunakan tetap sama dominan biru, lalu ada teks pertanyaan dengan font yang konsisten sama, selanjutnya ada ikon tanda panah yang menunjukan permulaan pertanyaan kuis dibawahnya dengan warna oranye.
Gambar 32 Pertanyaan Pertama Kuis
Pertanyaan pertama dengan warna oranye sebagai warna utama yang dipakai dengan background doodle lalu ada penomoran di sudut atas, font menggunakan font yang sama dengan yang lain, memilih warna putih dengan tujuan kejelasan saat membaca kuis tersebut. selain itu ada ilutrasi tangan memegang handphone yang diilutrasikan sedang melihat timeline media sosial.
Untuk jawaban desain difokuskan pada abjad untuk A background menggunakan warna oranye dengan ikon media sosial dengan opacity rendah, warna abjad dengan warna merah dengan kode warna #f3471f warna lain yang dipakai adalah warna putih, lalu untuk abjad B background menggunakan warna biru dengan abjad warna kuning dengan kode warna # faf803, untuk abjad C background
menggunakan warna ungu dengan kode warna # 6d46f7 dan untuk abjadnya menggunakan warna biru muda dengan kode warna # 67faea. ikon abjad ini dipakai disemua pertanyaan kuis.
Gambar 33 Pertanyaan Kedua Kuis
Pertanyaan kedua dengan unsur warna biru yang mendominasi dengan ilustrasi foto yang di buat dengan titik-titik, background dibuat konsisten dengan ornamen yang sama, lalu ada penomeran, untuk font menggunakan font yang sama dengan kombinasi ketebalan dan ukuran huruf.
Gambar 34 Pertanyaan Ketiga Kuis
Pertanyaan ketiga didominasi warna oranye, dengan ilustrasi isi konten di media sosial untuk menunjang pertanyaan, font yang dipakai tetap konsisten sama dengan yang lain dengan pemilihan warna putih agar kontras dan kemudahan dalam membaca.
34 Gambar 35 Pertanyaan Keempat Kuis
Selanjutnya adalah kuis nomor 4 yang diisi dominan warna biru, font dan background yang dipakai sama dengan kuis lainya.
Gambar 36 Pertanyaan kelima kuis
Berikutnya adalah kuis nomor lima yang merupakan pertanyaan terakhir, dominan warna oranye dengan ornamen background yang sama, untuk gambar mengilustrasikan pertanyaan yaitu beberapa ikon layanan pesan dan email.
Gambar 37 Tampilan Opini
Halaman opini berisi form yang perlu diisi oleh pengunjung jika ingin memberikan komentarnya terkait denga kampanye ini, form ini menggunakan garis yang tipis dan dengan tombol kirim dibawahnya dengan warna biru sebagai warna dasar website berbagi dengan warna oranye.
