Tipography Poster X-banner Stiker Mouse Pad Shopping Bag

90

BAB V IMPLEMENTASI DESAIN

5.1. Tipography

Jenis font yang di pakai adalah kriteria font yang simple atau font yang mudah di baca karena keyword yang di gunakan adalah “PANDUAN MUDAH KESEMPURNAAN IBADAH”. Font yang terpilih dalam perancangan kali ini adalah font “ Jenna sue, Accidental_presiden yang akan di padukan dengan font Alte Haas Grotesk” 12. Gambar 5-1 Font Jenna sue Gambar 5-2 Font Accidental_presiden Gambar 5-3 Font Alte Haas Grotesk licence

5.2. Button

Button adalah suatu tombol yang jika ditekan atau dilepaskan akan melepaskan event tertentu. Button dalam Multimedia Interaktif CD pembelajaran Manasik Haji sebagai berikut Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 91

5.2.1. Button Menu Utama

Button menu utama ini ketika disentuh maka akan berputar seperti roda searah jarum jam dan ketika di klik akan masuk kemenu yang di tuju. Adapula yang ketika di sentu akan berubah warna dari warna kuning menjadi putih. Gambar 5-4 Animasi perubahan pada Button menu utama sumber gambar pribadi

5.2.2. Button Exit

Button exit terdapat pada menu utama. Button ini akan berubah warna dari kuning menjadi hijau ketika di sentuh dan akan menutup aplikasi ketika di klik. Gambar 5-5 Animasi perubahan pada button exit sumber gambar pribadi Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 92

5.2.3. Button Home

Button home berada di sisi kanan bawah dan akan berubah warna ketika di sentuh dari kuning menjadi hijau dan akan masuk ke menu utama ketika di klik. Gambar 5-6 Animasi perubahan pada button Home sumber gambar pribadi

5.2.4. Button kembali

Button back berada di sisi kiri bawa sejajar dengan button home dan akan berubah warna ketika di sentuh dana akana masuk ke sub menu home atau menu utama. Gambar 5-7 Animasi perubahan pada button back sumber gambar pribadi

5.2.5. Button next dan preview

Button next dan preview berada di sisi kanan dan kiri bawah dan akan berubah warna ketika di sentuh dan akan masuk ke halaman berikutnya dan halaman sebelumnya ketika di klik. Gambar 5-8 Animasi perubahan pada button next dan preview sumber gambar pribadi Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 93

5.2.6. Button Tatacara

Button tatacara ini berada di ditiap-tiap contoh tatacara beribadah haji dan terdapat animasi dan ilustrasi cara berhaji yang benar. Button juga akan berubah warna ketika di sentuh dan akan masuk kemenu yang di tuju ketika di klik. Gambar 5-9 Animasi perubahan pada button contoh sumber gambar pribadi

5.2.7. Button contoh

Button contoh ini berada di ditiap-tiap contoh dan penulisanya menggunakan huruf arab, Dan akan berubah warna ketika di sentuh dan akan masuk kemenu yang di tuju atau mengeluarkan audio sesuai dengan contohnya ketika di klik. Gambar 5-10 Animasi perubahan pada button contoh sumber gambar pribadi Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 94

5.3. Desain CD Interaktif

5.3.1. Desain layout opening

Gambar 5-11 Layout opening sumber gambar pribadi

5.3.2. Desain layout menu utama

Gambar 5-12 Layout menu utama sumber gambar pribadi Di dalam menu utama ini terdapat beberapa button yang merupakan sub menu dari isi pembelajaran manasik haji ini yaitu dari menu persiapan, tatacara, sampai manajemen ibadah. Dan juga terdapat button keluar untuk keluar dari aplikasi CD interaktif ini. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 95

5.3.3. Desain layout menu Persiapan

Gambar 5-13 Layout menu Persiapan sumber gambar pribadi Dalam sub menu ini menjelaskan tentang pengertian haji, rukun, wajib, dan syarat berhaji sampai juga macam-macam haji. Terdapat juga audio cara pengucapan doa-doa yang terdapat didalamnya ketika di tekan button doa-doa yang tersedia. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 96 Gambar 5-14 isi Layout menu Persiapan sumber gambar pribadi

