BAB IV KONSEP PERANCANGAN

Transkripsi

1 BAB IV KONSEP PERANCANGAN 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-hati berperilaku karena memang ada ancaman tindakan hukum didalamnya, tentu saja ini bukan hal yang main-main apalagi isu ini sudah manjadi global dan sangat meresahkan TATARAN SISTEM Website merupakan media digital yang dapat diakses melalui smartphone, computer, dan tablet ataupun beberapa perangkat lain yang mampu menyediakan browser yang terhubung ke internet. website ini dapat di akses melalui berbagai macam browser yang ada diantaranya adalah Google Chrome, Mozilla Firefox, Safari. Internet Exsplorer, Baidu, atau browser yang disediakan oleh masing-masing perangkat Handphone. Hal pertama kali yang dilakukan untuk mengakses website ini tentu saja memasukan nama domain website di browser Gambar 10 Tampilan Home Website Tampilan pertama dari website ini saat di akses adalah sebuah slide animasi berisi teks yang bertujuan menjadi daya tarik dari website. selain itu menu di atas jelas terlihat demi memudahkan website saat diakses. 22

2 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 Tampilan selanjutnya adalah sebuah video yang berisi informasi tentang kampanye ini yang di embed dari Youtube dengann 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 adanyaa interaksi dan kedekatan kampanye ini dengan pengunjung. Lalu di bawahnya ada sebuah opini yang di 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 berupa form yang bisa diisi lalu klik kirim. Website ini berisi beberapa menu yang mengarah kehalaman - halaman yang terkait, menu tersebut adalah sebagai berikut ; a. Home 23

3 Menu ini sebagai sebuah tanda dari landing page website yang berisi semua elemen yang ada di menu - menu berikutnya berada di halaman ini. b. Stop Hate Speech Menu ini saat di klik menuju ke halaman Stop Hate Speech yang berisi penjelas tentang hate speech dan landasan hukumnya, halaman tersebut ditampilkan dalam info grafis, dengan desain yang sederhana di sesuaikan dengan konsep website secara keseluruhan. Gambar 12 Menu Stop Hate Speech Dalam halaman ini dijelaskan tentang pengertiann Hate speech serta landasann hukumnya karena pelaku hate speech bisa dikenakan pidana. selain itu didalam halaman ini juga di jelaskan bagaimanaa trik dan tips dalam bersikap di media sosial jika menemui pelaku Hate speech, tips dan trik tersebut bisa di aplikasikan untuk pengguna twitter, facebook atau instagram. c. Stop Shared Hoax Halaman ini berisi sama halnya dengan Hate speech di dalamnya berisi informasi tentang apa itu Hoax dan bagaimana menyikapinya jika menemuinya di media sosial. 24

4 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. c. Kuis Gambar 13 Tampilan Menu Video 25

5 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. 26

6 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. 27

7 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 28

8 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 29

9 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. 30

10 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. 31

11 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 32

12 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. 33

13 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 . 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. 34