5.3.4. Desain layout menu Tatacara

Gambar 5-15 Layout menu Tatacara sumber gambar pribadi Dalam sub menu ini menjelaskan tentang tatacara berhaji mulai dari iham, tawaf, wukuf, sa’i, tahallul, dan melempar jumrah. Dalam menu tatacara ini terdapat animasi dan ilustrasi yang menunjukan cara berhaji yang benar. Adapula contoh bacaan ketika melaksanakan haji yang dapat mengeluarkan audio. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 97 Gambar 5-16 Isi Layout menu Tatacara sumber gambar pribadi

5.3.5. Desain layout contoh Manajemen ibadah

Gambar 5-17 Layout Layout menu Manajemen ibadah sumber gambar pribadi Dalam Manajemen ibadah ini berisikan mulai dari persiapan pria dan persiapan perempuan barang apa saja yang akan di bawa. Ada pula tata tertib, jadwal haji, dan hikma-hikma haji. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 98 Gambar 5-18 Isi Layout menu Manajemen ibadah sumber gambar pribadi

5.3.6. Desain cover

Gambar 5-19 Desain Cover sumber gambar pribadi Desain cover bagian depan terdapat gambar ka’bah yang di kelilingi oleh visual yang menarik.terdapat pula beberapa teks dari manasik haji dan solusi belajar era digital yang di buat besar. sedangkan cover bagian belakang terdapat penjelasan dari isi materi yang berada di CD interaktif ini. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 99

5.3.7. Desain label CD

Gambar 5-20 Desain label CD sumber gambar pribadi Desain label CD ini terdapat visual yang dibuat secara melingkar sebagai frame dan terdapat ka’bah yang di tempatkan di tengah-tengah CD dan terdapat teks panduan interaktif manasik haji yang di tepatkan di tengah bawah.

5.3.8. Desain packaging

Gambar 5-21 Desain Packaging sumber gambar pribadi Packaging ini dibuat supaya CD interaktif ini terlihat rapi dan desain dari packaging sama dengan covernya. Hanya saja pada packaging depan di buat lubang pada bagian ka’bah, agar kabah pada cover dapat terlihat lebih menarik. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 100

5.3.9. Brosur

Gambar 5-22 Desain Brosur sumber gambar pribadi Brosur ini dibuat supaya orang lebih mengetahui tentang isi CD interaktif ini dan tertarik untuk membeli CD interaktif ini

5.4. Poster

Gambar 5-23 Desain poster umber gambar pribadi Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 101 Poster berfungsi sebagai media promosi untuk menyampaikan pesan atau informasi. Yang ditempel didinding tokoh buku agar konsumen mengetahui adanya CD interaktif ini.

5.5. X-banner

Gambar 5-24 Desain X-banner sumber gambar pribadi X-banner ini berfungsi sebagai penanda dan pemberitahu lokasi penjualan CD interaktif ini. X-banner ini di tempatkan di pintu masuk toko-toko buku yang menjual Cd interaktif ini. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 102

5.6. Stiker

Gambar 5-25 Desain stiker sumber gambar pribadi Stiker ini berfungsi sebagai merchandise bila seseorang membeli CD interaktif ini.

5.7. Mouse Pad

Gambar 5-26 Desain Mouse Pad sumber gambar pribadi Mouse pad ini berfungsi sebagai merchandise bila seseorang membeli CD interaktif ini. Dan dapat bermanfaat bagi para pembeli. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 103

5.8. Shopping Bag

Gambar 5-27 Desain Shooping Bag sumber gambar pribadi Shooping Bag ini berfungsi sebagai merchandise bila seseorang membeli CD interaktif ini. Shooping bag juga bermanfaat sebagai tas mukenah karna modelnya sangat simple dan dapat menyimpan benda-benda lainnya.

5.9. Gantungan Kunci